How do you call useContext in React without breaking rules of hooks?

Question

I'm trying to understand how to call a login function for Google or Github inside my context provider.

What is the proper way to call a context provider in Next JS without breaking the rule of hooks?

// user.js
const Context = createContext();

const Provider = ({ children }) => {
  const [user, setUser] = useState(supabase.auth.user());
  const [isLoading, setIsLoading] = useState(true);
  const router = useRouter();

  useEffect(() => {
    const getUserProfile = async () => {
      const sessionUser = supabase.auth.user();

      if (sessionUser) {

        //removed for brevity

        setUser({
          ...sessionUser,
          ...profile,
        });

        setIsLoading(false);
      }
    };

    getUserProfile();

    supabase.auth.onAuthStateChange(() => {
      getUserProfile();
    });
  }, []);

  const githubLogin = async () => {
    await supabase.auth.signIn({
      provider: "github",
    });
  };

  const googleLogin = async () => {
    await supabase.auth.signIn({
      provider: "google",
    });
  };

  const logout = async () => {
    await supabase.auth.signOut();
    setUser(null);
    router.push("/");
  };

  const exposed = {
    user,
    googleLogin,
    githubLogin,
    logout,
    isLoading,
  };

  return <Context.Provider value={exposed}>{children}</Context.Provider>;
};

export const useUser = () => useContext(Context);
export default Provider;

and my login page

// login.js
const Login = () => {
    
    const handleGithubLogin = () => {
      const { githubLogin } = useUser();
      useEffect(githubLogin, []);
    }

    const handleGoogleLogin = () => {
      const { googleLogin } = useUser();
      useEffect(googleLogin, []);
    };

  return (
    <div>
      <button onClick={handleGithubLogin}>Login with Github</button>
      <button onClick={handleGoogleLogin}>Login with Google</button>
    </div>
  );
  }

export default Login;

How can I call these login functions without breaking the rules of hooks? What is the best way to call a context provider from my login page?

Answer 1

Move the call to useUser into the body of the component, and then call the functions it returns when needed. I see no reason for using useEffect .

const Login = () => {
  const { githubLogin, googleLogin } = useUser();

  const handleGithubLogin = () => {
    githubLogin();
  }

  const handleGoogleLogin = () => {
    googleLogin();
  }

  return (
    <div>
      <button onClick={handleGithubLogin}>Login with Github</button>
      <button onClick={handleGoogleLogin}>Login with Google</button>
    </div>
  );
}

// OR:
const Login = () => {
  const { githubLogin, googleLogin } = useUser();

  return (
    <div>
      <button onClick={githubLogin}>Login with Github</button>
      <button onClick={googleLogin}>Login with Google</button>
    </div>
  );
}