[Solved] Firebase auth/invalid-api-key error when setting the values in the environment variable on NextJS?

Cover Image for [Solved] Firebase auth/invalid-api-key error when setting the values in the environment variable on NextJS?
Ullas Kishan
Ullas Kishan
2 min read

I have planned to implement the Firebase authentication method on my NextJS application, so I created the project on the Firebase site and received the Firebase configuration values.

Firebase config values are nothing but an object. It has appid, apiKey, projectId, and so on.
For better key management, I thought to add these keys to the environment variable, aka env. After that, I used them in my project.

const firebaseConfig = {
  apiKey: "XXXX.XXXX.XXXX.XXXX.XXXX",
  authDomain: "XXXX.XXXX.XXXX.XXXX.XXXX",
  projectId: "XXXX.XXXX.XXXX.XXXX.XXXX",
  storageBucket: "XXXX.XXXX.XXXX.XXXX.XXXX",
  messagingSenderId: "XXXX.XXXX.XXXX.XXXX.XXXX",
  appId: "XXXX.XXXX.XXXX.XXXX.XXXX",
};

In my .env file

API_KEY=XXXX.XXXX.XXXX.XXXX.XXXX
AUTH_DOMAIN=XXXX-XXX.firebaseapp.com
PROJECT_ID=XXXX.XXXX.XXXX.XXXX.XXXX
STORAGE_BUCKET=XXXX.XXXX.XXXX.XXXX.XXXX
MESSAGING_SENDER_ID=12345678
APP_ID=1:12345678:web:XXXX.XXXX.XXXX

But when running the application, it throws an error. It says "auth/invalid-api-key". I have verified the config values on my console and am able to see them, but getting the error is also a bit confusing.

Unhandled Runtime Error
FirebaseError: Firebase: Error (auth/invalid-api-key).

How to use the environment variable in NextJS

We can fix this problem in two ways, you can choose the logic accordingly.

First solution

Environment variables are only available in the Node.js(server side ) environment, meaning they won't be exposed to the browser. In order to expose a variable to the browser(client side) you have to prefix the variable with NEXT_PUBLIC_

So you have to modify your environment values by adding the prefix NEXT_PUBLIC_ , that will be like this.

NEXT_PUBLIC_API_KEY=XXXX.XXXX.XXXX.XXXX.XXXX
NEXT_PUBLIC_AUTH_DOMAIN=XXXX-XXX.firebaseapp.com
NEXT_PUBLIC_PROJECT_ID=XXXX.XXXX.XXXX.XXXX.XXXX
NEXT_PUBLIC_STORAGE_BUCKET=XXXX.XXXX.XXXX.XXXX.XXXX
NEXT_PUBLIC_MESSAGING_SENDER_ID=12345678
NEXT_PUBLIC_APP_ID=1:12345678:web:XXXX.XXXX.XXXX

Second solution

Open/Create the next.config.js file and export the variable there under the env object. On this solution we do not required any modification on the variable name.

module.exports = {
  //add other configs here too
  env: {
    apiKey: process.env.API_KEY,
    authDomain: process.env.AUTH_DOMAIN,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MESSAGING_SENDER_ID,
    appId: process.env.APP_ID,
  },
};
Related tags
nextjs
firebase

More Stories

Access to fetch domain-ABC from origin domain-XYZ blocked by cors policy
Access to fetch domain-ABC from origin domain-XYZ blocked by cors policy

Cross-Origin Resource Sharing (CORS) is a security feature that lets a web page from one domain request resources from a different domain

Ullas Kishan
3 min read
Why SVG element is not reading by NVDA screen reader
Why SVG element is not reading by NVDA screen reader

SVG elements will not add the accessibility atttributes by default, so that will fail to describe by itself, and the NVDA and other screen reader required these attributes to work.

Ullas Kishan
2 min read
A Guide to Resolving Git Conflicts in Your Local Setup
A Guide to Resolving Git Conflicts in Your Local Setup

Despite being acquainted with git, many developers struggle to resolve these conflicts due to a lack of understanding of how to pull the conflict details into their local machines.

Ullas Kishan
2 min read
Unlocking the Secrets of Firebase Authentication with Google in Next.js
Unlocking the Secrets of Firebase Authentication with Google in Next.js

Firebase Authentication is one of its gems, allowing you to add user authentication effortlessly. It's secure, reliable, and comes with Google's seal of approval.

Ullas Kishan
5 min read
How to setup jest test case in NextJS
How to setup jest test case in NextJS

Enzyme Internal Error: Enzyme expects an adapter to be configured, but found none.

Ullas Kishan
4 min read
[Solved] How to download SVG as PNG file
[Solved] How to download SVG as PNG file

Easist way of downloading the SVG file as PNG file is done using javascript snippet

Ullas Kishan
2 min read
Some useful GIT commands for beginners
Some useful GIT commands for beginners

To keep the code is safe and distrubuted between multiple resources that been achieved with the help of GIT

Ullas Kishan
3 min read
How to set the http response headers in NextJS websites
How to set the http response headers in NextJS websites

The importance of the http response headers are highly needed to protect the websites from hackers. If you poorly managed the response header then one day the website will be compromise to the hacker.

Ullas Kishan
3 min read
What are the different types of HTTP Security headers ?
What are the different types of HTTP Security headers ?

An HTTP header is a response by a web server to a browser that is trying to access a web page.

Ullas Kishan
4 min read
[Solved] How to create Application insight access token
[Solved] How to create Application insight access token

Application Insights is an feature of Azure Monitor and it provides application performance monitoring features. APM tools are very useful to analyse applications from development, testing and production release.

Ullas Kishan
2 min read
How to do lazy loading in ReactJS
How to do lazy loading in ReactJS

A lazy function lets you defer the loading of a components code until it is rendered for the first time. Before, it will remain in the bundle. So that we can reduce the load of the application.

Ullas Kishan
3 min read
Javascript interview questions and answers
Javascript interview questions and answers

We covered most asked questions for Javascript interview and their answers

Ullas Kishan
8 min read
How to insert emojis to the html page
How to insert emojis to the html page

we are displaying these emojis with the help of ASCII code and it is not that easy to remember because its a mix of numeric and special characters.

Ullas Kishan
2 min read
What are ES6 features ?
What are ES6 features ?

ES6 or the ECMAScript 2015 is the major edition of ECMAScript language, it introduced several new features which are very special to the developers

Ullas Kishan
7 min read
Different versions of the ECMAscript
Different versions of the ECMAscript

what are the new features among the various versions of ECMA script and what is difference

Ullas Kishan
2 min read
[Solved] How to squash the number of commits from a branch in Git
[Solved] How to squash the number of commits from a branch in Git

We can squash the number of commits from a git branch

Ullas Kishan
3 min read
[Solved] Your focus-trap must have at least one container with at least one tabbable node in it at all times
[Solved] Your focus-trap must have at least one container with at least one tabbable node in it at all times

Your focus-trap must have at least one container with at least one tabbable node in it at all times, when using dialog or modal in ReactJS or other front-end framework

Ullas Kishan
2 min read
Writing test cases for modal popup in Jest
Writing test cases for modal popup in Jest

Writing test cases for modal popup in jest

Ullas Kishan
2 min read
[Solved] Uncaught TypeError: Cannot read property 'location' of undefined
[Solved] Uncaught TypeError: Cannot read property 'location' of undefined

Cannot read property location of undefined, this is an common test cases error in react jest while using useLocation hook in your react component

Ullas Kishan
2 min read
[Solved] Missing ID attributes in markdown to html
[Solved] Missing ID attributes in markdown to html

There is a common problem when parsing the markdown file the ID attribute is missing in the element, here we found a solution to fix/overcome

Ullas Kishan
1 min read
Back to basics : Top interview logical programs in javascript
Back to basics : Top interview logical programs in javascript

It is basicall demonstrating how to find the fibanocci, amstrong, prime numbers and pyramid pattern using javascript.

Ullas Kishan
4 min read
How to read the markdown files in ReactJS
How to read the markdown files in ReactJS

Markdown is a lightweight markup language that you can use to add formatting elements to plaintext text documents.

Ullas Kishan
2 min read
Some useful techniques for array operation using javascript
Some useful techniques for array operation using javascript

There are few development tips for Javascript array operation, these tips will reduce your development time.

Ullas Kishan
3 min read
How to setup auto generated sitemap in nextjs
How to setup auto generated sitemap in nextjs

For every website the Sitemap will be playing important role for SEO performance. In Ecommerce and other consumer websites also SEO have important role for developing their revenue.

Ullas Kishan
3 min read
How to know whether we are using mobile or desktop
How to know whether we are using mobile or desktop

This question is very usual, to get solve this issue by using the browser property user agent to check whether the device type.

Ullas Kishan
1 min read
What are the possible ways to create objects in JavaScript
What are the possible ways to create objects in JavaScript

What are the possible ways to create objects in JavaScript, The traditional way to create an empty object is using the Object constructor. But currently this approach is not recommended.

Ullas Kishan
2 min read