Components

The LoginRadius React SDK provides a comprehensive suite of prebuilt UI components for authentication and user management. Each component is self-contained and handles its own state, validation, and API calls.

All components must be rendered inside <LoginRadiusProvider>. Pass onSuccess and onError callbacks to handle results.

Available Components

Authentication Components

Auth

The <Auth /> component renders a prebuilt authentication UI that allows users to sign in or sign up by default. The behavior of <Auth /> is controlled by the instance settings you configure in the LoginRadius Dashboard, including:

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

You can also further customize the component by passing additional properties when rendering it in your React application.

Basic Example

The following example demonstrates a simple implementation of <Auth />:

// src/App.tsx
import { Auth } from "@loginradius/loginradius-react-sdk";

interface AuthResponse {
  data: {
    access_token: string;
  };
  success: boolean;
  token?: string;
  error?: string;
}

interface ApiError {
  error: string;
}

function App() {
  const handleSuccess = (response: AuthResponse) => {
    console.log("Success:", response);
  };

  const handleError = (error: ApiError) => {
    console.error("Error:", error.error);
  };

  return <Auth onSuccess={handleSuccess} onError={handleError} />;
}

export default App;

Properties

All properties of <Auth /> are optional:

Customization

To learn more about customizing <Auth /> or other LoginRadius React SDK components, refer to the Customization Documentation.

Login

The <Login /> component renders a prebuilt login UI, allowing users to sign in by default. Its functionality is controlled by the instance settings configured in the LoginRadius Dashboard, including:

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

You can further customize the <Login /> component by passing additional properties when rendering it in your React application.

Basic Example

The following example demonstrates a simple implementation of <Login />:

// src/App.tsx
import { Login } from "@loginradius/loginradius-react-sdk";

interface AuthResponse {
  data: {
    access_token: string;
  };
  success: boolean;
  token?: string;
  error?: string;
}

interface ApiError {
  error: string;
}

function App() {
  const handleSuccess = (response: AuthResponse) => {
    console.log("Success:", response);
  };

  const handleError = (error: ApiError) => {
    console.error("Error:", error.error);
  };

  return <Login onSuccess={handleSuccess} onError={handleError} />;
}

export default App;

Properties

All properties of <Login /> are optional:

Customization

To learn more about customizing <Login /> or other LoginRadius React SDK components, refer to the Customization Documentation or LoginRadius Dashboard.

Register

The <Register /> component renders a prebuilt registration UI, allowing users to sign up by default. Its behavior is determined by the instance settings in the LoginRadius Dashboard, including:

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

You can further customize the <Register /> component by passing additional properties when rendering it in your React application.

Basic Example

The following example demonstrates a simple implementation of <Register />:

// src/App.tsx
import { Register } from "@loginradius/loginradius-react-sdk";

interface AuthResponse {
  data: {
    access_token: string;
  };
  success: boolean;
  token?: string;
  error?: string;
}

interface ApiError {
  error: string;
}

function App() {
  const handleSuccess = (response: AuthResponse) => {
    console.log("Success:", response);
  };

  const handleError = (error: ApiError) => {
    console.error("Error:", error.error);
  };

  return <Register onSuccess={handleSuccess} onError={handleError} />;
}

export default App;

Properties

All properties of <Register /> are optional:

Customization

To learn more about customizing <Register /> or other LoginRadius React SDK components, refer to the Customization Documentation.

PasswordlessLogin

The <PasswordlessLogin /> component renders a prebuilt passwordless authentication UI, allowing users to log in without a password using OTPs or magic links.

The component's behavior and available methods are controlled by the instance settings configured in the LoginRadius Dashboard, such as:

• Passwordless login type: OTP or magic link
• Communication channels: email or SMS

You can further customize the <PasswordlessLogin /> by passing additional properties during rendering.

Basic Example

The following example demonstrates a minimal implementation of the <PasswordlessLogin /> component:

// src/App.tsx
import { PasswordlessLogin } from "@loginradius/loginradius-react-sdk";

interface AuthResponse {
  data: {
    access_token: string;
  };
  success: boolean;
  token?: string;
  error?: string;
}

interface ApiError {
  error: string;
}

function App() {
  const handleSuccess = (response: AuthResponse) => {
    console.log("Success:", response);
  };

  const handleError = (error: ApiError) => {
    console.error("Error:", error.error);
  };

  return <PasswordlessLogin onSuccess={handleSuccess} onError={handleError} />;
}

export default App;

Properties

All properties of <PasswordlessLogin /> are optional:

Customization

To learn more about customizing <PasswordlessLogin /> or styling it to match your brand, see the Customization Documentation.

ForgotPassword

The <ForgotPassword /> component provides a prebuilt UI that allows users to reset their password securely.

The behavior of this component is fully managed by the instance settings configured in your LoginRadius Dashboard, including options such as:

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

You can also customize the <ForgotPassword /> further by passing additional properties during rendering.

Basic Example

Below is a simple example demonstrating how to use the <ForgotPassword /> component in your React application.

// src/App.tsx
import { ForgotPassword } from "@loginradius/loginradius-react-sdk";

interface AuthResponse {
  data: {
    access_token: string;
  };
  success: boolean;
  token?: string;
  error?: string;
}

interface ApiError {
  error: string;
}

function App() {
  const handleSuccess = (response: AuthResponse) => {
    console.log("Success:", response);
  };

  const handleError = (error: ApiError) => {
    console.error("Error:", error.error);
  };

  return <ForgotPassword onSuccess={handleSuccess} onError={handleError} />;
}

export default App;

Properties

All properties of <ForgotPassword /> are optional:

Customization

To learn how to customize the <ForgotPassword /> component's appearance, layout, or text, refer to the Customization Documentation.

Workflow

The <Workflow /> component provides a prebuilt UI to execute custom workflows securely. The component is fully controlled by the workflow configurations set in your LoginRadius Dashboard, including:

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

You can further customize <Workflow /> by passing additional properties during rendering.

Basic Example

Below is a simple example demonstrating how to use the <Workflow /> component in your React application.

// src/App.tsx
import { Workflow } from "@loginradius/loginradius-react-sdk";

interface AuthResponse {
  data: {
    access_token: string;
  };
  success: boolean;
  token?: string;
  error?: string;
}

interface ApiError {
  error: string;
}

function App() {
  const handleSuccess = (response: AuthResponse) => {
    console.log("Success:", response);
  };

  const handleError = (error: ApiError) => {
    console.error("Error:", error.error);
  };

  return (
    <Workflow
      workflowName="registrationWorkflow"
      clientId="YOUR_CLIENT_ID"
      onSuccess={handleSuccess}
      onError={handleError}
    />
  );
}

export default App;

Properties

Customization

To learn how to customize the <Workflow /> component's appearance, layout, or text, refer to the Customization Documentation.

Account Management Components

Profile

The <Profile /> component provides a prebuilt, secure UI that enables authenticated users to view and manage their profile information.

This component supports a wide range of profile management features — including profile editing, password changes, and account deletion — all managed through the configuration settings defined in your LoginRadius Dashboard.

Key Features

The behavior of the <Profile /> component is determined by your instance configuration, which may include:

• Profile Editor – Allow users to update profile fields such as name, email, phone number, and more.
• Secure Account Management – Manage sensitive operations like password changes or two-factor authentication setup.
• Delete Account – Enable users to securely delete their accounts.
• Change Password – Provide users the option to change their existing password directly within the profile UI.

You can further customize the <Profile /> component by passing additional properties when rendering it in your application.

Basic Example

Below is a simple example demonstrating how to use the <Profile /> component in your React application.

// src/Profile.tsx
import { Profile } from "@loginradius/loginradius-react-sdk";

function App() {
  return <Profile logoutRedirectUrl="/" />;
}

export default App;

Properties

All properties of <Profile /> are optional:

Customization

To learn how to customize the <Profile /> component's appearance, layout, or text, refer to the Customization Documentation.

Localization

The LoginRadius React SDK supports comprehensive localization to display authentication components in your users' preferred language. You can customize text for all components including login, registration, password flows, MFA, and more.

To learn how to implement localization in your React application, including static and dynamic language switching, refer to the V3 JS SDK Localization Documentation.

Related

• React SDK Overview
• Localization
• JavaScript Hooks
• Customization Documentation