Creé un componente contenedor de ruta de protección para restringir el acceso a otros componentes si el usuario no ha iniciado sesión.

 import React from 'react' import { Route, Redirect } from 'react-router-dom' import { useAuthContext} from '../AuthContext' export default function PrivateRoute({ component: Component, ...rest }) { const { currentUser } = useAuthContext() return ( <Route {...rest} render={props => { if (!currentUser) { return <Redirect to="/login" /> } else { return <Component { ...props } /> } }} /> ) }

Esto funciona bien, pero luego quería agregar otra capa para cuando el usuario haya iniciado sesión por primera vez y tenga que finalizar su registro, por lo que si no hay firstNameDb (que es obligatorio) en la base de datos, el acceso a otras páginas que /profile debe estar restringido:

 import React from 'react' import { Route, Redirect } from 'react-router-dom' import { useAuthContext} from '../AuthContext' export default function PrivateRoute({ component: Component, ...rest }) { const { currentUser, userData: { firstNameDb } } = useAuthContext() return ( <Route {...rest} render={props => { if (!currentUser) { return <Redirect to="/login" /> } else if (!firstNameDb) { return <Redirect to="/profile" /> } else { return <Component { ...props } /> } }} /> ) }

Esto también funciona bien, pero solo cuando el usuario está por primera vez en la aplicación y finaliza el registro. Para el resto de los casos, cuando el usuario ya terminó el registro e inició sesión, esto no es así, porque firstNameDb siempre comienza vacío "" y toma un poco de tiempo establecer Estado y completarse desde la llamada API, y donde quiera encuéntrese en la aplicación y actualice la página, siempre terminará en /profile .

 AuthContext.js ... const [userData, setUserData] = useState({ firstNameDb: "", ... })

¿Cuál sería una forma de evitar esto o la mejor manera de resolver este tipo de permiso?