Supabase email OTP login

Use it in Next.js

app/login/page.tsx

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { StepUpGate } from "@/components/StepUpGate";
import { createClient } from "@/lib/supabase/client";

export default function OtpLoginPage() {
  const router = useRouter();
  const supabase = createClient();
  const [email, setEmail] = useState("");
  const [sentTo, setSentTo] = useState<string | null>(null);
  const [error, setError] = useState("");

  async function sendCode(address: string) {
    setError("");
    const { error } = await supabase.auth.signInWithOtp({
      email: address,
      options: { shouldCreateUser: false }, // only people who already have an account
    });
    if (error) setError(error.message);
    else setSentTo(address);
  }

  if (!sentTo) {
    return (
      <main className="grid min-h-dvh place-items-center bg-[#0b0c10] text-white">
        <form
          onSubmit={(e) => {
            e.preventDefault();
            void sendCode(email);
          }}
          className="grid w-80 gap-3"
        >
          <label htmlFor="email" className="text-sm text-white/70">Email</label>
          <input id="email" type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
            className="rounded-lg bg-white/10 px-3 py-2 outline-none focus:ring-2 focus:ring-[#C6F432]" />
          <button className="rounded-lg bg-[#C6F432] px-3 py-2 font-medium text-black">Email me a code</button>
          {error ? <p role="alert" className="text-sm text-red-400">{error}</p> : null}
        </form>
      </main>
    );
  }

  return (
    <StepUpGate
      title="Check your email"
      description={`Enter the 6-digit code we sent to ${sentTo}.`}
      successTitle="You're signed in"
      successDescription="Opening your dashboard."
      onVerify={async (code) => {
        const { error } = await supabase.auth.verifyOtp({ email: sentTo, token: code, type: "email" });
        return !error; // false shakes the cells and shows "That code didn't match"
      }}
      onResend={() => void sendCode(sentTo)}
      onCancel={() => setSentTo(null)}
      onVerified={() => {
        router.push("/dashboard");
        router.refresh();
      }}
    >
      {/* whatever should sit blurred behind the code card */}
      <div className="grid min-h-dvh place-items-center bg-[#0b0c10] text-white/40">Your dashboard</div>
    </StepUpGate>
  );
}

import { createBrowserClient } from "@supabase/ssr";

export function createClient() {
  return createBrowserClient(process.env.NEXT_PUBLIC_SUPABASE_URL!, process.env.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY!);
}