ReactJS Authenticated Navigation

Question

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();
    }
}, [])

Please help me protect my protected screen from unauthorised access. Thank You !

Answer 1

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 />;
};