Passkey

Install peer dependencies

npm install @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

This is the raw SQL migration, for more details including an example MongoDB migration, check out the Prisma schema.prisma here, or the PR adding support to Prisma here.

The Passkeys provider requires an additional table called Authenticator. Below are the updated Prisma schema and a raw SQL migration variation for both PostgreSQL and MySQL.

Prisma Edge Compatibility

If you’re using Auth.js in Next.js via middleware, you’ll need to make some small adjustments as Prisma does not support edge runtimes yet. See the Prisma adapter docs for more details.

Update Auth.js Configuration

Add the Passkeys provider to your configuration. Also make sure you’re using a compatible database adapter.

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 using a custom signin page, you can leverage the next-auth signIn function to initiate a WebAuthn registration and login with the following code. 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>
  )
}