JS Legacy (V2 JS SDK)
The LoginRadius V2 JS SDK (LoginRadiusV2.js) renders pre-built authentication interfaces — login, registration, social login, MFA, password reset, and profile management — into any DOM container. It exposes a hooks system for customizing validation and copy, a form library for building your own UIs against the same APIs, and context-based customization driven by device, location, or browser.
This section documents the V2 JS SDK. It remains supported for existing integrations, but all new projects should use the V3 JS SDK, which provides a streamlined API, promise-based methods, modern hooks, default styles, and built-in localization. See the Frontend SDK overview to choose the right tier.
Architecture
LoginRadiusV2.js (CDN-hosted singleton: pre-built UI + hooks + form library)
│
└── new LoginRadiusV2(commonOptions) → LRObject.init(action, options)
Load the library from the LoginRadius CDN, instantiate a single LoginRadiusV2 object with your commonOptions (API key, SOTT, verification URL), then call LRObject.init(action, { container }) to mount any flow into a DOM element.
<head>
<script src="https://auth.lrcontent.com/v2/js/LoginRadiusV2.js"></script>
</head>
<body>
<div id="loginradius-login"></div>
<script type="text/javascript">
var raasoption = {};
raasoption.apiKey = "your_loginradius_api_key"; // never hardcode secrets — API key is public, SOTT is not
raasoption.sott = "<sott>"; // server-generated Secure One-Time Token (registration)
raasoption.verificationUrl = window.location;
var LRObject = new LoginRadiusV2(raasoption);
LRObject.util.ready(function () {
LRObject.init("registration", {
container: "loginradius-login",
onSuccess: function (response) { console.log(response); },
onError: function (errors) { console.log(errors); },
});
});
</script>
</body>
The sott is a Secure One-Time Token required for registration flows. Generate it server-side via the SOTT documentation — do not commit it to client source or version control.
Available Interfaces
Pass one of these action strings to LRObject.init(action, options). Each renders a pre-built, configurable interface into the supplied container.
| Action | init() name | Description |
|---|---|---|
| Login | 'login' | Traditional, username, phone, or OTP login |
| Registration | 'registration' | Sign-up with configurable form schema |
| Social Login | 'socialLogin' | Social provider authentication |
| Forgot Password | 'forgotPassword' | Initiate password reset |
| Reset Password | 'resetPassword' | Complete password reset |
| Change Password | 'changePassword' | Update password for a logged-in user |
| Verify Email | 'verifyEmail' | Email verification |
| Profile Editor | 'profileEditor' | View and edit profile fields |
| Link / Unlink Account | 'linkAccount' / 'unLinkAccount' | Manage linked social accounts |
| MFA | 'createTwoFactorAuthentication' | Configure Multi-Factor Authentication |
| One Touch Login | 'onetouchLogin' | Passwordless, no-registration login |
| Passwordless Login | 'passwordlessLogin' | Magic link / OTP login |
| Smart Login | 'smartLogin' | Cross-device email-prompt login |
See Getting Started for the full action reference and Advanced JS Customizations for the remaining actions (delete user, update phone, change username, security questions, backup codes, and more).
Hooks System
The V2 SDK exposes JavaScript hooks to alter or augment interface behavior by intercepting events — form rendering, validation, copy, and process lifecycle. Register lifecycle hooks via LRObject.$hooks.register(name, fn) before calling init; invoke customization hooks via LRObject.$hooks.call(name, payload).
| Hook | Mechanism | Purpose |
|---|---|---|
beforeInit | register | Run logic before an action initializes |
beforeFormRender | register | Mutate the form schema before render |
afterFormRender | register | Run logic after the interface renders |
afterValidation | register | Run logic after form validation |
startProcess / endProcess | register | Process lifecycle callbacks |
customizeFormLabel | call | Override field labels |
customizeFormPlaceholder | call | Override field placeholders |
mapErrorMessages | call | Customize API error copy by code |
See JavaScript Hooks for the complete hook catalog and examples.
Configuration Options
commonOptions are passed once to the LoginRadiusV2 constructor and apply across actions; per-call options are passed to init(). The most common options:
| Option | Type | Required | Description |
|---|---|---|---|
apiKey | string | Yes (all) | LoginRadius API key. |
sott | string | Yes (registration) | Server-generated Secure One-Time Token. |
verificationUrl | string | Yes (registration, login, social) | Redirect URL for the email verification link. |
appName | string | No | Tenant name; required for SSO API interop. |
callbackUrl | string | No | Post-auth redirect target (social / custom interface). |
tokenType | string | No | Pass 'jwt' to receive a JWT token. |
hashTemplate | boolean | No | Set when the interface template contains a hash (#). |
maskSensitiveInput | boolean | No | Mask OTP and security answers during entry. |
twoFactorAuthentication | boolean | No | Enforce MFA (also enabled server-side). |
passwordLength | object | No | Password bounds, e.g. { min: 10, max: 32 }. |
debugMode | boolean | No | Emit console logs during development. |
init() per-call options include container (target element id), templateName (script id for social/account-linking templates), classPrefix (multiple forms on one page), and the onSuccess / onError callbacks. The full commonOptions table lives in Getting Started.
When to Use
- You maintain an existing integration built on
LoginRadiusV2.jsand its hook system, form library, or context-based customization. - You depend on a V2-specific behavior that has no V3 equivalent yet.
For new builds, use the V3 JS SDK (any framework or plain HTML) or the React SDK (React/Next.js).