@haykal/auth-client

Auth domain client package for Haykal applications. Provides type-safe React Query hooks auto-generated from the backend OpenAPI spec, plus high-level hooks for authentication workflows.

Features

• Auto-generated hooks — useAuthControllerLogin, useAuthControllerRegister, etc. via Orval
• High-level useAuth() hook — login, register, logout with automatic token management
• useCurrentUser() hook — fetch and cache the authenticated user profile
• useAuthToken() hook — JWT inspection (decode, expiry check, time remaining)
• MSW mocks — auto-generated mock handlers for testing
• Type-safe errors — generated error types for each endpoint

Setup

import { HaykalClient } from '@haykal/core-client';
import { initMutator } from '@haykal/auth-client';

// 1. Initialize the shared client
const client = HaykalClient.getInstance({ baseURL: '/api' });

// 2. Link auth-client to the shared client
initMutator(client.axios);

Usage

Login

import { useAuth } from '@haykal/auth-client';
import { ApiError } from '@haykal/core-client';

function LoginForm() {
  const { login, isLoggingIn, loginError } = useAuth();

  const handleSubmit = async (email: string, password: string) => {
    try {
      const { user, accessToken } = await login({ email, password });
      navigate('/dashboard');
    } catch (error) {
      if (ApiError.isApiError(error) && error.is('AUTH_INVALID_CREDENTIALS')) {
        showToast('Invalid email or password');
      }
    }
  };
}

Current User

import { useCurrentUser } from '@haykal/auth-client';

function Dashboard() {
  const { user, isAuthenticated, isLoading } = useCurrentUser();

  if (isLoading) return <Spinner />;
  if (!isAuthenticated) return <Navigate to="/login" />;

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

Auth Guard

import { useAuthToken } from '@haykal/auth-client';

function AuthGuard({ children }) {
  const { hasToken, isExpired } = useAuthToken();
  if (!hasToken || isExpired) return <Navigate to="/login" />;
  return children;
}

Regenerating

# Regenerate from the running backend
nx generate auth-client

# Or directly
cd packages/auth/client && npx orval --config ./orval.config.ts

Further Reading

• Client SDK Generation — Orval pipeline, configuration, and troubleshooting
• Admin App Development — Using client hooks in the admin dashboard
• API Reference — Backend endpoints these hooks call