Clerk email code sign-in for Next.js

Use it in Next.js

app/sign-in/[[...sign-in]]/page.tsx

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { useSignIn } from "@clerk/nextjs";
import { StepUpGate } from "@/components/StepUpGate";

export default function SignInPage() {
  const router = useRouter();
  const { signIn } = useSignIn();
  const [email, setEmail] = useState("");
  const [codeSent, setCodeSent] = useState(false);
  const [error, setError] = useState("");

  async function sendCode() {
    setError("");
    const { error } = await signIn.emailCode.sendCode({ emailAddress: email });
    if (error) return setError(error.longMessage ?? error.message);
    setCodeSent(true);
  }

  if (codeSent) {
    return (
      <StepUpGate
        title="Check your email"
        description={`Enter the 6-digit code we sent to ${email}.`}
        successTitle="You're in"
        successDescription="Opening your dashboard."
        onVerify={async (code) => {
          const { error } = await signIn.emailCode.verifyCode({ code });
          // a wrong or expired code returns an error: the cells shake and the user types again
          return !error && signIn.status === "complete";
        }}
        onResend={() => void signIn.emailCode.sendCode()}
        onCancel={() => setCodeSent(false)}
        onVerified={() =>
          void signIn.finalize({
            navigate: ({ decorateUrl }) => {
              const url = decorateUrl("/dashboard");
              if (url.startsWith("http")) window.location.href = url;
              else router.push(url);
            },
          })
        }
      >
        {/* 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>
    );
  }

  return (
    <main className="grid min-h-dvh place-items-center bg-[#0b0c10] text-white">
      <form
        onSubmit={(e) => {
          e.preventDefault();
          void sendCode();
        }}
        className="grid w-80 gap-3"
      >
        <label htmlFor="email" className="text-sm text-white/70">Email</label>
        <input id="email" type="email" autoComplete="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>
  );
}