PHPFixing
  • Privacy Policy
  • TOS
  • Ask Question
  • Contact Us
  • Home
  • PHP
  • Programming
  • SQL Injection
  • Web3.0

Thursday, November 10, 2022

[FIXED] How to access variables from .env file in React app using Firebase?

 November 10, 2022     api, environment-variables, firebase, firebase-authentication, reactjs     No comments   

Issue

Hopefully, I did put my .env file in the right place, I wanna access variables in firebase.js file for authentication to keep my API secure.

enter image description here

.env file:-

enter image description here

Here is my firebase.js file:-

import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";

// Your web app's Firebase configuration
const firebaseConfig = {
    apiKey: process.env.API_KEY,
    authDomain: process.env.DOMAIN,
    projectId: process.env.PROJECT_ID,
    storageBucket: process.env.STORAGE_BUCKET,
    messagingSenderId: process.env.MSG_SENDER_ID,
    appId: process.env.APP_ID,
};

// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth();

export { app, auth };

The error I'm getting 👇:-

enter image description here

How to use .env file here?


Solution

Add a prefix of REACT_APP to your variable names in your dotenv file. Like REACT_APP_API_KEY and to access the value in your react file use process.env.REACT_APP_API_KEY and after making changes make sure to restart your react app.



Answered By - Arman Kazi
Answer Checked By - Terry (PHPFixing Volunteer)
  • Share This:  
  •  Facebook
  •  Twitter
  •  Stumble
  •  Digg
Newer Post Older Post Home

0 Comments:

Post a Comment

Note: Only a member of this blog may post a comment.

Total Pageviews

Featured Post

Why Learn PHP Programming

Why Learn PHP Programming A widely-used open source scripting language PHP is one of the most popular programming languages in the world. It...

Subscribe To

Posts
Atom
Posts
Comments
Atom
Comments

Copyright © PHPFixing