Building End-to-End Encrypted Apps

1. Building End-to-End Encrypted Apps
2. What?
3. Why?
4. Lini lini.app github.com/serenity-kit/lini
7. "my todo"
8. "my todo"
10. key = "c0be"
11. key = "c0be" "a6ea178" = encrypt("my todo", key)
12. key = "c0be" "a6ea178" = encrypt("my todo", key) "a6ea178" "a6ea178" "a6ea178"
13. key = "c0be" "a6ea178" = encrypt("my todo", key) key = "c0be" "my todo" = decrypt("a6ea178", key) "a6ea178" "a6ea178"
14. What do we encrypt?
15. encrypt({ todoListKey: "8-Aw_2UhSVrgKGp77jsnT", content: JSON.stringify({ "1": { text: "Wash the dishes", checked: false }, "2": { text: "Order sweets", checked: true }, }), }); Encrypt & send the entire list
16. encrypt({ todoListKey: "8-Aw_2UhSVrgKGp77jsnT", content: JSON.stringify({ "1": { text: "Wash the dishes", checked: false }, "2": { text: "Order sweets", checked: true }, }), }); Encrypt & send the entire list content: JSON.stringify({ "1": { text: "Wash the dishes", checked: false }, "2": { text: "Order sweets", checked: true }, }),
17. Con fl icts
18. Add todo 1 Con fl icts
19. Add todo 1 Change todo 1 Con fl icts Add todo 1 Change todo 1
20. Add todo 1 Change todo 1 Change todo 1 Con fl icts Add todo 1 Change todo 1
21. CRDT Con fl ict-free Replicated Data Type
22. = CRDT Add todo 1 Add todo 1 Change todo 1 Change todo 1 Change todo 1 Change todo 1
23. c3 = encrypt( , key) Change todo 1 c1 = encrypt( , key) c2 = encrypt( , key) Add todo 1 Change todo 1
24. c3 = encrypt( , key) c1 = encrypt( , key) c2 = encrypt( , key) c1 c1 c2 c2 c3 c3 Add todo 1 Change todo 1 Change todo 1
25. End-to-end Encryption + CRDTs
27. import * as Yjs from "yjs"; // initializing CRDT document const doc = new Yjs.Doc(); const todoList = doc.getMap("todos"); // adding a todo const todo = new Yjs.Map(); todo.set("text", new Yjs.Text("wash the dishes")); todo.set("checked", false); todoList.set(generateId(), todo);
28. import * as Yjs from "yjs"; // initializing CRDT document const doc = new Yjs.Doc(); const todoList = doc.getMap("todos"); // adding a todo const todo = new Yjs.Map(); todo.set("text", new Yjs.Text("wash the dishes")); todo.set("checked", false); todoList.set(generateId(), todo); import * as Yjs from "yjs";
29. import * as Yjs from "yjs"; // initializing CRDT document const doc = new Yjs.Doc(); const todoList = doc.getMap("todos"); // adding a todo const todo = new Yjs.Map(); todo.set("text", new Yjs.Text("wash the dishes")); todo.set("checked", false); todoList.set(generateId(), todo); // initializing CRDT document const doc = new Yjs.Doc();
30. import * as Yjs from "yjs"; // initializing CRDT document const doc = new Yjs.Doc(); const todoList = doc.getMap("todos"); // adding a todo const todo = new Yjs.Map(); todo.set("text", new Yjs.Text("wash the dishes")); todo.set("checked", false); todoList.set(generateId(), todo); const todoList = doc.getMap("todos");
31. import * as Yjs from "yjs"; // initializing CRDT document const doc = new Yjs.Doc(); const todoList = doc.getMap("todos"); // adding a todo const todo = new Yjs.Map(); todo.set("text", new Yjs.Text("wash the dishes")); todo.set("checked", false); todoList.set(generateId(), todo); // adding a todo const todo = new Yjs.Map();
32. import * as Yjs from "yjs"; // initializing CRDT document const doc = new Yjs.Doc(); const todoList = doc.getMap("todos"); // adding a todo const todo = new Yjs.Map(); todo.set("text", new Yjs.Text("wash the dishes")); todo.set("checked", false); todoList.set(generateId(), todo); todo.set("text", new Yjs.Text("wash the dishes")); todo.set("checked", false);
33. import * as Yjs from "yjs"; // initializing CRDT document const doc = new Yjs.Doc(); const todoList = doc.getMap("todos"); // adding a todo const todo = new Yjs.Map(); todo.set("text", new Yjs.Text("wash the dishes")); todo.set("checked", false); todoList.set(generateId(), todo); todoList.set(generateId(), todo);
34. doc.on("updateV2", (update) => { // send(update) }); Yjs.applyUpdateV2(doc, update); const docAsUpdate = Yjs.encodeStateAsUpdateV2(doc) doc.on("updateV2", (update) => { // send(update) });
35. doc.on("updateV2", (update) => { // send(update) }); Yjs.applyUpdateV2(doc, update); const docAsUpdate = Yjs.encodeStateAsUpdateV2(doc) Yjs.applyUpdateV2(doc, update);
36. doc.on("updateV2", (update) => { // send(update) }); Yjs.applyUpdateV2(doc, update); const docAsUpdate = Yjs.encodeStateAsUpdateV2(doc) const docAsUpdate = Yjs.encodeStateAsUpdateV2(doc)
38. Library to sync CRDTs end-to-end encrypted useYjsSync() useAutomergeSync()
39. const yDocRef = useRef<Yjs.Doc>(new Yjs.Doc()); const [signatureKeyPair] = useState<KeyPair>(() => sodium.crypto_sign_keypair() ); useYjsSync({ yDoc: yDocRef.current, documentId: todoListId, websocketEndpoint: "ws://localhost:3030", getSnapshotKey: () => todoListKey, getNewSnapshotData: () => { return { key: todoListKey, data: Yjs.encodeStateAsUpdateV2(yDocRef.current), publicData: {}, }; }, shouldSendSnapshot: ({ snapshotUpdatesCount }) => snapshotUpdatesCount > 50, signatureKeyPair, isValidClient: () => true, sodium, });
40. useYjsSync({ yDoc: yDocRef.current, documentId: todoListId, key: todoListKey, websocketEndpoint: "ws://localhost:3030", });
41. useYjsSync({ yDoc: yDocRef.current, documentId: todoListId, key: todoListKey, websocketEndpoint: "ws://localhost:3030", }); yDoc: yDocRef.current,
42. useYjsSync({ yDoc: yDocRef.current, documentId: todoListId, key: todoListKey, websocketEndpoint: "ws://localhost:3030", }); documentId: todoListId,
43. useYjsSync({ yDoc: yDocRef.current, documentId: todoListId, key: todoListKey, websocketEndpoint: "ws://localhost:3030", }); key: todoListKey,
44. useYjsSync({ yDoc: yDocRef.current, documentId: todoListId, key: todoListKey, websocketEndpoint: "ws://localhost:3030", }); websocketEndpoint: "ws://localhost:3030",
46. key = "c0be" "a6ea178" = encrypt("my todo", key) key = "c0be" "my todo" = decrypt("a6ea178", key) "a6ea178" "a6ea178"
47. Key Management "aL1wBSONXU9eWD6oLdjCQ8H4jbFa762vbP6Iouk5A4U"
48. CRDT Documents const keys = { "1": "aL1wBSONXU9eWD6oLdjCQ8H4jbFa762vbP6Iouk5A4U", "2": "mxKjG-qh-eg4y8N6B3cpGmC1uEn2c_YWi0s8T2H_WAo", };
49. Locker L
50. Locker
51. “1” “2” Locker
52. “1” “2” Locker CRDT Documents
53. const lockerKey = '8-Aw_2UhSVrgKGp77jsnTF03DPBvjvdLSUwp4savq8Q'; const locker = encrypt({ lockerKey, content: JSON.stringify({ "1": "aL1wBSONXU9eWD6oLdjCQ8H4jbFa762vbP6Iouk5A4U", "2": "mxKjG-qh-eg4y8N6B3cpGmC1uEn2c_YWi0s8T2H_WAo", }), }); const lockerKey = '8-Aw_2UhSVrgKGp77jsnTF03DPBvjvdLSUwp4savq8Q';
54. const lockerKey = '8-Aw_2UhSVrgKGp77jsnTF03DPBvjvdLSUwp4savq8Q'; const locker = encrypt({ lockerKey, content: JSON.stringify({ "1": "aL1wBSONXU9eWD6oLdjCQ8H4jbFa762vbP6Iouk5A4U", "2": "mxKjG-qh-eg4y8N6B3cpGmC1uEn2c_YWi0s8T2H_WAo", }), }); const locker = encrypt({ });
55. const lockerKey = '8-Aw_2UhSVrgKGp77jsnTF03DPBvjvdLSUwp4savq8Q'; const locker = encrypt({ lockerKey, content: JSON.stringify({ "1": "aL1wBSONXU9eWD6oLdjCQ8H4jbFa762vbP6Iouk5A4U", "2": "mxKjG-qh-eg4y8N6B3cpGmC1uEn2c_YWi0s8T2H_WAo", }), }); lockerKey,
56. const lockerKey = '8-Aw_2UhSVrgKGp77jsnTF03DPBvjvdLSUwp4savq8Q'; const locker = encrypt({ lockerKey, content: JSON.stringify({ "1": "aL1wBSONXU9eWD6oLdjCQ8H4jbFa762vbP6Iouk5A4U", "2": "mxKjG-qh-eg4y8N6B3cpGmC1uEn2c_YWi0s8T2H_WAo", }), }); content: JSON.stringify({ "1": "aL1wBSONXU9eWD6oLdjCQ8H4jbFa762vbP6Iouk5A4U", "2": "mxKjG-qh-eg4y8N6B3cpGmC1uEn2c_YWi0s8T2H_WAo", }),
57. const { addItem, content } = useLocker(); await addItem({ documentId, key }); const key = content[documentId]; const { addItem, content } = useLocker();
58. const { addItem, content } = useLocker(); await addItem({ documentId, key }); const key = content[documentId]; await addItem({ documentId, key });
59. const { addItem, content } = useLocker(); await addItem({ documentId, key }); const key = content[documentId]; const key = content[documentId];
61. “1” “2” Locker CRDT Documents
62. Username / Password
65. username & password Login sessionKey sessionKey
66. username & password Registration exportKey
67. username & password Login exportKey
68. Opaque Locker
69. const { register, isPending } = useRegister(); const result = await register({ userIdentifier: username, password, }); result?.exportKey const { register, isPending } = useRegister();
70. const { register, isPending } = useRegister(); const result = await register({ userIdentifier: username, password, }); result?.exportKey const result = await register({ userIdentifier: username, password, });
71. const { register, isPending } = useRegister(); const result = await register({ userIdentifier: username, password, }); result?.exportKey result?.exportKey
72. const { clientRegistrationState, registrationRequest } = opaque.startRegistration({ password }); const { registrationResponse } = await registerStartMutation.mutateAsync({ userIdentifier, registrationRequest, }); const { registrationRecord, exportKey } = opaque.finishRegistration({ clientRegistrationState, registrationResponse, password, }); await registerFinishMutation.mutateAsync({ userIdentifier, registrationRecord, }); const { clientRegistrationState, registrationRequest } = opaque.startRegistration({ password });
73. const { clientRegistrationState, registrationRequest } = opaque.startRegistration({ password }); const { registrationResponse } = await registerStartMutation.mutateAsync({ userIdentifier, registrationRequest, }); const { registrationRecord, exportKey } = opaque.finishRegistration({ clientRegistrationState, registrationResponse, password, }); await registerFinishMutation.mutateAsync({ userIdentifier, registrationRecord, }); const { registrationResponse } = await registerStartMutation.mutateAsync({ userIdentifier, registrationRequest, });
74. const { clientRegistrationState, registrationRequest } = opaque.startRegistration({ password }); const { registrationResponse } = await registerStartMutation.mutateAsync({ userIdentifier, registrationRequest, }); const { registrationRecord, exportKey } = opaque.finishRegistration({ clientRegistrationState, registrationResponse, password, }); await registerFinishMutation.mutateAsync({ userIdentifier, registrationRecord, }); const { registrationRecord, exportKey } = opaque.finishRegistration({ clientRegistrationState, registrationResponse, password, });
75. const { clientRegistrationState, registrationRequest } = opaque.startRegistration({ password }); const { registrationResponse } = await registerStartMutation.mutateAsync({ userIdentifier, registrationRequest, }); const { registrationRecord, exportKey } = opaque.finishRegistration({ clientRegistrationState, registrationResponse, password, }); await registerFinishMutation.mutateAsync({ userIdentifier, registrationRecord, }); await registerFinishMutation.mutateAsync({ userIdentifier, registrationRecord, });
77. const { login, isPending } = useLogin(); const result = await login({ userIdentifier: username, password, }); result?.exportKey const { login, isPending } = useLogin();
78. const { login, isPending } = useLogin(); const result = await login({ userIdentifier: username, password, }); result?.exportKey const result = await login({ userIdentifier: username, password, });
79. const { login, isPending } = useLogin(); const result = await login({ userIdentifier: username, password, }); result?.exportKey result?.exportKey
80. const { clientLoginState, startLoginRequest } = opaque.startLogin({ password, }); const { loginResponse } = await loginStartMutation.mutateAsync({ userIdentifier, startLoginRequest, }); const loginResult = opaque.finishLogin({ clientLoginState, loginResponse, password, }); if (!loginResult) { return null; } const { finishLoginRequest, exportKey } = loginResult; const { success } = await loginFinishMutation.mutateAsync({ finishLoginRequest, userIdentifier, }); const { clientLoginState, startLoginRequest } = opaque.startLogin({ password, });
81. const { clientLoginState, startLoginRequest } = opaque.startLogin({ password, }); const { loginResponse } = await loginStartMutation.mutateAsync({ userIdentifier, startLoginRequest, }); const loginResult = opaque.finishLogin({ clientLoginState, loginResponse, password, }); if (!loginResult) { return null; } const { finishLoginRequest, exportKey } = loginResult; const { success } = await loginFinishMutation.mutateAsync({ finishLoginRequest, userIdentifier, }); const { loginResponse } = await loginStartMutation.mutateAsync({ userIdentifier, startLoginRequest, });
82. const { clientLoginState, startLoginRequest } = opaque.startLogin({ password, }); const { loginResponse } = await loginStartMutation.mutateAsync({ userIdentifier, startLoginRequest, }); const loginResult = opaque.finishLogin({ clientLoginState, loginResponse, password, }); if (!loginResult) { return null; } const { finishLoginRequest, exportKey } = loginResult; const { success } = await loginFinishMutation.mutateAsync({ finishLoginRequest, userIdentifier, }); const loginResult = opaque.finishLogin({ clientLoginState, loginResponse, password, }); if (!loginResult) { return null; } const { finishLoginRequest, exportKey } = loginResult;
83. const { clientLoginState, startLoginRequest } = opaque.startLogin({ password, }); const { loginResponse } = await loginStartMutation.mutateAsync({ userIdentifier, startLoginRequest, }); const loginResult = opaque.finishLogin({ clientLoginState, loginResponse, password, }); if (!loginResult) { return null; } const { finishLoginRequest, exportKey } = loginResult; const { success } = await loginFinishMutation.mutateAsync({ finishLoginRequest, userIdentifier, }); const { success } = await loginFinishMutation.mutateAsync({ finishLoginRequest, userIdentifier, });
85. Opaque
86. Opaque Locker
87. Opaque “1” “2” Locker
88. Opaque “1” “2” Locker CRDT Documents
89. Opaque “1” “2” Locker CRDT Documents
90. CRDT Documents Opaque “2” Locker
91. Invitations
92. example.com/invitation/123
93. example.com/invitation/123#key=c0be
94. const key = getHashParameter("key"); const data = await acceptDocumentInvitationMutation.mutateAsync({ token }); if (data?.documentId) { await addItem({ documentId: data.documentId, key, }); router.navigate({ pathname: `/list/${data.documentId}` }); } const key = getHashParameter("key");
95. const key = getHashParameter("key"); const data = await acceptDocumentInvitationMutation.mutateAsync({ token }); if (data?.documentId) { await addItem({ documentId: data.documentId, key, }); router.navigate({ pathname: `/list/${data.documentId}` }); } const data = await acceptDocumentInvitationMutation.mutateAsync({ token });
96. const key = getHashParameter("key"); const data = await acceptDocumentInvitationMutation.mutateAsync({ token }); if (data?.documentId) { await addItem({ documentId: data.documentId, key, }); router.navigate({ pathname: `/list/${data.documentId}` }); } await addItem({ documentId: data.documentId, key, });
97. story for another time …
98. story for another time … … read my blog in the coming months
99. Simple Authentication Invitation Links
100. Advanced Account recovery Key rotation Permissions Simple Authentication Invitation Links
101. Thank you 👋 nikgraf.com lini.app secsync.com opaque-auth.com