next-auth-webauthn icon indicating copy to clipboard operation
next-auth-webauthn copied to clipboard

NextAuth.js 2FA with WebAuthn Example


NextAuth.js 2FA with Webauthn Example App

Open Source. Full Stack. Own Your Data.

npm Bundle Size Downloads TypeScript

New built-in Webauthn provider is out now

We introduced the new built-in Webauthn support for Auth.js - head over to https://authjs.dev/reference/core/providers/webauthn to learn more.

Overview - 2FA with WebAuthn using NextAuth.js.

This example shows how to use NextAuth.js to add 2FA with WebAuthn. It uses SimpleWebAuthn, Vercel KV, and RedisUpstashAdapter. The steps are:

  1. Sign in with GitHub
  2. Register a WebAuthn credential
  3. Sign out & Sign in with GitHub again
  4. Verify the WebAuthn credential

How it works

  • We need a DB to store the user's registered webauthn credential.
    • When the user successfully registers a credential, set the flag is2FAEnabled: true
    • The next time he/she logs in, check for is2FAEnabled - if true, then prompt them with the Webauthn flow.
  • Implement 2FA with Webauthn in the Credential Provider. Note: We need to use the strategy: 'jwt' here. You could find more details about the reasoning in the Credential Provider doc.