const RequireAuth = ({ children }) => {
const [user, loading, error] = useAuthState(auth);
const location = useLocation();
if (loading) {
return <Loading></Loading>
}
if (!user) {
return <Navigate to="/login" state={{ from: location }} replace />;
}
return children;
};
export default RequireAuth;
You can also do something like this:
if (!user) {
window.location.href = `http://localhost:3000/login?from=${location}` // for example
}
and then parse query string to get a value of location
UPDATE:
Doing "routing" as I mentioned above is wrong and it will lead to hard to debug bugs.
Use useNavigate hook from react-router-dom instead: https://reactrouter.com/docs/en/v6/hooks/use-navigate
const [user, loading] = use Auth State(auth)
const location = use Location()
if (loading) {
return <Loading></Loading>
}
if (!user) {
return <Navigate to="/login" state={{ from: location }} replace ></Navigate>
}
return children
};
export default Private Route;
(sorry for space)