Firebase + React auth not working with my .env

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 :


**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.

>Solution :

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

Leave a Reply