Authentication Hooks

Reex API Builder generates a set of authentication hooks to make managing user sessions straightforward. Unless you are using the next-auth strategy which handles authentication internally via its own session management, it is highly recommended to use these hooks for all authentication flows. They are wired to automatically set the required authentication headers on login and clear them on logout.

The hooks are available from api-services/hooks/useAuth.

Available Hooks

• useLogin: Handles login and exposes a setCustomHeaders callback for setting custom request headers on successful authentication (e.g. tenant IDs or API keys your backend requires).
• useLogout: Clears all stored tokens and authentication headers.
• useIsAuthenticated: Returns a boolean indicating whether the current user has an active session. Useful for conditionally enabling queries or protecting UI.

Usage

import { useGetTodosQuery } from "api-services/generated";
import { useIsAuthenticated, useLogin, useLogout } from "api-services/hooks/useAuth";
 
export function Welcome() {
  const { login, setCustomHeaders } = useLogin();
  const { logout } = useLogout();
  const { isAuthenticated } = useIsAuthenticated();
 
  const { data } = useGetTodosQuery({ enabled: isAuthenticated });
 
  return (
    <div>
      <button
        onClick={() =>
          login({ username: "user", password: "user123" }, {
            onSuccess: (res) => {
              // Set custom headers your backend requires after login
              setCustomHeaders({
                "x-test-header": "test-value",
              });
            },
          })
        }
      >
        Login
      </button>
      <button onClick={logout}>Logout</button>
    </div>
  );
}

Note: If your backend does not require custom headers, you can omit the onSuccess callback and setCustomHeaders call entirely — token storage and header injection are handled automatically.