Wrapping a login redirect into useMutation?

[codinginflow]

I use React Query's useMutation throughout my project because it provides convenient loading and error states and callbacks.

I have one hook that handles the redirect to a third-party's auth page. It feels weird to wrap this into useMutation, probably because of the redirect. On the other hand, I need an error handler.

Is this suited to be wrapped into useMutation?

export default function useAuth() {
  const pathname = usePathname();

  const { toast } = useToast();

  async function login() {
    try {
      const oAuthData = await generateOAuthData(wixBrowserClient, pathname);

      Cookies.set("oAuthData", JSON.stringify(oAuthData), {
        secure: process.env.NODE_ENV === "production",
        expires: new Date(Date.now() + 60 * 10 * 1000),
      });

      const redirectUrl = await getLoginUrl(wixBrowserClient, oAuthData);

      window.location.href = redirectUrl;
    } catch (error) {
      console.error(error);
      toast({
        variant: "destructive",
        description: "Failed to log in. Please try again.",
      });
    }
  }

  async function logout() {
    try {
      const logoutUrl = await getLogoutUrl(wixBrowserClient);

      Cookies.remove(WIX_SESSION_COOKIE);

      window.location.href = logoutUrl;
    } catch (error) {
      console.error(error);
      toast({
        variant: "destructive",
        description: "Failed to log out. Please try again.",
      });
    }
  }

  return { login, logout };
}

[TkDodo]

do you have any errors with that approach?

[codinginflow]

No, both approaches work. I just have trouble deciding when to use useMutation and when to do it manually.