Components

The React SDK ships prebuilt, configurable React components you render as JSX. 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.

All components must be rendered inside <LoginRadiusProvider> — see Getting Started. The B2B organization components additionally require <OrgContextProvider>.

import { LoginRadiusProvider } from "@loginradius/loginradius-react";

<LoginRadiusProvider options={options}>
  {/* render any component below here */}
</LoginRadiusProvider>;

Common props

Unless noted otherwise, every component accepts these common props:

Prop	Type	Required	Description
`onSuccess`	`(response) => void`	No	Called when the action completes successfully
`onError`	`(error) => void`	No	Called when an error occurs

Authentication components

Sign-in, sign-up, social, passwordless, password reset, token verification, and Identity Orchestration workflow components. Use these to render the user-facing entry points of your authentication experience.

Auth

Combined sign-in and sign-up experience (the default entry point). Behavior is driven by your Dashboard instance settings — identifiers, sign-up fields, social providers, passwordless, and passkeys.

import { Auth } from "@loginradius/loginradius-react";

<Auth
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

Prebuilt sign-in UI for existing users, with social login, passwordless, and passkey support as configured in your Dashboard.

import { Login } from "@loginradius/loginradius-react";

<Login
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

Register

Sign-up form for new users, with fields and social providers configured in your Dashboard.

import { Register } from "@loginradius/loginradius-react";

<Register
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

SocialLogin

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

import { SocialLogin } from "@loginradius/loginradius-react";

<SocialLogin
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

PasswordlessLogin

Passwordless sign-in via OTP or magic link. Type and channel are configured in your Dashboard.

import { PasswordlessLogin } from "@loginradius/loginradius-react";

<PasswordlessLogin
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

VerificationToken

Resolves magic-link and token-based verification flows automatically, covering cases such as email verification, one-click passwordless sign-in, and 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.

import { VerificationToken } from "@loginradius/loginradius-react";

<VerificationToken
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

ForgotPassword

Password reset flow for users who can't sign in, following the reset method and templates configured in your Dashboard.

import { ForgotPassword } from "@loginradius/loginradius-react";

<ForgotPassword
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

Workflow

Executes a custom Identity Orchestration workflow configured in your Dashboard.

import { Workflow } from "@loginradius/loginradius-react";

<Workflow
  workflowName="YOUR_WORKFLOW_NAME"
  clientId="YOUR_CLIENT_ID"
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

Prop	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

Profile is the composite account-management UI for the signed-in user. It bundles the profile and account sub-components below into a single secure experience. Render Profile for the full UI, or render 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 — profile details, password and PIN changes, MFA and passkey setup, email/phone management, account linking, and deletion, depending on your Dashboard configuration.

import { Profile } from "@loginradius/loginradius-react";

<Profile
  logoutRedirectUrl="/"
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

Prop	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. Render any of them directly to build a custom account UI.

PersonalDetails

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

import { PersonalDetails } from "@loginradius/loginradius-react";

<PersonalDetails
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

ChangePassword

Change the account password.

import { ChangePassword } from "@loginradius/loginradius-react";

<ChangePassword
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

ChangePin

Update the account PIN.

import { ChangePin } from "@loginradius/loginradius-react";

<ChangePin
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

EditPhone

Add or update the account phone number.

import { EditPhone } from "@loginradius/loginradius-react";

<EditPhone
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

EditUsername

Edit the account's username.

import { EditUsername } from "@loginradius/loginradius-react";

<EditUsername
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

AddEmail

Add and manage email addresses on the account.

import { AddEmail } from "@loginradius/loginradius-react";

<AddEmail
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

VerifyEmailPhone

Verify the account's email address or phone number.

import { VerifyEmailPhone } from "@loginradius/loginradius-react";

<VerifyEmailPhone
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

SetupTwoFactorAuth

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

import { SetupTwoFactorAuth } from "@loginradius/loginradius-react";

<SetupTwoFactorAuth
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

AddPasskey

import { AddPasskey } from "@loginradius/loginradius-react";

<AddPasskey
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

ResetBackupCode

Regenerate the account's MFA backup codes.

import { ResetBackupCode } from "@loginradius/loginradius-react";

<ResetBackupCode
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

LinkAccount

Link and unlink social provider accounts on the profile.

import { LinkAccount } from "@loginradius/loginradius-react";

<LinkAccount
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

DeleteAccount

Securely delete the account, gated by confirmation safeguards.

import { DeleteAccount } from "@loginradius/loginradius-react";

<DeleteAccount
  onSuccess={(res) => console.log(res)}
  onError={(err) => console.error(err)}
/>;

B2B organization management

These components power B2B organization management. AdminPortal is the composite admin console — it bundles the full organization suite below (along with the user's account and security tabs) into one sidebar layout. Render AdminPortal for the complete experience, or render 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 an authenticated user with an active organization context, so they must be rendered inside <OrgContextProvider> (which itself sits inside <LoginRadiusProvider> with a B2B-enabled app). Available actions depend on the user's role in the active organization — controls for actions the user lacks permission for are disabled or hidden.

AdminPortal

Composite B2B admin console — renders a sidebar layout with account and security tabs for the signed-in user plus organization management tabs, switching the active panel based on the selected tab and the user's permissions.

import { AdminPortal } from "@loginradius/loginradius-react";

<AdminPortal
  logoutRedirectUrl={window.location.origin}
  onSuccess={(data) => console.log(data)}
  onError={(err) => console.error(err)}
/>;

Prop	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 components below are the individual organization widgets the admin portal bundles.

OrganizationUsers

Unified table of organization members and their invitations.

Capabilities

List active members and pending, expired, or revoked invitations together, with a status column
Search by name or email; filter by role and status
Invite members, edit member roles inline, and remove members
Resend, revoke, or delete invitations

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`

import { OrganizationUsers } from "@loginradius/loginradius-react";

<OrganizationUsers
  onSuccess={(data) => console.log(data)}
  onError={(err) => console.error(err)}
/>;

OrganizationRoles

Create/edit/delete interface for organization roles and their permissions.

Capabilities

Paginated table of roles with description and permission count
Create, edit, and delete roles; assign permissions via multi-select

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.

import { OrganizationRoles } from "@loginradius/loginradius-react";

<OrganizationRoles
  onSuccess={(data) => console.log(data)}
  onError={(err) => console.error(err)}
/>;

OrganizationPolicy

Security-policy editor for the organization — currently MFA enforcement and Just-In-Time (JIT) provisioning. React counterpart of the JS SDK's organizationSecurity component.

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.

import { OrganizationPolicy } from "@loginradius/loginradius-react";

<OrganizationPolicy
  onSuccess={(data) => console.log(data)}
  onError={(err) => console.error(err)}
/>;

OrganizationConnections

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

Capabilities

Create, edit, enable/disable, and delete connections
SAML (custom, Okta, Entra ID, Google Workspace, Salesforce) and OIDC (custom)
Group → role mapping so IdP group claims grant organization roles on login

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).

import { OrganizationConnections } from "@loginradius/loginradius-react";

<OrganizationConnections
  onSuccess={(data) => console.log(data)}
  onError={(err) => console.error(err)}
/>;

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 (Okta, Azure, or Custom)
Manage bearer tokens the IdP uses to authenticate to the SCIM endpoint
Copy the SCIM endpoint URL and one-time-display token

Permission scopes

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

import { OrganizationSCIM } from "@loginradius/loginradius-react";

<OrganizationSCIM
  onSuccess={(data) => console.log(data)}
  onError={(err) => console.error(err)}
/>;

OrganizationSettings

Organization profile editor — name, display name, logo, and metadata.

Permission scopes

Action	Scope
Edit the organization	`orgs.write`

import { OrganizationSettings } from "@loginradius/loginradius-react";

<OrganizationSettings
  onSuccess={(data) => console.log(data)}
  onError={(err) => console.error(err)}
/>;

OrganizationDomainManagement

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

Capabilities

Domain table with verified / pending status
Add a domain and receive the DNS TXT record to publish for verification
Trigger verification re-checks; delete domains

Permission scopes

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

import { OrganizationDomainManagement } from "@loginradius/loginradius-react";

<OrganizationDomainManagement
  onSuccess={(data) => console.log(data)}
  onError={(err) => console.error(err)}
/>;

OrganizationDangerZone

Destructive organization actions. Currently exposes a single action — leave the organization — gated by a type-to-confirm step.

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.

import { OrganizationDangerZone } from "@loginradius/loginradius-react";

<OrganizationDangerZone
  onSuccess={(data) => console.log(data)}
  onError={(err) => console.error(err)}
/>;

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.

import { OrganizationSelector } from "@loginradius/loginradius-react";

<OrganizationSelector />;

OrganizationSwitcher

Read-only control that switches the user's active organization among those they belong to. No write permissions are required.

import { OrganizationSwitcher } from "@loginradius/loginradius-react";

<OrganizationSwitcher />;

Customizing components

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.