@startsimpli/auth 0.4.8 → 0.4.9

package/src/client/auth-client.ts

@@ -11,6 +11,35 @@ import type {
   AuthUser,
 } from '../types';
 import { isTokenExpired, getTokenExpiresAt, shouldRefreshToken } from '../utils';
+import { extractApiError, setAccessToken as setModuleAccessToken } from './functions';
+import { deleteCookie } from '../utils/cookies';
+
+/**
+ * sessionStorage key set by logout to suppress any subsequent
+ * bootstrapFromCookies from resurrecting a session via a refresh_token
+ * cookie that wasn't successfully deleted on the server side. Cleared on
+ * successful login / register / OAuth completion.
+ */
+const LOGGED_OUT_FLAG = '__ss_logged_out';
+
+function setLoggedOutFlag(): void {
+  try {
+    if (typeof window !== 'undefined') window.sessionStorage.setItem(LOGGED_OUT_FLAG, '1');
+  } catch {}
+}
+function clearLoggedOutFlag(): void {
+  try {
+    if (typeof window !== 'undefined') window.sessionStorage.removeItem(LOGGED_OUT_FLAG);
+  } catch {}
+}
+function hasLoggedOutFlag(): boolean {
+  try {
+    if (typeof window === 'undefined') return false;
+    return window.sessionStorage.getItem(LOGGED_OUT_FLAG) === '1';
+  } catch {
+    return false;
+  }
+}
 
 export class AuthClient {
   private config: Required<AuthConfig>;
@@ -40,8 +69,8 @@ export class AuthClient {
     });
 
     if (!response.ok) {
-      const error = await response.json().catch(() => ({ detail: 'Login failed' }));
-      throw new Error(error.detail || 'Login failed');
+      const data = await response.json().catch(() => ({} as Record<string, unknown>));
+      throw new Error(extractApiError(data as Record<string, unknown>, 'Login failed'));
     }
 
     const data: any = await response.json();
@@ -59,6 +88,11 @@ export class AuthClient {
     };
 
     this.session = tempSession;
+    // Mirror the access token into the module-level storage so any consumer
+    // reading via functions.ts `getAccessToken()` (e.g. @startsimpli/api's
+    // FetchWrapper) sees the same value as useAuth().session.
+    setModuleAccessToken(data.access);
+    clearLoggedOutFlag();
 
     // Fetch user data if not included in login response
     if (!data.user) {
@@ -75,6 +109,177 @@ export class AuthClient {
     return this.session;
   }
 
+  /**
+   * Register a new account and open a session.
+   *
+   * POSTs to /api/v1/auth/register/ with snake_case body fields. If the
+   * backend returns a user in the response, use it directly; otherwise fall
+   * back to /me/ (same pattern as login).
+   */
+  async register(payload: {
+    email: string;
+    password: string;
+    passwordConfirm: string;
+    name?: string;
+    firstName?: string;
+    lastName?: string;
+  }): Promise<Session> {
+    // Derive first/last from `name` if the caller used it.
+    const rawName = payload.name?.trim() ?? '';
+    const [firstFromName, ...rest] = rawName ? rawName.split(/\s+/) : [];
+    const lastFromName = rest.length ? rest.join(' ') : undefined;
+
+    const response = await fetch(`${this.config.apiBaseUrl}/api/v1/auth/register/`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include',
+      body: JSON.stringify({
+        email: payload.email,
+        password: payload.password,
+        password_confirm: payload.passwordConfirm,
+        name: payload.name,
+        first_name: payload.firstName ?? firstFromName ?? undefined,
+        last_name: payload.lastName ?? lastFromName ?? undefined,
+      }),
+    });
+
+    const data = await response.json().catch(() => ({} as Record<string, unknown>));
+
+    if (!response.ok) {
+      throw new Error(extractApiError(data as Record<string, unknown>, 'Registration failed'));
+    }
+
+    return this.sessionFromTokenResponse(data as Record<string, unknown>);
+  }
+
+  /**
+   * Kick off Google OAuth by asking the backend for an authorization URL.
+   *
+   * @param redirectTo optional in-app path the server-side callback should
+   *        route to after exchanging the code. Defaults to the current origin
+   *        + /auth/callback.
+   * @returns the Google authorization URL the caller should redirect to.
+   */
+  async signInWithGoogle(redirectTo?: string): Promise<string> {
+    const defaultRedirect =
+      typeof window !== 'undefined' ? `${window.location.origin}/auth/callback` : '';
+    const redirectUri = redirectTo ?? defaultRedirect;
+
+    const response = await fetch(
+      `${this.config.apiBaseUrl}/api/v1/auth/oauth/google/initiate/`,
+      {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ redirect_uri: redirectUri }),
+      }
+    );
+
+    const data = await response.json().catch(() => ({} as Record<string, unknown>));
+
+    if (!response.ok) {
+      throw new Error(
+        extractApiError(data as Record<string, unknown>, 'Failed to initiate Google OAuth')
+      );
+    }
+
+    const url = (data as { auth_url?: string; authUrl?: string }).auth_url
+      ?? (data as { authUrl?: string }).authUrl;
+    if (!url) {
+      throw new Error('OAuth initiation succeeded but no auth_url was returned');
+    }
+    return url;
+  }
+
+  /**
+   * Complete a Google OAuth callback: exchange the code + state for a session.
+   */
+  async completeGoogleCallback(code: string, state: string): Promise<Session> {
+    const url = new URL(
+      `${this.config.apiBaseUrl}/api/v1/auth/oauth/google/callback/`
+    );
+    url.searchParams.set('code', code);
+    url.searchParams.set('state', state);
+
+    const response = await fetch(url.toString(), {
+      credentials: 'include',
+    });
+
+    const data = await response.json().catch(() => ({} as Record<string, unknown>));
+
+    if (!response.ok) {
+      throw new Error(
+        extractApiError(data as Record<string, unknown>, 'OAuth authentication failed')
+      );
+    }
+
+    return this.sessionFromTokenResponse(data as Record<string, unknown>);
+  }
+
+  /**
+   * Shared session builder for flows that return `{ access, user? }`.
+   *
+   * - Validates the access token and derives expiresAt
+   * - Uses the response user if present, else fetches /me/
+   * - Stores the session and starts the refresh timer
+   */
+  private async sessionFromTokenResponse(data: Record<string, unknown>): Promise<Session> {
+    const accessToken = (data.access ?? data.accessToken) as string | undefined;
+    if (!accessToken) {
+      throw new Error('Auth response missing access token');
+    }
+
+    const expiresAt = getTokenExpiresAt(accessToken);
+    if (!expiresAt) {
+      throw new Error('Invalid token received');
+    }
+
+    // Seed session with whatever user payload the response gave us so
+    // getCurrentUser() (which reads this.session for its auth header) can
+    // run if we need it.
+    const rawUser = data.user as Record<string, unknown> | undefined;
+    let user: AuthUser = rawUser
+      ? {
+          id: (rawUser.id ?? '') as string,
+          email: (rawUser.email ?? '') as string,
+          firstName: (rawUser.first_name ?? rawUser.firstName ?? '') as string,
+          lastName: (rawUser.last_name ?? rawUser.lastName ?? '') as string,
+          isEmailVerified:
+            (rawUser.is_email_verified ?? rawUser.isEmailVerified ?? false) as boolean,
+          createdAt: (rawUser.created_at ?? rawUser.createdAt ?? '') as string,
+          updatedAt: (rawUser.updated_at ?? rawUser.updatedAt ?? '') as string,
+          isStaff: (rawUser.is_staff ?? rawUser.isStaff) as boolean | undefined,
+          isActive: (rawUser.is_active ?? rawUser.isActive) as boolean | undefined,
+          name: (rawUser.full_name ?? rawUser.name ?? null) as string | null,
+        }
+      : {
+          id: '',
+          email: '',
+          firstName: '',
+          lastName: '',
+          isEmailVerified: false,
+          createdAt: '',
+          updatedAt: '',
+        };
+
+    this.session = { user, accessToken, expiresAt };
+    // Keep module-level access-token storage in lockstep (see comment on login).
+    setModuleAccessToken(accessToken);
+    clearLoggedOutFlag();
+
+    if (!rawUser) {
+      try {
+        user = await this.getCurrentUser();
+        this.session.user = user;
+      } catch (error) {
+        console.error('Failed to fetch user data after auth flow:', error);
+      }
+    }
+
+    this.startRefreshTimer();
+    return this.session;
+  }
+
   /**
    * Logout and clear session
    */
@@ -88,7 +293,17 @@ export class AuthClient {
     } catch (error) {
       console.error('Logout error:', error);
     } finally {
+      // Clear client-readable cookies so the Next middleware
+      // (see packages/auth/src/server/middleware.ts) doesn't see a stale
+      // auth_session and bounce the post-logout /auth/signin request back to
+      // /dashboard. HttpOnly refresh_token is cleared by the backend.
+      deleteCookie('auth_session');
+      deleteCookie('access_token');
+      deleteCookie('csrftoken');
       this.clearSession();
+      // Prevent a stale refresh_token cookie from re-authenticating on the
+      // next page load. Cleared on next successful login/register/OAuth.
+      setLoggedOutFlag();
     }
   }
 
@@ -114,16 +329,39 @@ export class AuthClient {
   }
 
   private async performTokenRefresh(): Promise<string> {
-    const response = await fetch(`${this.config.apiBaseUrl}/api/v1/auth/token/refresh/`, {
-      method: 'POST',
-      headers: { 'Content-Type': 'application/json' },
-      credentials: 'include', // Send refresh token cookie
-    });
+    let response: Response;
+    try {
+      response = await fetch(`${this.config.apiBaseUrl}/api/v1/auth/token/refresh/`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include', // Send refresh token cookie
+      });
+    } catch (err) {
+      // Network error / unreachable backend — transient, do NOT clear session.
+      throw new Error(
+        `Token refresh failed transiently: ${err instanceof Error ? err.message : String(err)}`
+      );
+    }
+
+    // 401/403 = session dead. 5xx = backend flake. Only the former should
+    // log the user out; the latter should let them retry.
+    if (response.status === 401 || response.status === 403) {
+      this.clearSession();
+      this.config.onSessionExpired();
+      throw new Error('Token refresh rejected — session expired');
+    }
+
+    if (response.status >= 500) {
+      throw new Error(
+        `Token refresh failed transiently: backend returned ${response.status}`
+      );
+    }
 
     if (!response.ok) {
+      // Other non-ok (400, 404) — treat conservatively as session-dead.
       this.clearSession();
       this.config.onSessionExpired();
-      throw new Error('Token refresh failed');
+      throw new Error(`Token refresh failed: ${response.status}`);
     }
 
     const data: RefreshResponse = await response.json();
@@ -137,6 +375,7 @@ export class AuthClient {
       this.session.accessToken = data.access;
       this.session.expiresAt = expiresAt;
     }
+    setModuleAccessToken(data.access);
 
     this.startRefreshTimer();
     return data.access;
@@ -168,6 +407,9 @@ export class AuthClient {
       isEmailVerified: raw.is_email_verified ?? raw.isEmailVerified ?? false,
       createdAt: raw.created_at || raw.createdAt || '',
       updatedAt: raw.updated_at || raw.updatedAt || '',
+      isStaff: raw.is_staff ?? raw.isStaff,
+      isActive: raw.is_active ?? raw.isActive,
+      name: raw.full_name ?? raw.name ?? null,
     };
 
     if (this.session) {
@@ -177,6 +419,93 @@ export class AuthClient {
     return user;
   }
 
+  /**
+   * Attempt to restore a session on page load / AuthProvider remount.
+   *
+   * New AuthClient instances start with no in-memory session, so a hard
+   * navigation (or a full page reload) loses auth state even when the
+   * refresh_token cookie is still valid. This method:
+   *   1. POSTs /auth/token/refresh/ using the refresh_token cookie the
+   *      browser sends automatically (credentials: include).
+   *   2. If the backend returns a new access token, fetches /me/ to populate
+   *      the user, stores the session, and starts the refresh timer.
+   *   3. Returns the Session, or null if no valid refresh cookie exists.
+   *
+   * Safe to call even when a session is already in memory — it becomes a
+   * no-op pass-through in that case.
+   */
+  async bootstrapFromCookies(): Promise<Session | null> {
+    if (this.session && !isTokenExpired(this.session.accessToken)) {
+      return this.session;
+    }
+
+    // Respect an explicit logout. If the user just logged out in this tab,
+    // don't let a stale refresh_token cookie resurrect the session — even
+    // if Chromium didn't honor the Set-Cookie delete from /auth/logout/.
+    if (hasLoggedOutFlag()) {
+      return null;
+    }
+
+    try {
+      const response = await fetch(
+        `${this.config.apiBaseUrl}/api/v1/auth/token/refresh/`,
+        {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          credentials: 'include',
+        }
+      );
+
+      // 401/403 = no valid refresh cookie / session dead → return null so the
+      // provider settles in the unauthenticated state.
+      // 5xx = backend flake → leave the session untouched; caller should retry.
+      // Keeping the user in isLoading=false / isAuthenticated=false during a
+      // backend outage is better than looping, so fall through to null for
+      // transient failures too — but we never clear any in-memory state the
+      // app already had. (The early-return at the top of this method already
+      // preserved a valid in-memory session.)
+      if (response.status >= 500) {
+        return null;
+      }
+      if (!response.ok) return null;
+
+      const data = (await response.json()) as RefreshResponse;
+      const accessToken = data.access;
+      const expiresAt = getTokenExpiresAt(accessToken);
+      if (!expiresAt) return null;
+
+      // Seed with a placeholder user so getCurrentUser's auth-header builder works.
+      this.session = {
+        user: {
+          id: '',
+          email: '',
+          firstName: '',
+          lastName: '',
+          isEmailVerified: false,
+          createdAt: '',
+          updatedAt: '',
+        },
+        accessToken,
+        expiresAt,
+      };
+      setModuleAccessToken(accessToken);
+
+      try {
+        const user = await this.getCurrentUser();
+        this.session.user = user;
+      } catch (error) {
+        console.error('bootstrapFromCookies: /me/ failed', error);
+        this.clearSession();
+        return null;
+      }
+
+      this.startRefreshTimer();
+      return this.session;
+    } catch {
+      return null;
+    }
+  }
+
   /**
    * Get current session
    */
@@ -199,6 +528,7 @@ export class AuthClient {
    */
   setSession(session: Session): void {
     this.session = session;
+    setModuleAccessToken(session.accessToken);
     this.startRefreshTimer();
   }
 
@@ -260,6 +590,7 @@ export class AuthClient {
    */
   private clearSession(): void {
     this.session = null;
+    setModuleAccessToken(null);
     if (this.refreshTimer) {
       clearInterval(this.refreshTimer);
       this.refreshTimer = null;

package/src/client/auth-context.tsx

@@ -21,6 +21,23 @@ interface AuthContextValue extends AuthState {
   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>;
+  /**
+   * Hydrate the provider with an externally-acquired session. Used by OAuth
+   * callback flows that run the token exchange via a component (OAuthCallback)
+   * and then need to tell AuthProvider about the result so React state and
+   * the refresh timer stay in sync.
+   */
+  hydrateSession: (session: Session) => void;
 }
 
 const AuthContext = createContext<AuthContextValue | undefined>(undefined);
@@ -43,8 +60,14 @@ export function AuthProvider({
     isAuthenticated: !!initialSession,
   }));
 
-  // Initialize session from SSR or check for existing session
+  // Initialize session from SSR or restore from refresh_token cookie.
+  // The bootstrap path matters after a hard navigation (or full reload) —
+  // a brand-new AuthClient instance starts with no in-memory session, so
+  // without this the user bounces to /auth/signin even though their
+  // refresh_token cookie is still valid.
   useEffect(() => {
+    let cancelled = false;
+
     if (initialSession) {
       authClient.setSession(initialSession);
       setState({
@@ -52,15 +75,37 @@ export function AuthProvider({
         isLoading: false,
         isAuthenticated: true,
       });
-    } else {
-      // Try to get session from client
-      const session = authClient.getSession();
+      return;
+    }
+
+    const existing = authClient.getSession();
+    if (existing) {
       setState({
-        session,
+        session: existing,
         isLoading: false,
-        isAuthenticated: !!session,
+        isAuthenticated: true,
       });
+      return;
     }
+
+    authClient
+      .bootstrapFromCookies()
+      .then((session) => {
+        if (cancelled) return;
+        setState({
+          session,
+          isLoading: false,
+          isAuthenticated: !!session,
+        });
+      })
+      .catch(() => {
+        if (cancelled) return;
+        setState({ session: null, isLoading: false, isAuthenticated: false });
+      });
+
+    return () => {
+      cancelled = true;
+    };
   }, [authClient, initialSession]);
 
   // Session expiration handler — covers both AuthClient timer and authFetch 401
@@ -135,12 +180,67 @@ export function AuthProvider({
     return authClient.getAccessToken();
   }, [authClient]);
 
+  const register = useCallback(
+    async (payload: {
+      email: string;
+      password: string;
+      passwordConfirm: string;
+      name?: string;
+      firstName?: string;
+      lastName?: string;
+    }) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const session = await authClient.register(payload);
+        setState({ session, isLoading: false, isAuthenticated: true });
+      } catch (error) {
+        setState((prev) => ({ ...prev, isLoading: false }));
+        throw error;
+      }
+    },
+    [authClient]
+  );
+
+  const signInWithGoogle = useCallback(
+    async (redirectTo?: string) => {
+      // This just produces the URL; the caller is responsible for the redirect.
+      return authClient.signInWithGoogle(redirectTo);
+    },
+    [authClient]
+  );
+
+  const completeGoogleCallback = useCallback(
+    async (code: string, state: string) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+      try {
+        const session = await authClient.completeGoogleCallback(code, state);
+        setState({ session, isLoading: false, isAuthenticated: true });
+      } catch (error) {
+        setState((prev) => ({ ...prev, isLoading: false }));
+        throw error;
+      }
+    },
+    [authClient]
+  );
+
+  const hydrateSession = useCallback(
+    (session: Session) => {
+      authClient.setSession(session);
+      setState({ session, isLoading: false, isAuthenticated: true });
+    },
+    [authClient]
+  );
+
   const value: AuthContextValue = {
     ...state,
     login,
     logout,
     refreshUser,
     getAccessToken,
+    register,
+    signInWithGoogle,
+    completeGoogleCallback,
+    hydrateSession,
   };
 
   return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;