I am using firebase v9 and react-router-dom v6 in my React app. I can detect the onauthstatechanged event but I am unable to route to the private route. Here are my components: Auth:
export const AuthProvider = ({ children }) => {
const [currentUser, setCurrentUser] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
onAuthStateChanged(auth, user => {
setCurrentUser(user);
setLoading(false);
console.log("un auth",user);
})
}, []);
if(loading) return null;
return (
<AuthContext.Provider
value={{
currentUser
}}
>
{children}
</AuthContext.Provider>
);
};
App:
<AuthProvider>
<Router>
<Header />
<Routes>
<Route path="/" element={<Login/>} />
<Route path="/home" element={
<PrivateRoute>
<Home />
</PrivateRoute>
}/>
</Routes>
</Router>
</AuthProvider>
So far, the onauthstatechanged event is triggering. But how can I route to private route?
Are you trying to navigate to a different route when the authstate has changed?
If that's the case, you can use
import {useNavigate} from 'react-router'
const navigate = useNavigate()
onAuthStateChanged = () => {
...your code
navigate('your_private_route')
}
useNavigate is a react hook given by react-router