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>
This commit is contained in:
@@ -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`, {
|
||||
refreshToken,
|
||||
});
|
||||
const response = await axios.post(
|
||||
`${API_BASE_URL}/api/v1/auth/refresh`,
|
||||
{ refreshToken },
|
||||
{
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
withCredentials: true
|
||||
}
|
||||
);
|
||||
|
||||
const { accessToken } = response.data;
|
||||
localStorage.setItem('accessToken', accessToken);
|
||||
// Handle different response structures
|
||||
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');
|
||||
localStorage.removeItem('refreshToken');
|
||||
window.location.href = '/login';
|
||||
tokenStorage.clearTokens();
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user