https://github.com/cermakjiri/with-webauthn
Full-stack examples of WebAuthn API.
https://github.com/cermakjiri/with-webauthn
fido2 firebase-auth full-stack nextjs passkeys passkeys-demo public-key-authentication react security-key simplewebauthn typescript webauthn webauthn-demo
Last synced: 2 months ago
JSON representation
Full-stack examples of WebAuthn API.
- Host: GitHub
- URL: https://github.com/cermakjiri/with-webauthn
- Owner: cermakjiri
- License: gpl-3.0
- Created: 2024-10-05T19:07:40.000Z (over 1 year ago)
- Default Branch: dev
- Last Pushed: 2025-08-30T10:34:09.000Z (10 months ago)
- Last Synced: 2025-10-10T00:09:38.045Z (8 months ago)
- Topics: fido2, firebase-auth, full-stack, nextjs, passkeys, passkeys-demo, public-key-authentication, react, security-key, simplewebauthn, typescript, webauthn, webauthn-demo
- Language: TypeScript
- Homepage: https://with-webauthn.dev
- Size: 2.42 MB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# With WebAuthn
A repository with full stack **WebAuthn API** examples.
## Examples
1. **[Authenticate with passkeys - Passkeys with SimpleWebAuthn & Firebase](examples/webauthn-default/README.md)**
- Creating (user registration), retrieving (user login), linking multiple, and removing passkeys.
- Passkeys autofill.
- Formatting and parsing of WebAuthn API request / responses done via [SimpleWebAuthn](https://simplewebauthn.dev) library.
- Built with [Firebase Auth](https://firebase.google.com/docs/auth/admin/create-custom-tokens) and Firestore SDKs.
- 👉 [**Check out the demo**](https://with-webauthn.dev)
2. **[Upgrade to passkeys – From email/password to passkeys with SimpleWebAuthn & Firebase](examples/webauthn-upgrade/README.md)**
- A user registers with traditional email/password and verifies their email afterwards.
- Then the user can link passkey/s and therefore upgrades to MFA.
- The user can downgrade to single-factor authentication by removing all their passkeys.
- Built with [SimpleWebAuthn](https://simplewebauthn.dev), [Firebase Auth](https://firebase.google.com/docs/auth/admin/create-custom-tokens) and Firestore SDKs.
- 👉 [**Check out the demo**](https://upgrade.with-webauthn.dev)
> #### 💡 Are you want to learn more about WebAuthn and passkeys?
>
> Let me share with you a developer guide to passkeys in my [Welcome to the world of passkeys](https://www.ackee.agency/blog/welcome-to-the-world-of-passkeys) blog post (česky [Vítejte ve světě passkeys](https://www.ackee.cz/blog/vitejte-ve-svete-passkeys)).
---
## Development
### Common Stack notes:
- The whole project is managed using tuborepo.
- All examples are in NextJS (React) framework.
- API calls are handled with React Tanstack query on client.
- API endpoints are built via NextJS API routes.
- Forms are built with react-hook-form and validated with zod schemas.
- Material UI with styled components as UI SDK.
### How to start the project locally?
1. Initialize package manager:
Make sure you're running Node v20. Then initialize a package manager:
```sh
corepack enable
corepack install
```
It finds `packageManager` field and installs Yarn 4.
2. Install dependencies:
```sh
yarn install --immutable
```
3. Note that common code of each example is placed in `packages/common` (for client and server).
4. Then continue with final steps for specific example:
- [Authenticate with passkeys](examples/webauthn-default/README.md)
- [Upgrade to passkeys](examples/webauthn-upgrade/README.md)
## Have you a found a bug?
Please, open a [Github issue](https://github.com/cermakjiri/with-webauthn/issues/new/choose). Thank you. ❤️