Supabase auth recommended listeners?

Hey! On a NextJS app, is there any recommended practice on the front end for using auth listeners/hooks to always be able to reliable fetch the user logged in?

For example, let’s say we have a Navbar component which should show either:

1) logged in user’s icon (like initials such as B)
2) if not logged in, a log in button.

Currently I'm using a method which kind of fetches/does this check on every render of navbar hence it looks weird since on a full refresh the page loads but navbar part of user is still pending and loads in a few seconds.

useEffect(() => {
    async function getUser() {
      try {
        const {
          data: { user },
        } = await supabase.auth.getUser();
        console.log(user);
        
        const { data, error } = await supabase.auth.getSession()
        console.log(data);
        console.log(error);

        setUser(user);
      } catch (error) {
        console.error("Error fetching user:", error);
      } finally {
        setIsLoading(false);
      }
    }

    getUser();
}

useEffect(() => {
    async function getUser() {
      try {
        const {
          data: { user },
        } = await supabase.auth.getUser();
        console.log(user);
        
        const { data, error } = await supabase.auth.getSession()
        console.log(data);
        console.log(error);

        setUser(user);
      } catch (error) {
        console.error("Error fetching user:", error);
      } finally {
        setIsLoading(false);
      }
    }

    getUser();
}

useEffect(() => {
    async function getUser() {
      try {
        const {
          data: { user },
        } = await supabase.auth.getUser();
        console.log(user);
        
        const { data, error } = await supabase.auth.getSession()
        console.log(data);
        console.log(error);

        setUser(user);
      } catch (error) {
        console.error("Error fetching user:", error);
      } finally {
        setIsLoading(false);
      }
    }

    getUser();
}

useEffect(() => {
    async function getUser() {
      try {
        const {
          data: { user },
        } = await supabase.auth.getUser();
        console.log(user);
        
        const { data, error } = await supabase.auth.getSession()
        console.log(data);
        console.log(error);

        setUser(user);
      } catch (error) {
        console.error("Error fetching user:", error);
      } finally {
        setIsLoading(false);
      }
    }

    getUser();
}

Supabase auth recommended listeners?

Similar Threads

Supabase auth recommended listeners?

Similar Threads

Similar Threads

Similar Threads