berrysauce / passkey-demo

🔑 WebAuthn Passkey Server Demo

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. 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
• Router – HonoJS
• Frontend – Bootstrap 5

Cloudflare Worker JWT (a very cool library!) is used for the server-side JWT implementation. I also recommend taking a look at HonoJS. 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}

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=<RANDOM TOKEN HERE FOR JWT SIGNING>

Additionally, you need to pass the JWT_TOKEN onto your active Worker instance via wrangler (more on that here).

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

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

passkey-demo's Issues

Success page is accessible even if unauthorized (server notices, user data won't be shown)

does not work locally or when deployed to cloudflare

This is a nice start to a demo, but the login with passkeys button either spins when deploying locally, or cannot authenticate when deployed to cloudflare with a custom domain.

I suspect that the calls to encryption need domain specific settings, but haven't researched the code yet.

Automatic redirect when session token is already set doesn't work

(redirect from "/" to "/success")