Properties isAuthenticated and user are fetched from useMoralis hook, however, they sometimes take up to half a second to initialize. This means that when first creating a react component these properties will be set to undefined and null.
This can be avoided by listening to changes with useEffect hook but in some examples such as a protected route the data about the user is required immediately and waiting for the hook to fetch data should not be an option.
function PrivateRoute({ children }) {
const { isAuthenticated, user } = useMoralis()
const location = useLocation()
if (!isAuthenticated) {
return <Navigate to="/" state={{ from: location }} replace />
}
return children
}
Even if the user is logged in and authenticated this example will fail every time because the properties { isAuthenticated, user } will return undefined and null.
Am I using the hook wrong or is there a setting that I missed that could be causing this issue?