useAuth

Hook for accessing authentication state and methods

React hook to access authentication state and methods when using AuthProvider. Provides access to the current authentication state and functions to login, logout, and check auth status.

Signature

const useAuth: () => {
  error: string | null;
  isAuthenticated: boolean;
  isReady: boolean;
  login: () => Promise<void>;
  logout: () => Promise<void>;
  checkAuthStatus: () => Promise<AuthState>;
}

Returns

error · string | null

Error message if authentication failed, null otherwise

isAuthenticated · boolean

Whether the user is currently authenticated

isReady · boolean

Whether the initial authentication check has completed. Check this before rendering authenticated content to avoid flashing unauthenticated state.

login · () => Promise<void>

Initiates the login process. Redirects the user to the Tailor Platform authentication page.

logout · () => Promise<void>

Logs out the current user. Clears authentication tokens and user session.

checkAuthStatus · () => Promise<AuthState>

Checks the current authentication status. Makes a network request to verify auth status and attempts to refresh tokens internally if they are expired.

Usage

Basic Authentication Flow

import { useAuth } from "@tailor-platform/app-shell";

function MyComponent() {
  const { isAuthenticated, isReady, login, logout } = useAuth();

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

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

  return (
    <div>
      <p>You are logged in!</p>
      <button onClick={logout}>Log Out</button>
    </div>
  );
}

Protected Content

import { useAuth } from "@tailor-platform/app-shell";

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

  if (!isReady) {
    return <LoadingSpinner />;
  }

  if (!isAuthenticated) {
    return (
      <div>
        <p>You need to be logged in to view this page</p>
        <button onClick={login}>Log In</button>
      </div>
    );
  }

  return (
    <div>
      <h1>Protected Content</h1>
      <p>This is only visible to authenticated users</p>
    </div>
  );
}

Handling Authentication Errors

import { useAuth } from "@tailor-platform/app-shell";

function LoginButton() {
  const { error, isAuthenticated, login } = useAuth();

  if (isAuthenticated) {
    return null;
  }

  return (
    <div>
      {error && (
        <div className="error">
          Authentication failed: {error}
        </div>
      )}
      <button onClick={login}>Log In</button>
    </div>
  );
}

Manual Auth Status Check

import { useAuth } from "@tailor-platform/app-shell";

function RefreshAuthButton() {
  const { checkAuthStatus } = useAuth();
  const [checking, setChecking] = useState(false);

  const handleRefresh = async () => {
    setChecking(true);
    try {
      const state = await checkAuthStatus();
      console.log("Auth state:", state);
    } catch (error) {
      console.error("Failed to check auth:", error);
    } finally {
      setChecking(false);
    }
  };

  return (
    <button onClick={handleRefresh} disabled={checking}>
      {checking ? "Checking..." : "Refresh Auth Status"}
    </button>
  );
}

Prerequisites

This hook must be used within an AuthProvider component:

import { createAuthClient, AuthProvider } from "@tailor-platform/app-shell";

const authClient = createAuthClient({
  clientId: "your-client-id",
  appUri: "https://xyz.erp.dev",
});

function App() {
  return (
    <AuthProvider client={authClient}>
      <YourAppComponents />
    </AuthProvider>
  );
}

If you use useAuth outside of an AuthProvider, it will throw an error: “useAuth/useAuthSuspense must be used within an AuthProvider”

Related

• Authentication - Complete authentication setup guide
• AuthProvider - Authentication provider component
• createAuthClient() - Create authentication client
• useAuthSuspense() - Suspense-compatible authentication hook