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 user
      console.log("error with AuthContext", err);
      setUser(false);
    }
  };

In dashboard component:

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

  //loading state, show nothing
  if(user===null) return null
  if(user===false) return <SplashPage />
  
  return <>
        <SidebarNav />
        <main className="flex-1 bg-gray-100">
          code goes here
        </main>
      </>

export default Home;