I’m trying to add firebase authentication to my website. but having an error. I’m trying to solve this last three days. below I’m shared my code and error. i use react router dom, firebase authentication system with react js. when I click sign in with google button, it show hello in console, that’s right. but after it, I’m facing this error.
the error is,
error screenshot
in useFirebase.js file, I write below code,
import React, { useEffect, useState } from 'react';
import { getAuth, GoogleAuthProvider, onAuthStateChanged, signInWithPopup } from "firebase/auth";
import initializeConfig from '../Firebase/Firebase.init';
initializeConfig();
const useFirebase = () => {
const auth = getAuth();
const provider = new GoogleAuthProvider();
const [user, setUser] = useState({});
const signinUsingGoogle = () => {
return signInWithPopup(auth, provider)
}
useEffect(() => {
const unsubscribed = onAuthStateChanged(auth, user => {
if (user) {
setUser(user)
}
else {
setUser({})
}
});
return () => unsubscribed;
}, [])
const signOut = () => {
signOut(auth)
.then(() => {
})
}
return (
user,
signinUsingGoogle,
signOut
);
};
export default useFirebase;
and in signin.js file, I write the below code,
import React from "react";
import { Button } from "react-bootstrap";
import { useLocation, useNavigate } from "react-router-dom";
import useAuth from "../../Hooks/useAuth";
import "./Signin.css";
const Signin = () => {
const { signinUsingGoogle } = useAuth();
const navigate = useNavigate();
const location = useLocation();
const navigateUrl = location?.state?.from || "/home";
const GoogleSignin = () => {
console.log("hello");
signinUsingGoogle()
.then((result) => {
navigate(navigateUrl);
})
.finally(() => {});
};
return (
<div className="signin d-flex justify-content-center align-items-center mx-auto">
<div className="signin-card p-3 m-3">
<img
src="https://c.tenor.com/9Xf0d7BGQ5oAAAAC/computer-log-in.gif"
alt="img not found"
width="360px"
/>
<div className="d-grid gap-2 mt-3 text-center">
<Button variant="primary" size="lg" onClick={GoogleSignin}>
<h5>
<i className="fab fa-google-plus"></i> Google
</h5>
</Button>
<Button variant="secondary" size="lg" className="github">
<h5>
<i className="fab fa-github"></i> Github
</h5>
</Button>
<Button variant="secondary" size="lg" className="facebook">
<h5>
<i className="fa-brands fa-facebook"></i> Facebook
</h5>
</Button>
</div>
</div>
</div>
);
};
export default Signin;