Credentials Login with 2FA using a custom OTP Server.

[ProlessCode]

Hi,

I am currently developing a Next.js 15 web application that includes a secure login process. Users will authenticate using their credentials (username and password) and will subsequently verify their identity through an authentication app (e.g., LinOTP, Authy, Microsoft Authenticator, etc.) as part of a two-factor authentication (2FA) mechanism.

The one-time password for 2FA is generated and validated using my LinOTP Server.

I am seeking ideas, suggestions, or best practices to efficiently implement this.
Thank you in advance for your time and assistance!

Best regards,
Proless

[AndreaBarghigiani]

I've started a discussion in the Discord server and I am commenting here because I have a really close use case.

First and foremost, I do not think you need an external service to generate the OTP numeric value.

My plan of action, that I am looking to validate here or over Discord, is to implement the following:

1. Allow user to insert credentials

User insert email/password credentials in a custom LoginForm

2. Verify credentials

The LoginForm sends data to a custom login server action that will not call the signIn method of Auth.js. The main scope of the server action is to verify that credentials are correct, and if so, redirect user to the custom OTP page while sending the OTP code via email and storing it in a custom database table

3. Verify OTP code via signIn and authorize callback

Now the tricky part, still unsure if I have to create a custom EmailProvider or not. To be honest I think I just need to customize create a custom OTPForm that will collect the email (passed by searchParams) and the OTP code that the user will insert in the form, then pass the data to the standard Credentials provider into something like this:

providers: [
  Credentials({
    name: 'Credentials',
    credentials: {
      email: { label: 'Email', type: 'text' },
      password: { label: 'OTP', type: 'text' },
    },
    async authorize(credentials) {
      const validatedFields = OTPSchema.safeParse(credentials);

      if (validatedFields.success) {
        const { email, otp } = validatedFields.data;

        const user = await getUserByEmail(email);

        if (!user || !user.id || !user.enabled) return null;

        const OTPMatch = await matchOTP(user.id, otp);

        if (!OTPMatch) return null;

        return user as any;
      }

      return null;
    },
  }),
],

Since this Credentials provider will be called with signIn inside the server action that collects the OTPForm data, I believe that this could be enough to generate the JWT and verify only then the user inside the application.