Appjs
import { useEffect } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./App.css";
import Header from "./components/Header";
import Home from "./components/Home";
import Login from "./components/Login";
import { getUserAuth } from "./actions";
import { connect } from "react-redux";
function App(props) {
useEffect(() => {
props.getUserAuth();
}, []);
return (
<div className="App">
<BrowserRouter>
<Header />
<Routes>
<Route exact path="/" element={<Login />} />
<Route path="/home" element={<Home />} />
</Routes>
</BrowserRouter>
</div>
);
}
const mapStateToProps = (state) => {
return {};
};
const mapDispatchToProps = (dispatch) => ({
getUserAuth: () => dispatch(getUserAuth()),
});
export default connect(mapStateToProps, mapDispatchToProps)(App);
Next file
import { auth, provider } from "../firebase";
import { signInWithPopup, onAuthStateChanged, signOut } from "firebase/auth";
import { SET_USER } from "./actionType";
export const setUser = (payload) => ({
type: SET_USER,
user: payload,
});
export function signInAPI() {
return (dispatch) => {
signInWithPopup(auth, provider)
.then((payload) => {
console.log(payload.user);
// dispatch(setUser(payload.user));
})
.catch((error) => alert(error.message));
};
}
export function getUserAuth() {
return (dispatch) => {
onAuthStateChanged(auth, (user) => {
console.log(user);
if (user) {
dispatch(setUser(user));
}
});
};
}
export function signOutAPI() {
return (dispatch) => {
signOut(auth)
.then(() => {
dispatch(setUser(null));
})
.catch((error) => {
console.log(error.message);
});
};
}
Is my signInAPI, getUserAuth() and signOutAPI() functions correct?
Getting error react_devtools_backend.js:3973 Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doesn't have a dependency array, or one of the dependencies changes on every render.
onAuthStateChanged is a subscription, it's meant to be called in an useEffect hook to establish a subscription, i.e. receive updates, when the authentication state changes. Instead of invoking it in an action invoke it in an useEffect hook. The onAuthStateChanged callback should then dispatch actions to your Redux store to update local state.
Example:
import { onAuthStateChanged } from "firebase/auth";
import { auth } from "../firebase";
useEffect(() => {
// Subscribe to auth state changes when component mounts
const unsubscribe = onAuthStateChanged(auth, (user) => {
console.log(user);
dispatch(setUser(user)); // user is user object or null
});
// Return cleanup function to unsubscribe from firebase auth
return unsubscribe;
}, []);