next auth 2FA

Hey, is it possible to set up an optional 2FA with Next-auth?

19 Replies

Zepeto•15mo ago

I found a bit of an answer to my question here, could someone help me set this up ? https://github.com/nextauthjs/next-auth/issues/4820

jingleberry•15mo ago

Which part do you want help with

Zepeto•15mo ago

I need help to implement the api route in general, I did not understand how to manage this optional factor

jingleberry•15mo ago

I would learn how to implement 2FA without next auth first. Google “how to do 2FA with nextjs” might give a few good results Then you can revisit learning to integrate it with next auth as a custom provider Why do you need 2FA anyway, are the existing providers such as Google or Facebook not work? They have their own 2FA (assuming the user has opted in to it)

Zepeto•15mo ago

I have already implemented it without next-auth, that's why I ask the question precisely with next-auth, moreover they are external accounts of another application

jingleberry•15mo ago

Do you have a code snippet of your current next auth config? Have you integrated your current external account provider as a next auth provider? At a high level you would need to add a custom provider which can take in whatever it needs for the 2FA

Zepeto•15mo ago

I didn't implented next-auth yet, I wanted to make sure it was possible before This is not a supported provider so I use the credential provider then I fetch an api with the username/password

jingleberry•15mo ago

It's very difficult to provide help without context like some code snippets of what you are working with. What does the username/password login return, a JWT? A session cookie? And what kind of 2FA are you going to setup, will it be a push notification? Or an SMS code?

Zepeto•15mo ago

The user enters his username and password, I fetch an api with these data. The API returns me either the access token or a response that tells me that the account uses the 2FA, in which case the api automatically sends the code by mail to the user and he only has to enter it so that I can send this code to a new endpoint that returns me the access token

jingleberry•15mo ago

Sounds like its more trouble integrating with NextAuth rather than rolling your own custom solution. Do all the custom fetching and login via password + 2FA on the frontend. Once that's all done pass in the user's email and access token into the NextAuth credentials provider. Wire up NextAuth to check with your external systems to validate the username/email + access token combination is valid.

Zepeto•15mo ago

The 2FA is optional and we don't know it in advance So I can't get the code in advance, as I said here, it depends on the API response

jingleberry•15mo ago

Thats fine if you can't get the code in advance. You just do different things

if (response.hasAccessToken) {
  signIn("credentials", { username, password })
} else {
  send2FAEmail()
  signIn("credentials", { username, password, 2FACode })
}

if (response.hasAccessToken) {
  signIn("credentials", { username, password })
} else {
  send2FAEmail()
  signIn("credentials", { username, password, 2FACode })
}

Ofc you'll need to wait for the user to type in the 2FA code if needed.

jingleberry•15mo ago

Credentials provider is most likely your solution. https://next-auth.js.org/v3/configuration/providers#credentials-provider

Providers | NextAuth.js

Authentication Providers in NextAuth.js are services that can be used to sign in a user.

jingleberry•15mo ago

The example mentions 2FA too

Zepeto•15mo ago

How do we wait for the user to enter the code before continuing the authentication process? The example mentions the 2FA in case we have it in advance 😦

jingleberry•15mo ago

if (needs2FA) {
  open2FADialogWindow()
}

if (needs2FA) {
  open2FADialogWindow()
}

Then

const 2FADialog = () => {
  const onSubmit = (data) => signIn("2FA", username, 2fa)

  return <form onSubmit={onSubmit}><input name="2FACode" /></form>
}

const 2FADialog = () => {
  const onSubmit = (data) => signIn("2FA", username, 2fa)

  return <form onSubmit={onSubmit}><input name="2FACode" /></form>
}

Roughly like that You just have a form. And only call 2FA login when the user submits the form? Just try build it from first principles Don't expect to find a fully coded answer lying around on stack overflow. I'm sure it'll be a good experience figuring it out from scratch

Zepeto•15mo ago

Yes What does the signIn function represent? Is it in the authorize part of the provider?

jingleberry•15mo ago

https://next-auth.js.org/getting-started/client#signin

Client API | NextAuth.js

The NextAuth.js client library makes it easy to interact with sessions from React applications.

BarisP•15mo ago

I used something like this to, send magic link mails based on if the user's "allowed" is true or false, you can put a layer between to set that allowed field accordingly

Gaming

Programming

next auth 2FA