Firebase project url returns a 404 after Vercel app successfully authenticates using Firebase

Question

I have a Sveltekit app that uses Firebase for authentication and for Cloud Firestore. Running the app locally with the Firebase emulator, everything works. When deploying with Vercel, I have the server configured to use the Firebase service account, and the client has the client config as provided by Firesbase.

When I run the app for real, deployed via Vercel, I get the following behavior.

1. When I use "sign in with google" functionality within my app, the app redirects to Google account selection and lets me select my google account
2. Checking the Firebase console, I see that I was successfully created within Authentication tab.
3. However, the Vercel app immediately bounces me back to my log-in screen. Examining the client console within Chrome I see the following error:

singletons-a6a7384f.js:259 GET https://my-firebase-project.firebaseapp.com/__/firebase/init.json 404 (Not Found)

I can confirm that the project name my-firebase-project in the url is correct and matches what is provided in the Firebase console as well as the config generated by Firebase.

In my package.json I am using

                "firebase": "9.0.1",
                "firebase-admin": "^9.10.0",

Does anyone know what could be causing this error?

Answer 1

My issue was pretty specific to my codebase (which I didn't write, originally.)

The token returned by Firebase was getting encrypted by svelte using a private key controlled by an environment variable named VITE_JWT_KEY. This environment variable wasn't set in my deployment. The code to encrypt the token had a default key value, but the code to decrypt the token back out of the session cookie was silently failing, causing the authorization to fail.

I believe the original author based this codebase off of some public "firebase + svelte" tutorials and demos so this may be helpful to others.