Question about Firebase on Your Site

[Joe Previte]

Hi Lee!

Big thanks for keeping your site open source and writing so many awesome blog posts 👏🏼

I hope you don't mind if I ask a question here!

Authenticating with Firebase SDK

I noticed that you're using environment variables (instead of the service account json file) to authenticate to your Firebase Realtime DB.

Did you have to do any special configuration in the Firebase Console?

Asking because I'm trying to do something similar with Gatsby and Netlify Functions on my personal site, but having no luck. I usually get some type of error like a missing key project_id or private_key (which are there, but Firebase doesn't see them).

Otherwise, it works locally just fine when I load in the .json file with the creds.

Thank you!

If you have time to provide any insight, I would super appreciate! If that's not the kind of thing you do here, feel free to politely close :)

[Joe Previte]

P.S. - I followed your tutorial (really helpful!) and looked at the Jamstack snippet which encourages this approach. I wonder if anyone else has had similar issues.

[Lee Robinson]

My first guess is that the .json file isn't getting deployed, so it can't reference those values. Are you able to confirm those values are being loaded correctly?

[Joe Previte]

My first guess is that the .json file isn't getting deployed, so it can't reference those values. Are you able to confirm those values are being loaded correctly?

Yes, you're right! The service-account.json is not being deployed. That file is in my gitignore since I don't want to expose it.

This approach works locally:

const admin = require('firebase-admin')
const serviceAccountKey = require('../serviceAccountKey.json')

admin.initializeApp({
  credential: admin.credential.cert(serviceAccountKey),
  databaseURL: 'https://website-pageviews-c8d4d.firebaseio.com/',
})

This approach does not:

const admin = require('firebase-admin')

admin.initializeApp({
  credential: admin.credential.cert({
    client_email: process.env.FIREBASE_CLIENT_EMAIL,
    private_key: process.env.FIREBASE_PRIVATE_KEY,
    project_id: 'joe-blog',
  }),
  databaseURL: 'https://website-pageviews-c8d4d.firebaseio.com/',
})

[Lee Robinson]

Gotcha! That helps. I haven't worked too much with Netlify, but I think you need to use their CLI to simulate the deployed environment. For Next.js, you can create a .env.local file to place your environment variables. It looks like Gatsby does something very similar.

Are the environment variables not loading correctly? You mentioned "missing key project_id or private_key" in the error message, but you could also be getting that error message if this is happening when evaluating process.env.whatever.

const admin = require('firebase-admin')

admin.initializeApp({
  credential: admin.credential.cert({
    client_email: null,
    private_key: null,
    project_id: 'joe-blog',
  }),
  databaseURL: 'https://website-pageviews-c8d4d.firebaseio.com/',
})

[Joe Previte]

Ah, gotcha! Yeah I've used Next before and know it's similar.

I thought they were...let's double-check.

It's working with the JSON file

it's working with env vars

Wow, this is embarrassing.. 🤦🏼‍♂️ I don't know what was happening before, but now it seems like everything is working. Maybe using you as a rubber-duck helped.

Thanks a ton man! I owe you one 🙏🏼

[Lee Robinson]

Don't sweat it! Happens to me all the time 😄 It's usually something like a small typo or needing to restart the dev server.

Happy to help out anytime!