Possible bug with signInWithOtp magic link about supabase

[Kjazer004]

Okay it works, thanks you two, great help

[GaryAustin1]

Not quite clear on your redirect mentions. But signInWithOtp does not return anything for the data so userData will never be set.
https://github.com/supabase/auth-js/blob/bd91e72824ceb075f6fca7ae25bf9f066e6508d2/src/GoTrueClient.ts#L678

[encima]

Hey @Kjazer004,

As @GaryAustin1 said, the user is not returned from signInWithOtp, rather you get a null value under the user key (see the docs here).

Some points to note:

• No need to set shouldCreateUser as this is true by default
• Your code mentions get sign in link but it should be allowing the input of an OTP instead (maybe you are handling this elsewhere but I do not see links to it in the example).

As an example, here is a simple login page to set it up (you can just replace the login page from a fresh npx create-next-app -e with-supabase

When using it, make sure to do 2 things:

• Set URL configuration in your project (clearly you have already done this but worth mentioning)
• Modify the Magic Link Email Template to include the OTP code: {{.Token}}

import Link from "next/link";
import { headers } from "next/headers";
import { createClient } from "@/utils/supabase/server";
import { redirect } from "next/navigation";
import { SubmitButton } from "./submit-button";

let email: string;
let awaitingOTP = false;

export default function Login({
  searchParams,
}: {
  searchParams: { message: string };
}) {
  const signIn = async (formData: FormData) => {
    "use server";

    email = formData.get("email") as string;
    const supabase = createClient();

    const { error } = await supabase.auth.signInWithOtp({
      email,
    });

    if (error) {
      return redirect("/login?message=Could not authenticate user");
    }

    awaitingOTP = true
  };

  const useOTP = async (formData: FormData) => {
    "use server";

    const otp = formData.get("otp") as string;
    const supabase = createClient();

    const {
      data: { session },
      error,
    } = await supabase.auth.verifyOtp({
      email,
      token: otp,
      type: 'email',
    })

    if (error) {
      return redirect("/login?message=Could not authenticate user");
    }

    return redirect("/protected");
  }

  return (
    <div className="flex-1 flex flex-col w-full px-8 sm:max-w-md justify-center gap-2">
      <Link
        href="/"
        className="absolute left-8 top-8 py-2 px-4 rounded-md no-underline text-foreground bg-btn-background hover:bg-btn-background-hover flex items-center group text-sm"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="24"
          height="24"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          className="mr-2 h-4 w-4 transition-transform group-hover:-translate-x-1"
        >
          <polyline points="15 18 9 12 15 6" />
        </svg>{" "}
        Back
      </Link>

      {searchParams?.message && (
          <p className="mt-4 p-4 bg-foreground/10 text-foreground text-center">
            {searchParams.message}
          </p>
        )}

      {(!awaitingOTP) && <form className="animate-in flex-1 flex flex-col w-full justify-center gap-2 text-foreground">
        <label className="text-md" htmlFor="email">
          Email
        </label>
        <input
          className="rounded-md px-4 py-2 bg-inherit border mb-6"
          name="email"
          placeholder="[email protected]"
          required
        />
        <SubmitButton
          formAction={signIn}
          className="bg-green-700 rounded-md px-4 py-2 text-foreground mb-2"
          pendingText="Signing In..."
        >
          Sign In with OTP
        </SubmitButton>
      </form>}

      {(awaitingOTP) && <form className="flex-1 flex flex-col w-full justify-center gap-2 text-foreground" >
          <label className="text-md" htmlFor="otp">
            OTP
          </label>
          <input
            className="rounded-md px-4 py-2 bg-inherit border mb-6"
            name="otp"
            placeholder="123456"
            required/>
            <SubmitButton
              formAction={useOTP}
              className="bg-green-700 rounded-md px-4 py-2 text-foreground mb-2"
              pendingText="Signing In..."
            > Sign In </SubmitButton>
            </form>}
    </div>
  );
}

Let us know if it works and we can close or help you debug further