Usage

Use the useAuther hook to access auth state and actions from any component inside the provider.

useAuther hook

Call useAuther() in any component wrapped by <AutherProvider>.

tsx

import { useAuther } from '@auther-sdk/react';

function Navbar() {
  const { user, ready, login, signup, logout } = useAuther();

  if (!ready) return null; // still resolving session

  return user ? (
    <div>
      <span>{user.email}</span>
      <button onClick={logout}>Log out</button>
    </div>
  ) : (
    <div>
      <button onClick={login}>Log in</button>
      <button onClick={signup}>Sign up</button>
    </div>
  );
}

Return values

typescript

interface AutherContextValue {
  user:   AuthUser | null;  // current user, or null
  ready:  boolean;          // true once session is resolved
  login:  () => void;       // open login modal
  signup: () => void;       // open signup modal
  logout: () => void;       // sign out and clear session
}

interface AuthUser {
  id: string;
  email: string;
  expiresAt: number;        // epoch ms — access token expiry
  refreshExpiresAt: number; // epoch ms — refresh token expiry
}

Protecting pages

Use ready and user to gate access to authenticated pages.

tsx

'use client';

import { useAuther } from '@auther-sdk/react';

export default function DashboardPage() {
  const { user, ready, login } = useAuther();

  if (!ready) return <p>Loading...</p>;

  if (!user) {
    return (
      <div>
        <p>You need to sign in to access the dashboard.</p>
        <button onClick={login}>Sign in</button>
      </div>
    );
  }

  return <h1>Welcome, {user.email}</h1>;
}

Session management

The provider handles token refresh automatically:

Access tokens refresh 60 seconds before expiry
When the user returns to a suspended browser tab, tokens are checked immediately
Concurrent refresh calls are deduplicated — only one network request fires
Sessions stay alive silently for up to 30 days

Zero config

You never need to manage tokens, call refresh, or handle expiry. The provider handles the entire lifecycle. Your UI just reads user and ready.