useLRAuth()

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

useLRAuth()

Provides authentication state and helper methods:

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

Authentication state

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}`
loading	boolean	true while the SDK initializes or a PKCE redirect completes	`{loading && <Spinner />}`
error	Error | null	SDK initialization error, if any	`{error && <p>{error.message}</p>}`

User profile

Property / Method	Type	Description	Example
user	object | null	Cached user profile. Populated on first getUser() call or after login. No API call on read.	`{user?.Fullname}`
getUser()	() => Promise<object | null>	Fetches the logged-in user's profile from the API and updates the cache	`getUser().then(console.log)`
refreshUser()	() => Promise<object | null>	Forces a re-fetch of the user profile from the API, bypassing the cache	`const fresh = await refreshUser()`
logout()	() => void	Logs out the current user	`<button onClick={logout}>Logout</button>`

Token and social login helpers

Property / Method	Type	Description	Example
getSocialLoginURL(provider, callbackUrl?)	(string, string?) => string	Returns the social login redirect URL for the given provider. The consumer decides what to do with it.	`window.location.href = getSocialLoginURL('google')`
getIdTokenClaims(token?)	(string?) => object | null	Synchronous JWT decode of the current access token (or the token you pass). Returns the payload or null.	`const claims = getIdTokenClaims()`
handleRedirectCallback(url?)	(string?) => Promise<ApiResponse>	Handles an OAuth or PKCE redirect. Parses ?code= and ?state= from the URL and exchanges the authorization code for tokens.	`await handleRedirectCallback()`
getOrganizationToken(orgId?)	(string?) => string | null	Returns the access token for a specific organization. Returns null if the org context does not match.	`const orgToken = getOrganizationToken('org_123')`

Basic example

The following example uses the cached user property to display a profile page without an extra API call on mount:

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

const UserProfile: React.FC = () => {
  const navigate = useNavigate();
  const { user, loading, error, isAuthenticated, logout } = useLRAuth();

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  if (!isAuthenticated) {
    navigate("/");
    return null;
  }

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

  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;

tip

Use user for read-only display (no API call). Call refreshUser() when you need the latest data from the API, for example after the user updates their profile.

Social login redirect

Use getSocialLoginURL() to build a social login URL, then redirect the user:

const { getSocialLoginURL } = useLRAuth();

const handleGoogleLogin = () => {
  const url = getSocialLoginURL("google");
  window.location.href = url;
};

Decode token claims

Use getIdTokenClaims() to synchronously decode the current access token without making an API call:

const { getIdTokenClaims } = useLRAuth();

const handleShowClaims = () => {
  const claims = getIdTokenClaims();
  console.log(claims); // { sub: "...", email: "...", ... }
};

Full integration example

For a complete profile-page integration using useLRAuth() end-to-end: auth-gated routing, cached user display, token claims, social login redirect, and logout, see the profile.tsx reference implementation in the loginradius-demos repository.

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.