Skip to content

Next.js and Auth.js example using the Hanko passkey provider

Notifications You must be signed in to change notification settings

teamhanko/passkeys-example-next-auth

Repository files navigation

Getting Started

First, create .env.local and add the following environment variables to it (please make sure to include the quotes around the API key):

PASSKEYS_API_KEY_SECRET="<your secret api key>"
NEXT_PUBLIC_TENANT_ID=<your tenant id>

These values both come from the Passkey API. The tenant ID will be shown to you when you create a new tenant. The API key must remain secret (don't prefix with NEXT_PUBLIC_).

Then install dependencies:

npm install
# or
yarn install
# or
pnpm install
# or
bun install

Then run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.

Then try to log in as one of the following users:

Username Password
johnd password123
sergio_mq very_secure_password

You can add more users to the "database" in db.ts ;-)

Once logged in, add a passkey to the account

Passkeys can only be added once you're logged in — now that you are (using the username + password combos above), add a passkey by clicking the Register passkey for johnd button.

When you're done, log out.

You'll be able to log into the same account using the same passkey you just registered. Click on 🔑 Log in with Passkey and follow the promp that appears.

At the end, you should be logged in without having had to enter any username/password.

Community

Questions, bugs, ideas

If you have any questions or issues, please check this project's Q&A section in discussions and the open issues. Feel free to comment on existing issues or create a new issue if you encounter any bugs or have a feature request. For yet unanswered questions, feedback, or new ideas, please open a new discussion.

Discord community & X

We invite you to join our growing Discord community if you want to get the latest updates on passkeys, WebAuthn, and this project or if you just want to chat with us. You can also follow us on X.