Environment variables not working for hiding firebase API key - javascript

I want to hide my firebase API key with the environment variable. But it gives an error.
Firebase.init.js File
import { initializeApp } from "firebase/app";
import { getAuth } from 'firebase/auth';
const firebaseConfig = {
apiKey: process.env.REACT_APP_apiKey,
authDomain: process.env.REACT_APP_authDomain,
projectId: process.env.REACT_APP_projectId,
storageBucket: process.env.REACT_APP_storageBucket,
messagingSenderId: process.env.REACT_APP_messagingSenderId,
appId: process.env.REACT_APP_appId
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;
.env.local File
REACT_APPapiKey='XXX___XXXX'
REACT_APPauthDomain='XXXX___XXXX'
REACT_APPprojectId='XXXXX____XXXXX'
REACT_APPstorageBucket='XXXXX___XXXXX'
REACT_APPmessagingSenderId='XXXXX____XXXX'
REACT_APPappId='XXXXXX___XXXXX'

kindly ensure the variables defined are consistent:
Compare in your .env.local File and Firebase.init.js File
REACT_APPapiKey !== REACT_APP_apiKey
Also check how you are importing in the component where it's used

Related

How do I resolve this firebase import error? Module not found: Error: Package path . is not exported from package

I am trying to import auth from my firebase.js file but when I type import {auth} from "./firebase" I get this error:
Module not found: Error: Can't resolve './firebase' in 'C:\Users\Zahraa\projects\netflix-build\src\Screens'
and when I try import {auth} from "../firebase" I get this error:
Module not found: Error: Package path . is not exported from package C:\Users\Zahraa\projects\netflix-build\node_modules\firebase (see exports field in C:\Users\Zahraa\projects\netflix-build\node_modules\firebase\package.json)
Did you mean './firebase'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\Users\Zahraa\projects\netflix-build\node_modules).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.
I am unsure what the problem is. this is my firebase.js code:
import firebase from "firebase";
const firebaseConfig = {
apiKey: "AIzaSyDMFs_i60UUWNutBKJVzBkZ2U5W93JCnoM",
authDomain: "netflix-clone-18cc6.firebaseapp.com",
projectId: "netflix-clone-18cc6",
storageBucket: "netflix-clone-18cc6.appspot.com",
messagingSenderId: "1000960928424",
appId: "1:1000960928424:web:e10790f27d2d1fa9b1f09d",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db =
firebaseApp.firestore();
const auth = firebase.auth();
export { auth };
export default db;
import firebase from "firebase";
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: "AIzaSyDMFs_i60UUWNutBKJVzBkZ2U5W93JCnoM",
authDomain: "netflix-clone-18cc6.firebaseapp.com",
projectId: "netflix-clone-18cc6",
storageBucket: "netflix-clone-18cc6.appspot.com",
messagingSenderId: "1000960928424",
appId: "1:1000960928424:web:e10790f27d2d1fa9b1f09d",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db =
firebaseApp.firestore();
const app = initializeApp(firebaseConfig)
export auth = getAuth(app)
export default db;

Failing to Retrieve Data from Firebase Real Time Database

I am trying to retrieve data from a firebase real-time database and I am following this tutorial from the firebase documentation: https://firebase.google.com/docs/database/admin/retrieve-data#section-start.
For my front-end framework I am using Svelte.
I set up the database in firebase.js.
firebase.js
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
import { getDatabase } from 'firebase/database';
import { getAuth, GoogleAuthProvider } from 'firebase/auth';
const firebaseConfig = {
apiKey: "AIzaSyCHL9UcT3TtvgQwt7N3DbLjRon9gKPFjA0",
authDomain: "lyrics-and-quotes.firebaseapp.com",
databaseURL: "https://lyrics-and-quotes-default-rtdb.firebaseio.com",
projectId: "lyrics-and-quotes",
storageBucket: "lyrics-and-quotes.appspot.com",
messagingSenderId: "492758193692",
appId: "1:492758193692:web:60ab73db53010e7fa7b1d9",
measurementId: "G-T33YSTR82R",
};
// Initialize Firebase
initializeApp(firebaseConfig);
// Initialize Realtime Database and get a reference to the service
export const db = getDatabase(app);
// Initialize auth
export const auth = getAuth();
// Initialize Google auth provider
export const googleProvider = new GoogleAuthProvider();
On one of my front-end components, I have:
import { db } from '../database/firebase';
const postsRef = db.ref('posts');
However, I get the error: Posts.svelte:5 Uncaught TypeError: db.ref is not a function.
app is not defined in your firebase.js file.
You need to do
const app = initializeApp(firebaseConfig);
export const db = getDatabase(app);
as shown in the doc.

I am getting "firebase storage is not defined" error while trying to implement firebase for my react app

I am creating a signup page that requires thumbnail. firebase authentication is working fine but the i am getting this error for the storage
import firebase from 'firebase/app'
import 'firebase/firestore'
import 'firebase/auth'
import 'firebase/storage'
const firebaseConfig = {
apiKey: "AIzaSyDjltfm2KlCLu1wYpbKl5A9pnxGv_7dxMc",
authDomain: "sunodojo.firebaseapp.com",
projectId: "sunodojo",
storageBucket: "sunodojo.appspot.com",
messagingSenderId: "482721025907",
appId: "1:482721025907:web:96cd2758994da9be01bf06"
};
// initializing firebase
firebase.initializeApp(firebaseConfig)
// initializing services
const projectFirestore = firebase.firestore()
const projectAuth = firebase.auth()
const projectStorage = firebase.storage()
// timestamp
const timestamp = firebase.firestore.Timestamp
export { projectFirestore, projectAuth, projectStorage, timestamp }

#firebase/firestore: Firestore (9.9.3): INTERNAL UNHANDLED ERROR: TypeError: protoLoader.fromJSON is not a function

Currently getting this error when trying to initialise firestore on my Nextjs website. This is localhost instance. This does work on another computer and on my deployed version so I'm not too sure what's going on here. I have already done an npm install. And all the config is already set correctly.
My firebase initialisation code for reference:
import { FirebaseOptions, getApp, initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from 'firebase/firestore';
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY,
authDomain: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.firebaseapp.com`,
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID,
storageBucket: `${process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID}.appspot.com`,
messagingSenderId: `${process.env.NEXT_PUBLIC_FIREBASE_SENDER_ID}`,
appId: process.env.NEXT_PUBLIC_FIREBASE_APP_ID,
measurementId: process.env.NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID,
};
// Initialize Firebase
const createFirebaseApp = (config: FirebaseOptions) => {
try {
return getApp();
} catch {
return initializeApp(config);
}
}
const app = createFirebaseApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore(app);
export {auth, db};

How to fix auth/auth-domain-config-required while using Firebase authentication?

This is the code I'm using. The link seems fine and it worked perfectly. Is there any modification I need to do for the environment file?
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#available-libraries
// Your web app's Firebase configuration
const firebaseConfig = {
apiKey: process.env.REACT_APP_apiKey || 'mock_key',
authDomain: process.env.REACT_APP_authDomain,
projectId: process.env.REACT_APP_projectId,
storageBucket: process.env.REACT_APP_storageBucket,
messagingSenderId: process.env.REACT_APP_messagingSenderId,
appId: process.env.REACT_APP_appId
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
export default auth;
Check your authdomain in env file if it the same from the firebase console

Categories

Resources