Login with Magic Link

"use server";
import { createSupabaseUserServerActionClient } from "@/supabase-clients/user/createSupabaseUserServerActionClient";
import { toSiteURL } from "@/utils/helpers";

export const signInWithMagicLink = async (email: string, next?: string) => {
  const supabase = createSupabaseUserServerActionClient();
  const redirectUrl = new URL(toSiteURL("/auth/callback"));
  if (next) {
    redirectUrl.searchParams.set("next", next);
  }
  const { error } = await supabase.auth.signInWithOtp({
    email,
    options: {
      emailRedirectTo: redirectUrl.toString(),
    },
  });

  if (error) {
    console.log(error);
    throw error;
  }
};

const magicLinkMutation = useToastMutation(
  async (email: string) => {
    return await signInWithMagicLink(email, next);
  },
  {
    loadingMessage: "Sending magic link...",
    errorMessage: "Failed to send magic link",
    successMessage: "Magic link sent!",
    onSuccess: () => {
      setSuccessMessage("A magic link has been sent to your email!");
    },
    onError: (error) => {
      console.log(error);
    },
    onMutate: () => {
      setSuccessMessage(null);
    },
  },
);

// In your component JSX
<Email
  onSubmit={magicLinkMutation.mutate}
  isLoading={magicLinkMutation.isLoading}
  view="sign-in"
/>;