Learn how to add passkeys to your Next.js app which already uses Auth.js for authentication.
Install passkey provider
Get your tenant ID and API key
.env.local
file.baseUrl
to both
tenant
(in [...nextauth].ts
) and
signInWithPasskey()
(in your component).Add `PasskeyProvider`
Allow your users to register passkeys as a login method for their account
tenant({ ... }).registration.initialize()
and .registration.finalize()
to create and store a passkey for your user.On your frontend, you’ll have to call create()
from @github/webauthn-json
with the object .registration.initialize()
returned.create()
will return a PublicKeyCredential
object, which you’ll have to pass to .registration.finalize()
.Backend:Allow your users to log in with passkeys
Optional: Autofill support
autoComplete="username webauthn"
to your username fieldsignInWithPasskey.conditional()
when the login form loads