React SDK Quickstart
Add LoginRadius authentication to a React or Next.js app — install the SDK, wrap your app in a provider, and render your first flow.
Prerequisites
- A LoginRadius account with your API Key — see Set up your LoginRadius account.
- A React project (Create React App, Vite + React, Next.js, or Remix) running React 18+.
- Node.js 18+ for installing the package and running your build tooling.
Integrate the SDK
The React SDK (@loginradius/loginradius-react) ships as an npm package. Install it, wrap your app with the provider, then render a flow.
Step 1: Install the package
Install the SDK with your package manager:
npm
pnpm
npm install @loginradius/loginradius-react
pnpm add @loginradius/loginradius-react
Step 2: Add the provider
Wrap your application in LoginRadiusProvider and pass your app credentials. Replace the placeholders below with the values from your LoginRadius Dashboard.
import { LoginRadiusProvider } from "@loginradius/loginradius-react";
const options = {
apiKey: "<YOUR_API_KEY>",
callbackUrl: window.location.origin,
};
export default function App() {
return (
<LoginRadiusProvider options={options}>
{/* Your app components */}
</LoginRadiusProvider>
);
}
Enable CAPTCHA in the LoginRadius Dashboard before going live. CAPTCHA protects your authentication flows from automated abuse — turn on reCAPTCHA v2, reCAPTCHA v3, or hCaptcha under your application's security settings.
options accepts many more settings than the credentials shown here. See Options for the full reference of values you can pass to the provider.
Step 3: Render an auth flow
Use the <Auth /> component to render a complete login and registration experience:
import { LoginRadiusProvider, Auth } from "@loginradius/loginradius-react";
const options = {
apiKey: "<YOUR_API_KEY>",
callbackUrl: window.location.origin,
};
export default function App() {
return (
<LoginRadiusProvider options={options}>
<Auth
onSuccess={(res) => console.log("auth success", res)}
onError={(err) => console.error("auth error", err)}
/>
</LoginRadiusProvider>
);
}
Flow components
Pre-built components manage multi-step flows. Render any of them inside the provider:
| Component | Flow |
|---|---|
<Auth /> | Combined login and registration (default entry point) |
<Login /> | Login-only flow with MFA, passkey, and passwordless support |
<Register /> | Registration-only flow |
<Profile /> | Account management: profile details, email, phone, MFA enrollment, passkeys, sessions |
<Workflow /> | Identity Orchestration workflow execution |
Compose a profile page
For fine-grained control, compose the individual profile sub-components:
import {
Profile,
PersonalDetails,
ChangePassword,
ChangePin,
EditPhone,
EditUsername,
AddEmail,
VerifyEmailPhone,
SetupTwoFactorAuth,
AddPasskey,
ResetBackupCode,
LinkAccount,
DeleteAccount,
VerificationToken,
} from "@loginradius/loginradius-react";
export function ProfilePage() {
return (
<>
<Profile />
<PersonalDetails />
<ChangePassword />
<ChangePin />
<EditPhone />
<EditUsername />
<AddEmail />
<VerifyEmailPhone />
<SetupTwoFactorAuth />
<AddPasskey />
<ResetBackupCode />
<LinkAccount />
<DeleteAccount />
</>
);
}
Credentials
The snippets above use simple placeholders — "<YOUR_API_KEY>" and your callback URL — to keep the examples readable. Replace each placeholder with the value from your LoginRadius Dashboard before running the code.
For production builds, inject these values at build or serve time (for example, through your bundler's configuration or a runtime config object). Never commit real credentials to source control.
Next steps
Options
Every option you can pass to the provider via options.
Components
Reference for the pre-built flow components the React SDK provides.
Hooks
Read auth state and the SDK instance with useLRAuth().
Customization
Configure styling, theming, and component behavior to match your design system.
Localization
Translate the UI copy rendered by the SDK into any language.
Demo applications
Working demos live in the loginradius-demos repository.