Is it possible to do 2FA or OTP with Credentials Provider? Next.js 13 App Router

[Inzendis]

Summary

So currently Im doing a PWA and I'm using Credentials provider, but instead of username and password, I'm doing email and password. Now So far everything works as inteded. I made it so I also have the role of the user, so the token contains the role of the user. Now, I wish to implement 2FA or OTP, meaning if its a new login (no valid token in cookie) then the user receives an email with the code, the user enters the code, validations occurs and then the user can log in.

I don't really know how to do this, so Im asking and I'm very new. Im using Next.js 13 App Router which has been a blast.

My thought process of what should happen is that the custom on signin redirect must not go to the home/dashboard without this validation of the OTP. Clearly I would need something like SendGrid to send emails.

I would also need to add to the token a validOTP attribute which checks true if it was validated I guess?

I saw something about verifyRequest: in the pages: {}
how would I send the user there, instead of the signIn function there is a verifyRequest or something where I redirect the user to verify their otp? Maybe do it with Ip address?

I need to stop the user from SignIn if the OTP hasnt been verified on that new device maybe? So I would redirect them to validate and then the token should be created.

Any pointers would be helpful.

Additional information

No response

Example

No response

[Inzendis]

I decided to do 2FA before creating the token via NextAuth if the user has it enabled. Once the user enters their 2FA and its valid then I will allow to signIn/create the token.

[clarkkamorr24]

Do you have a solution for this? Currently I'm working on the 2FA but I can't figure it out yet.

[AndreaBarghigiani]

yes, would be really nice to see an example of your implementation 😅

[Husain010]

Could you give a brief insight as to how did you achieve it using NextAuth?