https://github.com/berrysauce/passkey-demo

🔑 WebAuthn Passkey Server Demo
https://github.com/berrysauce/passkey-demo

cloudflare honojs passkeys passkeys-demo webauthn webauthn-demo worker

Last synced: about 2 months ago
JSON representation

🔑 WebAuthn Passkey Server Demo

• Host: GitHub
• URL: https://github.com/berrysauce/passkey-demo
• Owner: berrysauce
• License: mit
• Created: 2023-05-08T18:52:43.000Z (over 1 year ago)
• Default Branch: master
• Last Pushed: 2023-08-31T15:02:46.000Z (over 1 year ago)
• Last Synced: 2024-05-23T00:23:16.964Z (7 months ago)
• Topics: cloudflare, honojs, passkeys, passkeys-demo, webauthn, webauthn-demo, worker
• Language: HTML
• Homepage: https://passkeys.berrysauce.me
• Size: 247 KB
• Stars: 4
• Watchers: 2
• Forks: 1
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        



Passkey Server Demo


This is a demo login using Passkeys. Passkeys are not new, but they've gained a lot of popularity recently as big tech companies like Apple and Google have implemented them in their products. This demo simulates the registration and authentication of a user using passkeys. The server and client (user's browser) use the [Passwordless.ID WebAuthn implementation](https://github.com/passwordless-id/webauthn). Thanks to them for making such an easy-to-use library!

> **Warning**: I cannot guarantee your data's security. This is just a demo. The data stored on the server is just from your site-specific passkey – which shouldn't be a problem, even if an attacker gets to it. Use it at your own risk. You shouldn't use this in production.

### Stack

- [Server – Cloudflare Workers](https://workers.cloudflare.com/)

- [Router – HonoJS](https://hono.dev/)

- [Frontend – Bootstrap 5](https://getbootstrap.com/)

[Cloudflare Worker JWT](https://github.com/tsndr/cloudflare-worker-jwt) (a very cool library!) is used for the server-side JWT implementation. I also recommend taking a look at [HonoJS](https://hono.dev/). It's a small but powerful router which works with Cloudflare Workers. There's still some work to do with the documentation, but that's ok, as it's quite fresh. It's really great and easy to use.

### How it works

The Passwordless.ID repository has a very nice graphic for how the WebAuthn process works. I'll just copy it here:



Source: [Passwordless.ID WebAuthn Repository](https://github.com/passwordless-id/webauthn)

### Development

First, clone the repo to your machine and install all dependencies.

~~Then, run the local development server. Some features might not work in local development mode.~~ 

> **Note**: It seems like the WebAuthn spec requires valid SSL certificates. Currently, local development mode doesn't work. I recommend using `wrangler tail` to get the live logs from your active Cloudflare Worker instance for debugging.

```

npm install

npm run dev

```

You also need to create a file called `.dev.vars` in the project directory with the following content:

```

JWT_TOKEN=

```

Additionally, you need to pass the `JWT_TOKEN` onto your active Worker instance via wrangler (more on that [here](https://developers.cloudflare.com/workers/platform/environment-variables/#add-secrets-to-your-project)).

Now, create a `wrangler.toml` file (or edit your existing one) to match the following:

```toml

name = "passkey-demo"

main = "src/index.ts"

compatibility_date = "2023-01-01"

kv_namespaces = [

  { binding = "DB", id = "YOUR_KV_ID", preview_id = "YOUR_PREVIEW_KV_ID" }

]

[site]

bucket = "./static"

```

Deploy your passkey application as a Cloudflare Worker via wrangler with the following command.

```

npm run deploy

```