ReactJS Authenticated Navigation

user_19564412 0
Viewed 52

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?

react-router-dom firebase reactjs javascript
1 Answers

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