Playground

Goals

Build a decentralized Vue 3 application using GUN.js that supports the following features:

1. Passkey Authentication (WebAuthn):

   • Use WebAuthn (passkeys) for secure user login and registration.
   • Derive a deterministic cryptographic key from the WebAuthn credential (e.g. credential ID) using Gun.SEA.work().
   • Use the derived key to authenticate GUN users or generate SEA keypairs.

2. Encrypted Chat:

   • Create encrypted, real-time peer-to-peer chat using GUN.js and SEA.
   • Encrypt messages per user or per room using SEA keys or a shared group key.
   • Display messages decrypted on the client, showing sender DID-style identifiers (did:vuegun:{pub}).

3. Persisted SEA Keypair:

   • Encrypt and store the user's SEA keypair in localStorage, encrypted with the key derived from the passkey.
   • Decrypt and reuse this keypair upon successful passkey login to maintain user identity.

4. End-to-End Encrypted Group Chat:

   • Generate and manage a symmetric group key per chat room.
   • Share this group key securely by encrypting it with each member’s public key (epub) using SEA’s shared secret.
   • Encrypt and decrypt chat messages using the group key.

5. Modular Composition:

   • Organize the app using Vue composables: useAuth.js (for passkey auth and SEA key management) and useChat.js (for encrypted chat and group logic).
   • Create a reusable component like EncryptedChat.vue for the UI.

6. Add a decentralized identity registry (DID system) using GUN.

7. Add room-level permissions and invitations using encrypted key sharing.

Sources

• https://github.com/mylofi/webauthn-local-client
• Demo: https://passkey.garden/try-passkeys