React SDK Demos

Reference apps that consume @loginradius/loginradius-react, the React-first SDK with hooks and pre-built components.

Available Demos

Demo	Stack	Default dev port
playground	Vite + React 19 + React Router	`5000`
next	Next.js 16 (App Router) + React 19	`3000`

What the React SDK Gives You

<LoginRadiusProvider options={...}> — wraps your tree, initializes the SDK, exposes it via context
useLoginRadiusSDK() — returns { lrInstance, options, loading, content }
useLRAuth() — carries cross-step state (email, phone, accessToken, mfaToken, etc.) between flow steps
<Auth />, <Login />, <Register />, <ProfileEditor /> — pre-built components that render the right step for the user's current position

Pick this package when you want React-native primitives and pre-built UI for the standard auth flows.

Quick Start

cd loginradius-react/playground   # or loginradius-react/next
pnpm install
cp .env.example .env.local        # see Configuration below
pnpm dev

Configuration

Demo	Var prefix	File
`playground`	`VITE_LOGINRADIUS_*`	`.env.local`
`next`	`NEXT_PUBLIC_LOGINRADIUS_*`	`.env.local`

VITE_LOGINRADIUS_API_KEY=your-api-key
VITE_LOGINRADIUS_SOTT=your-sott
VITE_LOGINRADIUS_VERIFICATION_URL=https://your-tenant.example.com/auth.aspx
VITE_LOGINRADIUS_RESET_PASSWORD_URL=https://your-tenant.example.com/auth.aspx
VITE_LOGINRADIUS_CALLBACK_URL=http://localhost:5000

Common Snippet

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

const commonOptions = {
  apiKey: import.meta.env.VITE_LOGINRADIUS_API_KEY,
  sott: import.meta.env.VITE_LOGINRADIUS_SOTT,
  callbackUrl: window.location.origin,
};

export default function App() {
  return (
    <LoginRadiusProvider options={commonOptions}>
      <Auth
        onSuccess={(res) => console.log("auth success", res)}
        onError={(err) => console.error("auth error", err)}
      />
    </LoginRadiusProvider>
  );
}

Available Demos

What the React SDK Gives You

Quick Start

Configuration

Common Snippet

Related Resources