Privy email OTP with a custom UI

Use it in Next.js

app/login/page.tsx

"use client";
import { useEffect, useRef, useState } from "react";
import { useRouter } from "next/navigation";
import { useLoginWithEmail, usePrivy } from "@privy-io/react-auth";
import { StepUpGate } from "@/components/StepUpGate";

const MAX_TRIES = 5; // Privy accepts 5 attempts per code, then the code is dead

export default function PrivyEmailLoginPage() {
  const router = useRouter();
  const { ready, authenticated } = usePrivy();
  const [email, setEmail] = useState("");
  const [codeSent, setCodeSent] = useState(false);
  const [hint, setHint] = useState("");
  const [error, setError] = useState("");
  const tries = useRef(0);
  const next = useRef("/dashboard");
  const verifying = useRef(false);

  const { sendCode, loginWithCode, state } = useLoginWithEmail({
    // runs once Privy has the session (and the embedded wallet, if you create one on login)
    onComplete: ({ isNewUser }) => {
      next.current = isNewUser ? "/welcome" : "/dashboard";
    },
  });

  // already signed in: skip the form (but not while the gate plays its unlock)
  useEffect(() => {
    if (ready && authenticated && !codeSent) router.replace("/dashboard");
  }, [ready, authenticated, codeSent, router]);

  async function requestCode() {
    setError("");
    try {
      await sendCode({ email }); // pass disableSignup: true to refuse new accounts
      tries.current = 0;
      setHint("");
      setCodeSent(true);
    } catch {
      setError("We couldn't send a code to that address. Check it and try again.");
    }
  }

  if (!codeSent) {
    return (
      <main className="grid min-h-dvh place-items-center bg-[#0b0c10] text-white">
        <form
          onSubmit={(e) => {
            e.preventDefault();
            void requestCode();
          }}
          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 disabled={!ready || state.status === "sending-code"} className="rounded-lg bg-[#C6F432] px-3 py-2 font-medium text-black disabled:opacity-50">
            {state.status === "sending-code" ? "Sending..." : "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={hint || `Enter the 6-digit code we sent to ${email}. It works for 10 minutes.`}
      successTitle="You're in"
      successDescription="Taking you to your account."
      resendSeconds={30}
      onVerify={async (code) => {
        if (verifying.current || tries.current >= MAX_TRIES) return false;
        verifying.current = true;
        try {
          await loginWithCode({ code }); // rejects on a wrong or expired code
          return true;
        } catch {
          tries.current += 1;
          if (tries.current >= MAX_TRIES) setHint("That code has run out of tries. Tap Resend code for a new one.");
          return false; // the cells shake and the user can type again
        } finally {
          verifying.current = false;
        }
      }}
      onResend={() => void requestCode()}
      onCancel={() => setCodeSent(false)}
      onVerified={() => router.push(next.current)}
    >
      {/* 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 { PrivyProvider } from "@privy-io/react-auth";

export function Providers({ children }: { children: ReactNode }) {
  return (
    <PrivyProvider
      appId={process.env.NEXT_PUBLIC_PRIVY_APP_ID!}
      clientId={process.env.NEXT_PUBLIC_PRIVY_CLIENT_ID}
      config={{
        // the modal's list; your own screen only offers email anyway
        loginMethods: ["email"],
        // leave out, or keep Privy's default, if your app needs a wallet per user
        embeddedWallets: { ethereum: { createOnLogin: "off" } },
      }}
    >
      {children}
    </PrivyProvider>
  );
}

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 { usePrivy } from "@privy-io/react-auth";

export default function Dashboard() {
  const { ready, authenticated, user, logout } = usePrivy();
  const router = useRouter();

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

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