Utilicé react-router-dom para la navegación ... pero mi problema es que no tengo autenticación y la pantalla del tablero está visible durante milisegundos.
Aplicación.js
<Route index path="/" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} /> <Route path="/Login" element={<Login />} />RutaProtegida
const ProtectedRoute = ({ children }) => { const { user } = useMyContext(); if (!user) { return <Navigate to="/Login" />; } return children; }; export default ProtectedRoute;Iniciar sesión.js
al hacer clic..
await login(data.get('email'), data.get('password')); navigate('/', { replace: true })Contexto.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(); } }, [])¿Cómo puedo proteger mi pantalla protegida del acceso no autorizado?
El problema es que su componente ProtectedRoute no espera a que se confirme el estado de autenticación. En otras palabras, el estado de user predeterminado enmascara el estado autenticado o no autenticado.
Debería representar un indicador de carga de forma condicional mientras onAuthStateChanged realiza la primera llamada para determinar el estado de autenticación del usuario. Para el valor de estado user inicial, utilice un valor que no sea un objeto de usuario definido en el caso de un usuario autenticado ni null en el caso de un usuario no autenticado. undefined es un buen valor inicial.
Ejemplo:
Contexto
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; }, []);RutaProtegida
const ProtectedRoute = ({ children }) => { const { user } = useMyContext(); if (user === undefined) { return null; // or loading indicator/spinner/etc } return user ? children : <Navigate to="/Login" replace />; };