useAuth()

Main authentication hook for client components. Provides authentication state and methods.

Overview

The useAuth() hook provides access to authentication state including isAuthenticated, isLoading, user, and error, along with methods like signIn(), signOut(), and refreshSession() for controlling the authentication flow in client components.

Basic Usage

'use client';
import { useAuth } from 'authsafe-nextjs';

export default function Dashboard() {
  const { isAuthenticated, user, signIn, signOut } = useAuth();

  if (!isAuthenticated) {
    return <button onClick={() => signIn()}>Sign In</button>;
  }

  return (
    <div>
      <p>Welcome, {user?.name}</p>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  );
}

Best Practices

Always handle the isLoading state to avoid flickering
Use signIn with a returnTo option to redirect users back after authentication
Combine with Middleware for server-side route protection

useAuth()

Main authentication hook for client components. Provides authentication state and methods.

Overview

Basic Usage

'use client';
import { useAuth } from 'authsafe-nextjs';

export default function Dashboard() {
  const { isAuthenticated, user, signIn, signOut } = useAuth();

  if (!isAuthenticated) {
    return <button onClick={() => signIn()}>Sign In</button>;
  }

  return (
    <div>
      <p>Welcome, {user?.name}</p>
      <button onClick={() => signOut()}>Sign Out</button>
    </div>
  );
}

Best Practices

Always handle the isLoading state to avoid flickering
Use signIn with a returnTo option to redirect users back after authentication
Combine with Middleware for server-side route protection