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.
Username | Password |
---|---|
johnd | password123 |
sergio_mq | very_secure_password |
You can add more users to the "database" in db.ts ;-)
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.
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.
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.