#160 Connect Frontend to Backend Auth

apps/backend/lambdas/auth/handler.ts

@@ -6,10 +6,8 @@ import {
   AdminDeleteUserCommand,
   InitiateAuthCommand,
   InitiateAuthCommandInput,
-  ConfirmSignUpCommandInput,
   ConfirmSignUpCommand,
   ResendConfirmationCodeCommand,
-  ResendConfirmationCodeCommandInput,
   GlobalSignOutCommand,
   GlobalSignOutCommandInput,
 } from '@aws-sdk/client-cognito-identity-provider';
@@ -33,6 +31,11 @@ export const handler = async (event: any): Promise<APIGatewayProxyResult> => {
     const normalizedPath = rawPath.replace(/\/$/, '');
     const method = (event.requestContext?.http?.method || event.httpMethod || 'GET').toUpperCase();
 
+    // CORS preflight
+    if (method === 'OPTIONS') {
+      return json(200, {});
+    }
+
     // Health check
     if ((normalizedPath.endsWith('/health') || normalizedPath === '/health') && method === 'GET') {
       return json(200, { ok: true, timestamp: new Date().toISOString() });
@@ -59,34 +62,60 @@ export const handler = async (event: any): Promise<APIGatewayProxyResult> => {
       if (!email || !code) {
         return json(400, { message: 'email and code are required' });
       }
-      const params: ConfirmSignUpCommandInput = {
-        ClientId: USER_POOL_CLIENT_ID,
-        Username: email as string,
-        ConfirmationCode: code as string,
-      };
-      const response = await cognitoClient.send(new ConfirmSignUpCommand(params));
-      if (!response.Session) {
-        return json(400, { message: 'Invalid code or email' });
+      try {
+        await cognitoClient.send(new ConfirmSignUpCommand({
+          ClientId: USER_POOL_CLIENT_ID,
+          Username: email as string,
+          ConfirmationCode: code as string,
+        }));
+        return json(200, { message: `Email verified successfully for ${email}` });
+      } catch (error: any) {
+        if (error.name === 'ExpiredCodeException') {
+          return json(400, { message: 'Verification code has expired, please request a new one' });
+        }
+        if (error.name === 'CodeMismatchException') {
+          return json(400, { message: 'Invalid verification code' });
+        }
+        if (error.name === 'NotAuthorizedException') {
+          return json(400, { message: 'User is already confirmed' });
+        }
+        if (error.name === 'UserNotFoundException') {
+          return json(404, { message: 'User not found' });
+        }
+        if (error.name === 'LimitExceededException') {
+          return json(429, { message: 'Too many attempts, please try again later' });
+        }
+        console.error('Verify email error:', error);
+        return json(500, { message: 'Failed to verify email' });
       }
-      return json(200, { message: `Email verified successfully for ${email}, session: ${response.Session}` });
     }
-    
+
     // POST /resend-code
     if (normalizedPath === '/resend-code' && method === 'POST') {
       const body = event.body ? JSON.parse(event.body) as Record<string, unknown> : {};
       const { email } = body;
       if (!email) {
         return json(400, { message: 'email is required' });
       }
-      const params: ResendConfirmationCodeCommandInput = {
-        ClientId: USER_POOL_CLIENT_ID,
-        Username: email as string,
-      };
-      const response = await cognitoClient.send(new ResendConfirmationCodeCommand(params));
-      if (!response.CodeDeliveryDetails) {
-        return json(400, { message: 'Failed to resend code' });
+      try {
+        await cognitoClient.send(new ResendConfirmationCodeCommand({
+          ClientId: USER_POOL_CLIENT_ID,
+          Username: email as string,
+        }));
+        return json(200, { message: `Verification code resent to ${email}` });
+      } catch (error: any) {
+        if (error.name === 'UserNotFoundException') {
+          return json(404, { message: 'User not found' });
+        }
+        if (error.name === 'InvalidParameterException') {
+          return json(400, { message: 'User is already confirmed' });
+        }
+        if (error.name === 'LimitExceededException') {
+          return json(429, { message: 'Too many attempts, please try again later' });
+        }
+        console.error('Resend code error:', error);
+        return json(500, { message: 'Failed to resend verification code' });
       }
-      return json(200, { message: `Code resent successfully for ${email}, delivery details: ${response.CodeDeliveryDetails}` });
     }
 
     // POST /logout

apps/backend/lambdas/auth/test/auth.unit.test.ts

@@ -133,3 +133,45 @@ test("invalid path returns 404", async () => {
 
   expect(res.statusCode).toBe(404);
 });
+
+test("OPTIONS preflight returns 200 with CORS headers", async () => {
+  const res = await handler(createEvent('/login', 'OPTIONS'));
+  expect(res.statusCode).toBe(200);
+  expect(res.headers?.['Access-Control-Allow-Origin']).toBe('*');
+});
+
+test("verify-email missing email returns 400", async () => {
+  const res = await handler(createEvent('/verify-email', 'POST', { code: '123456' }));
+  expect(res.statusCode).toBe(400);
+  expect(JSON.parse(res.body).message).toContain('required');
+});
+
+test("verify-email missing code returns 400", async () => {
+  const res = await handler(createEvent('/verify-email', 'POST', { email: 'test@example.com' }));
+  expect(res.statusCode).toBe(400);
+  expect(JSON.parse(res.body).message).toContain('required');
+});
+
+test("resend-code missing email returns 400", async () => {
+  const res = await handler(createEvent('/resend-code', 'POST', {}));
+  expect(res.statusCode).toBe(400);
+  expect(JSON.parse(res.body).message).toContain('required');
+});
+
+test("logout missing authorization header returns 401", async () => {
+  const res = await handler(createEvent('/logout', 'POST'));
+  expect(res.statusCode).toBe(401);
+  expect(JSON.parse(res.body).message).toContain('Authorization');
+});
+
+test("login missing email returns 400", async () => {
+  const res = await handler(createEvent('/login', 'POST', { password: 'TestPassword123' }));
+  expect(res.statusCode).toBe(400);
+  expect(JSON.parse(res.body).message).toContain('required');
+});
+
+test("login missing password returns 400", async () => {
+  const res = await handler(createEvent('/login', 'POST', { email: 'test@example.com' }));
+  expect(res.statusCode).toBe(400);
+  expect(JSON.parse(res.body).message).toContain('required');
+});

apps/frontend/src/app/providers.tsx

@@ -1,7 +1,12 @@
 'use client';
 
 import { ChakraProvider, defaultSystem } from '@chakra-ui/react';
+import { AuthProvider } from '@/context/AuthContext';
 
 export function Providers({ children }: { children: React.ReactNode }) {
-  return <ChakraProvider value={defaultSystem}>{children}</ChakraProvider>;
+  return (
+    <ChakraProvider value={defaultSystem}>
+      <AuthProvider>{children}</AuthProvider>
+    </ChakraProvider>
+  );
 }

apps/frontend/src/context/AuthContext.tsx

@@ -0,0 +1,177 @@
+'use client';
+
+import { createContext, useContext, useEffect, useState } from 'react';
+import { apiFetch } from '@/lib/api';
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+interface User {
+  sub: string;
+  email: string;
+  name?: string;
+}
+
+interface AuthTokens {
+  accessToken: string;
+  idToken: string;
+  refreshToken: string;
+}
+
+interface AuthContextValue {
+  user: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+  login: (email: string, password: string) => Promise<void>;
+  register: (email: string, password: string, name: string) => Promise<void>;
+  verifyEmail: (email: string, code: string) => Promise<void>;
+  resendCode: (email: string) => Promise<void>;
+  logout: () => Promise<void>;
+  getAccessToken: () => string | null;
+}
+
+// ---------------------------------------------------------------------------
+// Backend response shapes
+// ---------------------------------------------------------------------------
+
+interface LoginResponse {
+  AccessToken: string;
+  IdToken: string;
+  RefreshToken: string;
+}
+
+// ---------------------------------------------------------------------------
+// Helpers
+// ---------------------------------------------------------------------------
+
+const STORAGE_KEYS = {
+  ACCESS: 'branch_access_token',
+  ID: 'branch_id_token',
+  REFRESH: 'branch_refresh_token',
+} as const;
+
+function decodeIdToken(token: string): User | null {
+  try {
+    const payload = token.split('.')[1];
+    const padded = payload.replace(/-/g, '+').replace(/_/g, '/');
+    const json = atob(padded.padEnd(padded.length + ((4 - (padded.length % 4)) % 4), '='));
+    const claims = JSON.parse(json);
+    return {
+      sub: claims.sub,
+      email: claims.email,
+      name: claims.name ?? claims['cognito:username'],
+    };
+  } catch {
+    return null;
+  }
+}
+
+function saveTokens({ accessToken, idToken, refreshToken }: AuthTokens) {
+  localStorage.setItem(STORAGE_KEYS.ACCESS, accessToken);
+  localStorage.setItem(STORAGE_KEYS.ID, idToken);
+  localStorage.setItem(STORAGE_KEYS.REFRESH, refreshToken);
+}
+
+function clearTokens() {
+  localStorage.removeItem(STORAGE_KEYS.ACCESS);
+  localStorage.removeItem(STORAGE_KEYS.ID);
+  localStorage.removeItem(STORAGE_KEYS.REFRESH);
+}
+
+// ---------------------------------------------------------------------------
+// Context
+// ---------------------------------------------------------------------------
+
+const AuthContext = createContext<AuthContextValue | null>(null);
+
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [user, setUser] = useState<User | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Restore session from localStorage on mount
+  useEffect(() => {
+    const idToken = localStorage.getItem(STORAGE_KEYS.ID);
+    if (idToken) {
+      setUser(decodeIdToken(idToken));
+    }
+    setIsLoading(false);
+  }, []);
+
+  async function login(email: string, password: string) {
+    const data = await apiFetch<LoginResponse>('/auth/login', {
+      method: 'POST',
+      body: JSON.stringify({ email, password }),
+    });
+    const tokens: AuthTokens = {
+      accessToken: data.AccessToken,
+      idToken: data.IdToken,
+      refreshToken: data.RefreshToken,
+    };
+    saveTokens(tokens);
+    setUser(decodeIdToken(tokens.idToken));
+  }
+
+  async function register(email: string, password: string, name: string) {
+    await apiFetch('/auth/register', {
+      method: 'POST',
+      body: JSON.stringify({ email, password, name }),
+    });
+  }
+
+  async function verifyEmail(email: string, code: string) {
+    await apiFetch('/auth/verify-email', {
+      method: 'POST',
+      body: JSON.stringify({ email, code }),
+    });
+  }
+
+  async function resendCode(email: string) {
+    await apiFetch('/auth/resend-code', {
+      method: 'POST',
+      body: JSON.stringify({ email }),
+    });
+  }
+
+  async function logout() {
+    const accessToken = localStorage.getItem(STORAGE_KEYS.ACCESS);
+    if (accessToken) {
+      await apiFetch('/auth/logout', {
+        method: 'POST',
+        token: accessToken,
+      }).catch(() => {
+        // Best-effort — clear locally even if the server call fails
+      });
+    }
+    clearTokens();
+    setUser(null);
+  }
+
+  function getAccessToken() {
+    return localStorage.getItem(STORAGE_KEYS.ACCESS);
+  }
+
+  return (
+    <AuthContext.Provider
+      value={{
+        user,
+        isAuthenticated: user !== null,
+        isLoading,
+        login,
+        register,
+        verifyEmail,
+        resendCode,
+        logout,
+        getAccessToken,
+      }}
+    >
+      {children}
+    </AuthContext.Provider>
+  );
+}
+
+export function useAuth(): AuthContextValue {
+  const ctx = useContext(AuthContext);
+  if (!ctx) throw new Error('useAuth must be used inside AuthProvider');
+  return ctx;
+}

apps/frontend/src/lib/api.ts

@@ -0,0 +1,26 @@
+const BASE_URL = process.env.NEXT_PUBLIC_API_BASE_URL ?? 'http://localhost:3006';
+
+interface RequestOptions extends RequestInit {
+  token?: string;
+}
+
+export async function apiFetch<T>(
+  path: string,
+  { token, headers, ...options }: RequestOptions = {},
+): Promise<T> {
+  const res = await fetch(`${BASE_URL}${path}`, {
+    ...options,
+    headers: {
+      'Content-Type': 'application/json',
+      ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      ...headers,
+    },
+  });
+
+  if (!res.ok) {
+    const body = await res.json().catch(() => ({}));
+    throw new Error(body.message ?? res.statusText);
+  }
+
+  return res.json() as Promise<T>;
+}