Firebase + React auth not working with my .env

Question

So i've read many topics and lose so much time cause of this issue.

My components don't load anymore and i'm receiving this error in my console : 'FirebaseError: Firebase: Error (auth/invalid-api-key).'

(I specify that is my first project using firebase).

About my firebase.config.js :

import firebase from 'firebase/compat/app';
import 'firebase/compat/auth';

const app = firebase.initializeApp({
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_MESSAGING_APP_ID
});

export const auth = app.auth();

export default app;

About my .env.local :

REACT_APP_API_KEY=AIXXXXzaSyX_ITiQXXXXXXXXxcXXXXXXXxU
REACT_APP_AUTH_DOMAIN=XXXXX.firebaseapp.com
REACT_APP_PROJECT_ID=name-name-name
REACT_APP_STORAGE_BUCKET=name-name-name.appspot.com
REACT_APP_MESSAGING_SENDER_ID=5XXX7XXXX5XX
REACT_APP_MESSAGING_APP_ID=1:5XXXX4XXX7X:web:aXXXXxxx0xxxxb4a4xxxxxxdd

**About files location : **

src/utils/firebase.config.js
src/.env.local

About the auth process :

Authentication is used in a signUp component that matches a form

Thanks for reading

When I just paste the API_KEY directly in app like this : apiKey: "string". This works, so I think this issue come from my .env file.

spirift · Accepted Answer · 2022-11-28 14:20:53Z

0

I think you're using create-react-app. If that is the case you need to add the .env file to the root of your project, not the src folder.

See the docs for more info on env vars in create react app https://create-react-app.dev/docs/adding-custom-environment-variables/#adding-development-environment-variables-in-env

answered Nov 28, 2022 at 14:20

spirift

3,0721 gold badge16 silver badges20 bronze badges

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

1 Comment

Arnaud Le Tallec Over a year ago

I don't know why I've put my .env in the src folder ... You save my day thanks !

Collectives™ on Stack Overflow

Firebase + React auth not working with my .env

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related