How do I get Firebase Auth to work on Heroku Deployment?

Auth works in MERN app's local development without any issues. All private information is stored in an .env file and then called in my react app with process.env.VARIABLE_NAME.

However, when I deploy to Heroku production and add the env files as shown here, I get the error: "Your API key is invalid, please check you have copied it correctly"

This is my deployed Heroku app: https://evening-fortress-01391.herokuapp.com/login

REACT_APP_FIREBASE_API_KEY=XXXXXXXX
REACT_APP_FIREBASE_AUTH_DOMAIN=XXXXXXXX
REACT_APP_FIREBASE_PROJECT_ID=XXXXXXXX
REACT_APP_FIREBASE_STORAGE_BUCKET=XXXXXXXX
REACT_APP_FIREBASE_MESSAGING_SENDER_ID=XXXXXXXX
REACT_APP_FIREBASE_APP_ID=XXXXXXXX

Also, running the command heroku config displays the inputted env variables in the terminal.

Any idea why Auth works locally but not in deployment? Thank you!

CodePudding user response：

Answer because too long for a comment.

Sounds super hard to debug - also your app just shows a login and not the API key error =) To me it sounds like either just like it says, an incorrect API key or a formatting issue.

I would make a test config variable using the same characters as your API key like REACT_APP_FIREBASE_POTATO=p07470-test-example-foooobar and then in your frontend app just console.log("TEST" process.env.REACT_APP_FIREBASE_POTATO);. Then publish that and check it in production.

This tests are the environment variables working at all and are there some character encoding issues (do you see the exact characters in the console as you should)