@startsimpli/auth 0.1.0

package/src/client/auth-client.ts

@@ -0,0 +1,265 @@
+/**
+ * Client-side authentication manager
+ * Handles JWT tokens, login/logout, and token refresh
+ */
+
+import type {
+  AuthConfig,
+  Session,
+  LoginResponse,
+  RefreshResponse,
+  AuthUser,
+} from '../types';
+import { isTokenExpired, getTokenExpiresAt, shouldRefreshToken } from '../utils';
+
+export class AuthClient {
+  private config: Required<AuthConfig>;
+  private session: Session | null = null;
+  private refreshTimer: NodeJS.Timeout | null = null;
+  private isRefreshing = false;
+  private refreshPromise: Promise<string> | null = null;
+
+  constructor(config: AuthConfig) {
+    this.config = {
+      tokenRefreshInterval: 4 * 60 * 1000, // 4 minutes
+      onSessionExpired: () => {},
+      onUnauthorized: () => {},
+      ...config,
+    };
+  }
+
+  /**
+   * Login with email and password
+   */
+  async login(email: string, password: string): Promise<Session> {
+    const response = await fetch(`${this.config.apiBaseUrl}/api/v1/auth/token/`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      credentials: 'include', // Include cookies for refresh token
+      body: JSON.stringify({ email, password }),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ detail: 'Login failed' }));
+      throw new Error(error.detail || 'Login failed');
+    }
+
+    const data: any = await response.json();
+    const expiresAt = getTokenExpiresAt(data.access);
+
+    if (!expiresAt) {
+      throw new Error('Invalid token received');
+    }
+
+    // Django might not include user in token response, so fetch it separately
+    const tempSession = {
+      user: data.user || { id: '', email: '', firstName: '', lastName: '', isEmailVerified: false, createdAt: '', updatedAt: '' },
+      accessToken: data.access,
+      expiresAt,
+    };
+
+    this.session = tempSession;
+
+    // Fetch user data if not included in login response
+    if (!data.user) {
+      try {
+        const user = await this.getCurrentUser();
+        this.session.user = user;
+      } catch (error) {
+        console.error('Failed to fetch user data after login:', error);
+        // Continue anyway - some user data is better than none
+      }
+    }
+
+    this.startRefreshTimer();
+    return this.session;
+  }
+
+  /**
+   * Logout and clear session
+   */
+  async logout(): Promise<void> {
+    try {
+      await fetch(`${this.config.apiBaseUrl}/api/v1/auth/logout/`, {
+        method: 'POST',
+        headers: this.getAuthHeaders(),
+        credentials: 'include',
+      });
+    } catch (error) {
+      console.error('Logout error:', error);
+    } finally {
+      this.clearSession();
+    }
+  }
+
+  /**
+   * Refresh access token using refresh token cookie
+   */
+  async refreshToken(): Promise<string> {
+    // Prevent multiple simultaneous refresh requests
+    if (this.isRefreshing && this.refreshPromise) {
+      return this.refreshPromise;
+    }
+
+    this.isRefreshing = true;
+    this.refreshPromise = this.performTokenRefresh();
+
+    try {
+      const newToken = await this.refreshPromise;
+      return newToken;
+    } finally {
+      this.isRefreshing = false;
+      this.refreshPromise = null;
+    }
+  }
+
+  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
+    });
+
+    if (!response.ok) {
+      this.clearSession();
+      this.config.onSessionExpired();
+      throw new Error('Token refresh failed');
+    }
+
+    const data: RefreshResponse = await response.json();
+    const expiresAt = getTokenExpiresAt(data.access);
+
+    if (!expiresAt) {
+      throw new Error('Invalid token received');
+    }
+
+    if (this.session) {
+      this.session.accessToken = data.access;
+      this.session.expiresAt = expiresAt;
+    }
+
+    this.startRefreshTimer();
+    return data.access;
+  }
+
+  /**
+   * Get current user data from backend
+   */
+  async getCurrentUser(): Promise<AuthUser> {
+    const response = await fetch(`${this.config.apiBaseUrl}/api/v1/auth/me/`, {
+      headers: this.getAuthHeaders(),
+      credentials: 'include',
+    });
+
+    if (!response.ok) {
+      if (response.status === 401) {
+        this.config.onUnauthorized();
+      }
+      throw new Error('Failed to fetch user data');
+    }
+
+    const user: AuthUser = await response.json();
+
+    if (this.session) {
+      this.session.user = user;
+    }
+
+    return user;
+  }
+
+  /**
+   * Get current session
+   */
+  getSession(): Session | null {
+    if (!this.session) {
+      return null;
+    }
+
+    if (isTokenExpired(this.session.accessToken)) {
+      this.clearSession();
+      this.config.onSessionExpired();
+      return null;
+    }
+
+    return this.session;
+  }
+
+  /**
+   * Set session (for SSR/hydration)
+   */
+  setSession(session: Session): void {
+    this.session = session;
+    this.startRefreshTimer();
+  }
+
+  /**
+   * Get auth headers for API requests
+   */
+  getAuthHeaders(): Record<string, string> {
+    const session = this.getSession();
+    if (!session) {
+      return {};
+    }
+
+    return {
+      Authorization: `Bearer ${session.accessToken}`,
+    };
+  }
+
+  /**
+   * Get valid access token (refreshes if needed)
+   */
+  async getAccessToken(): Promise<string | null> {
+    const session = this.getSession();
+    if (!session) {
+      return null;
+    }
+
+    if (shouldRefreshToken(session.accessToken)) {
+      try {
+        return await this.refreshToken();
+      } catch (error) {
+        console.error('Token refresh failed:', error);
+        return null;
+      }
+    }
+
+    return session.accessToken;
+  }
+
+  /**
+   * Start automatic token refresh timer
+   */
+  private startRefreshTimer(): void {
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer);
+    }
+
+    this.refreshTimer = setInterval(() => {
+      const session = this.getSession();
+      if (session && shouldRefreshToken(session.accessToken)) {
+        this.refreshToken().catch((error) => {
+          console.error('Auto-refresh failed:', error);
+        });
+      }
+    }, this.config.tokenRefreshInterval);
+  }
+
+  /**
+   * Clear session and stop refresh timer
+   */
+  private clearSession(): void {
+    this.session = null;
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer);
+      this.refreshTimer = null;
+    }
+  }
+
+  /**
+   * Cleanup resources
+   */
+  destroy(): void {
+    this.clearSession();
+  }
+}

package/src/client/auth-context.tsx

@@ -0,0 +1,153 @@
+/**
+ * React context provider for authentication
+ */
+
+'use client';
+
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useState,
+  useCallback,
+  type ReactNode,
+} from 'react';
+import { AuthClient } from './auth-client';
+import type { AuthConfig, AuthState, Session, AuthUser } from '../types';
+
+interface AuthContextValue extends AuthState {
+  login: (email: string, password: string) => Promise<void>;
+  logout: () => Promise<void>;
+  refreshUser: () => Promise<void>;
+  getAccessToken: () => Promise<string | null>;
+}
+
+const AuthContext = createContext<AuthContextValue | undefined>(undefined);
+
+interface AuthProviderProps {
+  children: ReactNode;
+  config: AuthConfig;
+  initialSession?: Session | null;
+}
+
+export function AuthProvider({
+  children,
+  config,
+  initialSession,
+}: AuthProviderProps) {
+  const [authClient] = useState(() => new AuthClient(config));
+  const [state, setState] = useState<AuthState>(() => ({
+    session: initialSession || null,
+    isLoading: !initialSession,
+    isAuthenticated: !!initialSession,
+  }));
+
+  // Initialize session from SSR or check for existing session
+  useEffect(() => {
+    if (initialSession) {
+      authClient.setSession(initialSession);
+      setState({
+        session: initialSession,
+        isLoading: false,
+        isAuthenticated: true,
+      });
+    } else {
+      // Try to get session from client
+      const session = authClient.getSession();
+      setState({
+        session,
+        isLoading: false,
+        isAuthenticated: !!session,
+      });
+    }
+  }, [authClient, initialSession]);
+
+  // Session expiration handler
+  useEffect(() => {
+    const originalOnExpired = config.onSessionExpired;
+    config.onSessionExpired = () => {
+      setState({
+        session: null,
+        isLoading: false,
+        isAuthenticated: false,
+      });
+      originalOnExpired?.();
+    };
+
+    return () => {
+      authClient.destroy();
+    };
+  }, [authClient, config]);
+
+  const login = useCallback(
+    async (email: string, password: string) => {
+      setState((prev) => ({ ...prev, isLoading: true }));
+
+      try {
+        const session = await authClient.login(email, password);
+        setState({
+          session,
+          isLoading: false,
+          isAuthenticated: true,
+        });
+      } catch (error) {
+        setState((prev) => ({ ...prev, isLoading: false }));
+        throw error;
+      }
+    },
+    [authClient]
+  );
+
+  const logout = useCallback(async () => {
+    setState((prev) => ({ ...prev, isLoading: true }));
+
+    try {
+      await authClient.logout();
+    } finally {
+      setState({
+        session: null,
+        isLoading: false,
+        isAuthenticated: false,
+      });
+    }
+  }, [authClient]);
+
+  const refreshUser = useCallback(async () => {
+    try {
+      const user = await authClient.getCurrentUser();
+      setState((prev) => ({
+        ...prev,
+        session: prev.session
+          ? { ...prev.session, user }
+          : null,
+      }));
+    } catch (error) {
+      console.error('Failed to refresh user:', error);
+    }
+  }, [authClient]);
+
+  const getAccessToken = useCallback(async () => {
+    return authClient.getAccessToken();
+  }, [authClient]);
+
+  const value: AuthContextValue = {
+    ...state,
+    login,
+    logout,
+    refreshUser,
+    getAccessToken,
+  };
+
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
+}
+
+/**
+ * Hook to access auth context
+ */
+export function useAuthContext(): AuthContextValue {
+  const context = useContext(AuthContext);
+  if (!context) {
+    throw new Error('useAuthContext must be used within AuthProvider');
+  }
+  return context;
+}