WIP: E2EE

src/backend/core/api/serializers.py

@@ -16,8 +16,8 @@ class UserSerializer(serializers.ModelSerializer):
 
  class Meta:
  model = models.User
- fields = ["id", "email"]
- read_only_fields = ["id", "email"]
+ fields = ["id", "sub", "email"]
+ read_only_fields = ["id", "sub", "email"]
 
 
 class BaseAccessSerializer(serializers.ModelSerializer):

src/frontend/apps/impress/package.json

@@ -21,6 +21,9 @@
  "@gouvfr-lasuite/integration": "1.0.2",
  "@hocuspocus/provider": "2.13.5",
  "@openfun/cunningham-react": "2.9.4",
+ "@socialgouv/e2esdk-client": "1.0.0-beta.28",
+ "@socialgouv/e2esdk-devtools": "1.0.0-beta.38",
+ "@socialgouv/e2esdk-react": "1.0.0-beta.28",
  "@tanstack/react-query": "5.55.4",
  "i18next": "23.15.1",
  "idb": "8.0.0",
@@ -33,8 +36,8 @@
  "react-i18next": "15.0.1",
  "react-select": "5.8.0",
  "styled-components": "6.1.13",
- "yjs": "*",
  "y-protocols": "1.0.6",
+ "yjs": "*",
  "zustand": "4.5.5"
  },
  "devDependencies": {

src/frontend/apps/impress/src/core/auth/api/types.ts

@@ -2,10 +2,12 @@
  * Represents user retrieved from the API.
  * @interface User
  * @property {string} id - The id of the user.
+ * @property {string} sub - The `sub` field of OIDC
  * @property {string} email - The email of the user.
  * @property {string} name - The name of the user.
  */
 export interface User {
  id: string;
+ sub: string;
  email: string;
 }

src/frontend/apps/impress/src/core/auth/useAuthStore.tsx

@@ -5,25 +5,38 @@ import { baseApiUrl } from '@/core/conf';
 import { User, getMe } from './api';
 import { PATH_AUTH_LOCAL_STORAGE } from './conf';
 
+import { Client, PublicUserIdentity } from '@socialgouv/e2esdk-client';
+
+export const e2esdkClient = new Client({
+ // Point it to where your server is listening
+ serverURL: "https://app-a5a1b445-32e0-4cf4-a478-821a48f86ccf.cleverapps.io",
+ // Pass the signature public key you configured for the server
+ serverSignaturePublicKey: "ayfva9SUh0mfgmifUtxcdLp4HriHJiqefEKnvYgY4qM",
+});
+
 interface AuthStore {
  initiated: boolean;
  authenticated: boolean;
+ readyForEncryption: boolean;
  initAuth: () => void;
  logout: () => void;
  login: () => void;
+ endToEndData?: PublicUserIdentity;
  userData?: User;
 }
 
 const initialState = {
  initiated: false,
  authenticated: false,
+ readyForEncryption: false,
  userData: undefined,
 };
 
 export const useAuthStore = create<AuthStore>((set) => ({
  initiated: initialState.initiated,
  authenticated: initialState.authenticated,
  userData: initialState.userData,
+ readyForEncryption: initialState.readyForEncryption,
 
  initAuth: () => {
  getMe()
@@ -37,8 +50,21 @@ export const useAuthStore = create<AuthStore>((set) => ({
  }
 
  set({ authenticated: true, userData: data });
+ return e2esdkClient.signup(data.sub);
+ }, () => {})
+ .then(() => {
+ set({ readyForEncryption: true });
+ return Promise.resolve(() => {});
+ }, () => {
+ return e2esdkClient.login(userData.sub);
+ })
+ .then((publicIdentity: PublicUserIdentity | null) => {
+ if (!publicIdentity) throw Error("exploding");
+
+ set({endToEndData: publicIdentity});
+ })
+ .catch(() => {
  })
- .catch(() => {})
  .finally(() => {
  set({ initiated: true });
  });

src/frontend/apps/impress/src/features/docs/doc-editor/components/BlockNoteEditor.tsx

@@ -1,4 +1,4 @@
-import { BlockNoteEditor as BlockNoteEditorCore } from '@blocknote/core';
+import { Block, BlockNoteEditor as BlockNoteEditorCore } from '@blocknote/core';
 import '@blocknote/core/fonts/inter.css';
 import { BlockNoteView } from '@blocknote/mantine';
 import '@blocknote/mantine/style.css';
@@ -71,7 +71,7 @@ export const BlockNoteContent = ({
  const { userData } = useAuthStore();
  const { setStore, docsStore } = useDocStore();
  const canSave = doc.abilities.partial_update && !isVersion;
- useSaveDoc(doc.id, provider.document, canSave);
+
  const storedEditor = docsStore?.[storeId]?.editor;
  const {
  mutateAsync: createDocAttachment,
@@ -99,18 +99,24 @@ export const BlockNoteContent = ({
  return storedEditor;
  }
 
+ // TODO decrypt doc.content
+ //localStorage.getItem('KEY');
+
  return BlockNoteEditorCore.create({
- collaboration: {
- provider,
- fragment: provider.document.getXmlFragment('document-store'),
- user: {
- name: userData?.email || 'Anonymous',
- color: randomColor(),
- },
- },
+ // collaboration: {
+ //  provider,
+ //  fragment: provider.document.getXmlFragment('document-store'),
+ //  user: {
+ //  name: userData?.email || 'Anonymous',
+ //  color: randomColor(),
+ //  },
+ // },
  uploadFile,
+ initialContent: JSON.parse(doc.content),
  });
- }, [provider, storedEditor, uploadFile, userData?.email]);
+ }, [doc.content, storedEditor, uploadFile]);
+
+ useSaveDoc(doc.id, provider.document, canSave, editor);
 
  useEffect(() => {
  setStore(storeId, { editor });

src/frontend/apps/impress/src/features/docs/doc-editor/hook/useSaveDoc.tsx

@@ -1,3 +1,4 @@
+import { BlockNoteEditor } from '@blocknote/core';
 import { useRouter } from 'next/router';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import * as Y from 'yjs';
@@ -7,7 +8,12 @@ import { KEY_LIST_DOC_VERSIONS } from '@/features/docs/doc-versioning';
 
 import { toBase64 } from '../utils';
 
-const useSaveDoc = (docId: string, doc: Y.Doc, canSave: boolean) => {
+const useSaveDoc = (
+ docId: string,
+ doc: Y.Doc,
+ canSave: boolean,
+ editor: BlockNoteEditor,
+) => {
  const { mutate: updateDoc } = useUpdateDoc({
  listInvalideQueries: [KEY_LIST_DOC_VERSIONS],
  });
@@ -56,14 +62,18 @@ const useSaveDoc = (docId: string, doc: Y.Doc, canSave: boolean) => {
  }, [canSave, hasChanged]);
 
  const saveDoc = useCallback(() => {
- const newDoc = toBase64(Y.encodeStateAsUpdate(doc));
+ const newDoc = JSON.stringify(editor.document);
+ //const newDoc = toBase64(Y.encodeStateAsUpdate(doc));
+
+ // TODO encode the content
+
  setInitialDoc(newDoc);
 
  updateDoc({
  id: docId,
  content: newDoc,
  });
- }, [doc, docId, updateDoc]);
+ }, [docId, editor?.document, updateDoc]);
 
  const timeout = useRef<NodeJS.Timeout>();
  const router = useRouter();

src/frontend/apps/impress/src/features/docs/doc-editor/stores/useDocStore.tsx

@@ -26,9 +26,9 @@ export const useDocStore = create<UseDocStore>((set, get) => ({
  guid: storeId,
  });
 
- if (initialDoc) {
- Y.applyUpdate(doc, Buffer.from(initialDoc, 'base64'));
- }
+ // if (initialDoc) {
+ //  Y.applyUpdate(doc, Buffer.from(initialDoc, 'base64'));
+ // }
 
  const provider = new HocuspocusProvider({
  url: providerUrl(storeId),