Page Flashes The Splash Page With Condition Of User Logged In

I have set up a user authentication where if user logged in, show a specific page, but if not, show the splash screen. So like for localhost:3000/ (the home page, should show splas

Solution 1:

I suggest to put 3 status on your auth process. loading, authenticated & unauthenticated. so the missing part is the loading.

All you need to do now is to change setUser(null) in checkUser to {} or false. which make you to know what authentication status you are in

const checkUser = async () => {
    try {
      // code to get user
    } catch (err) {
      // no current signed in userconsole.log("error with AuthContext", err);
      setUser(false);
    }
  };

In dashboard component:

constHome = () => {
  const { user } = useUser();

  //loading state, show nothingif(user===null) returnnullif(user===false) return<SplashPage />return<><SidebarNav /><mainclassName="flex-1 bg-gray-100">
          code goes here
        </main></>exportdefaultHome;