reactjs - Cant access environmental variables React

Question

I am trying to make my login re-usable by storing enviromental variables in .env.local. However whenever I try to call these variables I get undefined.

here is my .env.local file

REACT_APP_AMARBIS_API_KEY = classified
REACT_APP_AMARBIS_AUTH_DOMAIN = classified
REACT_APP_AMARBIS_FIREBASE_PROJECT_ID = classified
REACT_APP_AMARBIS_STORAGE_BUCKET = classified
REACT_APP_AMARBIS_MESSAGING_SENDER_ID = classified
REACT_APP_AMARBIS_APP_ID = classified

and here is where I am trying to access them

import firebase from 'firebase/app'
import "firebase/auth"

const app = firebase.initializeApp({
    apiKey: process.env.REACT_APP_API_KEY,
    authDomain: process.env.REACT_APP_AMARBIS_AUTH_DOMAIN,
    projectId: process.env.REACT_APP_AMARBIS_FIREBASE_PROJECT_ID,
    storageBucket: process.env.REACT_APP_AMARBIS_STORAGE_BUCKET,
    messagingSenderId: process.env.REACT_APP_AMARBIS_MESSAGING_SENDER_ID,
    appId: process.env.REACT_APP_AMARBIS_APP_ID
})

export const auth = app.auth()
export default app

Answer 1

You'll need to stop your development server and re-run it using npm start. Each time you update your .env file, you'd need to do this, else you'll get undefined when you try to use the environment variables in your project