VueFire with Nuxt SSR enabled on Firebase AppHosting

[MathiasQM]

Right, so I've been testing Firebase's new product AppHosting for a nuxt project and it is working quite well. I am having trouble using VueFire with SSR enabled for the Admin SDK. It cannot access the default Firebase app.

The documentation says to use the GOOGLE_APPLICATION_CREDENTIALS environment variable if deploying to something other than Firebase or Google Cloud, because App Hosting is a firebase product this should not apply here. Correct me if I'm wrong but App Hosting should be able to authenticate and use the admin SDK using the default service-account, according to this documentation.

In development
So in development everything works just fine with the client side and server side. It. works because it has acces to the service-account.json and the .env file, which has the GOOGLE_APPLICATION_CREDENTIALS environment variable pointing to my service account. These files are stored locally in the project during development.

In production
Because app hosting is deployed form the main branch of my github repo, it does not have access to my service-account.json and .env files as these are not committed to github (for obvious reasons). In this case VueFire/nuxtfire should be able to initialize using the Application Default Credentials. But It throws this error:

500
Failed to read credentials from file export GOOGLE_APPLICATION_CREDENTIALS='{ "type": "service_account", "project_id": "your-project-id", "private_key_id": "your-private-key-id", "private_key": "-----BEGIN PRIVATE KEY----- .....

And it actually throws the error with these placeholders "project_id": "your-project-id" and not my actual projectid.

Have anyone had this issue or experience with VueFire on App Hosting with SSR enabled?

Note with SSR disabled everything works

[ilyamisyura]

Hello @MathiasQM

I face the same issue but with deployment to Netlify, I see the similar message. However, I don't have the issue with "project_id": "your-project-id", in my case it's mentioned correctly.

My solution

While writing this reply, I've accidentally fixed the thing. Basically, you generate a json file in the build environment from env variable.

1. I've updated Vuefire to 3.2.1 just in case. I haven't checked 3.2.0, maybe one-line json support (see below) was there as well.
2. Added SERVICE_ACCOUNT_KEY_JSON to env variables as a one-line json as suggested in the official documentation
3. Added GOOGLE_APPLICATION_CREDENTIALS='/tmp/serviceAccountKey.json'
4. To build everything, I added a script to package.json to call it on Netlify:
   "netlify-build": "echo \"$SERVICE_ACCOUNT_KEY_JSON\" > /tmp/serviceAccountKey.json && nuxt build"
5. Updated a build script in deployment config to npm run netlify-build

UPD

I have searched a bit and found a nice way to deploy on App Hosting with proper secrets handling, haven't tried though:
https://medium.com/evenbit/configuring-firebase-app-hosting-with-google-secrets-manager-2b83c09f3ad9

Unfortunately, there's nothing I could do with specifying command or env vars in App Hosting Dashboard which still looks very "in developing", so I would either wait for more mature release or go with CI/CD approach.

[ilyamisyura]

Hello @MathiasQM

Now GOOGLE_APPLICATION_CREDENTIALS with single-line json works during build on Netlify, no more "Failed to read credentials from file export..." error. I don't know if it's an update or something else, but it works for me.