firebase.initializeApp can't find the API key in my dotenv file. (Next.js)

user_11187967 0
Viewed 1273

I'm trying to implement Firebase Auth in my Next.js project. The auth system works just fine, BUT only when I directly declare the API key inside of initializeApp. For example:

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

const app = !firebase.apps.length ? (
    firebase.initializeApp({
        apiKey: 'MY_KEY',
        authDomain: process.env.FIREBASE_DOMAIN,
        projectId: process.env.FIREBASE_PROJECT_ID,
        storageBucket: process.env.FIREBASE_SOTORAGE_BUCKET,
        messagingSenderId: process.env.FIREBASE_SENDER_ID,
        appId: process.env.FIREBASE_ID,
        measurementId: process.env.FIREBASE_MESUREMENT_ID,
    }) 
) : (firebase.app())

export default app

When I try to get the API key using the .env file, next.js throws the following error: "Unhandled Runtime Error Error: Your API key is invalid, please check you have copied it correctly."

I've also tried to add those variables by adding the env configuration inside next.config.js, just like Vercel's recommendation https://nextjs.org/docs/api-reference/next.config.js/environment-variables. It also did not work.

My current code goes like this:

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

const app = !firebase.apps.length ? (
    firebase.initializeApp({
        apiKey: process.env.FIREBASE_KEY,
        authDomain: process.env.FIREBASE_DOMAIN,
        projectId: process.env.FIREBASE_PROJECT_ID,
        storageBucket: process.env.FIREBASE_SOTORAGE_BUCKET,
        messagingSenderId: process.env.FIREBASE_SENDER_ID,
        appId: process.env.FIREBASE_ID,
        measurementId: process.env.FIREBASE_MESUREMENT_ID,
    }) 
) : (firebase.app())

export default app

What should I do to make initializeApp able to read the process.env.FIREBASE_KEY value?

google-cloud-functions firebase next.js node.js javascript
2 Answers

The Firebase CLI doesn't support deployment of functions that add environment variables. It doesn't matter what you have in any .env file - they simply aren't going to appear in the process environment at all after deployment.

The documented way to provide configuration parameters to your function is explained in the documentation. The variables do not manifest as process environment in process.env. They will appear in the object returned by functions.config() at runtime.

If you really must have process environment variables, you won't be able to use whatever you have sitting in .env. You could instead write and deploy your function using gcloud to specify environment. However, this would lose you all the benefits of using the Firebase CLI, as it's a completely different deployment tool.

You could also deploy with the Firebase CLI, then update the specific environment after deployment with gcloud.

Bottom line is that what you're trying to do isn't terribly easy or straightforward. I suggest learning how to use the config provided by Firebase to make this easier, but this means you will have to copy what you have in .env into its config system.

user_8071260 
 const firebaseConfig = {
    apiKey: process.env.NEXT_PUBLIC_REACT_FIREBASE_API_KEY,
    authDomain: process.env.NEXT_PUBLIC_REACT_FIREBASE_AUTH_DOMAIN,
    projectId: process.env.NEXT_PUBLIC_REACT_FIREBASE_PROJECT_ID,
    storageBucket: process.env.NEXT_PUBLIC_REACT_FIREBASE_STORAGE_BUCKET,
    messagingSenderId: process.env.NEXT_PUBLIC_REACT_FIREBASE_MESSAGE_SENDER_ID,
    appId: process.env.NEXT_PUBLIC_REACT_FIREBASE_APP_ID,
    measurementId: 'G-measurement-id',
};

useEffect(() => {
    initializeApp(firebaseConfig);
    const messaging = getMessaging();
    onMessage(messaging, (payload) => {
        console.log('Message received. ', payload);
        // Update the UI to include the received message.
        setMessages([...messages, payload]);
    });

    resetUI();
})
user_44899940
Related