Quiero aprender el enfoque correcto para la autenticación de enrutamiento de firebase, lo que quiero decir es:
function App() { const auth = getAuth(); if (!auth) { <Spinner />; } return ( <> {auth && ( <Router> <Routes> <Route path='/' element={<PrivateRoute />}> <Route index element={<Explore />} /> <Route path='/offer' element={<Offers />} /> <Route path='/profile' element={<Profile />} /> </Route> <Route path='/sign-in' element={<SignIn />} /> <Route path='/sign-up' element={<SignUp />} /> <Route path='/forgot-password' element={<ForgotPassword />} /> </Routes> <Navbar /> </Router> )}Tengo este bloque de código, al principio pensé que debería haber obtenido un gancho useAuth que usa onAuthStateChanged , pero me doy cuenta de que esta variable de autenticación de getAuth funciona de la misma manera, ¿por qué no usarla en lugar de un gancho?
y mi PrivateRoute se ve así:
function PrivateRoute() { const currentUser = getAuth().currentUser; return currentUser ? <Outlet /> : <Navigate to='/sign-in' />; }el problema es que una vez que se monta la aplicación, debido a que no hay un estado a nivel de la aplicación, permanece igual.
Luego, si trato de cerrar la sesión y poner algo de lógica en el enrutamiento, como si el usuario existe, no permita que el enrutamiento se registre o inicie sesión, no funciona.
Si uso redux o API de contexto, lo enviaría cada vez que inicie sesión, cierre sesión, me registre, pero sin ellos, ¿cuál es la configuración correcta para manejar este tipo de enrutamiento?
Después de un tiempo, descubrí cómo hacer lo que tenía que hacer, así que lo publico aquí en caso de que alguien también encuentre este problema y busque ayuda.
Si no usa redux o context api y aún desea implementar este tipo de función, así es como lo hago:
Entonces, ¿qué tenía que hacer? Quiero autenticarme a través de firebase, lo que debe hacer, al menos lo que encontré, implementar una APLICACIÓN/NIVEL/ESTADO para verificar si el usuario inició sesión o no y actualizar la representación del nivel de la aplicación, que representa toda la aplicación y aplica el comportamiento. respectivamente.
Asi que:
function App() { const [user, setUser] = useState(null); const [isLoading, setIsLoading] = useState(true); useEffect(() => { const unsubscribe = onAuthStateChanged(auth, (user) => { setIsLoading(true); if (user) { setUser(user); } else { setUser(null); } setIsLoading(false); }); return unsubscribe; }, []); if (isLoading) return <Spinner />; return ( <> <Router> <Routes> <Route path='/' element={<PrivateRoute user={user} />}> <Route index element={<Explore />} /> <Route path='/offers' element={<Offers />} /> <Route path='/profile' element={<Profile />} /> <Route path='/create-listing' element={<CreateListing />} /> <Route path='/category/:categoryName' element={<Category />} /> </Route> <Route path='/sign-in' element={!user ? <SignIn /> : <Navigate to='/' />} /> <Route path='/sign-up' element={!user ? <SignUp /> : <Navigate to='/' />} /> <Route path='/forgot-password' element={!user ? <ForgotPassword /> : <Navigate to='/' />} /> </Routes> <Navbar /> </Router> <ToastContainer autoClose={1000} /> </> ); } export default App;Aquí, básicamente después de montar el componente, queremos que useEffect solo se ejecute una vez y configure el oyente para cambiar el estado de autenticación, siempre que el estado de autenticación cambie, como iniciar sesión o cerrar sesión, el bloque de código de onAuthStateChanged se ejecuta y cuando se ejecuta, cada vez que establece al usuario si hay uno o no, por lo tanto, vuelve a representar el componente que es la aplicación en sí, y debajo, el enrutamiento funciona en consecuencia. Si tiene una ruta privada como la mía, puede pasar al usuario como accesorio, luego:
import { Navigate, Outlet } from 'react-router-dom'; function PrivateRoute({ user }) { return user ? <Outlet /> : <Navigate to='/sign-in' />; } export default PrivateRoute;