inkandswitch / backchannel Goto Github PK

EFF did a good job in creating a separate wordlist that is more user-friendly than the PGP wordlist. See here for an example of an even shorter + more user-friendly word list.

Click on multiple contacts to send the same message or file to all of them at once

Share my location with others, either real-time or one-off pin. The real-time use case needs some UX thinking!

When creating a moniker for a contact, you could draw the name instead of writing it in a text box.

We can use react-canvas-draw for this, here's a codepen example:

https://codesandbox.io/s/react-canvas-draw-example-forked-mzf4z?file=/src/index.js

Depends on #32. This is a stretch goal after we've gotten the PWA working well on mobile, then if we have time this could make sense to experiment with..

Test the PWA on mobile. Is there a good way to do this automatically?

If someone loses the key, they can currently solve this problem instead by making a new contact for that person. That isn't so nice because you lose the history.

There could be a case where your contact has lost their device or accidentally deleted their encryption key. A "reset handshake" function would send the user back to the handshake screen, and then the new key would replace the old contact's key.

This is a stretch goal because it is actually a not straightforward to implement & test well, because it breaks the typical user flow in the UI and will require custom logic.

Create a wrapper for managing the database.

• spec out a minimal API that covers the use cases in the architecture docs
• then build that out as a separate directory in this repo that the front-end can use
• add browser tests

Once you properly connect to another contact for the first time and get their symmetric key, you can create a moniker for them. Contacts show up in a list when you first open the app. (see left side)

When you click on a contact, it opens up their mailbox (right side) #14

We probably want to use something like airtap.

Minimally, we can target the latest version of chromium. Ideally, we could hit the big three: Chromium, Firefox, and WebKit (for iOS support).

Make sure this case is handled gracefully.

Make installable as a PWA.

Some resources for PWAs:

• https://twitter.com/tropicadri/status/1382773427371536393
• https://developers.google.com/web/tools/workbox
• https://web.dev/codelab-make-installable/

• Persist changes separately, don't call Automerge.save so much, it's inefficient
• Use Automerge.Backend/Frontend similar to pvh/automerge-demo (optional)
• Put the backend in a webworker

Make sure we can render emojis that are typed in by mobile keyboards. If this isn't possible within the time we have, that's OK but ideally it seems like people will use them.

Not sure why, but the tests fail sometimes. There isn't good debug output. If it fails, you can rerun the tests and it will probably pass the next time. My guess it probably is due to the mock WebSocket implementation, it is the most buggy thing we have in the testing stack..

Count the number of connections per day & total amount of data transferred through the relay without any metadata.

Followup for #19 for when we have CI

There isn't a way to purge all devices you're synced with right now, which would require putting tombstones on old documents and telling all your contacts about the new keys. This may be difficult to accomplish on this round of work so I've added a stretch label.

This should be something like

backchannel.sendMessage(contact, message)

where message optionally contains a filename on the local device.

We probably also want a nice API for downloading or opening the file on your local device.

If there is an error while waiting for the contact to enter the code, show the error text at the bottom part of the screen.

Right now, you have to click generate twice to generate a code, but the designs say that it should generate a code immediately once you hit /generate route

Problem

I want to know when one of my contacts is currently online

How to get there

There's a client event from backchannel we can use for connected and disconnected, as well as an isConnected api call

backchannel.on('contact.connected', ({ socket, contact }) => {
   // update presence
})

backchannel.on('contact.disconnected')
backchannel.isConnected(contact)

Every contact has some basic settings to customize. For a basic prototype, let's include three:

• Edit the contact
• Delete this contact

This allow sharing code via an external app, like text or email.

• https://web.dev/web-share/

Depends upon #32

Problem

Right now, you have to manually enter a code into the input box and click 'redeem' to finalize the connection.

Feature request

Ideally, you could get sent a URL that will automatically open the application and redeem the connection. For example,

https://backchannel.app/redeem#8-happy-elephants

The code should be in the hash of the route, so that the code is not being sent over the internet at all and only used by the javascript client.

How to get there

On the receiver's side, we would need to have a route /redeem (or whatever) that captures the hash in the URL and then calls the redeem function with that code. We'd want to show the wormhole connection animation for at least a second, and then show the success or error screen.

On the sender's side, when you click 'generate code' it would need to give you a way to copy/paste or share the /redeem URL to a friend.

For bonus points once we have the PWA installed, we also then need to put special metadata in the web manifest file for the PWA. For example, https://developers.google.com/web/fundamentals/integration/webapks

The multidevice screens & walkthrough UI should hopefully be pretty straightforward once ben settles on the flow.

fun blocker today. the magic wormhole server doesn't allow web clients to connect because it uses a random port (4000) magic-wormhole/magic-wormhole#243 (comment)

We could use @localfirst/auth, which gives us revocation for free, but each device has it's own keypair

• Decide on a protocol to use (automerge)
• Add a new device
• Sync all contacts
• Remove all devices I'm synced with (rotate/reset my keys)

Test cases

• Create a device (ALICE), create one contact, add a device (BOB), sync devices, see contact on other side.
• Same as above, then edit contact on BOB, sync devices, see contact change on ALICE.
• Create a device (ALICE), create three contacts, add a device (BOB), sync devices, see contacts on BOB. Remove a contact from ALICE, sync devices, see 2 contacts on BOB.

"let's make the demo pop" - @daiyi

Would it be helpful to use something like this package instead of building the mailbox/chat app ourselves? https://www.npmjs.com/package/react-chat-elements @daiyi

Right now the contacts are sent unencrypted over the wire which means an eavesdropper could download your contact list. This should be straightforward to fix once we figure out the best way to serialize and deserialize automerge binary sync messages (uint8arrays) over a websocket connection

Once the connection has been established, you are prompted to create a moniker for the contact.

Our wordlist right now is the EFF wordlist, which is fine, but @saljam did a lot of work to make one that's even better.

It would be great to use it, although it's currently written in go and as part of the webwormhole codebase. Perhaps it could be ported to it's own WASM module and then we could replace the other one we're using.

Problem

A user wants to add multiple other devices to the same document. Many-to-many interaction (i.e., all people can see all changes from other people on the document)

Solution

I think this is a decent solution that solves the cryptography for us:

https://github.com/local-first-web/auth

Using libsodium secret_box as recommended by martin.

https://www.npmjs.com/package/msgpack-lite
https://github.com/sodium-friends/sodium-javascript

See figma, it shows up the very first time you load the application, and generates a key.

The UI should allow you to enter text and/or files as a single message, as well as download files sent from the past. The files should download and/or open in the default app on your device, we can play with this user experience and see what's best on mobile & desktop.

Use the key to start a webrtc connection. Consider porting from webwormhole.

Right now we are using sodium-universal for the end-to-end encryption but it would be better to use crypto.subtle which is built in to the browser.

We want to build the UI for the mailbox.
This screen should show after you've hit 'redeem' on a code, or if you open an existing contact on the contact list screen. Contact list captured in issue #15

Seems like we could benefit from having some components in separate files for readability, for example, components/Topbar.tsx which is currently in App.tsx

Right now the frontend just crashes if you have an unexpected error. We should probably have a global error boundary for this using a React component/provider.

The easiest way to reproduce this now is to try to send a message to a contact who is currently offline.

We are using @localfirst/relay, it would be great to have the ability to use a storage peer that stores arbitrary automerge documents, given some documentId

This stops synchronizing with all the devices you've added, by removing them as syncable targets for automerge and forgetting the encryption keys for that handshake. This can be implemented like so: 8c2d551#diff-93bfe0b082b1958d153190bcc400a7ce4e067898c370a8083ed58f4b24dacb86R243

When using a remote relay, when the chats are loading it takes a second for anything to show up. We probably need some sort of loading spinner here, or better yet make it really snappy so that this doesn't happen at all when you have local chats (in theory it's local first so it should be snappier?)

The app right now is just one big App.tsx file. As the app gets more complex, it might be nice to have a proper state machine with each screen in a different component. For example, there is a separate screen before a user generates a code, and then another screen when we are waiting for the other side to redeem it, and then another when the connection is successful, and another when there is a failure.

See the possible application states here (so far)! The original is in the Miro board.

Set up a production build at npm run deploy that outputs to dist and builds on every PR. It would also be nice if it built the docs to dist/docs/ which we could link to!

When there are many (greater than 10 or 20) messages in a mailbox, it's feels sluggish when you type in the input box.