useLRAuth()

The React SDK exposes the useLRAuth() hook for reading authentication state. Call it from any component rendered inside LoginRadiusProvider.

useLRAuth()

Provides authentication state and helper methods:

const { isAuthenticated, accessToken, getUser, logout } = useLRAuth();

Property / Method	Type	Description	Example
isAuthenticated	boolean	Indicates if a user session is active	`{isAuthenticated && <Dashboard />}`
accessToken	string | null	Current access token for the active session	`Authorization: Bearer ${accessToken}`
getUser()	() => Promise<object>	Fetches the logged-in user's profile	`getUser().then(console.log)`
logout()	() => void	Logs out the current user	`<button onClick={logout}>Logout</button>`

Basic example

The following example demonstrates a simple implementation of useLRAuth():

// src/UserProfile.tsx
import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { useLRAuth } from "@loginradius/loginradius-react";

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

  // Redirect to login if the 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;

Full integration example

For a complete profile-page integration using useLRAuth() end-to-end — auth-gated routing, profile fetch, and logout — see the profile.tsx reference implementation in the loginradius-demos repository.

tip

Use useLRAuth() in any component to manage authentication state, display profile info, or trigger logout.

Demo applications

Working demos live in the loginradius-demos repository.

playground

Vite + React 19

Interactive React sandbox for trying flows.

next

Next.js 16 (App Router)

Next.js integration.