Hi all,
I’m trying to manage my authenticated state of my app which starts at this studio page.
import { useEffect } from "react";
import { useRouter } from "next/router";
import { useMoralis } from "react-moralis";
import Navigation from "../../components/Navigation";
const Studio = () => {
const { isAuthenticated } = useMoralis();
const router = useRouter();
useEffect(() => {
console.log(isAuthenticated);
if (!isAuthenticated) {
router.push(`/login`);
}
}, [isAuthenticated]);
return (
<>
<Navigation />
<div className="padded-container"></div>
</>
);
};
export default Studio;
I have already connected my wallet but when I refresh my browser the log shows false first (which will prompt the router to the login page) and from the login page it then detects that isAuthenticated is true. This causes a little flash.
Is there a better way to handle the first load of isAuthenticated? Perhaps a loading component until it retrieves the right value?