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

Yes I used create react app then even just tried installing it manually later. — Nicklandreth
– Nicklandreth, Commented Jan 10, 2021 at 23:43
sometimes you have to restart your app manually specially when using enviroment variables — Kevin.a
– Kevin.a, Commented Jan 10, 2021 at 23:46

CoderLean · Accepted Answer · 2021-01-10 23:52:38Z

3

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

answered Jan 10, 2021 at 23:52

CoderLean

2321 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nicklandreth Over a year ago

I figured that out right before I saw this. Thanks a ton this was the solution.

Nicklandreth · Accepted Answer · 2021-01-10 23:52:48Z

0

So I think the problem was that I couldnt change these during a run and all references to them had to be set during startup.

answered Jan 10, 2021 at 23:52

Nicklandreth

451 silver badge7 bronze badges

Collectives™ on Stack Overflow

Cant access environmental variables React

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related