Skip to content
Migrating from NextAuth.js v4? Read our migration guide.

Passkey

Setup

⚠️

The WebAuthn / Passkeys provider is experimental and not yet recommended for production use.

The Passkeys provider requires a database adapter as well as a new table in that database. Please see the docs page for your adapter for the respective migration details.

Passkeys are currently supported in the following adapters / framework packages.

PackageMinmum VersionLink
next-auth5.0.0-beta.17
@auth/sveltekit1.0.2
@auth/prisma-adapter1.3.3Docs
@auth/unstorage-adapter2.1.0Docs
@auth/drizzle-adapter1.1.1Docs

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

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.

./auth.ts
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.

app/login/page.tsx
"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>
  )
}

Options

You can find all of the Passkeys provider options under the API reference.

Auth.js © Balázs Orbán and Team - 2024