Problem with OTP Retry Feature in Email Authentication

[Abuhaithem]

Problem with OTP Retry Feature in Email Authentication

I'm currently implementing an email-based authentication system using NextAuth.js with OTP (One-Time Password) verification. However, I encountered an issue where, after entering an incorrect OTP, I cannot retry the OTP verification. NextAuth.js currently allows only a single OTP verification attempt before blocking further submissions, which is problematic for situations where users might enter incorrect OTPs multiple times.

Here is a brief overview of the current code and setup I’m using:

Server-side Code (NextAuth.js Configuration)

import { NextRequest } from "next/server";
import { cookies } from "next/headers";
import { type RequestCookie } from "next/dist/compiled/@edge-runtime/cookies";

import NextAuth from "next-auth";
import { getAuthOptions } from "@/lib/auth";

type AuthIntent = "signin" | "signup";

interface RouteHandlerContext {
    params: { nextauth: string[] };
}

async function handler(req: NextRequest, context: RouteHandlerContext) {
    const cookieStore = cookies();
    const authIntent: RequestCookie | undefined = cookieStore.get("auth-intent");
    const userType: RequestCookie | undefined = cookieStore.get("user-type");
    const clientType: RequestCookie | undefined = cookieStore.get("client-type");

    const intent = (authIntent?.value ?? "signin") as AuthIntent;
    const userTypeValue = (userType?.value ?? "freelancer") as "freelancer" | "client";
    const clientTypeValue = clientType?.value as "individual" | "company";
    return await NextAuth(req, context, getAuthOptions(intent, userTypeValue, clientTypeValue));
}

export { handler as GET, handler as POST };

Client-side Code (Email Verification Flow)

"use client";

import * as React from "react";
import { useSearchParams } from "next/navigation";
import Link from "next/link";
import { setCookie } from "cookies-next";
import { signIn } from "next-auth/react";
import { zodResolver } from "@hookform/resolvers/zod";
import { useForm } from "react-hook-form";
import { z } from "zod";
import { Loader2 } from "lucide-react";
import { Button } from "@tammwe/adinkra-ui/button";
import { toast } from "@tammwe/adinkra-ui/use-toast";
import { InputOTP, InputOTPGroup, InputOTPSlot } from "@tammwe/adinkra-ui/input-otp";

const resendVerification = () => {
    onSubmit(getValues());
};

if (isVerifying) {
    const callbackUrl = searchParams.get("callbackUrl");

    return (
        <div>
            <form action={"/api/auth/callback/email"} method={"GET"} ref={verificationFormRef}>
                <div>
                    <InputOTP
                        maxLength={6}
                        onChange={(value) => setToken(value)}
                        onComplete={() => onMagicCodeComplete()}
                    >
                        <InputOTPGroup className={"text-midnight-700 gap-2"}>
                            {Array.from({ length: 6 }).map((_, index) => (
                                <InputOTPSlot key={index} index={index} />
                            ))}
                        </InputOTPGroup>
                    </div>
                    <div>
                        Didn&apos;t receive the email?{" "}
                        <button type={"button"} onClick={() => resendVerification()}>
                            Click to resend
                        </button>
                    </div>
                    <Button type={"submit"} disabled={isLoading}>
                        {isLoading && <Loader2 className={"mr-2 h-4 w-4 animate-spin"} />}
                        Sign in
                    </Button>
                </div>
            </form>
        </div>
    );
}

Authentication Code ("/lib/auth")

import { type NextAuthOptions } from "next-auth";
import { EmailProvider } from "next-auth/providers/email";
import { Drizzle } from "drizzle-orm";
import { User, Session } from "@/models"; // Assuming you have defined these models

export function getAuthOptions(
    intent: "signin" | "signup",
    userType: "freelancer" | "client",
    clientType: "individual" | "company"
): NextAuthOptions {
    return {
        providers: [
            EmailProvider({
                from: process.env.EMAIL_ADDRESS as string,
                maxAge: 3 * 60,
                generateVerificationToken() {
                    // Generate a 6-digit numeric OTP (one-time password)
                    const random = crypto.randomBytes(4).readUInt32LE();
                    const padded = "0000000000" + random.toString();
                    return padded.substring(padded.length - 6);
                },
                sendVerificationRequest: async ({ identifier, token }) => {
                    await sendSignInEmail({ email: identifier, token });
                },
            }),
        ],
        pages: {
            error: "/auth-error",
            signIn: "/login",
        },
        session: {
            strategy: "jwt",
        },
        callbacks: {
            async signIn({ user }) {
                if (intent === "signin") {
                    const dbUser = await getUserByEmail({ email: user.email ?? "" });

                    if (!dbUser) {
                        return false;
                    }
                } else if (intent === "signup") {
                    const dbUser = await getUserByEmail({ email: user.email ?? "" });

                    if (dbUser) {
                        return false;
                    }
                }
                return true;
            },
            async session({ token, session }) {
                if (token && session && session.user) {
                    session.user.id = token.id;
                    session.user.name = token.name;
                    session.user.email = token.email;
                    session.user.image = token.picture;
                    session.user.hasSeenOnboarding = !!token.hasSeenOnboarding;
                    session.user.userType = token.userType;
                    session.user.clientType = token.clientType;
                }

                return session;
            },
            async jwt({ token, user, trigger, session }) {
                if (trigger === "update" && session.onboarded) {
                    token.hasSeenOnboarding = true;
                    token.termsAndConditions = "accepted";
                    return token;
                }

                if (trigger === "update" && session.termsAndConditions) {
                    token.termsAndConditions = session.termsAndConditions;
                    return token;
                }

                const dbUser = await getUserByEmail({ email: token.email as string });

                if (!dbUser) {
                    if (user) {
                        token.id = user.id;
                    }
                    return token;
                }

                return {
                    id: dbUser.id,
                    name: dbUser.name,
                    email: dbUser.email,
                    picture: dbUser.image,
                    hasSeenOnboarding: !!dbUser.hasSeenOnboarding,
                    userType: userType ?? dbUser.userType,
                    clientType: clientType ?? dbUser.clientType,
                    termsAndConditions: !!dbUser.hasSeenOnboarding ? "accepted" : null,
                };
            },
        },
    };
};

The Issue

NextAuth.js does not allow me to resend the OTP once an incorrect OTP is entered. I would like to be able to retry OTP verification multiple times. Currently, once a wrong OTP is entered, the system does not provide an easy way for the user to retry, which breaks the user experience.

Expected Behavior

After a failed OTP entry, I should be able to retry the verification and resend the OTP.

The system should support multiple OTP attempts, rather than blocking further submissions after one failure.

Steps to Reproduce

User enters an email for sign-in and receives an OTP.

User enters an incorrect OTP.

User cannot retry entering the OTP, and there is no option to resend it easily.

Potential Solution

From my research, I found a similar issue discussed on the NextAuth.js GitHub (Issue #709). The problem lies in the fact that NextAuth.js doesn't provide retry functionality for OTP verification once an incorrect OTP is entered.

It would be helpful if there was an option in NextAuth.js to either:

Allow multiple OTP attempts (without blocking retry).

Provide a clear method to trigger OTP resend functionality after an incorrect attempt.

I would like to request an enhancement or clarification on how to implement OTP retries within NextAuth.js, specifically for use cases like mine.

Additional Context

I'm using the next-auth OTP email provider.

Here’s a link to the issue I referenced: NextAuth Issue #709

I have implemented OTP retry functionality using a client-side button that triggers OTP resend.

Looking forward to your feedback on this! Thank you for your help.

[Abuhaithem]

when I remove the error: "/auth-error" in @lib/auth

 pages: {
            error: "/auth-error",
            signIn: "/login",
        },

it will redirect us to

[Abuhaithem]

need help here please guys help me
@balazsorban44 @linyiru @youpy @davidwinter @ninjudd @ndom91 @iaincollins @ThangHuuVu @0ubbe

[Abuhaithem]

@buoyad @k-taro56