What's the proper syntax to keying into Netlify env vars?

Question

My Gatsby app hosted on Netlify is throwing an error concerning my Firebase config.

What's the proper syntax for keying my app into Firebase via Netlify & Gatsby ?

My config is at the top of my src/components/Firebase/firebase.js:

const config = {
  apiKey: process.env.API_KEY,
  authDomain: process.env.AUTH_DOMAIN,
  databaseURL: process.env.DATABASE_URL,
  projectId: process.env.PROJECT_ID,
  storageBucket: process.env.STORAGE_BUCKET,
  messagingSenderId: process.env.MESSAGING_SENDER_ID

};

Locally, at the top of my gatsby-config.js:

require("dotenv").config({
  path: `.env.${process.env.NODE_ENV}`,
 })

On Github, I'm omitting the require statement in my gatsby-config.js because Netlify has a copy.

Yet, I'm getting is an error both local and Netlify:

Uncaught (in promise) code: "auth/invalid-api-key"
message: "Your API key is invalid, please check you have copied it 
correctly.

Yep, I checked, my env vars are fine..

I thought this would be straight forward. My app ought to have access to the config data based on the fact that Netlify has a copy.

Playing around I saw yy app works locally and on Netlify if I pass the sensitive firebase config directly via firebase.js. But, Obviously that's a no-no.

Anyone else experience similar results in getting a similar setup to work?

https://github.com/gatsbyjs/gatsby/issues/7381 – ksav Jan 07 '19 at 14:28 — ksav, Jan 07 '19 at 14:28

score 1 · Answer 1 · answered Mar 06 '19 at 22:40

1

For anyone who use create-react-app, added prefix REACT_APP_ to your env vars, added them to the Netlify build env vars in the settings and have deployed onto Netlify site but still see the

Uncaught (in promise) code: "auth/invalid-api-key", message: "Your API key is invalid, please check you have copied it correctly.

My case was resolved simply by re-deploy the app again on Netlify.

answered Mar 06 '19 at 22:40

BarKwa

11
1

Re-deploy works for me! Thank you – KYin Apr 20 '22 at 09:00

score 0 · Answer 2 · answered Jan 07 '19 at 15:25

OS Env Vars which are prefixed with GATSBY_ will become available in browser JavaScript.

Gatsby requires you to use the following syntax for accessing client side environment vars. Change them in your code and in the Netlify app console.

const config = {
  apiKey: process.env.GATSBY_API_KEY,
  authDomain: process.env.GATSBY_AUTH_DOMAIN,
  databaseURL: process.env.GATSBY_DATABASE_URL,
  projectId: process.env.GATSBY_PROJECT_ID,
  storageBucket: process.env.GATSBY_STORAGE_BUCKET,
  messagingSenderId: process.env.GATSBY_MESSAGING_SENDER_ID

};

Note: Is it safe to expose Firebase apiKey to the public?

Thanks guys! That worked. I needed the require("dotenv").. in gatsby-config.js, and in my .env I used GATSBY_ prefix. — honeymkr, Jan 08 '19 at 16:59

What's the proper syntax to keying into Netlify env vars?

2 Answers2