We Keep Coding

Next.js env variable not loading

My environment variables are not loading in next.js. No it is not a duplicate of Environment variables not working (Next.JS 9.4.4).
I have a .env.local at the root.
NEXT_PUBLIC_FIREBASE_API_KEY=<key>
NEXT_PUBLIC_FIREBASE_AUTHENTICATION_DOMAIN=<key>
NEXT_PUBLIC_FIREBASE_PROJECT_ID=<key>
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=<key>
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=<key>
NEXT_PUBLIC_FIREBASE_APP_ID=<key>
NEXT_PUBLIC_FIREBASE_MEASUREMENT_ID=<key>
I am trying to load them in a firebase.tsx file also at root
import { getApp, getApps, initializeApp } from "firebase/app";
import { getAuth, signOut } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: process.env.NEXT_PUBLIC_REBASE_API_KEY , //need the empty string before the env file is loaded
authDomain: process.env.NEXT_PUBLIC_REBASE_AUTHENTICATION_DOMAIN,
projectId: process.env.NEXT_PUBLIC_REBASE_PROJECT_ID,
storageBucket: process.env.NEXT_PUBLIC_REBASE_STORAGE_BUCKET,
messagingSenderId: process.env.NEXT_PUBLIC_REBASE_MESSAGING_SENDER_ID ,
appId: process.env.NEXT_PUBLIC_REBASE_APP_ID,
measurementId:process.env.NEXT_PUBLIC_REBASE_MEASUREMENT_ID
};
export const USER_EXIST = "user/exist" ;
export const USER_DUPLICATE = "user/duplicate" ;
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
// // Initialize Firebase
export const app = !getApps().length ? initializeApp(firebaseConfig) : getApp();
export const db = getFirestore(app);
export async function logOut(){
await signOut(getAuth())
.catch((err) => alert(err));
}
I don't understand why it does not load.
I do seem to follow the doc Environment variable next.js doc.
Can you help me out ?
Thank you

Firebase authentication on React Native auth.tenandId error

I'm trying a email-password authentication with Firebase. I initiated a web app on Firebase followed the Get Started section of web. But I'm getting this error from catch():
[TypeError: undefined is not an object (evaluating 'auth.tenantId')]
My Firebase config:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore"
const firebaseConfig = {
apiKey: "",
authDomain: "spotifymockrn.firebaseapp.com",
projectId: "spotifymockrn",
storageBucket: "spotifymockrn.appspot.com",
messagingSenderId: "",
appId: "",
measurementId: "",
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export const db = getFirestore(app);
My SignUp Screen where I call handleFirebase function when SignUp is pressed.Normally use is also saved with AsyncStorage but for simplicity I'm trying like this now:
import { createUserWithEmailAndPassword } from 'firebase/auth';
import auth from '../../../../firebase/firebase'
.
.
const handleFirebase = () => {
createUserWithEmailAndPassword(auth, email, password).then(response => { console.log(response.user); })
.catch((error) => (console.error(error)));
}
I'm getting email, and password from redux store, but I also tried directly writing strings there and got the same error and couldn't find anything online. I tried writing real emails as well as random strings nothing changes. Thank you for reading.

import auth from '../../../../firebase/firebase'
This import would be an object { auth, db } but you need to pass the Firebase Auth instance in createUserWithEmailAndPassword(). Try changing your import as shown below:
// the { }
import { auth, db } from '../../../../firebase/firebase'
Now auth will be the Auth instance.

React Native import firebase 'auth' and 'firestore'

I'm getting errors when I try to simply load the auth and firestore from firebase.
Error message:
TypeError: (0, _app.initializeApp) is not a function. (In '(0, _app.initializeApp)(firebaseConfig)', '(0, _app.initializeApp)' is undefined)
import { initializeApp } from "firebase/app";
import { getFirestore } from "firebase/firestore";
const firebaseConfig = {
apiKey: "KEY",
authDomain: "app.firebaseapp.com",
projectId: "app",
storageBucket: "app.appspot.com",
messagingSenderId: "1293821378",
appId: "5647"
};
const app = initializeApp(firebaseConfig);
const db = getFirestore(app);
const auth = app.auth();
export { db, auth }
Also when I try to import the auth from another file I try this:
import { auth } from '../firebase';

If you are using Firebase version <9.0.0 which only supports name-spaced SDK, then use the older imports only and not the modular syntax. Try refactoring the code as shown below:
import firebase from "firebase/app";
import "firebase/firestore";
import "firebase/auth"
const firebaseConfig = {};
const app = firebase.initializeApp(firebaseConfig);
const db = firebase.firestore();
const auth = firebase.auth();
export { db, auth }
Also makes sure you are referring to Web (name-spaced) tab in the documentation.

TypeError: undefined is not an object(evaluating '_$$_REQUIRE(_dependencyMap[9], "../../config/FIREBASE").FIREBASE.database')

I have installed Firebase with npm in Firebase, but I don't know what happens with this error.
File FIREBASE.js
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// 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: "AIzaSyAd2EBoYYCRWEc3oClZTV3Wo-TiQkM2MgQ",
authDomain: "crud-react-26836.firebaseapp.com",
databaseURL: "https://crud-react-26836-default-rtdb.asia-southeast1.firebasedatabase.app",
projectId: "crud-react-26836",
storageBucket: "crud-react-26836.appspot.com",
messagingSenderId: "741718079918",
appId: "1:741718079918:web:1566301b46c4448c8c703f"
};
// Initialize Firebase
const FIREBASE = initializeApp(firebaseConfig);
export default FIREBASE;
TambahKontak.js
import React, { Component } from 'react'
import { StyleSheet, View, TouchableOpacity, Text, Alert } from 'react-native'
import { InputData } from '../../component'
import { FIREBASE } from '../../config/FIREBASE'
onSubmit = () => {
if (this.state.nama && this.state.nomorHP && this.state.alamat) {
console.log("Masuk Submit");
console.log(this.state);
const kontakReferensi = FIREBASE.database().ref('kontak');

You aren't using the new Modular/Functional syntax which is included from version 9.0.0+. You would have to rewrite your code to follow the new syntax:
import { getDatabase } from "firebase/database"
const dbRef = ref(getDatabase());
const snapshot = await get(child(dbRef, 'kontak'))
If you want to use the existing code (with older syntax) then use compat version by changing the imports to:
import firebase from 'firebase/compat/app'
import 'firebase/compat/database'
import 'firebase/compat/[SERVICE_NAME]'
const FIREBASE = firebase.initializeApp(firebaseConfig);
export default FIREBASE;
I'd recommend using the new version and following the documentation for learning more about it.

Module not found: Can't resolve 'firebase' in 'D:\gmail-react\src'

I am installed firebase logged in as well.
I am getting a completely white screen on importing it.
This is the firebase.js file
import firebase from 'firebase'
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// 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: "AIzaSyBb9O35r_N--vwBZNfpxY3vZHzi4wH1oII",
authDomain: "fir-237a1.firebaseapp.com",
projectId: " fir-237a1",
storageBucket: "fir-237a1.appspot.com",
messagingSenderId: "1055799909510",
appId: "1:1055799909510:web:c90fad7d5113500585c507"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = app.firestore();
const auth = firebase.auth();
const provider = new firebase.auth.GoogleAuthProvider();
export { db, auth, provider };
This is where I am importing firebase, SendMail.js file
import { db } from "./firebase.js"
import firebase from 'firebase';
function SendMail() {
const { register, handleSubmit, watch, formState: { errors } } = useForm();
const dispatch = useDispatch();
const onSubmit = (formData) => {
console.log(formData);
db.collection('emails').add({
to: formData.to,
subject: formData.subject,
message: formData.message,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
dispatch(closeSendMessage());
};

If the files are one by another the import here:
import { db } from "./firebase.js"
Should be like this:
import { db } from "/firebase.js"
without the ".". If you use the "." the file will be searched in the folder above and that is how it looks like. It wen to the src folder witch is probable above the one where your file is.
Also update your firebase.js file to this:
import { getFirestore } from "firebase/firestore";
import { getAuth, GoogleAuthProvider } from "firebase/auth";
// Import the functions you need from the SDKs you need
import { initializeApp } from "firebase/app";
// 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: "AIzaSyBb9O35r_N--vwBZNfpxY3vZHzi4wH1oII",
authDomain: "fir-237a1.firebaseapp.com",
projectId: " fir-237a1",
storageBucket: "fir-237a1.appspot.com",
messagingSenderId: "1055799909510",
appId: "1:1055799909510:web:c90fad7d5113500585c507",
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getFirestore();
const auth = getAuth();
const provider = new GoogleAuthProvider();
export { db, auth, provider };
and make sure you use the latest Firebase JS SDK Version 9.x
A just saw that a lot of your code has the old SKD 8 in the repo. You can either stay with that syntax by using the compad version in the new SDK or refactor your code to use the new syntax of SDK version 9. Here is a migration guid.
You need to pick one of those two options. I would recommend to migrate to the new version.
With the new SDK version you don't even need the firebase.js file. Your code would look like this:
import { getFirestore, addDoc, collection } from "firebase/firestore";
function SendMail() {
const {
register,
handleSubmit,
watch,
formState: { errors },
} = useForm();
const dispatch = useDispatch();
const onSubmit = (formData) => {
console.log(formData);
addDoc(collection(db, "emails"), {
to: formData.to,
subject: formData.subject,
message: formData.message,
timestamp: firebase.firestore.FieldValue.serverTimestamp(),
});
};
dispatch(closeSendMessage());
}