getCurrentUser = null in middleware

[north beacon]

Hi @tiny wolf. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

---

Based on the information in the knowledge sources, I can see you're experiencing issues with Firebase authentication in Nuxt 3, particularly with the getCurrentUser function returning null initially in your middleware.

Firebase Authentication Issues with Session Cookies

The problems you're experiencing with the /api/__session endpoint returning 401 errors are similar to issues reported by other users. There are a few potential causes and solutions:

1. Firebase API Key Restrictions

If your Firebase Browser API Key has website restrictions set, you might encounter authentication errors. As mentioned in one of the sources, this can cause errors like:

Firebase: Error (auth/requests-from-referer-<empty>-are-blocked.)

This happens because the server doesn't send a referer header that matches the restricted domains when making authentication requests Link to Stack Overflow post.

2. App Check Compatibility

If you're using Firebase App Check together with session cookies, this can cause conflicts. One user reported:

Firebase: Error (auth/firebase-app-check-token-is-invalid.)

This occurs because the debug token for Firebase App Check is typically only available in client-side environments, but with sessionCookie: true, the server attempts to authenticate with this token Link to Stack Overflow post.

3. Middleware Execution Timing

Your middleware issue where getCurrentUser returns null initially might be related to how Nuxt 3 handles middleware execution. In Nuxt 3, client-side middleware isn't automatically applied to all endpoints, and you need to specify where you want it applied.

For authentication middleware, you might want to structure it like this:

export default defineNuxtRouteMiddleware(async (to, from) => {
  // Get the current user
  const user = await getCurrentUser();

  // Redirect all logged out users to login page
  if (!user) {
    return navigateTo({
      path: "/login",
    });
  }
});

4. Known Issues with Firebase Hosting

Some users have reported issues specifically when deploying to Firebase Hosting, with errors like:

POST <https://[your-app].web.app/api/__session> 404

One user mentioned removing the VueFire package as a temporary solution Link to Stack Overflow post.

5. Nuxt Version Compatibility

There was a specific issue with Firebase server-side auth in Nuxt 3.15.3 that was fixed in a later version. If you're using that version, consider updating Link to GitHub issue.

Recommendations

1. Check if you have any API key restrictions in Firebase Console and temporarily remove them for testing
2. If using App Check, try disabling it temporarily to see if that resolves the issue
3. Make sure you've properly enabled the IAM Service Account Credentials API as mentioned
4. Consider using a different approach for authentication in your middleware:

// middleware/authenticated.ts
export default defineNuxtRouteMiddleware(() => {
  const { loggedIn } = useUserSession()

  // redirect the user to the login screen if they're not authenticated
  if (!loggedIn.value) {
    return navigateTo('/login')
  }
})

5. If all else fails, consider using cookies directly for session management:

export const useUser = () => useCookie<User | null>('user', {
    default: () => null,
    watch: true,
})

This approach has helped some users with state persistence between reloads Link to Stack Overflow post.

Let me know if you need more specific guidance on any of these approaches!

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: