I have used react-router-dom for Navigation..but My Problem is without authentication also Dashboard Screen is being visible for mili seconds.
App.js
<Route index path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
<Route path="/Login" element={<Login />} />
ProtectedRoute
const ProtectedRoute = ({ children }) => {
const { user } = useMyContext();
if (!user) {
return <Navigate to="/Login" />;
}
return children;
};
export default ProtectedRoute;
Login.js
onClick..
await login(data.get('email'), data.get('password'));
navigate('/', { replace: true })
Context.js
function login(email, password) {
return signInWithEmailAndPassword(auth, email, password)
}
function logOut() {
return signOut(auth);
}
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (currentuser) => {
setUser(currentuser);
});
return () => {
unsubscribe();
}
}, [])
How can I protect my protected screen from unauthorized access?
The issue is that your ProtectedRoute component doesn't wait for the authentication status to be confirmed. In other words, the default user state masks one of either the authenticated or unauthenticated status.
It should conditionally render a loading indicator while onAuthStateChanged is making the first call to determine the user's authentication status. For the initial user state value use a value that is neither a defined user object in the case of an authenticated user or null in the case of an unauthenticated user. undefined is a good initial value.
Example:
Context
const [user, setUser] = React.useState(); // initially undefined
function login(email, password) {
return signInWithEmailAndPassword(auth, email, password);
}
function logOut() {
return signOut(auth);
}
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, (currentuser) => {
setUser(currentuser);
});
return unsubscribe;
}, []);
ProtectedRoute
const ProtectedRoute = ({ children }) => {
const { user } = useMyContext();
if (user === undefined) {
return null; // or loading indicator/spinner/etc
}
return user ? children : <Navigate to="/Login" replace />;
};