useAuth

The useAuth hook is a convenience React hook attached to the auth client that provides simplified access to authentication state and actions. It's ideal for quick authentication checks and simple use cases.

This hook is accessed via authClient.useAuth() and provides a streamlined interface compared to useUserinfo.

Return Values

The hook returns an object with the following properties:

user

type: User | null

The current user information object. null if not authenticated.

isAuthenticated

type: boolean

Whether the user is currently authenticated.

isPending

type: boolean

Indicates whether the initial authentication state check is in progress.

signIn

type: (auth: { authMode: AuthMode; callbackUrl: string }) => Promise<Token | null>

Function to initiate sign in flow.

signOut

type: (redirectUri?: string) => void

Function to sign out the user.

Usage

Basic Authentication Check

import { authClient } from "@/auth";

function App() {
  const { user, isAuthenticated, isPending } = authClient.useAuth();

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

  if (!isAuthenticated) {
    return <div>Please sign in</div>;
  }

  return <div>Welcome, {user?.name}!</div>;
}

import { authClient } from "@/auth";
import { AuthMode } from "@vuer-ai/vuer-auth-client";

function AuthButton() {
  const { isAuthenticated, user, signIn, signOut } = authClient.useAuth();

  if (isAuthenticated) {
    return (
      <div>
        <span>Signed in as {user?.name}</span>
        <button onClick={() => signOut()}>Sign Out</button>
      </div>
    );
  }

  return (
    <button
      onClick={() => signIn({
        authMode: AuthMode.Popup,
        callbackUrl: "/dashboard"
      })}
    >
      Sign In
    </button>
  );
}

Protected Route Pattern

import { authClient } from "@/auth";
import { Navigate } from "react-router-dom";

function ProtectedRoute({ children }) {
  const { isAuthenticated, isPending } = authClient.useAuth();

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

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

  return children;
}

// Usage
function App() {
  return (
    <Routes>
      <Route path="/login" element={<LoginPage />} />
      <Route
        path="/dashboard"
        element={
          <ProtectedRoute>
            <Dashboard />
          </ProtectedRoute>
        }
      />
    </Routes>
  );
}

Complete Authentication Flow

import { authClient } from "@/auth";
import { AuthMode } from "@vuer-ai/vuer-auth-client";
import { useState } from "react";

function LoginPage() {
  const { signIn, isPending } = authClient.useAuth();
  const [error, setError] = useState<string | null>(null);

  const handleLogin = async () => {
    try {
      setError(null);
      const token = await signIn({
        authMode: AuthMode.Popup,
        callbackUrl: "/dashboard",
      });

      if (!token) {
        setError("Sign in was cancelled or failed");
      }
    } catch (err) {
      setError(err instanceof Error ? err.message : "Unknown error");
    }
  };

  return (
    <div>
      <button onClick={handleLogin} disabled={isPending}>
        {isPending ? "Signing in..." : "Sign In"}
      </button>
      {error && <div className="error">{error}</div>}
    </div>
  );
}

Comparison with useUserinfo

Feature	useAuth	useUserinfo
User data	✓	✓
Authentication status	✓	✗
Loading state	✓	✓
Error handling	✗	✓
Refetch capability	✗	✓
signIn method	✓	✗
signOut method	✓	✗
Best for	Simple auth checks	Detailed user info management

When to Use

Use useAuth when:

You need quick authentication state checks
You want built-in signIn/signOut methods
You're building login/logout buttons
You need a simple isAuthenticated flag

Use useUserinfo when:

You need detailed error handling
You want manual refetch capability
You need both isPending and isRefetching states
You want to disable auto-fetch on mount