Better Auth email OTP in Next.js

lib/auth.ts (email and phone)

import { betterAuth } from "better-auth";
import { emailOTP, phoneNumber } from "better-auth/plugins";
import { nextCookies } from "better-auth/next-js";
import { sendEmail } from "@/lib/email";
import { sendSms } from "@/lib/sms";

export const auth = betterAuth({
  // database: your adapter; the phone plugin adds phoneNumber + phoneNumberVerified to user (run the migration)
  plugins: [
    emailOTP({
      async sendVerificationOTP({ email, otp, type }) {
        if (type === "sign-in") void sendEmail({ to: email, subject: "Your sign-in code", text: `Your code is ${otp}` });
      },
    }),
    phoneNumber({
      sendOTP: ({ phoneNumber, code }) => {
        void sendSms(phoneNumber, `Your code is ${code}`); // your SMS provider
      },
      // without this, a number that isn't on an account can't sign in
      signUpOnVerification: {
        getTempEmail: (phone) => `${phone.slice(1)}@phone.example.com`, // a placeholder email per number
      },
    }),
    nextCookies(),
  ],
});

lib/auth-client.ts (email and phone)

import { createAuthClient } from "better-auth/react";
import { emailOTPClient, phoneNumberClient } from "better-auth/client/plugins";

export const authClient = createAuthClient({
  plugins: [emailOTPClient(), phoneNumberClient()],
});

app/login/phone/page.tsx

"use client";
import { useState } from "react";
import { useRouter } from "next/navigation";
import { StepUpGate } from "@/components/StepUpGate";
import { authClient } from "@/lib/auth-client";

export default function PhoneOtpLogin() {
  const router = useRouter();
  const [phone, setPhone] = useState("");
  const [sentTo, setSentTo] = useState<string | null>(null);
  const [error, setError] = useState("");

  async function sendCode(phoneNumber: string) {
    setError("");
    const { error } = await authClient.phoneNumber.sendOtp({ phoneNumber }); // E.164, like +40712345678
    if (error) setError(error.message ?? "We couldn't text a code. Check the number.");
    else setSentTo(phoneNumber);
  }

  if (!sentTo) {
    return (
      <main className="grid min-h-dvh place-items-center bg-[#0b0c10] text-white">
        <form onSubmit={(e) => { e.preventDefault(); void sendCode(phone.trim()); }} className="grid w-80 gap-3">
          <label htmlFor="phone" className="text-sm text-white/70">Phone number</label>
          <input id="phone" type="tel" autoComplete="tel" placeholder="+40712345678" required value={phone}
            onChange={(e) => setPhone(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">Text me a code</button>
          {error ? <p role="alert" className="text-sm text-red-400">{error}</p> : null}
        </form>
      </main>
    );
  }

  return (
    <StepUpGate
      title="Check your messages"
      description={`Enter the 6-digit code we texted to ${sentTo}.`}
      successTitle="You're in"
      successDescription="Opening your dashboard."
      onVerify={async (code) => {
        const { error } = await authClient.phoneNumber.verify({ phoneNumber: sentTo, code });
        return !error;
      }}
      onResend={() => void sendCode(sentTo)}
      onCancel={() => setSentTo(null)}
      onVerified={() => {
        router.push("/dashboard");
        router.refresh();
      }}
    >
      <div className="grid min-h-dvh place-items-center bg-[#0b0c10] text-white/40">Your dashboard</div>
    </StepUpGate>
  );
}