Nuxt 3 App With Vuefire: Getting an (auth/login-blocked) error in production with SSR

[johnpuaoi]

Reproduction

https://github.com/johnpuaoi/vuefire-auth-blocked

Steps to reproduce the bug

1. Replace the firebase config with your own.
2. Create an ENV and add the GOOGLE_APPLICATION_CREDENTIALS
3. Build the nuxt 3 app with pnpm build
4. Run node .output/server/index.mjs --host 0.0.0.0
5. Open localhost:3000
6. Attempt to sign in with a user account on app.vue main page

Expected behavior

After signing in the user information should be displayed. The sign in should not be blocked.

Actual behavior

The sign in is blocked and an error is shown.

Additional information

This only happens when SSR is enabled and you build for production, in dev mode this does not happen at all. If you disable SSR then everything works as should in production.

The credentials are set using the GOOGLE_APPLICATION_CREDENTIALS env var which is an object of the service key. I tried setting the var to be a path to serviceKey.json file but still the same error.

This is the error that is returned: Error minting the cookie FirebaseAppError: Credential implementation provided to initializeApp() via the "credential" property failed to fetch a valid Google OAuth2 access token with the following error: "Error fetching access token: Error while making request: getaddrinfo ENOTFOUND metadata.google.internal. Error code: ENOTFOUND".

For now I will release my nuxt 3 apps as an SPA until this can be resolved. I attempted to take a crack at this issue by inserting some console.logs in the ensureAdminApp function to check the credential but can't seem to narrow down the issue.

Again this only happens if your using SSR with nuxt and you build for production. SSR in dev mode works just fine with nuxt-vuefire.

[posva]

This usually means a misconfiguration on the Firebase project or that you have something blocking the login. BTW your reproduction is private

[johnpuaoi]

Shucks so sorry about that, didn't realize I had set that repro to private, just made it public now. If its a misconfiguration in firebase, do you have any clue as to what I should be looking for?

When I had deployed my site to netlify and first encountered the issue, I was using the nuxt-security module, so I thought that somehow the nuxt-security module was blocking the auth request but even with that module removed, the issue still persists.

Appreciate whatever insight you have on this, apologies for the private repro again. Have a wonderful and blessed rest of your day/night🤙

[luc122c]

This is the error that is returned: Error minting the cookie FirebaseAppError: Credential implementation provided to initializeApp() via the "credential" property failed to fetch a valid Google OAuth2 access token with the following error: "Error fetching access token: Error while making request: getaddrinfo ENOTFOUND metadata.google.internal. Error code: ENOTFOUND".

getaddrinfo ENOTFOUND is simply Node.js' way of telling you that it can't connect to an address. It seems as if it is reaching out to the metadata server to fetch a token, but can't connect to it?
What platform are you hosting on? If you're hosting on Firebase / Google Cloud then you should have no problem reaching it. If you're on another platform, it won't work.

Metadata server info:

• https://cloud.google.com/compute/docs/metadata/overview#querying
• https://cloud.google.com/run/docs/container-contract#metadata-server

[johnpuaoi]

@luc122c Thank you for the info. I am deploying to netlify but I did not realize that I would need to deploy to a google environment. I thought that as long as I set the GOOGLE_APPLICATION_CREDENTIALS env var manually, meaning setting the value as the json object rather than a path to a json file, then I'd be good to go. I got the impression from this tip in the docs: "When deploying outside of Firebase, the GOOGLE_APPLICATION_CREDENTIALS environment variable has to be set manually. Instead of setting it to the path of the service account file, you can set it to the content of the file itself. Note it will have to fit in one single line."

[luc122c]

@johnpuaoi Sorry for any misunderstanding, you should still be able deploy this to non-firebase hosting, however the metadata server is only available on GCP.

Looking at the code, it would seem that the env variable isn't available and it's falling back to applicationDefault() which would contact the metadata server, which isn't available on netlify.
You could try setting FIREBASE_PROJECT_ID, FIREBASE_CLIENT_EMAIL and FIREBASE_PRIVATE_KEYinstead of GOOGLE_APPLICATION_CREDENTIALS. (see here)

[johnpuaoi]

No worries, I appreciate the help and insight, I see now. I tried using just the other 3 variables before but I would end up getting this error: The default Firebase app does not exist. Make sure you call initializeApp() before using any of the Firebase services.

I'm also getting the warnings in console about not providing a service account which I believe stems from this line in the nuxt-vuefire module:

 const hasServiceAccount =
      typeof process.env.GOOGLE_APPLICATION_CREDENTIALS === 'string' &&
      process.env.GOOGLE_APPLICATION_CREDENTIALS.length > 0

[dosstx]

I had that issue when deploying to Netlify. Something was going on witih the Netlify function used to host the website (getting a weird 502 error from /api/_session. This caused Firebase Auth to not like that and blocked the auth logins. I wonder if something similar is happening to your instance? Have you tried to deploy to Netlify and see if your problem happens there, as well?

Another time, I noticed that I was always trying to deploy to Netlify Edge and since that is a Deno runtime, it will not be compatible with firebase-admin dependency (that is a Node based API) which is used by firebase auth during SSR.

[johnpuaoi]

@dosstx Thank you for the info and yes I have tried deploying to Netlify with SSR enabled but I get the same error as when I run the site in production locally. I see that 502 error as well when using SSR in prod.

I have the site that I encountered this error deployed on Netlify but with SSR set to false and auth works there. If possible, could someone use my repro link, add their own firebase config including the env var and then attempt to build the nuxt site and run locally. Then attempt to sign in, If the error persists, I could then rule out a firebase config error that's causing this.

[dosstx]

The 502 api session error is on Netlify, but it is a 404 on Vercel. Also, to make it more weird, some of the vercel preview links work and I have no issue with the firebase auth block (the green arrow version of the URL works):

I have double checked that all those domains are whitelisted in firebase auth console. Not sure why the green arrow version works....it's the same code!

Btw, I've had this all working fine on Netlify until recently. For some reason the firebase auth block started a week ago or so for me.

Here's the error I get in browser console when viewing the page:

entry.0faff0d5.js:1 
        
        
        POST https://<site>.com/api/__session 502
s @ entry.0faff0d5.js:1
i @ entry.0faff0d5.js:1
Dc @ entry.0faff0d5.js:3159
await in Dc (async)
(anonymous) @ entry.0faff0d5.js:1205
Promise.then (async)
registerStateListener @ entry.0faff0d5.js:1205
onIdTokenChanged @ entry.0faff0d5.js:1205
_f @ entry.0faff0d5.js:1520
(anonymous) @ entry.0faff0d5.js:3159
(anonymous) @ entry.0faff0d5.js:1
r @ entry.0faff0d5.js:1
runWithContext @ entry.0faff0d5.js:1
HI @ entry.0faff0d5.js:1
runWithContext @ entry.0faff0d5.js:1
MI @ entry.0faff0d5.js:1
FI @ entry.0faff0d5.js:1
await in FI (async)
sm @ entry.0faff0d5.js:3166
(anonymous) @ entry.0faff0d5.js:3166
entry.0faff0d5.js:1  Uncaught (in promise) FetchError:  (502  (/api/__session))
    at async i (entry.0faff0d5.js:1:93560)
    at async Dc (entry.0faff0d5.js:3159:844)

[posva]

Could you check https://github.com/posva/nuxt--vuefire-example-blaze-plan? I collected as many instructions as possible when deploying tests apps. It could also be related to deploying to vercel instead of firebase. There are plans to check other providers but at the moment I only have time to focus on Firebase.
On a personal note, I think you should give Firebase hosting and functions a try, the deployment is easier given that everything is on Firebase

If your application is not serving an /api/__session after deployment it means you don't have ssr on the deployed version as that endpoint is added by nuxt-vuefire to handle cookie minting

Regarding auth block, I would check that with Firebase and dive deeper in logs. Normally, it shouldn't be related to vuefire

[dosstx]

@posva OK I cloned the nuxt vuefire template from you and deployed to Firebase and and I get the SAME firebase auth blocked / 502 etc errors as mentioned above in the threads:

I confirmed that the domain is whitelisted in auth settings in firebase console.

The only changes I made from your template are:

1. Updated the .firebaserc file with my project id
2. Removed database.rules.json, firestore.indexes.json, firestore.rules, storage.rules because I am not using those features
3. Removed appCheck from nuxt.config
4. Updated vuefire config with my own config in nuxt.config

Note: I did enable the IAM Service Account Credentials API for my project, however, I did not understand how I needed to do this part from your template README ---> "Once this API is activated, you will need to add a role to your service account. This is explained in the Firebase documentation." <--- So, I did not do that step . I mentioned this in case it could be the culprit for these errors because I also did not do that in my real world project.

I THINK I correctly set up the emulators and was able to login using localhost:3000 when testing (clicked the auto generate user button), but AUTH does not work on firebase deployed site.

Here is my live demo URL: https://nuxt-vuefire-2576f.web.app/ . You can see there is a 404 not found when trying to use the LOGIN link as well as the firebase auth error when going back to the LOGIN page.

Here is my forked repro from your template: https://github.com/dosstx/nuxt--vuefire-example-blaze-plan/tree/error

Appreciate you looking into this! It doesnt' seem to matter if you host on Firebase, Netlify etc all the errors appear the same.

[posva]

You might need that step you skipped but not sure. You could also try deleting the function and redeploying again. A part from that, i can’t tell… You might want to reach out to support

[dosstx]

I submitted a ticket to Firebase Support. Will keep this thread updated. If anyone else is able to take the Nuxt template and verify the issue exists, it would be greatly appreciated. Like @posva said, you may need to add a role to the service account (I skipped that step) and that could fix the problem.