demo

ODD Passkeys PWA

This example shows how to use the ODD SDK with Passkeys authentication to build Photo Sharing PWA.

It uses vite, preact, preact-router, @oddjs/odd, @oddjs/preact and @oddjs/passkeys.

Try it

You can use Codesandbox and start hacking right away.

To clone it locally:

npx tiged oddsdk/passkeys/examples/demo odd-passkeys-pwa
cd odd-passkeys-pwa
pnpm install
pnpm dev

Configuration

Open src/app.jsx and change the config object to match your app's namespace.

/** @type {import('@oddjs/odd')} */
const config = {
  namespace: {
    creator: document.location.host,
    name: 'Passkey auth',
  },
}

Publish it

An ODD application can be published to IPFS with the Fission CLI or the Fission GitHub publish action.

To publish with the Fission CLI:

1. Install the CLI

2. Run fission setup to make a Fission account

3. Run pnpm run build to build the app

4. Run fission app register to register a new Fission app (set your build directory to dist)

   fission app register --build-dir ./dist --name <your-app-name>

5. Run fission app publish to publish your app to the web

Your app will be available online at the domain assigned by the register command.

To set up the GitHub publish action:

1. Register the app with the CLI
2. Export your machine key with base64 ~/.config/fission/key/machine_id.ed25519
3. Add your machine key as a GH Repository secret named FISSION_MACHINE_KEY
4. Update the publish.yml with the name of your registered app

See the Fission Guide and the publish action README for more details.

Documentation

• ODD SDK
• UCANs
• ODD passkeys