I am trying to implement protected routes for orders router but even the user is authenticated it always redirect to login. I have used Navigate component from react-router-dom and I have passed the isAuth state for app.js to privateRoute.js component and I received that isAuth as prop in privateRoute.js but if I don't use the navigate component then I get the isAuth true when user authenticates but it I used navigate component then it redirects to login routes before isAuth is set to true. Need help!!
//app.js
function App(props) {
const navigate = useNavigate();
const [authState, setAuthState] = useState({
isAuth: false,
token: null,
userId: null,
});
const [showNav, setShowNav] = useState(true);
useEffect(() => {
if (window.location.href.includes("admin")) {
setShowNav(false);
}
const token = localStorage.getItem("token");
const expiryDate = localStorage.getItem("expiryDate");
if (!token || !expiryDate) {
return;
}
const userId = localStorage.getItem("userId");
const remainingMilliseconds =
new Date(expiryDate).getTime() - new Date().getTime();
setAuthState((prevState) => {
return {
...prevState,
isAuth: true,
token: token,
userId: userId,
};
});
setAutoLogout(remainingMilliseconds);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [authState.isAuth]);
const handleUserCredentialsSubmission = (userData, setErrors) => {
const formData = new FormData();
formData.append("name", userData.name);
formData.append("email", userData.email);
formData.append("password", userData.password);
fetch("http://localhost:3080/signup", { method: "POST", body: formData })
.then((res) => {
if (res.status !== 200 && res.status !== 201) {
if (res.status === 409) {
throw new Error("Email address already exists!");
} else {
throw new Error("Creating a user failed!");
}
}
return res.json();
})
.then((resData) => {
navigate("/login");
})
.catch((err) => {
setErrors((prevState) => {
return {
...prevState,
signupError: err.message,
};
});
throw new Error(err);
});
};
const logoutHandler = () => {
setAuthState((prevState) => {
return {
...prevState,
isAuth: false,
token: null,
};
});
localStorage.removeItem("token");
localStorage.removeItem("userId");
localStorage.removeItem("expiryDate");
navigate("/login");
};
const setAutoLogout = (remainingTime) => {
setTimeout(() => {
logoutHandler();
}, remainingTime);
};
const handleUserlogin = (userData, setErrors, setUserCredentials) => {
const formData = new FormData();
formData.append("email", userData.email);
formData.append("password", userData.password);
fetch("http://localhost:3080/login", { method: "POST", body: formData })
.then((res) => {
if (res.status !== 200 && res.status !== 201) {
throw new Error("Invalid Email Address & Password");
}
return res.json();
})
.then((resData) => {
setAuthState((prevState) => {
return {
...prevState,
isAuth: true,
token: resData.token,
userId: resData.userId,
};
});
localStorage.setItem("token", resData.token);
localStorage.setItem("userId", resData.userId);
const remainingMilliseconds = 60 * 60 * 1000;
const expiryDate = new Date(
new Date().getTime() + remainingMilliseconds
);
localStorage.setItem("expiryDate", expiryDate.toISOString());
navigate("/");
})
.catch((err) => {
setAuthState((prevState) => {
return {
...prevState,
isAuth: false,
token: null,
userId: null,
};
});
setUserCredentials((prevState) => {
return {
...prevState,
email: "",
password: "",
};
});
setErrors((prevState) => {
return {
...prevState,
loginError: err.message,
};
});
throw new Error(err);
});
};
const handleAddToCart = (productId) => {
fetch("http://localhost:3080/cart", {
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: "Bearer " + authState.token,
},
body: JSON.stringify({
prodId: productId,
}),
})
.then((res) => {
if (res.status !== 200 && res.status !== 201) {
throw new Error("User does not Exists");
}
return res.json();
})
.then((resData) => {
navigate("/cart");
})
.catch((err) => {
throw new Error(err);
});
};
console.log(authState.isAuth);
return (
<div className="App">
{showNav && (
<Nav
token={authState.token}
isAuth={authState.isAuth}
onLogout={logoutHandler}
/>
)}
{/* <Nav /> */}
<Routes>
<Route
path="/product"
element={
<Product isAuth={authState.isAuth} AddToCart={handleAddToCart} />
}
/>
<Route
path="/product/:productId"
element={
<ProductDetails
{...props}
isAuth={authState.isAuth}
AddToCart={handleAddToCart}
/>
}
/>
<Route path="/cart" element={<Cart token={authState.token} />} />
<Route
path="/orders"
element={
<PrivateRoute {...authState}>
<Orders token={authState.token} />
</PrivateRoute>
}
/>
<Route
path="/checkout"
element={<Checkout token={authState.token} />}
/>
<Route path="/login" element={<Login onSingIn={handleUserlogin} />} />
<Route
path="/signup"
element={<Signup onSignUp={handleUserCredentialsSubmission} />}
/>
<Route path="/admin/*" element={<Admin />}>
<Route
path="product"
element={<AddProduct token={authState.token} />}
/>
<Route path="products" element={<AdminProducts Admin={!showNav} />} />
</Route>
<Route path="/" element={<Home />} />
{/* <Route path="*" element={<Navigate to="/" />} /> */}
</Routes>
</div>
);
}
export default App;
//privateRoute.js
const PrivateRoute = (props) => {
console.log(props.isAuth);
if (!props.isAuth) {
return <Navigate to="/login" replace />;
}
return props.children;
};
export default PrivateRoute;
