Quickstart — React SPA - Authaz

Quickstart — React SPA - Authaz - Docs

/api/auth/callback

/api/auth/logout

/api/auth/me

/api/auth/refresh

// src/main.tsx
import React from "react";
import ReactDOM from "react-dom/client";
import { AuthazProvider } from "@authaz/react";
import App from "./App";
 
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <AuthazProvider basePath="/api/auth" autoRefresh>
      <App />
    </AuthazProvider>
  </React.StrictMode>
);

// src/components/Navbar.tsx
import { useAuthaz } from "@authaz/react";
 
export const Navbar = () => {
  const { isAuthenticated, isLoading, user, login, logout } = useAuthaz();
 
  if (isLoading) return <nav>…</nav>;
 
  return (
    <nav>
      {isAuthenticated ? (
        <>
          <span>{user?.email}</span>
          <button onClick={() => logout()}>Logout</button>
        </>
      ) : (
        <button onClick={() => login()}>Login</button>
      )}
    </nav>
  );
};

import { useUser } from "@authaz/react";
 
export const Profile = () => {
  const user = useUser();
  if (!user) return null;
 
  return (
    <div>
      <h2>{user.name ?? user.email}</h2>
      <p>MFA: {user.mfaEnabled ? "on" : "off"}</p>
      {user.organizations.map((org) => (
        <p key={org.organizationId}>
          {org.organizationId} — {org.accessLevel}
        </p>
      ))}
    </div>
  );
};

type AuthazUser = {
  id: string;
  email: string;
  name: string;
  mfaEnabled: boolean;
  organizations: { organizationId: string; accessLevel: string }[];
  tenantId?: string;
  organizationId?: string;
};

Hook	Use when
`useAuthaz()`	You need everything: user, state, `login`, `logout`, `refresh`.
`useUser()`	Just the user object. Returns `null` until loaded.
`useIsAuthenticated()`	Boolean — render-or-not decisions.
`useIsLoading()`	True while the initial `/me` call is in flight.
`useLogin()` / `useLogout()`	Stable callbacks — handy in event handlers and effects.
`useRequireAuth({ redirectTo? })`	Ensure the user is signed in for this page.
`useRequireUser({ redirectTo? })`	Same, but returns the user object once it resolves.

Quickstart — React SPA

Prerequisites#

Step 1 — Install#

Step 2 — Wrap the app in `AuthazProvider`#

Step 4 — Protect a route#

Step 5 — Read the user#

Hook reference#

Calling Authaz from the frontend#

Next steps#

Prerequisites#

Step 1 — Install#

Step 2 — Wrap the app in AuthazProvider#

Step 3 — Login / logout buttons#

Step 4 — Protect a route#

Step 5 — Read the user#

Hook reference#

Calling Authaz from the frontend#

Next steps#

Step 2 — Wrap the app in `AuthazProvider`#