useAuth()

A React hook that provides access to the current authentication state and user information. This is the primary hook for checking if a user is logged in and accessing their profile data.

Basic Usage

import { useAuth } from 'authsafe-react';

function UserProfile() {
  const { user, isAuthenticated, isLoading } = useAuth();

  if (isLoading) return <div>Loading...</div>;
  if (!isAuthenticated) return <div>Please log in</div>;

  return (
    <div>
      <h2>Welcome, {user?.name}!</h2>
      <p>Email: {user?.email}</p>
    </div>
  );
}

Return Values

Property	Type	Description
`user`	`User \| null`	The authenticated user object, or null if not authenticated
`isAuthenticated`	`boolean`	True if the user is currently authenticated
`isLoading`	`boolean`	True while authentication state is being determined
`error`	`Error \| null`	Any error that occurred during authentication

User Object Properties

Property	Type	Description
`sub`	`string`	Unique identifier for the user (subject claim)
`name`	`string`	User's full name
`email`	`string`	User's email address
`picture`	`string \| undefined`	URL to user's profile picture
`email_verified`	`boolean \| undefined`	Whether the user's email is verified

Protecting Routes

Use useAuth to create protected routes that require authentication:

import { useAuth } from 'authsafe-react';
import { Navigate } from 'react-router-dom';

function ProtectedPage() {
  const { isAuthenticated, isLoading } = useAuth();

  if (isLoading) {
    return <div>Loading...</div>;
  }

  if (!isAuthenticated) {
    return <Navigate to="/login" />;
  }

  return (
    <div>
      <h1>Protected Content</h1>
      <p>Only authenticated users can see this.</p>
    </div>
  );
}

Complete Example

import { useAuth } from 'authsafe-react';

function Dashboard() {
  const { user, isAuthenticated, isLoading, error } = useAuth();

  if (error) {
    return <div>Authentication error: {error.message}</div>;
  }

  if (isLoading) {
    return <div>Loading user data...</div>;
  }

  if (!isAuthenticated) {
    return (
      <div>
        <h2>Please log in to continue</h2>
        <p>You need to be authenticated to access this page.</p>
      </div>
    );
  }

  return (
    <div>
      <h1>Dashboard</h1>
      <div>
        <img src={user.picture} alt={user.name} />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
        <p>User ID: {user.sub}</p>
      </div>
    </div>
  );
}

Type Definitions

User Type

interface User {
  sub: string;           // Unique user identifier
  name: string;          // User's full name
  email: string;         // User's email address
  picture?: string;      // Profile picture URL
  email_verified?: boolean;  // Email verification status
  [key: string]: any;    // Additional claims from ID token
}

Hook Return Type

interface UseAuthReturn {
  user: User | null;
  isAuthenticated: boolean;
  isLoading: boolean;
  error: Error | null;
}

Best Practices

Always check isLoading before rendering content based on authentication state
Use isAuthenticated to conditionally render UI elements
Handle the error state to provide feedback to users
Never assume user is not null without checking isAuthenticated first
Use this hook in protected routes and components