React SDK Overview

The LoginRadius React SDK provides the core foundation for managing authentication workflows in React applications. It powers the LoginRadius JavaScript SDK, including its components, hooks, and helpers, making it easier to implement secure authentication flows.

The LoginRadius React SDK provides a comprehensive suite of components to seamlessly integrate authentication, user management, and multi-tenancy into your application. These components allow you to:

• Customize the appearance of authentication UI components and pages
• Manage the entire authentication flow, including login, registration, passwordless login, and workflows
• Build robust SaaS applications with multi-tenant support and B2B user invitations

Features

• Context Provider — <LoginRadiusProvider> supplies authentication state and SDK instance to your entire app
• Authentication Hooks — useLRAuth() for managing auth state, user profiles, and logout
• Prebuilt Components — Ready-to-use flows for login, registration, password reset, and more
• TypeScript Support — Full type definitions included
• SSR Compatible — Works with Next.js, Remix, and other React frameworks

Quickstart

This guide walks you through creating a new React application using Vite and integrating LoginRadius authentication.

By the end of this tutorial, you will have a project set up with authentication capabilities, ready for development.

You will:

• Create a new React project directory (loginradius-react).
• Install necessary dependencies.
• Start the development server.
• Integrate LoginRadius for authentication.

Create a React app using Vite

Run the following commands to create a new React app using Vite:

# 1. Scaffold the project using the React + TypeScript template
npm create vite@latest loginradius-react -- --template react-ts

# 2. Navigate into the new project directory
cd loginradius-react

# 3. Install all necessary dependencies
npm install

# 4. Start the local development server (usually runs on http://localhost:5173)
npm run dev

# 1. Scaffold the project using the React + TypeScript template
yarn create vite loginradius-react --template react-ts

# 2. Navigate into the new project directory
cd loginradius-react

# 3. Install all necessary dependencies
yarn install

# 4. Start the local development server (usually runs on http://localhost:5173)
yarn dev

# 1. Scaffold the project using the React + TypeScript template
pnpm create vite loginradius-react --template react-ts

# 2. Navigate into the new project directory
cd loginradius-react

# 3. Install all necessary dependencies
pnpm install

# 4. Start the local development server (usually runs on http://localhost:5173)
pnpm dev

Install the LoginRadius React SDK

The LoginRadius React SDK provides ready-to-use components, hooks, and helper functions to streamline the implementation of user authentication flows (login, registration, profile management) in your application.

Install the package using your preferred package manager:

npm install @loginradius/loginradius-react-sdk

yarn add @loginradius/loginradius-react-sdk

pnpm add @loginradius/loginradius-react-sdk

Set your LoginRadius API key

For your application to securely communicate with the LoginRadius service, you must configure your API key. This key must be stored as an environment variable in a file named .env in your project's root directory.

Create the .env file and add the following variable:

# .env
# Vite requires environment variables to be prefixed with VITE_ to be exposed to the client
VITE_LOGINRADIUS_API_KEY="YOUR_API_KEY_HERE"

Replace "YOUR_API_KEY_HERE" with the actual API key retrieved from your LoginRadius Dashboard.

Add LoginRadiusProvider to your app

In your main.tsx file, import your LoginRadius API key. Adding a check ensures the app won't run without it and also prevents TypeScript errors.

The <LoginRadiusProvider> component serves as the core context provider for the LoginRadius React SDK. It supplies authentication state, user session data, and utility functions to all LoginRadius hooks and components across your application.

Wrap your entire application with <LoginRadiusProvider> at the root level (e.g., main.tsx). You must pass your LoginRadius API key as a prop to the provider for proper initialization.

// src/main.tsx
import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.tsx";
import { LoginRadiusProvider } from "@loginradius/loginradius-react-sdk";

// Import your API Key
const API_KEY = import.meta.env.VITE_LOGINRADIUS_API_KEY;

if (!API_KEY) {
  throw new Error("Add your LOGINRADIUS_API_KEY to the .env file");
}

const loginRadiusOptions = {
  apiKey: API_KEY,
};

createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <LoginRadiusProvider options={loginRadiusOptions}>
      <App />
    </LoginRadiusProvider>
  </StrictMode>,
);

Create a header with LoginRadius components

The LoginRadius React SDK provides prebuilt authentication flow components that control which content is visible to signed-in and signed-out users.

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

export default function App() {
  return (
    <header>
      {/* Combined Login + Registration Flow */}
      <Auth />
    </header>
  );
}

Create your first user

After integrating LoginRadius into your React application, run your project and create your first user.

Run your project:

npm run dev

yarn dev

pnpm dev

Access your app:

Once the development server is running, open your browser and visit:

http://localhost:5173

useLRAuth()

The useLRAuth() hook provides authentication state and helper methods for managing user sessions.

Reference

Example

// src/UserProfile.tsx
import { useNavigate } from "react-router-dom";
import { useLRAuth } from "@loginradius/loginradius-react-sdk";

const UserProfile: React.FC = () => {
  const [user, setUser] = useState<any>(null);
  const { getUser, isAuthenticated, logout } = useLRAuth();
  const navigate = useNavigate();

  // Redirect to login if user is not authenticated
  useEffect(() => {
    if (!isAuthenticated) navigate("/");
  }, [isAuthenticated, navigate]);

  // Fetch the logged-in user's profile
  useEffect(() => {
    getUser().then(setUser);
  }, [getUser]);

  // Handle logout
  const handleLogout = () => {
    logout();
    navigate("/");
  };

  if (!user) return <div>Loading...</div>;

  return (
    <div>
      <h2>User Profile</h2>
      <p>
        <strong>Name:</strong> {user.Fullname || "User"}
      </p>
      <p>
        <strong>Email:</strong> {user.Email?.[0]?.Value || "N/A"}
      </p>
      <p>
        <strong>Phone:</strong> {user.Phoneid || "N/A"}
      </p>
      <button onClick={handleLogout}>Logout</button>
    </div>
  );
};

export default UserProfile;

Provider Configuration

The <LoginRadiusProvider> component must wrap your application at the root level. All hooks and components require this provider.

Props

When to Use

• You're building a React SPA and want auth components without managing the SDK lifecycle
• You need route guards or auth state via hooks
• You're migrating from a plain JS integration and want React-native patterns |

Notes

• All components and hooks must be rendered inside <LoginRadiusProvider>.
• For SSR frameworks (Next.js, Remix), render auth components only on the client side using dynamic imports or 'use client' directives.
• All SDK options from the V3 JS SDK overview are supported via the options prop on the provider.

Related Resources

• V3 JS SDK Overview
• Components
• Localization
• JavaScript Hooks