Fix: Completes Google OAuth user fetch on client

Completes the Google OAuth flow by ensuring the user is fetched
on the client-side after a successful OAuth redirect. It achieves
this by:

- Enabling permissions in the playground config.
- Modifying the Google callback to append an `oauth_success` flag to
  the redirect URL.
- Updating the authorization middleware to conditionally fetch the
  user using SSR via `useFetch` when the `oauth_success` flag is
  present.  This ensures `httpOnly` cookies are correctly handled.

Author: rrd108

playground/nuxt.config.ts

@@ -12,9 +12,9 @@ export default defineNuxtConfig({
       tokenExpiration: 10,
       // TODO: if it is uncommented it makes `yarn test:types` fails - for some unknown reason
       // INFO: if it is commented out you can not login to the playground
-      /* permissions: {
+      permissions: {
         admin: ['*'],
-      }, */
+      },
       google: {
         clientId: process.env.GOOGLE_CLIENT_ID || 'demo-client-id',
         clientSecret: process.env.GOOGLE_CLIENT_SECRET || 'demo-client-secret',

src/runtime/composables/useAuthentication.ts

@@ -1,4 +1,4 @@
-import { useState, useRuntimeConfig } from '#app'
+import { useState, useRuntimeConfig, useFetch } from '#app'
 import { computed, readonly } from 'vue'
 import type { User, UserWithoutPassword } from 'nuxt-users/utils'
 
@@ -55,10 +55,35 @@ export const useAuthentication = () => {
     }
   }
 
-  const fetchUser = async () => {
+  const fetchUser = async (useSSR = false) => {
     try {
-      const response = await $fetch<{ user: UserWithoutPassword }>(`${apiBasePath}/me`, { method: 'GET' })
-      user.value = response.user
+      let userData: UserWithoutPassword | null = null
+      
+      if (useSSR) {
+        // Use useFetch for SSR - properly handles cookies
+        const { data, error } = await useFetch<{ user: UserWithoutPassword }>(`${apiBasePath}/me`, {
+          server: true,
+          lazy: false
+        })
+        
+        if (error.value) {
+          throw new Error(error.value.message || 'Failed to fetch user')
+        }
+        
+        userData = data.value?.user || null
+      } else {
+        // Use $fetch for client-only requests
+        const response = await $fetch<{ user: UserWithoutPassword }>(`${apiBasePath}/me`, { 
+          method: 'GET'
+        })
+        userData = response.user
+      }
+
+      if (!userData) {
+        throw new Error('No user data received')
+      }
+
+      user.value = userData
 
       // Update the appropriate storage with fresh user data
       if (import.meta.client) {
@@ -67,17 +92,17 @@ export const useAuthentication = () => {
         const wasInSessionStorage = sessionStorage.getItem('user') !== null
 
         if (wasInLocalStorage) {
-          localStorage.setItem('user', JSON.stringify(response.user))
+          localStorage.setItem('user', JSON.stringify(userData))
         }
         else if (wasInSessionStorage) {
-          sessionStorage.setItem('user', JSON.stringify(response.user))
+          sessionStorage.setItem('user', JSON.stringify(userData))
         }
         else {
           // Default to sessionStorage for new sessions without rememberMe
-          sessionStorage.setItem('user', JSON.stringify(response.user))
+          sessionStorage.setItem('user', JSON.stringify(userData))
         }
       }
-      return response.user
+      return userData
     }
     catch (error) {
       console.error('Failed to fetch user:', error)

src/runtime/middleware/authorization.client.ts

@@ -4,7 +4,7 @@ import { hasPermission, isWhitelisted } from '../utils/permissions'
 import { NO_AUTH_PATHS, NO_AUTH_API_PATHS } from '../constants'
 import type { ModuleOptions } from 'nuxt-users/utils'
 
-export default defineNuxtRouteMiddleware((to) => {
+export default defineNuxtRouteMiddleware(async (to) => {
   const { public: { nuxtUsers: publicNuxtUsers } } = useRuntimeConfig()
   const publicOptions = publicNuxtUsers as ModuleOptions
   const base = publicOptions.apiBasePath || '/api/nuxt-users'
@@ -27,7 +27,18 @@ export default defineNuxtRouteMiddleware((to) => {
     return
   }
 
-  const { isAuthenticated, user } = useAuthentication()
+  const { isAuthenticated, user, fetchUser } = useAuthentication()
+  
+  // If not authenticated but oauth_success flag is present, fetch user using SSR
+  if (!isAuthenticated.value && to.query.oauth_success === 'true') {
+    try {
+      await fetchUser(true) // Use SSR to properly handle httpOnly cookies
+    }
+    catch (error) {
+      console.error('[Nuxt Users] Failed to fetch user after OAuth:', error)
+    }
+  }
+  
   if (!isAuthenticated.value) {
     console.log(`[Nuxt Users] client.middleware.auth.global: Unauthenticated ${to.path}, redirecting to /login`)
     return navigateTo('/login')
@@ -38,10 +49,4 @@ export default defineNuxtRouteMiddleware((to) => {
     console.log(`[Nuxt Users] client.middleware.auth.global: User with role ${user.value?.role} denied access to ${to.path}`)
     return navigateTo('/login')
   }
-
-  console.log('[Nuxt Users] client.middleware.auth.global', {
-    isAuthenticated: isAuthenticated.value,
-    userRole: user.value?.role,
-    to: to.path
-  })
 })

src/runtime/server/api/nuxt-users/auth/google/callback.get.ts

@@ -78,9 +78,12 @@ export default defineEventHandler(async (event) => {
 
     console.log(`[Nuxt Users] Google OAuth login successful for user: ${user.email}`)
 
-    // Redirect to success page
+    // Redirect to success page with oauth_success flag
     const successRedirect = options.auth.google.successRedirect || '/'
-    return sendRedirect(event, successRedirect)
+    const redirectUrl = successRedirect.includes('?')
+      ? `${successRedirect}&oauth_success=true`
+      : `${successRedirect}?oauth_success=true`
+    return sendRedirect(event, redirectUrl)
   }
   catch (error) {
     console.error('[Nuxt Users] Google OAuth callback error:', error)