Browser page becomes unresponsive on sign in using firebase google login - reactjs

Question

I'm using React.js and firebase to build a web app. Using firebase, when the auth state changes as the user signs in with google, the pages is supposed to be redirected to the "/home" route. instead, it signs in and then "freezes". The page becomes unresponsive. I have checked the console logs on the localhost:3000 page. It keeps throwing a warning multiple times. see below
Kindly help me fix this.
Throttling navigation to prevent the browser from hanging. See https://crbug.com/1038223. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection
below is my code.
//Header.js component
import { signInWithPopup } from "firebase/auth";
import { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import { selectUserEmail, selectUserName, selectUserPhoto, setSignOutState, setUserLoginDetails } from "../features/user/userSlice";
import { auth, provider } from "../firebase";
//header component.
const Header = (props) => {
const dispatch = useDispatch();
const navigate = useNavigate();
const userEmail = useSelector(selectUserEmail);
const userName = useSelector(selectUserName);
const userPhoto = useSelector(selectUserPhoto);
// moniter auth state. if user signs in , redirect him to homepage
useEffect(() => {
auth.onAuthStateChanged(
async (user) => {
if (user) {
setUser(user);
navigate("/home");
}
},
[userName, userEmail, userPhoto]
);
});
//handle auth ftn
const handleAuth = async () => {
provider.addScope("profile");
provider.addScope("email");
if (!userName) {
const result = await signInWithPopup(auth, provider);
setUser(result.user).catch((error) => {
alert(error.message);
});
console.log(result);
} else if (userName) {
auth
.signOut()
.then(() => {
dispatch(setSignOutState());
navigate("/");
})
.catch((error) => {
alert(error.message);
});
}
};
//dispatch ftn
const setUser = (user) => {
dispatch(
setUserLoginDetails({
name: user.displayName,
email: user.email,
photo: user.photoURL,
})
);
};
//UI of the COMPONENT
return (
<Nav>
<Logo>
<img src="/images/logo.svg" alt="Disney Logo" />
</Logo>
{!userName ? (
<Login onClick={handleAuth}>LOGIN</Login>
) : (
<>
<NavMenu>
<a href="/home">
<img src="/images/home-icon.svg" alt="home" />
<span>HOME</span>
</a>
<a href="/search">
<img src="/images/search-icon.svg" alt="home" />
<span>SEARCH</span>
</a>
<a href="/watchlist">
<img src="/images/watchlist-icon.svg" alt="home" />
<span>WATCHLIST</span>
</a>
<a href="/original">
<img src="/images/original-icon.svg" alt="home" />
<span>ORIGINALS</span>
</a>
<a href="/movies">
<img src="/images/movie-icon.svg" alt="home" />
<span>MOVIES</span>
</a>
<a href="/series">
<img src="/images/series-icon.svg" alt="home" />
<span>SERIES</span>
</a>
</NavMenu>
<Signout>
<UserImg src={userPhoto} alt={userName} />
<DropDown>
<span onClick={handleAuth}>Sign out</span>
</DropDown>
</Signout>
</>
)}
</Nav>
);
};
//App.js code
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import "./App.css";
import Header from "./components/Header";
import Home from "./components/Home";
import Login from "./components/Login";
function App() {
return (
<div className="App">
<Router>
<Header />
<Routes>
<Route path="/" element={<Login />}></Route>
<Route path="/home" element={<Home />}></Route>
</Routes>
</Router>
</div>
);
}
export default App;

Answer 1

useEffect(() => {
auth.onAuthStateChanged(async (user) => {
if (user) {
setUser(user);
navigate("/home");
}
});
}, [userName]);
just added userName as a dependency and it fixed it. The problem was that without the dependency, it was throwing an infinite loop.