Develop Reference

how can I connect my react js app to firebase 9?

I have been practicing on this react js app and wanted to connect to firebase for authentication of account creating and signing. but I get this error message,
Module not found: Error: Package path . is not exported from package /Users/feysel/roum/node_modules/firebase (see exports field in /Users/feysel/roum/node_modules/firebase/package.json). and I couldn't find the fix.
this is the firebase.js code
`
import firebase from "firebase";
const firebaseConfig = {
apiKey: "AIzaSyAXdZmTDJjxY1cxn2QkNaqh2FzbGDPjds8",
authDomain: "roum-34c72.firebaseapp.com",
projectId: "roum-34c72",
storageBucket: "roum-34c72.appspot.com",
messagingSenderId: "509648148482",
appId: "1:509648148482:web:6d66ae1678c1ddfd3baf1b",
measurementId: "G-Z9EK18CBH0",
};
const firebaseApp = firebase.initializeApp(firebaseConfig);
const db = firebaseApp.firestore();
const auth = firebase.auth();
export { db, auth };
and this one is from login.js
import React, { useState } from "react";
import "./Login.css";
import { Link } from "react-router-dom";
import { auth } from "./firebase";
function Login() {
const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const signIn = (e) => {
e.preventDefault();
};
const register = (e) => {
e.preventDefault();
auth
.createUserWithEmailAndPassword(email, password)
.then((auth) => {
//new user creation successful with username & password
console.log(auth);
})
.catch((error) => alert(error.message));
};
`

How can I provide options when not being deployed to hosting via source?

I'm building a project in React where it has authentication so I'm using firebase
I have encountered this error
Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options)
here is my config-firebase file:
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
const firebaseConfig = {
apiKey: "AIzaSyBoKEW_g0gOwNKkHGMAyhXxC0ESfdsVhKI",
authDomain: "kargoevi-auth.firebaseapp.com",
projectId: "kargoevi-auth",
storageBucket: "kargoevi-auth.appspot.com",
messagingSenderId: "726037811463",
appId: "1:726037811463:web:42d75c7f5c1d1b5b9bf5a2",
measurementId: "G-PJXGLVZ6GQ",
};
export const auth = getAuth(app);
const app = initializeApp(firebaseConfig);
export default app;
here is my Auth file:
import React, { useState, useEffect } from "react";
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "./base";
export const AuthContext = React.createContext();
export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
const [pending, setPending] = useState(true);
useEffect(() => {
onAuthStateChanged(auth, (user) => {
setCurrentUser(user);
setPending(false);
});
}, []);
if (pending) {
return <>Loading...</>;
}
return (
<AuthContext.Provider
value={{
currentUser,
}}
>
{children}
</AuthContext.Provider>
);
};
note: I'm not trying to deploy it yet
any ideas on how can I fix this error?

Firebase app must be initialized before you use any other Firebase services so make sure the initializeApp() function is called first.
// correct order
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
It's best to use the exported auth instance in other files. If you use getAuth() in other files as well, there's a chance initializeApp() has not been called yet leading to same error.

FirebaseError: Firebase: Need to provide options, when not being deployed to hosting via source. (app/no-options)

I have created a Next.js application and am using Firebase authentication. I have used the useContext hook for managing user state across my application.
The code for the AuthContext is as follows:
auth.js
import { createContext, useState, useEffect, useContext } from "react";
import { getAuth, onIdTokenChanged } from "firebase/auth";
const AuthContext = createContext({});
export const AuthProvider = ({children}) => {
const auth = getAuth();
const [user, setUser] = useState(null);
useEffect(() => {
return(onIdTokenChanged(auth, (user) => {
if(user) {
setUser(user);
} else {
setUser(null);
}
}))
},[]);
return(<AuthContext.Provider value={{user}}>{children}</AuthContext.Provider>);
}
export const useAuth = () => useContext(AuthContext);
However, I'm getting the following error in the auth.js file:
I am not able to understand how to fix it.
Also, I want to know if using useContext() hook is better for route protection as opposed to storing user session cookies in the browser and verifying it from there.
Edit:
I have configured Firebase in firebaseConfig.js. The code for it is as follows:
firebaseConfig.js
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
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,
};
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);

I was just getting the same error, I managed to fix this by doing:
import { initializeApp } from 'firebase/app';
import { getAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
const firebaseConfig{
...
}
And adding these lines like that:
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
const db = getFirestore();
export { auth, db };

Initialize app like Marcos Oliveira said, with error handling:
try
{
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
} catch(error) {
console.log('Error:', error)
}

For anyone still dealing with this issue, my solution was to re-order my imports in the App.js.
For some reason, the components I imported needed to be in a specific order. Otherwise, the same error is thrown.

I did solve the problem by:
first I created a firebaseConfig.js file and put my configs and exported auth
import { initializeApp } from "firebase/app";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: "AIzaSyAzlY091r0Ihxxxxxx5F8",
authDomain: "mealxxxxxc.firebaseapp.com",
projectId: "mealxxxxxc",
storageBucket: "meaxxxxxpot.com",
messagingSenderId: "10xxxx00",
appId: "1:1092909165400:web:532xxxxx32d",
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
then in authContext.js, I imported auth from firebaseConfig.js
import React, { useState, createContext } from "react";
import { signInWithEmailAndPassword } from "firebase/auth";
import { auth } from "../firebaseConfig";
export const AuthenticationContext = createContext();
export const AuthenticationContextProvider = ({ children }) => {
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState(null);
const [user, setUser] = useState(null);
const onLogin = (email, password) => {
setIsLoading(true);
signInWithEmailAndPassword(auth, email, password)
.then((userData) => {
setUser(userData.user);
setIsLoading(false);
console.log("userData", userData.user);
})
.catch((er) => {
setIsLoading(false);
setError(er.toString());
console.log(er.message.toString());
});
};

So, for me, that error came about when I had all my firebase configurations on separate page/file (Firebase.js) including the following:
// Initialize Firebase
export const app = initializeApp(firebaseConfig);
export const db = getFirestore(app);
export const auth = getAuth(app);
export const storage = getStorage(app);
So, the initial setup for Firebase was okay.
However, I also had a separate page/file (App.js) where I called createUserWithEmailAndPassword(auth, email, password) as well as other built-in Firebase auth methods...
But, I forgot to import app from Firebase.js and that error popped up after I called createUserWithEmailAndPassword.
Once I did imported app, the error went away.

the problem is with the app object which is not getting initialized before the context provider render's
You should import the 'app' from firebaseConfig.js or whatever.js file your firebase configuration is in, into your Context file.
Note: make sure you are exporting the app from the configuration file
import { app } from 'location/to/firebaseConfig.js';
and in useEffect check for the 'app' if it exists then run the firebase-specific functions afterward and also add the 'app' to the dependency array.
useEffect(() => {
if (app) {
//enter firebase-specific code here
// for example:
onAuthStateChanged(auth, (user) => {
});
}
}, [app]);

you just need to export firebase conifgurations as app or any other type and re import it inside the page you are working on.
for me it was like this
`import { getAuth,signInWithEmailAndPassword } from "firebase/auth";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
function SignInPage(){
const auth=getAuth();
const SignIn=()=>{
signInWithEmailAndPassword(auth,email,password)
.then((userCredentials)=>{
const user =userCredentials.user;
console.log(user);
alert("successfully loged a user")
})
.catch((error)=>{
const errorCode=error.code;
const errorMessage=error.message;
alert(errorCode,errorMessage);
});
}
const [email,setEmail]=useState("")
const [password,setPassword]=useState("")
return(
<div className="main">
<input type={"email"} placeholder="Email" onChange=
{(e)=>setEmail(e.target.value)}/>
<input type={"password"} placeholder="Password" onChange=
{(e)=>setPassword(e.target.value)}/>
<button onClick={()=>SignIn(email,password)}>Create Account</button>
</div>
)}
export default SignInPage;`

Firebase sign in with google for web not redirecting

I was working on a react project in which I wanted to implement google sign in so I used firebase and wrote the following code:
import {initializeApp} from "firebase/app";
import "firebase/auth";
import { getAuth } from "firebase/auth";
const firebaseConfig = {
apiKey: "****",
authDomain: "***",
projectId: "***",
storageBucket: "***",
messagingSenderId: "***",
appId: "***",
measurementId: "***"
};
const app = initializeApp(firebaseConfig);
export const auth = getAuth(app);
export default app;
Creating Context to make the function accessible in the whole application:
import React from 'react';
import FirebaseContext from './FirebaseContext';
import { auth } from '../Firebase/firebase';
import { signInWithRedirect,GoogleAuthProvider,createUserWithEmailAndPassword } from "firebase/auth";
const FirebaseState = (props)=>{
const reactSignup = (email,password)=>{
return createUserWithEmailAndPassword(auth,email,password);
}
const googleSignin = ()=>{
const provider = new GoogleAuthProvider();
return signInWithRedirect(auth,provider);
}
return(
<FirebaseContext.Provider value={{reactSignup,googleSignin}}>{props.children}</FirebaseContext.Provider>
)
}
export default FirebaseState;
Calling the function on the desired button click
const {googleSignin} = useContext(FirebaseContext);
const handleGoogleSignin = async()=>{
try{
console.log("Sign in attempted");
await googleSignin();
history.push("/main");
}catch(err){
console.log(err);
}
}
Now the problem is that whenever I am running application using npm run start and the button is clicked it does not redirect for sign in but when the application is stopped then it is able to redirect but as my application is no more running that is of no use.
30 sec screen recording of the problem

Do you try to change signInWithRedirect to signInWithPopup ?
So
import React from 'react';
import FirebaseContext from './FirebaseContext';
import { auth } from '../Firebase/firebase';
import { signInWithPopup,GoogleAuthProvider,createUserWithEmailAndPassword } from "firebase/auth";
const FirebaseState = (props)=>{
const reactSignup = (email,password)=>{
return createUserWithEmailAndPassword(auth,email,password);
}
const googleSignin = ()=>{
const provider = new GoogleAuthProvider();
return signInWithPopup(auth,provider);
}
return(
<FirebaseContext.Provider value={{reactSignup,googleSignin}}>{props.children}</FirebaseContext.Provider>
)
}
export default FirebaseState;
Alternative Idea
Detact signInWithRedirect from Context and use the funct directly in your component function like this:
import { auth, provider } from '../../config';
import { signInWithPopup } from '#firebase/auth';
import { Button } from '#chakra-ui/button';
export default function Signup() {
const loginWithGoogle = () => {
signInWithPopup(auth, provider);
};
return (
<div>
<Button onClick={loginWithGoogle}>Signin With Google</Button>
</div>
);
}
Alternative Idea 2
Go to Firebase Panel > Authentication > Sign-in Method
Check your domain, if your domain is in the list delete and add again. Else add your domain.

Uncaught TypeError: _firebase__WEBPACK_IMPORTED_MODULE_0__.app.auth is not a function

ok so ive been building a discord clone with react redux, right now im stuck on the sign in page. it keeps giving me this error "Uncaught TypeError: firebase__WEBPACK_IMPORTED_MODULE_0_.app.auth is not a function" heres my code in firebase.js
import { initializeApp } from "firebase/app";
import { getDatabase } from 'firebase/database';
import { getAuth } from "firebase/auth"
import { GoogleAuthProvider } from "firebase/auth";
const firebaseConfig = {
apiKey: "AIzaSyD0RxEfG1qZ4Qsoelw5E6J0rIaJSP4BbXQ",
authDomain: "diacromb.firebaseapp.com",
projectId: "diacromb",
storageBucket: "diacromb.appspot.com",
messagingSenderId: "237625612351",
appId: "1:237625612351:web:2527b57f858d5a4688008a",
measurementId: "G-3DEREK47Q2"
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
const db = getDatabase(app);
const auth = getAuth();
const provider = new GoogleAuthProvider();
export {auth , app };
export {provider};
export default db;
heres my code for Login.js
import { Button } from '#material-ui/core'
import { auth, app } from './firebase'
import { provider } from './firebase'
import { signInWithPopup } from "firebase/auth"
import React from 'react'
import './Login.css'
function Login() {
/* const signIn = () =>{
const googleAuthProvider = new GoogleAuthProvider();
app.auth().signInWithPopup(googleAuthProvider);
} */
const signIn = ()=>{
var google_provider = provider;
app.auth().signInWithPopup(provider)
.then((re)=>{
console.log(re)
})
.catch((err)=>{
console.log(err)
})
}
return (
<div className='login'>
<h2> I am the login page</h2>
<Button onClick={signIn}>Sign In</Button>
</div>
);
}
export default Login
I have no idea whats going on, ive read some other posts and people are saying to install older versions of firebase, I tried to do that and it still didnt work. Ive been stumped on this for nearly 2 days now

I assume you are using firebase 9. there you have to use js modules.
https://firebase.google.com/docs/web/modular-upgrade
import { getAuth, signInWithPopup, GoogleAuthProvider } from "firebase/auth";
const auth = getAuth();
signInWithPopup(auth, provider)
.then((result) => {
// This gives you a Google Access Token. You can use it to access the Google API.
const credential = GoogleAuthProvider.credentialFromResult(result);
const token = credential.accessToken;
// The signed-in user info.
const user = result.user;
// ...
}).catch((error) => {
// Handle Errors here.
const errorCode = error.code;
const errorMessage = error.message;
// The email of the user's account used.
const email = error.email;
// The AuthCredential type that was used.
const credential = GoogleAuthProvider.credentialFromError(error);
// ...
});