Private Config variables are available on client side

[mnfgul]

Hi,
In my project I created all files same as the example project. However, I am getting "Error: Invalid next-firebase-auth options: The "firebaseAdminInitConfig" private key setting should not be available on the client side. The "cookies.keys" setting should not be available on the client side."

I suppose webpack is adding initConfig to client bundle. Is there a way to prevent this?

[kmjennison]

We expect firebaseAdminInitConfig.credential.privateKey to be falsy on the client side (see the config validation here). This is a precaution to make sure developers aren't accidentally bundling their private key with client-side JS.

Is your firebaseAdminInitConfig.credential.privateKey value undefined on the client side (e.g. if you log it to your browser console)?

Related: #49

[mnfgul]

firebaseAdminInitConfig is not defined in the browser. When looking into details, this error happens when logout api endpoint is called. Here is my logout api code.

import { unsetAuthCookies } from 'next-firebase-auth'
import initAuth from '../../../lib/auth/initAuth'

initAuth()

const Logout = async (req, res) => {
  try {
	  await unsetAuthCookies(req, res)
  }catch (e) {
      console.log("Error on Logout: "+e.message)
	  return res.status(500).json({ error: "Unexpected error." })
  }
  return res.status(200).json({ success: true })
}

export default Logout

Please note that on the browser I am only getting 500 internal server error. I receive below error in CLI only.

Error: Invalid next-firebase-auth options: The "firebaseAdminInitConfig" private key setting should not be available on the client side. The "cookies.keys" setting should not be available on the client side.
    at v (<project_path>/node_modules/next-firebase-auth/build/index.node.js:2:2995)
    at Object.init (<project_path>/node_modules/next-firebase-auth/build/index.node.js:2:7516)
    at init (<project_path>/node_modules/next-firebase-auth/build/index.node.js:2:16298)
    at initAuth (webpack-internal:///./lib/auth/initAuth.js:11:66)
    at eval (webpack-internal:///./pages/api/auth/logout.js:7:67)
    at Module../pages/api/auth/logout.js (<project_path>/.next/server/pages/api/auth/logout.js:116:1)
    at __webpack_require__ (<project_path>/.next/server/pages/api/auth/logout.js:23:31)
    at <project_path>/.next/server/pages/api/auth/logout.js:91:18
    at Object.<anonymous> (<project_path>/.next/server/pages/api/auth/logout.js:94:10)
    at Module._compile (internal/modules/cjs/loader.js:1133:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1153:10)
    at Module.load (internal/modules/cjs/loader.js:977:32)
    at Function.Module._load (internal/modules/cjs/loader.js:877:14)
    at Module.require (internal/modules/cjs/loader.js:1019:19)
    at require (internal/modules/cjs/helpers.js:77:18)
    at DevServer.handleApiRequest (<project_path>/node_modules/next/dist/next-server/server/next-server.js:64:181)

Thank you for your response in advance.

[kmjennison]

Can you show your initAuth logic? Please be sure to replace any private values before sharing.

[mnfgul]

Sure, below is the initAuth function, copied it from example and filled in the parameters. In _app file just calling initAuth()
On the first load there is not any error but following browser refresh (not nextjs's hot loading) there is an error.
firebaseAdminInitConfig is not defined in the browser.

//import dotenv from 'dotenv'
import {init} from 'next-firebase-auth'

//dotenv.config()

const initAuth = () => {
	init({
		authPageURL: '/user/login',
		appPageURL: '/',
		loginAPIEndpoint: '/api/auth/login', // required
		logoutAPIEndpoint: '/api/auth/logout', // required
		// Required in most cases.
		firebaseAdminInitConfig: {
			credential: {
				projectId: '',
				clientEmail: '',
				// The private key must not be accesssible on the client side.
				privateKey: process.env.FIREBASE_PRIVATE_KEY,
			},
			databaseURL: '',
		},
		firebaseClientInitConfig: {
			apiKey: '', // required
			authDomain: '.firebaseapp.com',
			databaseURL: '',
			projectId: '',
		},
		cookies: {
			name: '', // required
			// Keys are required unless you set `signed` to `false`.
			// The keys cannot be accessible on the client side.
			keys: [
				process.env.COOKIE_SECRET_CURRENT,
				process.env.COOKIE_SECRET_PREVIOUS,
			],
			httpOnly: true,
			maxAge: 12 * 60 * 60 * 24 * 1000, // twelve days
			overwrite: true,
			path: '/',
			sameSite: 'strict',
			secure: false, // set this to false in local (non-HTTPS) development
			signed: true,
		},
	})
}

export default initAuth

[kmjennison]

Are you defining the process.env.FIREBASE_PRIVATE_KEY via the .env system in Next.js? And is this app just running in Next's local environment? Can you double check you're not setting process.env.FIREBASE_PRIVATE_KEY anywhere else?

firebaseAdminInitConfig is not defined in the browser.

Looking at your config, this is not true—it will be defined. That's okay, but you'll have to confirm the private keys are undefined in the client environment.

[mnfgul]

I think I solved the issue for now. The reason was that when there was a server error somehow on the client side it was giving this error. I excluded some code in webpack bundle. Thanks for the help.

[grahaml]

Hey @mnfgul - any chance you can elaborate on what you changed in the webpack bundle to get this working? I'm running into the same issue and can't seem to reason about why.

[mnfgul]

@grahaml my issue was related to .env files I suppose. I deleted all .env files and keept only .env.local file for next.

[grahaml]

Got it - thanks. I'll try that.

[grahaml]

In case anyone else gets here and happens to have done the same silly thing I did...

I hit this error because I tried to set the fallback value for these environment variables as a string. I was doing this:

init({
  // ...
  firebaseAdminInitConfig: {
    credentials: {
      // ...
      privateKey: process.env.FIREBASE_ADMIN__PRIVATE_KEY ?
        JSON.parse(process.env.FIREBASE_ADMIN__PRIVATE_KEY) : 
        'FIREBASE_ADMIN__PRIVATE_KEY is undefined',
      // ...
    }
  }
  // ...
})

when I should have been doing this:

init({
  // ...
  firebaseAdminInitConfig: {
    credentials: {
      // ...
      privateKey: process.env.FIREBASE_ADMIN__PRIVATE_KEY ?
        JSON.parse(process.env.FIREBASE_ADMIN__PRIVATE_KEY) : 
        undefined,
      // ...
    }
  }
  // ...
})

I don't really know why I tried to set it as a string. Maybe I thought it would be easy to catch errors based on missing values. The problem, however, is that firebaseAdminInitConfig.credentials.privateKey must actually be undefined, otherwise next-firebase-auth throws when the request finally hits the browser.

The debug option was very helpful in sorting this out.

[jcamden]

Hey guys, I ran into this issue when I had prefixed my FIREBASE_PRIVATE_KEY with NEXT_PUBLIC_. Doing so makes the var available to the client. I was (/am) new to Next.js, so found this NFA error to be quite for helpful for understanding how development env_vars work in Next 👍

[amirhega]

This worked for me

[Dnguye92]

I'm actually getting this error also when trying to init. I'm initializing firebase auth in _app.tsx as initAuth() which is being imported from another file which exports this

import "./firebase";
import { init } from "next-firebase-auth";
import firebase from "./firebase";

const TWELVE_DAYS = 12 * 60 * 60 * 24 * 1000

const initAuth = () => {
    init({
        authPageURL: "/signin",
        appPageURL: "/user",
        loginAPIEndpoint: "/api/login", // required
        logoutAPIEndpoint: "/api/logout", // required
        firebaseAdminInitConfig: {
            credential: {
                projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
                privateKey: process.env.FIREBASE_PRIVATE_KEY,
                clientEmail: process.env.FIREBASE_CLIENT_EMAIL
            },
            databaseURL: process.env.NEXT_PUBLIC_FIREBASE_DATABASE_URL
        },
        firebaseClientInitConfig: {
            apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
            authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN,
            projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
            storageBucket: process.env.NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET,
            messagingSenderId: process.env.NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID,
            appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
        },
        cookies: {
            name: "STBK", // required
            keys: [
                process.env.COOKIE_SECRET_CURRENT,
                process.env.COOKIE_SECRET_PREVIOUS,
            ],
            httpOnly: true,
            maxAge: TWELVE_DAYS,
            overwrite: true,
            path: "/",
            sameSite: "strict",
            secure: process.env.NODE_ENV === "production" ? true : false,
            signed: true,
        },
    })
}

export default initAuth;

Obviously the private key will be returned as undefined on the browser and I see the key in the terminal but how do I get around this?

[Dnguye92]

@kmjennison yeah v9 of the firebase sdk.

[kmjennison]

What version of next-firebase-auth are you using?

[pazlopez911021]

next-firebase-auth": "^1.0.0-canary.11", I am using this and I also have the same error do you know of any solution

[pazlopez911021]

next-firebase-auth": "^1.0.0-canary.11", I am using this and I also have the same error do you know of any solution

[kmjennison]

Please try the example app:
https://github.com/gladly-team/next-firebase-auth/tree/v1.x/example

If you still have an issue, please provide a full reproduction.