Estoy tratando de crear un sistema de autenticación con reacción, todo funciona. Tengo una ruta privada si no hay ningún usuario, luego se redirige a la página de inicio de sesión.
Esta es mi ruta privada.
import React from 'react' import { Navigate} from 'react-router-dom' import { useAuth } from '../../context/AuthContext' export default function PrivateRoute({children}) { const { currentUser } = useAuth() if(!currentUser){ return <Navigate to= '/login' /> } return children; }El problema es que después de iniciar sesión me redirigen a la página de actualización del perfil, pero si ingreso el enlace de inicio de sesión en la barra de direcciones, se cierra la sesión y el usuario vuelve a la página de inicio de sesión. No sé cómo lidiar con eso.
este es mi contexto
import React, {useContext, useEffect, useState} from 'react' import { auth } from '../firebase-config' const AuthContext = React.createContext() export function useAuth(){ return useContext(AuthContext) } export function AuthProvider({ children }) { const [currentUser, setCurrentUser] = useState() const [loading, setLoading] = useState(true) function singup(email, password){ return auth.createUserWithEmailAndPassword(email, password) } function login(email, password){ return auth.signInWithEmailAndPassword(email, password) } function logout(){ return auth.signOut() } function resetPassword(email){ return auth.sendPasswordResetEmail(email) } function updateEmail(email){ return currentUser.updateEmail(email) } function updatePassword(password){ return currentUser.updatePassword(password) } useEffect(() =>{ const unsubscribe = auth.onAuthStateChanged(user =>{ setCurrentUser(user) setLoading(false) }) return unsubscribe }, []) const value = { currentUser, login, singup, logout, resetPassword, updateEmail, updatePassword } return ( <AuthContext.Provider value={value}> { !loading && children } </AuthContext.Provider> ) }Dado que está ingresando manualmente una URL en la barra de direcciones, cuando haga esto, volverá a cargar la página, lo que recargará su aplicación. Todo lo almacenado en el estado se borra. Para mantener el estado, deberá conservarlo en un almacenamiento a largo plazo, es decir, localStorage.
Al usar currentUser , puede inicializar el usuario actual desde el almacenamiento local y usar un useEffect para conservar el currentUser en el almacenamiento local.
Ejemplo:
export function AuthProvider({ children }) { const [currentUser, setCurrentUser] = useState( JSON.parse(localStorage.getItem("currentUser")) ); const [loading, setLoading] = useState(true); useEffect(() => { localStorage.setItem("currentUser", JSON.stringify(currentUser)); }, [currentUser]); ... useEffect(() =>{ const unsubscribe = auth.onAuthStateChanged(user => { setCurrentUser(user); setLoading(false); }); return unsubscribe; }, []); const value = { currentUser, login, singup, logout, resetPassword, updateEmail, updatePassword }; return ( <AuthContext.Provider value={value}> {!loading && children} </AuthContext.Provider> ); }Cuando vuelve a ingresar un enlace en la barra de direcciones, elimina todo su contexto guardado, si desea una forma simple de guardar el estado de inicio de sesión, puede guardar el objeto currentUser en localStorage (esta es una forma muy básica, no recomendada en sitios web reales), y luego, cuando la página se carga, puede usar useEffect para obtener esos datos del almacenamiento local y configurar currentUser para el usuario que guardó en el almacenamiento local.