Stytch email OTP with a custom UI

Use it in Next.js

app/login/page.tsx

"use client";
import { useEffect, useState } from "react";
import { useRouter } from "next/navigation";
import { useStytch, useStytchUser } from "@stytch/nextjs";
import { StepUpGate } from "@/components/StepUpGate";

export default function StytchEmailOtpPage() {
  const stytch = useStytch();
  const { user, isInitialized } = useStytchUser();
  const router = useRouter();
  const [email, setEmail] = useState("");
  const [methodId, setMethodId] = useState<string | null>(null);
  const [error, setError] = useState("");

  // already signed in: skip the form
  useEffect(() => {
    if (isInitialized && user && !methodId) router.replace("/dashboard");
  }, [isInitialized, user, methodId, router]);

  async function sendCode() {
    setError("");
    try {
      // new and existing users both get a code; expiration_minutes is required once you pass options
      const res = await stytch.otps.email.loginOrCreate(email, { expiration_minutes: 5 });
      setMethodId(res.method_id);
    } catch {
      setError("We couldn't send a code to that address. Check it and try again.");
    }
  }

  if (!methodId) {
    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" required autoComplete="email" 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 ${email}. It works for 5 minutes.`}
      successTitle="You're in"
      successDescription="Opening your dashboard."
      resendSeconds={30}
      onVerify={async (code) => {
        try {
          // a wrong or expired code throws a StytchAPIError
          await stytch.otps.authenticate(code, methodId, { session_duration_minutes: 60 });
          return true;
        } catch {
          return false; // the cells shake and the user can type again
        }
      }}
      onResend={() => void sendCode()}
      onCancel={() => setMethodId(null)}
      onVerified={() => router.push("/dashboard")}
    >
      {/* 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>
  );
}

"use client";
import type { ReactNode } from "react";
import { StytchProvider, createStytchClient } from "@stytch/nextjs";

// v22 name; createStytchHeadlessClient and createStytchUIClient are marked deprecated
const stytch = createStytchClient(process.env.NEXT_PUBLIC_STYTCH_PUBLIC_TOKEN!);

export function Providers({ children }: { children: ReactNode }) {
  return <StytchProvider stytch={stytch}>{children}</StytchProvider>;
}

import type { ReactNode } from "react";
import { Providers } from "./providers";

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}

"use client";
import { useEffect } from "react";
import { useRouter } from "next/navigation";
import { useStytch, useStytchUser } from "@stytch/nextjs";

export default function Dashboard() {
  const stytch = useStytch();
  const { user, isInitialized } = useStytchUser();
  const router = useRouter();

  useEffect(() => {
    if (isInitialized && !user) router.replace("/login");
  }, [isInitialized, user, router]);

  if (!user) return null;
  return (
    <main className="grid min-h-dvh place-items-center bg-[#0b0c10] text-white">
      <p>Signed in as {user.emails[0]?.email}</p>
      <button onClick={() => void stytch.session.revoke().then(() => router.replace("/login"))}>Sign out</button>
    </main>
  );
}