Passkey

Install peer dependencies

npm install @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3

pnpm add @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3

yarn add @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3

bun add @simplewebauthn/browser@9.0.1 @simplewebauthn/server@9.0.3

The @simplewebauthn/browser peer dependency is only required for custom signin pages. If you’re using the Auth.js default pages, you can skip installing that peer dependency.

Database Setup

The Passkeys provider requires an additional table called Authenticator. Passkeys are now supported in multiple adapters, please see their respective docs pages for more detailed migration steps. We’ll use Prisma as an example going forward here, but there is also a raw SQL migration included below.

Edge Compatibility

If you’re using next-auth with Next.js and middleware, you should ensure that your database client of choice is “edge compatible”. If you’re using an older version of Prisma or another adapter that is not edge compatible, you’ll need to make some adjustments. Check out our edge compatibility guide for more details. There is also Prisma specific information in the Prisma adapter docs.

Update Auth.js Configuration

Add the Passkey provider to your configuration and make sure you’re using a compatible database adapter. You’ll also need to explicitly enable the experimental WebAuthn feature.

import Passkey from "next-auth/providers/passkey"
import { PrismaAdapter } from "@auth/prisma-adapter"
import { PrismaClient } from "@prisma/client"
 
const prisma = new PrismaClient()
 
export default {
  adapter: PrismaAdapter(prisma),
  providers: [Passkey],
  experimental: { enableWebAuthn: true },
}

If you’re using the built-in Auth.js pages, then you are good to go now! Navigating to your /signin route should include a “Signin with Passkeys” button now.

Custom Pages

If you’re building a custom signin page, you can leverage the next-auth/webauthn signIn function to initiate both WebAuthn registration and authentication. Remember, when using the WebAuthn signIn function, you’ll also need the @simplewebauth/browser peer dependency installed.

"use client"
 
import { useSession } from "next-auth/react"
import { signIn } from "next-auth/webauthn"
 
export default function Login() {
  const { data: session, update, status } = useSession()
 
  return (
    <div>
      {status === "authenticated" ? (
        <button onClick={() => signIn("passkey", { action: "register" })}>
          Register new Passkey
        </button>
      ) : status === "unauthenticated" ? (
        <button onClick={() => signIn("passkey")}>Sign in with Passkey</button>
      ) : null}
    </div>
  )
}