Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Implement proactive access token refreshing within the session and reactive token renewal for socket authentication errors.

Browse Source
This commit is contained in:
pradeepkumar
2026-02-11 04:47:51 +05:30
parent 692a91f6db
commit 50e593d7ae
3 changed files with 120 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/auth.ts
View File

@@ -154,7 +154,43 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
token.role = (user as any).role;
token.accessToken = (user as any).accessToken;
token.refreshToken = (user as any).refreshToken;
// Store when the token was issued for expiration tracking
token.accessTokenIssuedAt = Date.now();
}
// Auto-refresh the access token if it's about to expire (refresh 2 minutes before expiry)
// Backend JWT_ACCESS_EXPIRATION=15m, so refresh at ~13 minutes
const ACCESS_TOKEN_MAX_AGE = 13 * 60 * 1000; // 13 minutes in ms
const issuedAt = (token.accessTokenIssuedAt as number) || 0;
if (token.accessToken && Date.now() - issuedAt > ACCESS_TOKEN_MAX_AGE) {
try {
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL}/auth/refresh`,
{
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
refreshToken: token.refreshToken,
}),
}
);
const data = await res.json();
if (res.ok && data.success) {
token.accessToken = data.data.accessToken;
token.refreshToken = data.data.refreshToken;
token.accessTokenIssuedAt = Date.now();
} else {
// Refresh token is also expired - force re-login
token.error = "RefreshTokenExpired";
}
} catch (error) {
console.error("Token refresh error:", error);
token.error = "RefreshTokenError";
}
}
return token;
},
@@ -167,6 +203,7 @@ export const { handlers, signIn, signOut, auth } = NextAuth({
(session.user as any).role = token.role;
(session.user as any).accessToken = token.accessToken;
(session.user as any).refreshToken = token.refreshToken;
(session.user as any).error = token.error;
}
return session;
},

64
src/hooks/useMessaging.ts
View File

@@ -65,22 +65,31 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
const currentConversationIdRef = useRef<string | null>(null);
const isInitializedRef = useRef(false);
// Get access token from session
const accessToken = session?.user?.accessToken;
// Use localStorage token (same source as REST API, always fresh via interceptor)
const getAccessToken = useCallback(() => {
if (typeof window !== 'undefined') {
return localStorage.getItem('accessToken');
}
return null;
}, []);
// Check if user is authenticated (session exists)
const isAuthenticated = !!session?.user;
// Connect to WebSocket
const connect = useCallback(async () => {
if (!accessToken) {
const token = getAccessToken();
if (!token) {
console.warn('No access token available for socket connection');
return;
}
try {
await socketService.connect(accessToken);
await socketService.connect(token);
} catch (error) {
console.error('Failed to connect to socket:', error);
}
}, [accessToken]);
}, [getAccessToken]);
// Disconnect from WebSocket
const disconnect = useCallback(() => {
@@ -89,7 +98,7 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
// Load conversations
const loadConversations = useCallback(async () => {
if (!accessToken) return;
if (!getAccessToken()) return;
setIsLoading(true);
try {
@@ -100,7 +109,7 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
} finally {
setIsLoading(false);
}
}, [accessToken]);
}, [getAccessToken]);
// Select a conversation and load its messages
const selectConversation = useCallback(
@@ -404,6 +413,39 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
}
);
// Handle auth errors (token expired, server disconnected us)
const unsubscribeAuthError = socketService.onAuthError(async () => {
console.log('Socket auth error detected, refreshing token via REST...');
try {
const refreshToken = localStorage.getItem('refreshToken');
if (!refreshToken) {
console.error('No refresh token available for socket reconnection');
return;
}
// Refresh token using the same endpoint as the REST API interceptor
const res = await fetch(
`${process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3001/api/v1'}/auth/refresh`,
{
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ refreshToken }),
}
);
const data = await res.json();
if (res.ok && data.success) {
const newToken = data.data.accessToken;
localStorage.setItem('accessToken', newToken);
localStorage.setItem('refreshToken', data.data.refreshToken);
console.log('Token refreshed, reconnecting socket...');
socketService.reconnectWithToken(newToken);
} else {
console.error('Token refresh failed:', data.message);
}
} catch (error) {
console.error('Failed to refresh token for socket reconnection:', error);
}
});
return () => {
unsubscribeConnection();
unsubscribeMessage();
@@ -411,12 +453,13 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
unsubscribeTypingStop();
unsubscribeStatus();
unsubscribeRead();
unsubscribeAuthError();
};
}, [updateUserStatus]);
// Auto-connect on mount
useEffect(() => {
if (autoConnect && accessToken && !isInitializedRef.current) {
if (autoConnect && isAuthenticated && !isInitializedRef.current) {
isInitializedRef.current = true;
connect();
loadConversations();
@@ -424,11 +467,8 @@ export function useMessaging(options: UseMessagingOptions = {}): UseMessagingRet
// Get initial unread count
messagesService.getUnreadCount().then(setUnreadCount).catch(console.error);
}
// Don't disconnect on cleanup - socket is singleton and should stay connected
// Disconnect only happens when user logs out (handled elsewhere)
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [autoConnect, accessToken]);
}, [autoConnect, isAuthenticated]);
// Re-join conversation room when reconnecting
useEffect(() => {

32
src/services/socket.service.ts
View File

@@ -22,11 +22,15 @@ class SocketService {
private statusHandlers: Set<StatusHandler> = new Set();
private readHandlers: Set<ReadHandler> = new Set();
private connectionHandlers: Set<(connected: boolean) => void> = new Set();
private authErrorHandlers: Set<() => void> = new Set();
private isConnecting = false;
private currentToken: string | null = null;
connect(token: string): Promise<void> {
return new Promise((resolve, reject) => {
// Already connected
this.currentToken = token;
// Already connected with same token
if (this.socket?.connected) {
resolve();
return;
@@ -84,6 +88,12 @@ class SocketService {
console.log('Socket disconnected:', reason);
this.isConnecting = false;
this.notifyConnectionHandlers(false);
// "io server disconnect" means the server rejected us (likely auth failure)
if (reason === 'io server disconnect') {
console.warn('Socket: Server disconnected us (likely token expired). Requesting token refresh...');
this.authErrorHandlers.forEach((handler) => handler());
}
});
this.socket.on('connect_error', (error) => {
@@ -118,11 +128,26 @@ class SocketService {
});
}
// Reconnect with a fresh token (used when the previous token expired)
reconnectWithToken(token: string): void {
this.currentToken = token;
if (this.socket) {
// Update the auth token for reconnection
this.socket.auth = { token };
this.socket.connect();
} else {
this.connect(token).catch((err) => {
console.error('Socket reconnect with new token failed:', err);
});
}
}
disconnect(): void {
if (this.socket) {
this.socket.disconnect();
this.socket = null;
}
this.currentToken = null;
}
isConnected(): boolean {
@@ -225,6 +250,11 @@ class SocketService {
return () => this.connectionHandlers.delete(handler);
}
onAuthError(handler: () => void): () => void {
this.authErrorHandlers.add(handler);
return () => this.authErrorHandlers.delete(handler);
}
private notifyConnectionHandlers(connected: boolean): void {
this.connectionHandlers.forEach((handler) => handler(connected));
}