Skip to content
Migrating from NextAuth.js v4? Read our migration guide.
Getting Started
Providers
Passkey

Passkey

Setup

⚠️

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

The WebAuthn provider requires changes to all of the framework integration as well as any database adapter that plans to support it. Therefore, the WebAuthn provider is currently only supported in the following framework integration and database adapters. Support for more frameworks and adapters are coming soon.

  • next-auth@5.0.0-beta.9 or above
  • @auth/prisma-adapter@1.3.3 or above
  • @prisma/client@5.9.1 or above

Install peer dependencies

npm install @simplewebauthn/browser @simplewebauthn/server

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.

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

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.

Notes

  • If you only pass a field named username, like below. 1Password will not offer to save new Passkeys in your login form.
@/auth.ts
providers = [
  Passkey({
    formFields: {
      username: {
        label: "Username",
        required: true,
        autocomplete: "webauthn username",
      },
    },
  }),
]
Auth.js © Balázs Orbán and Team - 2024