Learn how to integrate Authsignal with your Next.js app when using NextAuth.
.env.local
file.
Backend - Track an action
enroll-passkey
that checks the session token before tracking an action. Pass the token returned by the track
call to your frontend.Frontend - Initiate the passkey enrollment flow
signUp
function using Authsignal’s Web SDK, passing the token returned in step 1.Backend - Validate the result
callback
that checks the NextAuth session token, then validates the result token passed in from step 2.Frontend - Handle result
Frontend - Enable passkey autofill
username webauthn
in the autocomplete attribute.webauthn
value in the autocomplete
attribute is required for autofill to work.webauthn
can be combined with other typical autocomplete
values, including username
and current-password
, but must appear at the end to consistently trigger conditional UI across browsers.authsignal.passkey.signIn
when the page loads. This will initialize the input field for passkey autofill, which means if a user has enrolled a passkey then they should be able to select it when focusing the text field.
On success, this will return a token that we will validate on the backend.signIn
method, specifying that we want to use the credentials
provider. This uses the token to validate the result of the challenge server-side and logs in the user.
We’ve set redirect: false
so that we can handle errors manually, on the current page.Backend - Create NextAuth session
authOptions
within the [...nextauth]
API route.
This will validate the signInToken from step 1 using Authsignal’s validateChallenge
method.
On successful validation, NextAuth will create a session containing user information that you specify. Returning null
will throw an error.