JavaScript SDK components

The JavaScript SDK ships prebuilt, configurable UI components for authentication, account management, and B2B organization flows. There are two kinds:

Standalone flow components — single-purpose UIs such as Auth, Login, ForgotPassword, etc.
Bundled components — Profile (account management) and AdminPortal (B2B organization management) bundle a whole suite of sub-components into one managed experience. Each sub-component can also be rendered on its own for a custom layout.

Component identities in this page use PascalCase (matching the React SDK). The init() action key shown in code remains camelCase — it is the runtime contract.

Configuration

Every component is initialized the same way — pass the init() action key and a options object to init():

LRObject.init("<actionKey>", options);

LRObject is your initialized LoginRadiusSDK instance — see Get started with the JavaScript SDK. Each component's available methods and fields are driven by your LoginRadius Dashboard instance settings; the options below adjust callbacks and presentation at render time.

Options

Component options are passed as the second argument to init(). Unless noted otherwise, every component accepts these options:

Option	Type	Required	Description
`container`	`string`	Yes	ID of the DOM element to render the component into
`onSuccess`	`(response) => void`	No	Called when the action completes successfully
`onError`	`(error) => void`	No	Called when an error occurs

note

Component behavior — which identifiers, fields, providers, and methods are available — is configured in the LoginRadius Dashboard. The render-time options below adjust callbacks and presentation, not the underlying policy.

Authentication components

The components in this section render the user-facing authentication surface — sign-in, sign-up, social, passwordless, verification, password reset, and Identity Orchestration workflows. All are unauthenticated entry points; they do not require a session.

Auth

Combined sign-in and sign-up surface. Behavior is driven by your Dashboard instance settings, including:

Sign-in identifiers (email, phone, username)
Sign-up fields (email, phone, username, password, date of birth, etc.)
Social login providers
Passwordless login (magic link, OTP)
Passkey authentication

<div id="auth-container"></div>
<script>
  const options = {
    container: "auth-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("auth", options);
</script>

Prebuilt sign-in UI for existing users. Behavior is driven by your Dashboard instance settings, including:

Sign-in identifiers (email, phone, or username)
Social login providers
Passwordless login (magic link, OTP)
Passkey authentication

<div id="login-container"></div>
<script>
  const options = {
    container: "login-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("login", options);
</script>

Option	Type	Required	Description
`showSocialProviders`	`boolean`	No	Show or hide social login buttons. Defaults to your Dashboard configuration.

Register

Sign-up form for new users. Fields and validation are driven by your Dashboard instance settings, including:

Sign-up fields (email, phone, username, password, etc.)
Social login providers

<div id="registration-container"></div>
<script>
  const options = {
    container: "registration-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("registration", options);
</script>

Option	Type	Required	Description
`showSocialProviders`	`boolean`	No	Show or hide social login buttons. Defaults to your Dashboard configuration.

Social provider sign-in buttons (Google, Facebook, and others) configured in your Dashboard.

<div id="socialLogin-container"></div>
<script>
  const options = {
    container: "socialLogin-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("socialLogin", options);
</script>

Passwordless sign-in via OTP or magic link. Behavior is driven by your Dashboard instance settings, including:

Passwordless login type: OTP or magic link
Communication channel: email or SMS

<div id="passwordlessLogin-container"></div>
<script>
  const options = {
    container: "passwordlessLogin-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("passwordlessLogin", options);
</script>

VerificationToken

Resolves magic-link and token-based verification flows automatically, covering cases such as:

Email verification
One-click sign-in (passwordless magic link)
Other token-based verification links

Add this component to the page your verification links point to. The component will automatically read the token from the URL and complete the matching flow. Behavior is controlled by your Dashboard instance settings.

<div id="verifyToken-container"></div>
<script>
  const options = {
    container: "verifyToken-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("verifyToken", options);
</script>

ForgotPassword

Password reset flow for users who can't sign in. Behavior is driven by your Dashboard instance settings, including:

Password reset method (email or username)
Email/SMS templates used for reset links or OTPs
Validation and redirection settings

<div id="forgotPassword-container"></div>
<script>
  const options = {
    container: "forgotPassword-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("forgotPassword", options);
</script>

Workflow

Executes a custom Identity Orchestration workflow as a prebuilt UI. Behavior is driven by the workflow configuration in your Dashboard, including:

Multi-step flows such as registration, authentication, or password reset
Custom email/SMS templates for verification or OTP delivery
Validation rules, redirection, and conditional logic

<div id="workflow-container"></div>
<script>
  const options = {
    container: "workflow-container",
    workflowName: "YOUR_WORKFLOW_NAME",
    clientId: "YOUR_CLIENT_ID",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("workflow", options);
</script>

Option	Type	Required	Description
`workflowName`	`string`	Yes	Name of the workflow to execute, as configured in the Dashboard
`clientId`	`string`	Yes	Client ID used to initialize the workflow

Account management components

Profile is the composite account-management UI for the signed-in user. It bundles the profile and account sub-components listed below into a single secure experience. Initialize Profile for the full UI, or initialize any sub-component on its own for a custom layout.

note

Account-management components act on the signed-in user, so they require an authenticated session. Render them only after the user has logged in.

Profile

The full account-management UI, composed of the sub-components listed below. Depending on your Dashboard configuration, it can include:

Profile details — update fields such as name, email, and phone number
Security — change password and PIN, set up two-factor authentication, register passkeys
Account — link social accounts, manage emails, delete the account

<div id="profileEditor-container"></div>
<script>
  const options = {
    container: "profileEditor-container",
    logoutRedirectUrl: "/",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("profileEditor", options);
</script>

Option	Type	Required	Description
`logoutRedirectUrl`	`string`	No	URL to redirect users to after they log out from the profile page

The components below are the individual pieces the profile editor bundles. Initialize any of them directly to build a custom account UI.

PersonalDetails

View and edit core profile fields (name plus any other configured fields).

<div id="personalDetails-container"></div>
<script>
  const options = {
    container: "personalDetails-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("personalDetails", options);
</script>

ChangePassword

Change the account password.

<div id="changePassword-container"></div>
<script>
  const options = {
    container: "changePassword-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("changePassword", options);
</script>

ChangePIN

Update the account PIN.

<div id="changePin-container"></div>
<script>
  const options = {
    container: "changePin-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("changePin", options);
</script>

EditPhone

Add or update the account phone number.

<div id="editPhone-container"></div>
<script>
  const options = {
    container: "editPhone-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("editPhone", options);
</script>

EditUsername

Edit the account's username.

<div id="editUsername-container"></div>
<script>
  const options = {
    container: "editUsername-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("editUsername", options);
</script>

AddEmail

Add and manage email addresses on the account.

<div id="addEmail-container"></div>
<script>
  const options = {
    container: "addEmail-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("addEmail", options);
</script>

VerifyEmailPhone

Verify the account's email address or phone number.

<div id="verifyEmailPhone-container"></div>
<script>
  const options = {
    container: "verifyEmailPhone-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("verifyEmailPhone", options);
</script>

TwoFactorAuth

Enroll in and manage two-factor authentication (MFA). Supported methods — authenticator apps, SMS/email OTP, and related — are configured in your Dashboard.

<div id="setupTwoFactorAuth-container"></div>
<script>
  const options = {
    container: "setupTwoFactorAuth-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("setupTwoFactorAuth", options);
</script>

AddPasskey

<div id="addPasskey-container"></div>
<script>
  const options = {
    container: "addPasskey-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("addPasskey", options);
</script>

ResetBackupCodes

Regenerate the account's MFA backup codes.

<div id="resetBackupCode-container"></div>
<script>
  const options = {
    container: "resetBackupCode-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("resetBackupCode", options);
</script>

LinkAccount

Link and unlink social provider accounts on the profile.

<div id="linkAccount-container"></div>
<script>
  const options = {
    container: "linkAccount-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("linkAccount", options);
</script>

DeleteAccount

Securely delete the account, gated by confirmation safeguards.

<div id="deleteAccount-container"></div>
<script>
  const options = {
    container: "deleteAccount-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("deleteAccount", options);
</script>

B2B organization components

These components power B2B organization management. AdminPortal is the composite admin console — it bundles the full organization suite listed below (along with the user's account and security tabs) into one sidebar layout. Initialize AdminPortal for the complete experience, or initialize any organization component on its own for a custom layout.

For the underlying concepts, roles, and tenant configuration, see Organizations Management.

note

Organization components require:

A B2B-enabled app with OIDC configured
An authenticated user with an active organization context

Available actions depend on the user's role in the active organization (resolved from their org token) — controls for actions the user lacks permission for are automatically disabled or hidden.

AdminPortal

Composite B2B admin console — renders a sidebar layout with account and security tabs for the signed-in user plus organization tabs, switching the active panel based on the selected tab and the user's permissions. The organization context (org tokens, scopes, and member data) is wired up automatically.

<div id="adminPortal-container"></div>
<script>
  const options = {
    container: "adminPortal-container",
    logoutRedirectUrl: window.location.origin,
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("adminPortal", options);
</script>

Option	Type	Required	Description
`logoutRedirectUrl`	`string`	No	URL to redirect to after the user logs out from the sidebar
`components`	`string[]`	No	Whitelist of panels to render — e.g. `['userManagement', 'roles']`. When omitted, every panel the user has access to renders.

The organization tabs render only when the app is B2B-enabled and an organization context is active.

The components below are the individual organization widgets the admin portal bundles. Initialize any of them directly to build a custom admin UI.

OrganizationUsers

Unified table of organization members and their invitations — the primary user-management surface.

Capabilities

List active members and pending, expired, or revoked invitations together, with a status column
Search by name or email; filter by role and by status
Invite members by email with a role multi-select and an auto-populated invitation URL
Edit a member's roles inline, and remove members
Resend, revoke, or delete invitations
Confirmation dialogs guard destructive actions

Permission scopes

Action	Scope
Send, edit, or resend an invitation	`invitations.write`
Revoke or delete an invitation	`invitations.delete`
Edit member roles	`userRoles.write`
Remove a member	`userRoles.delete`

<div id="organizationUsers-container"></div>
<script>
  const options = {
    container: "organizationUsers-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("organizationUsers", options);
</script>

OrganizationRoles

Create/edit/delete interface for organization roles and the permissions assigned to them.

Capabilities

Paginated table of roles with description and a clickable permission count
Create and edit roles with a name, description, and a permissions multi-select
View a role's assigned permissions in a popover
Delete roles with confirmation

Permission scopes

Action	Scope
Create or edit a role	`roles.write`
Delete a role	`roles.delete`

note

Roles are organization-scoped, but the permission catalog is shared across every organization in the tenant. Deleting a role does not automatically unassign it from members or connections — re-check those mappings afterward.

<div id="organizationRoles-container"></div>
<script>
  const options = {
    container: "organizationRoles-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("organizationRoles", options);
</script>

OrganizationSecurity

Security-policy editor for the organization — currently MFA enforcement and Just-In-Time (JIT) provisioning.

Capabilities

MFA enforcement — choose Required or Optional for the organization. The choice is constrained by tenant-level MFA configuration: if the tenant forces or disables MFA, the org-level control is locked and an explanatory note is shown.
JIT provisioning — a toggle that auto-provisions users into the organization on their first login through an associated SSO connection.

Permission scopes

Action	Scope
Edit organization policies	`orgs.write`

note

MFA options reflect your tenant settings, so load tenant configuration before rendering. JIT provisioning requires at least one SSO connection (see OrganizationConnections) to have any effect.

<div id="organizationSecurity-container"></div>
<script>
  const options = {
    container: "organizationSecurity-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("organizationSecurity", options);
</script>

OrganizationConnections

SSO identity-provider connection manager (SAML 2.0 and OIDC), including group-to-role mapping.

Capabilities

Create, edit, enable/disable, and delete connections
Supported types: SAML (custom, Okta, Entra ID, Google Workspace, Salesforce) and OIDC (custom)
SAML configured via manual entry or a metadata URL, with attribute mapping
OIDC configured with authorization/token/issuer endpoints, client credentials, scopes, and claim mapping
Group → role mapping so a group claim emitted by the IdP grants the mapped organization roles on each login
Read-only LoginRadius SP metadata (ACS URL, Entity ID) to copy into your IdP

Permission scopes

Action	Scope
Add, edit, enable, or disable a connection	`orgConnections.write`
Delete a connection	`orgConnections.delete`

note

A connection requires a verified domain (see OrganizationDomainManagement), and group-to-role mapping requires existing roles (see OrganizationRoles). Disabling a connection preserves it and its group mappings — delete only to remove permanently.

<div id="organizationConnections-container"></div>
<script>
  const options = {
    container: "organizationConnections-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("organizationConnections", options);
</script>

OrganizationSCIM

SCIM 2.0 directory-provisioning configurator that lets an external IdP sync users into the organization. For the underlying directory-sync concepts and setup, see Directory Sync.

Capabilities

Create a SCIM directory bound to the organization (Okta, Azure, or Custom)
Manage one or more bearer tokens the IdP uses to authenticate to the LoginRadius SCIM endpoint
Copy the SCIM endpoint URL and the one-time-display token to paste into your IdP

Permission scopes

Action	Scope
Create a directory or token	`scim.write`
Delete a directory or token	`scim.delete`

note

SCIM is for outbound provisioning from your IdP into LoginRadius. Once configured, users created, updated, or disabled in the IdP appear in OrganizationUsers automatically. A directory's initial token is shown only once on creation — copy and store it securely.

<div id="organizationScim-container"></div>
<script>
  const options = {
    container: "organizationScim-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("organizationScim", options);
</script>

OrganizationSettings

Organization profile editor — name, description, and other core fields.

Editable fields

Field	Description
Organization name	Internal name; must be unique within the tenant
Display name	User-facing display name
Logo URL	URL to the organization's logo
Metadata	Free-form JSON metadata (validated before save)

Permission scopes

Action	Scope
Edit the organization	`orgs.write`

<div id="organizationSettings-container"></div>
<script>
  const options = {
    container: "organizationSettings-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("organizationSettings", options);
</script>

OrganizationDomainManagement

Add, verify, and remove the domains owned by the organization.

Capabilities

Domain table with verified / pending status badges
Add a domain and receive the DNS TXT record to publish for verification
Trigger a verification re-check after publishing the record
Delete domains, with confirmation

Permission scopes

Action	Scope
Add, verify, or delete a domain	`orgs.write`

note

Verification is a two-step process: add the domain, publish the TXT record in your DNS, then click Verify. Verification fails until DNS has propagated — surface that error to the user as-is.

<div id="organizationDomainManagement-container"></div>
<script>
  const options = {
    container: "organizationDomainManagement-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("organizationDomainManagement", options);
</script>

OrganizationDangerZone

Destructive organization actions. Currently exposes a single action — leave the organization — gated by a type-to-confirm step (the user types the organization name to proceed).

Permission scopes

No explicit scope — any member can leave an organization they belong to. The component is hidden when there is no active organization session.

note

On success, the user is removed from the organization and the page reloads so the context resets. Make sure your app can rehydrate from a fresh page load.

<div id="organizationDangerZone-container"></div>
<script>
  const options = {
    container: "organizationDangerZone-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("organizationDangerZone", options);
</script>

OrganizationSelector

Read-only picker that lets a user choose which organization to operate in. Sets the active organization context for the other organization components. No write permissions are required.

<div id="organizationSelector-container"></div>
<script>
  const options = {
    container: "organizationSelector-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("organizationSelector", options);
</script>

OrganizationSwitcher

Read-only control that switches the user's active organization among those they belong to. Updates the active organization context consumed by the other organization components. No write permissions are required.

<div id="organizationSwitcher-container"></div>
<script>
  const options = {
    container: "organizationSwitcher-container",
    onSuccess: (response) => console.log(response),
    onError: (errors) => console.log(errors),
  };

  LRObject.init("organizationSwitcher", options);
</script>

Customization

Every component can be themed, restyled, and translated to match your application:

Customization

Configure styling, theming, and component behavior to match your design system.

Localization

Translate the UI copy rendered by the SDK into any language.

For the full list of mountable init() action keys, see the JavaScript SDK overview.

JavaScript SDK overview

Concepts, components, and runtime for the LoginRadius JavaScript SDK.

Get started with the JavaScript SDK

Install, initialize, and render your first auth flow.

Options

Reference for the options object shared across every SDK flow.

Customization

Style the SDK UI with CSS classes, style props, and CSS variables.

Localization

Translate the SDK UI copy into any language.

React SDK components

The same canonical components, in JSX.

Organizations Management

Multi-tenant organization features the SDK exposes.

Configuration

Options

Authentication components

Auth

Login

Register

SocialLogin

PasswordlessLogin

VerificationToken

ForgotPassword

Workflow

Account management components

Profile

PersonalDetails

ChangePassword

ChangePIN

EditPhone

EditUsername

AddEmail

VerifyEmailPhone

TwoFactorAuth

AddPasskey

ResetBackupCodes

LinkAccount

DeleteAccount

B2B organization components

AdminPortal

OrganizationUsers

OrganizationRoles

OrganizationSecurity

OrganizationConnections

OrganizationSCIM

OrganizationSettings

OrganizationDomainManagement

OrganizationDangerZone

OrganizationSelector

OrganizationSwitcher

Customization

Related resources