Fix session persistence issue

- Created SSR-safe tokenStorage utility for localStorage access
- Updated AuthContext with window availability checks
- Enhanced API client interceptors with SSR safety
- Improved error handling to only clear tokens on auth errors (401/403)
- Added token refresh support for multiple response structures
- Added redirect loop prevention in auth flow

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

maternal-web/lib/api/client.ts

@@ -1,4 +1,5 @@
 import axios from 'axios';
+import { tokenStorage } from '@/lib/utils/tokenStorage';
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
 
@@ -13,7 +14,7 @@ export const apiClient = axios.create({
 // Request interceptor to add auth token
 apiClient.interceptors.request.use(
   (config) => {
-    const token = localStorage.getItem('accessToken');
+    const token = tokenStorage.getAccessToken();
     if (token) {
       config.headers.Authorization = `Bearer ${token}`;
     }
@@ -30,31 +31,65 @@ apiClient.interceptors.response.use(
   async (error) => {
     const originalRequest = error.config;
 
+    // Only handle token refresh on client side
+    if (typeof window === 'undefined') {
+      return Promise.reject(error);
+    }
+
     // If error is 401 and we haven't tried to refresh yet
     if (error.response?.status === 401 && !originalRequest._retry) {
       originalRequest._retry = true;
 
       try {
-        const refreshToken = localStorage.getItem('refreshToken');
+        const refreshToken = tokenStorage.getRefreshToken();
         if (!refreshToken) {
           throw new Error('No refresh token');
         }
 
-        const response = await axios.post(`${API_BASE_URL}/api/v1/auth/refresh`, {
+        const response = await axios.post(
-          refreshToken,
+          `${API_BASE_URL}/api/v1/auth/refresh`,
-        });
+          { refreshToken },
+          {
+            headers: { 'Content-Type': 'application/json' },
+            withCredentials: true
+          }
+        );
 
-        const { accessToken } = response.data;
+        // Handle different response structures
-        localStorage.setItem('accessToken', accessToken);
+        let newAccessToken;
+        let newRefreshToken;
+
+        if (response.data?.data?.tokens?.accessToken) {
+          newAccessToken = response.data.data.tokens.accessToken;
+          newRefreshToken = response.data.data.tokens.refreshToken;
+        } else if (response.data?.tokens?.accessToken) {
+          newAccessToken = response.data.tokens.accessToken;
+          newRefreshToken = response.data.tokens.refreshToken;
+        } else if (response.data?.accessToken) {
+          newAccessToken = response.data.accessToken;
+          newRefreshToken = response.data.refreshToken;
+        } else {
+          throw new Error('Invalid token refresh response');
+        }
+
+        // Update tokens in storage
+        tokenStorage.setAccessToken(newAccessToken);
+        if (newRefreshToken) {
+          tokenStorage.setRefreshToken(newRefreshToken);
+        }
 
         // Retry original request with new token
-        originalRequest.headers.Authorization = `Bearer ${accessToken}`;
+        originalRequest.headers.Authorization = `Bearer ${newAccessToken}`;
         return apiClient(originalRequest);
       } catch (refreshError) {
+        console.error('Token refresh failed:', refreshError);
         // Refresh failed, clear tokens and redirect to login
-        localStorage.removeItem('accessToken');
+        tokenStorage.clearTokens();
-        localStorage.removeItem('refreshToken');
+
-        window.location.href = '/login';
+        // Avoid redirect loop - only redirect if not already on login page
+        if (!window.location.pathname.includes('/login')) {
+          window.location.href = '/login';
+        }
         return Promise.reject(refreshError);
       }
     }

maternal-web/lib/auth/AuthContext.tsx

@@ -3,6 +3,7 @@
 import { createContext, useContext, useEffect, useState, ReactNode } from 'react';
 import { useRouter } from 'next/navigation';
 import apiClient from '@/lib/api/client';
+import { tokenStorage } from '@/lib/utils/tokenStorage';
 
 export interface User {
   id: string;
@@ -45,23 +46,46 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 
   // Check authentication status on mount
   useEffect(() => {
-    checkAuth();
+    // Only run on client side
+    if (typeof window !== 'undefined') {
+      checkAuth();
+    } else {
+      setIsLoading(false);
+    }
   }, []);
 
   const checkAuth = async () => {
-    const token = localStorage.getItem('accessToken');
+    // Ensure we're on client side
-    if (!token) {
+    if (typeof window === 'undefined') {
       setIsLoading(false);
       return;
     }
 
     try {
+      const token = tokenStorage.getAccessToken();
+      if (!token) {
+        setIsLoading(false);
+        return;
+      }
+
       const response = await apiClient.get('/api/v1/auth/me');
-      setUser(response.data.data);
+
-    } catch (error) {
+      // Check if response has expected structure
+      if (response.data?.data) {
+        setUser(response.data.data);
+      } else if (response.data?.user) {
+        // Handle alternative response structure
+        setUser(response.data.user);
+      } else {
+        throw new Error('Invalid response structure');
+      }
+    } catch (error: any) {
       console.error('Auth check failed:', error);
-      localStorage.removeItem('accessToken');
+      // Only clear tokens if it's an actual auth error (401, 403)
-      localStorage.removeItem('refreshToken');
+      if (error?.response?.status === 401 || error?.response?.status === 403) {
+        tokenStorage.clearTokens();
+        setUser(null);
+      }
     } finally {
       setIsLoading(false);
     }
@@ -86,8 +110,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
       const { data: responseData } = response.data;
       const { tokens, user: userData } = responseData;
 
-      localStorage.setItem('accessToken', tokens.accessToken);
+      tokenStorage.setTokens(tokens.accessToken, tokens.refreshToken);
-      localStorage.setItem('refreshToken', tokens.refreshToken);
       setUser(userData);
 
       router.push('/');
@@ -123,8 +146,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
 
       const { accessToken, refreshToken } = tokens;
 
-      localStorage.setItem('accessToken', accessToken);
+      tokenStorage.setTokens(accessToken, refreshToken);
-      localStorage.setItem('refreshToken', refreshToken);
       setUser(userData);
 
       // Redirect to onboarding
@@ -141,8 +163,7 @@ export const AuthProvider = ({ children }: { children: ReactNode }) => {
     } catch (error) {
       console.error('Logout failed:', error);
     } finally {
-      localStorage.removeItem('accessToken');
+      tokenStorage.clearTokens();
-      localStorage.removeItem('refreshToken');
       setUser(null);
       router.push('/login');
     }

maternal-web/lib/utils/tokenStorage.ts

@@ -0,0 +1,93 @@
+/**
+ * Safe token storage utilities that work with both SSR and client-side rendering
+ */
+
+export const tokenStorage = {
+  /**
+   * Get access token from storage
+   */
+  getAccessToken: (): string | null => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    try {
+      return localStorage.getItem('accessToken');
+    } catch (error) {
+      console.error('Error reading accessToken:', error);
+      return null;
+    }
+  },
+
+  /**
+   * Get refresh token from storage
+   */
+  getRefreshToken: (): string | null => {
+    if (typeof window === 'undefined') {
+      return null;
+    }
+    try {
+      return localStorage.getItem('refreshToken');
+    } catch (error) {
+      console.error('Error reading refreshToken:', error);
+      return null;
+    }
+  },
+
+  /**
+   * Set access token in storage
+   */
+  setAccessToken: (token: string): void => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    try {
+      localStorage.setItem('accessToken', token);
+    } catch (error) {
+      console.error('Error setting accessToken:', error);
+    }
+  },
+
+  /**
+   * Set refresh token in storage
+   */
+  setRefreshToken: (token: string): void => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    try {
+      localStorage.setItem('refreshToken', token);
+    } catch (error) {
+      console.error('Error setting refreshToken:', error);
+    }
+  },
+
+  /**
+   * Set both tokens at once
+   */
+  setTokens: (accessToken: string, refreshToken: string): void => {
+    tokenStorage.setAccessToken(accessToken);
+    tokenStorage.setRefreshToken(refreshToken);
+  },
+
+  /**
+   * Clear all tokens from storage
+   */
+  clearTokens: (): void => {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    try {
+      localStorage.removeItem('accessToken');
+      localStorage.removeItem('refreshToken');
+    } catch (error) {
+      console.error('Error clearing tokens:', error);
+    }
+  },
+
+  /**
+   * Check if user has valid tokens
+   */
+  hasTokens: (): boolean => {
+    return !!(tokenStorage.getAccessToken() && tokenStorage.getRefreshToken());
+  },
+};