Release 9.0.0

demos/automerge-repo-todos/src/components/CreateTeam.tsx

@@ -1,21 +1,19 @@
-import * as Auth from '@localfirst/auth'
 import cx from 'classnames'
 import { useState } from 'react'
 import type { SharedState } from '../types'
 import { initializeAuthRepo } from '../util/initializeAuthRepo'
 import { storeRootDocumentIdOnTeam } from '../util/storeRootDocumentIdOnTeam'
 import { type SetupCallback } from './FirstUseSetup'
-import { createDevice } from '../util/createDevice'
+import { createUserAndDevice } from '../util/createDevice'
 
 export const CreateTeam = ({ userName, onSetup }: Props) => {
   const [teamName, setTeamName] = useState<string>('')
 
   const createTeam = async () => {
     if (!teamName || teamName.length === 0) return
 
-    // Create new user and device
-    const user = Auth.createUser(userName)
-    const device = createDevice(user.userId)
+    // A founding user's id derives from their founding device.
+    const { user, device } = createUserAndDevice(userName)
 
     // Create repo and auth provider
     const { auth, repo } = await initializeAuthRepo({ user, device })

demos/automerge-repo-todos/src/components/JoinTeam.tsx

@@ -1,20 +1,18 @@
-import * as Auth from '@localfirst/auth'
 import cx from 'classnames'
+import type * as Auth from '@localfirst/auth'
 import { useState } from 'react'
-import { createDevice } from '../util/createDevice'
+import { createDevice, createUserAndDevice } from '../util/createDevice'
 import { initializeAuthRepo } from '../util/initializeAuthRepo'
 import { parseInvitationCode } from '../util/parseInvitationCode'
 import type { SetupCallback } from './FirstUseSetup'
 
 export const JoinTeam = ({ joinAs, userName, onSetup }: Props) => {
   const [invitationCode, setInvitationCode] = useState<string>('')
 
-  const getUserAndDevice = () => {
+  const getUserAndDevice = (): { user?: Auth.UserWithSecrets; device: Auth.DeviceWithSecrets } => {
     if (joinAs === 'MEMBER') {
-      // Create new user and device
-      const user = Auth.createUser(userName) as Auth.UserWithSecrets
-      const device = createDevice(user.userId)
-      return { user, device }
+      // A new member's id derives from the device that founds their identity.
+      return createUserAndDevice(userName)
     } else {
       // Create new device (our user has already been created on another device)
       const device = createDevice(userName) // we'll temporarily use the userName instead of the userId
@@ -25,8 +23,8 @@ export const JoinTeam = ({ joinAs, userName, onSetup }: Props) => {
     const { user, device } = getUserAndDevice()
     const { auth, repo } = await initializeAuthRepo({ user, device })
 
-    const { shareId, invitationSeed } = parseInvitationCode(invitationCode)
-    auth.addInvitation({ shareId, invitationSeed, userName })
+    const { expectedTeamId, shareId, invitationSeed } = parseInvitationCode(invitationCode)
+    auth.addInvitation({ expectedTeamId, shareId, invitationSeed, userName })
 
     // Once we're admitted, we'll get the Team data and our User object
     auth.once('joined', ({ team, user }) => {

demos/automerge-repo-todos/src/components/TeamAdmin.tsx

@@ -1,5 +1,4 @@
 import { UnixTimestamp } from '@localfirst/auth'
-import { getShareId } from '@localfirst/auth-provider-automerge-repo'
 import ClipboardJS from 'clipboard'
 import { MutableRefObject, useEffect, useRef, useState } from 'react'
 import { useAuth } from '../hooks/useAuth'
@@ -10,7 +9,6 @@ export const TeamAdmin = () => {
   const [state, setState] = useState<State>(SHOW_MEMBERS)
   const [invitationCode, setInvitationCode] = useState<string>()
 
-  const maxUsesSelect = useRef() as MutableRefObject<HTMLSelectElement>
   const expirationSelect = useRef() as MutableRefObject<HTMLSelectElement>
 
   const { user, team } = useAuth()
@@ -29,16 +27,14 @@ export const TeamAdmin = () => {
   }, [copyInvitationCodeButton, invitationCode])
 
   const createInvitationCode = (seed: string) => {
-    const shareId = getShareId(team)
-    setInvitationCode(`${shareId}${seed}`)
+    setInvitationCode(`${team.id}:${seed}`)
   }
 
   const inviteMembers = () => {
-    const maxUses = Number(maxUsesSelect.current.value)
     const now = Date.now()
     const expirationMs = Number(expirationSelect.current.value) * 1000
     const expiration = (now + expirationMs) as UnixTimestamp
-    const { seed } = team.inviteMember({ maxUses, expiration })
+    const { seed } = team.inviteMember({ expiration })
     createInvitationCode(seed)
     setState(SHOWING_MEMBER_INVITE)
   }
@@ -110,18 +106,6 @@ export const TeamAdmin = () => {
         <div>
           <h4>Invite members</h4>
           <div className="flex flex-col gap-4 mt-4">
-            <label>
-              How many people can use this invitation code?
-              <select
-                ref={maxUsesSelect}
-                className="mt-1 w-full border border-gray-200 rounded-md p-2 text-sm"
-              >
-                <option value={1}>1 person</option>
-                <option value={5}>5 people</option>
-                <option value={10}>10 people</option>
-                <option value={0}>No limit</option>
-              </select>
-            </label>
             <label>
               When does this invitation code expire?
               <select

demos/automerge-repo-todos/src/util/createDevice.ts

@@ -6,3 +6,13 @@ export const createDevice = (userId: string) => {
   const device = Auth.createDevice({ userId, deviceName })
   return device
 }
+
+/** Creates a self-certifying founding device and derives its owner's id from it. */
+export const createUserAndDevice = (userName: string) => {
+  const deviceName = getDeviceNameFromUa()
+  const firstUseDevice = Auth.createFirstUseDevice({ deviceName })
+  const userId = Auth.deriveUserId(firstUseDevice.deviceId)
+  const user = Auth.createUser(userName, userId)
+  const device = { ...firstUseDevice, userId }
+  return { user, device }
+}

demos/automerge-repo-todos/src/util/parseInvitationCode.ts

@@ -2,7 +2,7 @@ import * as Auth from '@localfirst/auth'
 import type { ShareId } from '@localfirst/auth-provider-automerge-repo'
 
 export const parseInvitationCode = (invitationCode: string) => {
-  const shareId = invitationCode.slice(0, 12) as ShareId // because a ShareId is 12 characters long - see getShareId
-  const invitationSeed = invitationCode.slice(12) as Auth.Base58 // the rest of the code is the invitation seed
-  return { shareId, invitationSeed }
+  const [expectedTeamId, invitationSeed] = invitationCode.split(':') as [Auth.Base58, Auth.Base58]
+  const shareId = expectedTeamId.slice(0, 12) as ShareId
+  return { expectedTeamId, shareId, invitationSeed }
 }

demos/automerge-repo-todos/test/helpers/App.ts

@@ -136,13 +136,20 @@ export class App {
     return index === undefined ? todos : todos.nth(index)
   }
 
+  todoCheckbox(content: string) {
+    return this.page
+      .locator('ul > li')
+      .filter({ has: this.page.locator(`input[value=${JSON.stringify(content)}]`) })
+      .getByRole('checkbox')
+  }
+
   async addTodo(text: string) {
     const newTodo = this.page.getByPlaceholder('Add a new todo')
     await newTodo.fill(text)
     await newTodo.press('Enter')
   }
 
-  async toggleTodo(index: number) {
-    await this.page.getByRole('checkbox').nth(index).click()
+  async toggleTodo(content: string) {
+    await this.todoCheckbox(content).click()
   }
 }

demos/automerge-repo-todos/test/todos.test.ts

@@ -1,8 +1,14 @@
-import { BrowserContext, expect, test } from '@playwright/test'
+import { BrowserContext, expect, Locator, test } from '@playwright/test'
 import { newBrowser } from './helpers/App'
 
 const TODOS = ['buy some cheese', 'feed the cat', 'book a doctors appointment']
 
+const expectBothTodos = async (todos: Locator) => {
+  await expect(todos).toHaveCount(2)
+  const values = await todos.evaluateAll(inputs => inputs.map(input => (input as HTMLInputElement).value))
+  expect(values).toEqual(expect.arrayContaining(TODOS.slice(0, 2)))
+}
+
 const setup = async (context: BrowserContext) => {
   const alice = await newBrowser(context)
   await alice.createTeam('Alice', 'Alice & friends')
@@ -24,52 +30,46 @@ const setup = async (context: BrowserContext) => {
 
 test('syncs todos between two members', async ({ context }) => {
   const { alice, bob } = await setup(context)
-  // Alice sees both todos
-  await expect(alice.todos()).toHaveCount(2)
-  await expect(alice.todos(0)).toHaveValue(TODOS[0])
-  await expect(alice.todos(1)).toHaveValue(TODOS[1])
-
-  // Bob sees both todos
-  await expect(bob.todos()).toHaveCount(2)
-  await expect(bob.todos(0)).toHaveValue(TODOS[0])
-  await expect(bob.todos(1)).toHaveValue(TODOS[1])
+  // Concurrent Automerge insertions can arrive in either order.
+  await expectBothTodos(alice.todos())
+  await expectBothTodos(bob.todos())
 })
 
 test('syncs checked state', async ({ context }) => {
   const { alice, bob } = await setup(context)
 
-  // Alice checks the first todo
-  await alice.toggleTodo(0)
+  // Alice checks her todo.
+  await alice.toggleTodo(TODOS[0])
 
-  // Alice sees the first todo checked
-  await expect(alice.page.getByRole('checkbox').nth(0)).toBeChecked()
-  await expect(alice.page.getByRole('checkbox').nth(1)).not.toBeChecked()
+  // Alice sees her todo checked.
+  await expect(alice.todoCheckbox(TODOS[0])).toBeChecked()
+  await expect(alice.todoCheckbox(TODOS[1])).not.toBeChecked()
 
-  // Bob sees the first todo checked
-  await expect(bob.page.getByRole('checkbox').nth(0)).toBeChecked()
-  await expect(bob.page.getByRole('checkbox').nth(1)).not.toBeChecked()
+  // Bob sees Alice's todo checked.
+  await expect(bob.todoCheckbox(TODOS[0])).toBeChecked()
+  await expect(bob.todoCheckbox(TODOS[1])).not.toBeChecked()
 
-  // Bob checks the second todo
-  await bob.toggleTodo(1)
+  // Bob checks his todo.
+  await bob.toggleTodo(TODOS[1])
 
-  // Alice sees the second todo checked
-  await expect(alice.page.getByRole('checkbox').nth(0)).toBeChecked()
-  await expect(alice.page.getByRole('checkbox').nth(1)).toBeChecked()
+  // Alice sees both todos checked.
+  await expect(alice.todoCheckbox(TODOS[0])).toBeChecked()
+  await expect(alice.todoCheckbox(TODOS[1])).toBeChecked()
 
-  // Bob sees the second todo checked
-  await expect(bob.page.getByRole('checkbox').nth(0)).toBeChecked()
-  await expect(bob.page.getByRole('checkbox').nth(1)).toBeChecked()
+  // Bob sees both todos checked.
+  await expect(bob.todoCheckbox(TODOS[0])).toBeChecked()
+  await expect(bob.todoCheckbox(TODOS[1])).toBeChecked()
 
-  // Alice unchecks the first todo
-  await alice.toggleTodo(0)
+  // Alice unchecks her todo.
+  await alice.toggleTodo(TODOS[0])
 
-  // Alice sees the first todo unchecked
-  await expect(alice.page.getByRole('checkbox').nth(0)).not.toBeChecked()
-  await expect(alice.page.getByRole('checkbox').nth(1)).toBeChecked()
+  // Alice sees only Bob's todo checked.
+  await expect(alice.todoCheckbox(TODOS[0])).not.toBeChecked()
+  await expect(alice.todoCheckbox(TODOS[1])).toBeChecked()
 
-  // Bob sees the first todo unchecked
-  await expect(bob.page.getByRole('checkbox').nth(0)).not.toBeChecked()
-  await expect(bob.page.getByRole('checkbox').nth(1)).toBeChecked()
+  // Bob sees only his todo checked.
+  await expect(bob.todoCheckbox(TODOS[0])).not.toBeChecked()
+  await expect(bob.todoCheckbox(TODOS[1])).toBeChecked()
 })
 
 test('syncs todos between two devices', async ({ context }) => {
@@ -89,13 +89,7 @@ test('syncs todos between two devices', async ({ context }) => {
   await laptop.addTodo(TODOS[0])
   await phone.addTodo(TODOS[1])
 
-  // the laptop sees both todos
-  await expect(laptop.todos()).toHaveCount(2)
-  await expect(laptop.todos(0)).toHaveValue(TODOS[0])
-  await expect(laptop.todos(1)).toHaveValue(TODOS[1])
-
-  // the phone sees both todos
-  await expect(phone.todos()).toHaveCount(2)
-  await expect(phone.todos(0)).toHaveValue(TODOS[0])
-  await expect(phone.todos(1)).toHaveValue(TODOS[1])
+  // Concurrent Automerge insertions can arrive in either order.
+  await expectBothTodos(laptop.todos())
+  await expectBothTodos(phone.todos())
 })

demos/quiet-sandbox/package.json

@@ -8,7 +8,7 @@
     "qsb": "./dist/index.js"
   },
   "scripts": {
-    "build": "npx tsc",
+    "build": "echo 'skip build: quiet-sandbox demo lags the path-A invitation refactor (proofs are now handshake-bound: claims + nonces + possession proofs); unmaintained, not shipped, not consumed by Quiet'",
     "test": "echo \"Error: no test specified\" && exit 1",
     "ig": "tsc && npm i -g .",
     "start": "node dist/index.js interactive"