@startsimpli/auth 0.4.7 → 0.4.9

package/src/client/functions.ts

@@ -2,11 +2,16 @@
  * Functional auth API for Django backend
  *
  * Stateless functions for authentication flows: sign in, register, OAuth, token refresh, etc.
- * Uses fetch (browser/Node) and getCsrfToken from shared utils.
- * No Next.js dependency.
+ * Uses fetch (browser/Node). No Next.js dependency.
+ *
+ * CSRF note: the Django auth endpoints (signin, register, token/refresh, logout,
+ * OAuth) are all @csrf_exempt or JWT-authenticated. The frontend does not send
+ * X-CSRFToken headers and does not fetch /auth/csrf/ — any CSRF plumbing here
+ * would be dead weight (and previously caused refresh to fail whenever the CSRF
+ * endpoint was flaky).
  */
 
-import { getCsrfToken, deleteCookie } from '../utils/cookies';
+import { deleteCookie } from '../utils/cookies';
 import { decodeToken } from '../utils/token';
 
 // --- Types ---
@@ -28,10 +33,27 @@ export interface AuthUser {
 export type OnSessionExpiredCallback = () => void;
 
 let _onSessionExpired: OnSessionExpiredCallback | null = null;
+let _sessionExpiredFiredAt = 0;
+const SESSION_EXPIRED_COOLDOWN_MS = 5000;
 
 /** Register a callback for unrecoverable 401s (typically set by AuthProvider). */
 export function setOnSessionExpired(cb: OnSessionExpiredCallback | null): void {
   _onSessionExpired = cb;
+  if (cb !== null) _sessionExpiredFiredAt = 0;
+}
+
+/**
+ * Fire the registered session-expired callback at most once per cooldown window.
+ * Exposed so non-authFetch callers (e.g. the @startsimpli/api FetchWrapper) can
+ * route 401-after-refresh through the same sink that authFetch uses, instead of
+ * each caller wiring up its own redirect.
+ */
+export function notifySessionExpired(): void {
+  if (!_onSessionExpired) return;
+  const now = Date.now();
+  if (now - _sessionExpiredFiredAt < SESSION_EXPIRED_COOLDOWN_MS) return;
+  _sessionExpiredFiredAt = now;
+  _onSessionExpired();
 }
 
 // --- Endpoint paths (Django backend defaults) ---
@@ -91,36 +113,40 @@ const REMEMBER_ME_KEY = 'auth_remember_me';
 
 let _memToken: string | null = null;
 
-function _storageAvailable(type: 'sessionStorage' | 'localStorage'): boolean {
+// Resolve storage via globalThis so tests that stub the storage globals
+// (vi.stubGlobal('localStorage', ...)) see the stub, and non-browser envs
+// safely return null.
+function _resolveStorage(type: 'sessionStorage' | 'localStorage'): Storage | null {
   try {
-    return typeof window !== 'undefined' && !!window[type];
+    const s = (globalThis as unknown as Record<string, Storage | undefined>)[type];
+    return s && typeof s.getItem === 'function' ? s : null;
   } catch {
-    return false;
+    return null;
   }
 }
 
 function _isRememberMe(): boolean {
-  if (_storageAvailable('localStorage')) {
-    return localStorage.getItem(REMEMBER_ME_KEY) === '1';
-  }
-  return false;
+  const ls = _resolveStorage('localStorage');
+  return ls ? ls.getItem(REMEMBER_ME_KEY) === '1' : false;
 }
 
 /** Enable/disable persistent token storage across browser sessions. */
 export function setRememberMe(enabled: boolean): void {
-  if (_storageAvailable('localStorage')) {
-    if (enabled) {
-      localStorage.setItem(REMEMBER_ME_KEY, '1');
-    } else {
-      localStorage.removeItem(REMEMBER_ME_KEY);
-    }
+  const ls = _resolveStorage('localStorage');
+  if (!ls) return;
+  if (enabled) {
+    ls.setItem(REMEMBER_ME_KEY, '1');
+  } else {
+    ls.removeItem(REMEMBER_ME_KEY);
   }
 }
 
 function _getStorage(): Storage | null {
-  if (_isRememberMe() && _storageAvailable('localStorage')) return localStorage;
-  if (_storageAvailable('sessionStorage')) return sessionStorage;
-  return null;
+  if (_isRememberMe()) {
+    const ls = _resolveStorage('localStorage');
+    if (ls) return ls;
+  }
+  return _resolveStorage('sessionStorage');
 }
 
 export function getAccessToken(): string | null {
@@ -135,8 +161,8 @@ export function setAccessToken(token: string | null): void {
     if (token === null) {
       storage.removeItem(TOKEN_STORAGE_KEY);
       // Also clear from the other storage in case rememberMe was toggled
-      if (_storageAvailable('sessionStorage')) sessionStorage.removeItem(TOKEN_STORAGE_KEY);
-      if (_storageAvailable('localStorage')) localStorage.removeItem(TOKEN_STORAGE_KEY);
+      _resolveStorage('sessionStorage')?.removeItem(TOKEN_STORAGE_KEY);
+      _resolveStorage('localStorage')?.removeItem(TOKEN_STORAGE_KEY);
       // Clear ALL auth cookies so middleware doesn't redirect back
       // (prevents infinite loop when auth state is corrupted)
       _clearAllAuthCookies();
@@ -184,14 +210,55 @@ function _syncAuthCookie(token: string | null): void {
 
 const AUTH_TIMEOUT_MS = 15_000;
 
-/** Extract a human-readable message from a Django REST Framework error response body. */
-function extractApiError(d: Record<string, unknown>, fallback: string): string {
+/**
+ * Extract a human-readable message from a Django REST Framework error response body.
+ *
+ * Handles the shapes we've seen in practice:
+ *   { detail: "..." }                                 → the string
+ *   { detail: ["...", "..."] }                        → first string
+ *   { detail: { token: ["Invalid..."] } }             → first nested string
+ *   { email: ["already exists"] }                     → first field-level string
+ *   { non_field_errors: ["..."] }                     → first field-level string
+ *   { error: "CODE", detail: { field: ["..."] } }     → first nested string
+ *
+ * @internal Shared with AuthClient; still considered implementation detail
+ * of the auth package. Do not rely on from outside `@startsimpli/auth`.
+ */
+export function extractApiError(d: Record<string, unknown>, fallback: string): string {
+  const pluck = (val: unknown): string | null => {
+    if (typeof val === 'string') return val
+    if (Array.isArray(val) && val.length > 0) {
+      for (const item of val) {
+        const s = pluck(item)
+        if (s) return s
+      }
+    }
+    if (val && typeof val === 'object') {
+      for (const v of Object.values(val as Record<string, unknown>)) {
+        const s = pluck(v)
+        if (s) return s
+      }
+    }
+    return null
+  }
+
   // Standard DRF: { detail: "..." }
-  if (typeof d.detail === 'string') return d.detail
+  const fromDetail = pluck(d.detail)
+  if (fromDetail) return fromDetail
+  // Some backend shapes use `error` as the human-readable message (e.g.
+  // our Django auth errors: { "error": "No active account...", "code": "unauthorized" }).
+  // Prefer this over field-level probing so we don't accidentally return a
+  // code like "unauthorized" from a sibling field.
+  const fromError = pluck(d.error)
+  if (fromError) return fromError
   // Field-level: { email: ["already exists"] } or { non_field_errors: ["..."] }
-  for (const val of Object.values(d)) {
-    if (typeof val === 'string') return val
-    if (Array.isArray(val) && val.length > 0 && typeof val[0] === 'string') return val[0]
+  // Skip known meta/code fields so `{ code: "unauthorized" }` doesn't leak
+  // an internal identifier as a user-facing message.
+  const META_KEYS = new Set(['detail', 'error', 'code', 'statusCode', 'status', 'timestamp'])
+  for (const [key, val] of Object.entries(d)) {
+    if (META_KEYS.has(key)) continue
+    const s = pluck(val)
+    if (s) return s
   }
   return fallback
 }
@@ -323,8 +390,7 @@ export async function requestPasswordReset(email: string): Promise<void> {
 
   if (!response.ok) {
     const data = await response.json().catch(() => ({}));
-    const d = data as Record<string, unknown>;
-    const message = (d?.detail || d?.error || 'Failed to send reset link') as string;
+    const message = extractApiError(data as Record<string, unknown>, 'Failed to send reset link');
     throw new Error(message);
   }
 }
@@ -348,8 +414,7 @@ export async function resetPassword(payload: {
 
   if (!response.ok) {
     const data = await response.json().catch(() => ({}));
-    const d = data as Record<string, unknown>;
-    const message = (d?.detail || d?.error || 'Failed to reset password') as string;
+    const message = extractApiError(data as Record<string, unknown>, 'Failed to reset password');
     throw new Error(message);
   }
 }
@@ -363,8 +428,7 @@ export async function verifyEmail(token: string): Promise<void> {
 
   if (!response.ok) {
     const data = await response.json().catch(() => ({}));
-    const d = data as Record<string, unknown>;
-    const message = (d?.detail || d?.error || 'Failed to verify email') as string;
+    const message = extractApiError(data as Record<string, unknown>, 'Failed to verify email');
     throw new Error(message);
   }
 }
@@ -431,50 +495,60 @@ export async function completeGoogleOAuth(code: string, state: string) {
   return parsed;
 }
 
-async function fetchCsrfToken(): Promise<void> {
-  if (getCsrfToken()) return;
-  const maxAttempts = 3;
-  let lastError: unknown;
-  for (let attempt = 0; attempt < maxAttempts; attempt++) {
-    try {
-      await fetch(resolveAuthUrl(`${API_BASE}/auth/csrf/`), {
-        credentials: 'include',
-        cache: 'no-store',
-      });
-      if (getCsrfToken()) return;
-    } catch (err) {
-      lastError = err;
-    }
-    if (attempt < maxAttempts - 1) {
-      await new Promise(r => setTimeout(r, 500));
-    }
+
+/**
+ * Thrown by refreshAccessToken when the backend is transiently unavailable
+ * (5xx, network error). Distinct from "session is dead" (401/403), which
+ * returns null. Callers should NOT log the user out on this error — they
+ * should surface the original request failure and let the user retry.
+ */
+export class TransientRefreshError extends Error {
+  readonly status: number | null;
+  constructor(status: number | null, message: string) {
+    super(message);
+    this.name = 'TransientRefreshError';
+    this.status = status;
   }
-  throw new Error(
-    `[auth] CSRF token fetch failed after ${maxAttempts} attempts: ${lastError instanceof Error ? lastError.message : String(lastError ?? 'no token set')}`
-  );
 }
 
 export async function refreshAccessToken(): Promise<string | null> {
-  await fetchCsrfToken();
-  const csrfToken = getCsrfToken();
-  if (!csrfToken) {
-    console.warn('[auth] No CSRF token available — cannot refresh. Clearing session.');
+  let response: Response;
+  try {
+    response = await fetchWithTimeout(resolveAuthUrl(AUTH_PATHS.TOKEN_REFRESH), {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      credentials: 'include',
+    });
+  } catch (err) {
+    // Network error / timeout — backend unreachable. Do NOT clear the token;
+    // keep the user logged in and let them retry.
+    throw new TransientRefreshError(
+      null,
+      `refresh fetch failed: ${err instanceof Error ? err.message : String(err)}`
+    );
+  }
+
+  // 401/403 = session explicitly dead. 400 = malformed request (also dead).
+  // 5xx = backend flake; don't clear session.
+  if (response.status === 401 || response.status === 403 || response.status === 400) {
     setAccessToken(null);
     return null;
   }
 
-  const response = await fetchWithTimeout(resolveAuthUrl(AUTH_PATHS.TOKEN_REFRESH), {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      'X-CSRFToken': csrfToken,
-    },
-    credentials: 'include',
-  });
+  if (response.status >= 500) {
+    throw new TransientRefreshError(
+      response.status,
+      `refresh backend error: ${response.status} ${response.statusText}`
+    );
+  }
 
   const data = await response.json().catch(() => ({}));
 
   if (!response.ok) {
+    // Unexpected non-ok that's neither auth-fail nor 5xx. Treat conservatively
+    // as session-dead (keeps behavior safe for middle of the road 4xxs).
     setAccessToken(null);
     return null;
   }
@@ -512,7 +586,6 @@ export async function getMe(): Promise<AuthUser | null> {
 }
 
 export async function signOut(): Promise<void> {
-  const csrfToken = getCsrfToken();
   const token = getAccessToken();
 
   try {
@@ -520,7 +593,6 @@ export async function signOut(): Promise<void> {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        ...(csrfToken ? { 'X-CSRFToken': csrfToken } : {}),
         ...(token ? { Authorization: `Bearer ${token}` } : {}),
       },
       credentials: 'include',
@@ -583,7 +655,7 @@ export async function authFetch(
     if (!refreshed || retryResponse.status === 401) {
       // Refresh failed or retried request still unauthorized — session is dead.
       setAccessToken(null);
-      _onSessionExpired?.();
+      notifySessionExpired();
     }
 
     return retryResponse;

package/src/client/use-auth.ts

@@ -17,6 +17,17 @@ export interface UseAuthReturn {
   logout: () => Promise<void>;
   refreshUser: () => Promise<void>;
   getAccessToken: () => Promise<string | null>;
+  register: (payload: {
+    email: string;
+    password: string;
+    passwordConfirm: string;
+    name?: string;
+    firstName?: string;
+    lastName?: string;
+  }) => Promise<void>;
+  signInWithGoogle: (redirectTo?: string) => Promise<string>;
+  completeGoogleCallback: (code: string, state: string) => Promise<void>;
+  hydrateSession: (session: Session) => void;
 }
 
 /**
@@ -31,6 +42,10 @@ export function useAuth(): UseAuthReturn {
     logout,
     refreshUser,
     getAccessToken,
+    register,
+    signInWithGoogle,
+    completeGoogleCallback,
+    hydrateSession,
   } = useAuthContext();
 
   return {
@@ -42,6 +57,10 @@ export function useAuth(): UseAuthReturn {
     logout,
     refreshUser,
     getAccessToken,
+    register,
+    signInWithGoogle,
+    completeGoogleCallback,
+    hydrateSession,
   };
 }
 

package/src/server/middleware.ts

@@ -1,19 +1,23 @@
 /**
  * Next.js middleware helpers for authentication.
  *
- * Checks multiple cookie sources in priority order:
- *   1. `auth_session`  – non-HttpOnly cookie set by the client after login.
- *      Works reliably on Vercel where rewrites don't pass through Set-Cookie.
- *   2. `refresh_token` – HttpOnly cookie set by Django. Works locally where
- *      the rewrite proxy forwards Set-Cookie headers.
- *   3. `access_token`  – legacy/alternative cookie name.
+ * Checks client-managed access-token cookies:
+ *   1. `auth_session`  – non-HttpOnly cookie the client writes after login.
+ *   2. `access_token`  – legacy/alternative cookie name for the same.
+ *
+ * We intentionally do NOT treat the HttpOnly `refresh_token` cookie as
+ * proof of authentication. The refresh token survives client-side logout
+ * (Chromium can drop server-issued delete-cookie responses when attributes
+ * diverge), which would let a "logged out" user bounce back into protected
+ * routes via the middleware. Access tokens are short-lived and kept in
+ * sync with the in-memory session, so they're the correct signal here.
  */
 
 import { NextRequest, NextResponse } from 'next/server';
 import { isTokenExpired } from '../utils';
 
 /** Cookie names checked for a valid JWT, in priority order. */
-const AUTH_COOKIE_NAMES = ['auth_session', 'refresh_token', 'access_token'] as const;
+const AUTH_COOKIE_NAMES = ['auth_session', 'access_token'] as const;
 
 /** Find the first valid (non-expired) JWT from known auth cookies. */
 function findValidToken(request: NextRequest): string | null {

package/src/types/index.ts

@@ -45,6 +45,12 @@ export interface AuthUser {
   isEmailVerified: boolean;
   createdAt: string;
   updatedAt: string;
+  // Optional fields populated when the backend includes them. These are
+  // opt-in on the app side so consumers that don't need them don't have to
+  // deal with undefined narrowing.
+  isStaff?: boolean;
+  isActive?: boolean;
+  name?: string | null;
   // Company/team context (if applicable)
   companies?: Array<{
     id: string;