Firebase React auth not working with my .env-CodePudding

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.

CodePudding user response：

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