Enhance OAuth token handling in authentication flow; update frontend to support access and refresh tokens. Refactor auth store to manage refresh token state and improve token storage logic.

be/app/api/auth/oauth.py

@@ -37,12 +37,16 @@ async def google_callback(request: Request, db: AsyncSession = Depends(get_async
     
     # Generate JWT token
     strategy = fastapi_users._auth_backends[0].get_strategy()
-    token = await strategy.write_token(user_to_login)
+    token_response = await strategy.write_token(user_to_login)
+    access_token = token_response["access_token"]
+    refresh_token = token_response.get("refresh_token") # Use .get for safety, though it should be there
+
+    # Redirect to frontend with tokens
+    redirect_url = f"{settings.FRONTEND_URL}/auth/callback?access_token={access_token}"
+    if refresh_token:
+        redirect_url += f"&refresh_token={refresh_token}"
     
-    # Redirect to frontend with token
-    return RedirectResponse(
-        url=f"{settings.FRONTEND_URL}/auth/callback?token={token}"
-    )
+    return RedirectResponse(url=redirect_url)
 
 @router.get('/apple/login')
 async def apple_login(request: Request):
@@ -83,9 +87,13 @@ async def apple_callback(request: Request, db: AsyncSession = Depends(get_async_
     
     # Generate JWT token
     strategy = fastapi_users._auth_backends[0].get_strategy()
-    token = await strategy.write_token(user_to_login)
-    
-    # Redirect to frontend with token
-    return RedirectResponse(
-        url=f"{settings.FRONTEND_URL}/auth/callback?token={token}"
-    ) 
+    token_response = await strategy.write_token(user_to_login)
+    access_token = token_response["access_token"]
+    refresh_token = token_response.get("refresh_token") # Use .get for safety
+
+    # Redirect to frontend with tokens
+    redirect_url = f"{settings.FRONTEND_URL}/auth/callback?access_token={access_token}"
+    if refresh_token:
+        redirect_url += f"&refresh_token={refresh_token}"
+
+    return RedirectResponse(url=redirect_url) 

fe/src/pages/AuthCallbackPage.vue

@@ -28,12 +28,17 @@ const error = ref<string | null>(null);
 
 onMounted(async () => {
     try {
-        const token = route.query.token as string;
-        if (!token) {
+        const accessToken = route.query.access_token as string | undefined;
+        const refreshToken = route.query.refresh_token as string | undefined;
+        const legacyToken = route.query.token as string | undefined;
+
+        const tokenToUse = accessToken || legacyToken;
+
+        if (!tokenToUse) {
             throw new Error('No token provided');
         }
 
-        await authStore.setTokens({ access_token: token, refresh_token: '' });
+        await authStore.setTokens({ access_token: tokenToUse, refresh_token: refreshToken });
         notificationStore.addNotification({ message: 'Login successful', type: 'success' });
         router.push('/');
     } catch (err) {

fe/src/stores/auth.ts

@@ -7,6 +7,7 @@ import router from '@/router';
 
 interface AuthState {
   accessToken: string | null;
+  refreshToken: string | null;
   user: {
     email: string;
     name: string;
@@ -17,6 +18,7 @@ interface AuthState {
 export const useAuthStore = defineStore('auth', () => {
   // State
   const accessToken = ref<string | null>(localStorage.getItem('token'));
+  const refreshToken = ref<string | null>(localStorage.getItem('refreshToken'));
   const user = ref<AuthState['user']>(null);
 
   // Getters
@@ -24,15 +26,21 @@ export const useAuthStore = defineStore('auth', () => {
   const getUser = computed(() => user.value);
 
   // Actions
-  const setTokens = (tokens: { access_token: string }) => {
+  const setTokens = (tokens: { access_token: string; refresh_token?: string }) => {
     accessToken.value = tokens.access_token;
     localStorage.setItem('token', tokens.access_token);
+    if (tokens.refresh_token) {
+      refreshToken.value = tokens.refresh_token;
+      localStorage.setItem('refreshToken', tokens.refresh_token);
+    }
   };
 
   const clearTokens = () => {
     accessToken.value = null;
+    refreshToken.value = null;
     user.value = null;
     localStorage.removeItem('token');
+    localStorage.removeItem('refreshToken');
   };
 
   const setUser = (userData: AuthState['user']) => {
@@ -66,8 +74,8 @@ export const useAuthStore = defineStore('auth', () => {
       },
     });
 
-    const { access_token } = response.data;
-    setTokens({ access_token });
+    const { access_token, refresh_token } = response.data;
+    setTokens({ access_token, refresh_token });
     await fetchCurrentUser();
     return response.data;
   };
@@ -85,6 +93,7 @@ export const useAuthStore = defineStore('auth', () => {
   return {
     accessToken,
     user,
+    refreshToken,
     isAuthenticated,
     getUser,
     setTokens,