feat: note taking example #286

weboko · 2023-11-17T07:36:28Z

Example of notes:

http://localhost:3000/view/pbgB7m0aFAiwZvYE?password=99ee70f60e334fb1c4d63f1ab2a5b19f71503fc2307cf07b47656392219cdc39

This app has two screens:

create note;
view note;

There is some problem with routing in Next.js so not merging yet.

Update to use @waku/message-encryption after feat!: export crypto primitives js-waku#1728

… mocked view page

…boko/notes

danisharora099

lgtm. some generic structuring/readability nitpicks.

examples/flush-notes/README.md

danisharora099 · 2023-11-27T12:30:04Z

examples/flush-notes/src/app/page.tsx

+const useEditNote = () => {
+  const [state, setState] = React.useState<string>("");
+
+  const onNoteChange = (event: React.FormEvent<HTMLTextAreaElement>) => {
+    setState(event?.currentTarget?.value);
+  };
+
+  return {
+    note: state,
+    onNoteChange,
+  };
+};
+
+const usePassword = () => {
+  const [password, setPassword] = React.useState<string>();
+
+  const onPasswordChange = (event: React.FormEvent<HTMLInputElement>) => {
+    setPassword(event?.currentTarget?.value);
+  };
+
+  return {
+    password,
+    onPasswordChange,
+  };
+};


we can move all hooks to a dedicated directory for readability

tbh I think here it's better to keep in the same file as it is strongly connected and hooks are dead simple

examples/flush-notes/src/app/page.tsx

examples/flush-notes/src/app/Loading.tsx

danisharora099 · 2023-11-27T12:33:12Z

examples/flush-notes/src/app/WakuProvider.tsx

+export const useWaku = () => {
+  const { status, waku } = React.useContext(WakuContext);


can we use the existing react-hooks?

nice spot, I think we can later but not now as I am using RC version of js-waku

danisharora099 · 2023-11-27T12:33:41Z

examples/flush-notes/src/app/favicon.ico

we can remove this?

I don't think so as it is directly used by NextJS

examples/flush-notes/src/services/notes.ts

danisharora099 · 2023-11-27T12:35:43Z

examples/flush-notes/src/services/notes.ts

hm perhaps services should be called utils or lib? stays in consistency with other examples

I prefer services as it is something that has coherent functionality over some theme: note, waku etc

examples/flush-notes/src/services/waku.ts

danisharora099 · 2023-11-27T12:39:05Z

examples/flush-notes/src/const.ts

+export enum WakuStatus {
+  Initializing = "Initializing...",
+  WaitingForPeers = "Waiting for peers...",
+  Connected = "Connected",
+  Failed = "Failed to initialize(see logs)",
+}


indifferent for now as we don't have many. but i'd expect types/interfaces to be in a dedicated types file/subdir and keep constants separate

I agree about a need to cluster types in one place if they are generic, if they are strongly bound to one place - they should be located in that place (one file)

for enum it is tricky as it can be a type and can be a variable as it gets into end bundle and is not ephemeral as just types. so in this context it is a const as it was used in UI directly for rendering message

fryorcraken

We need to reflect best practices in our examples.

Usage of efficient encoding: bandwidth is the scarce resource on the Waku network, we should recommend to only use efficient encoding methods over the wire such as proto.
encryption by default: if encryption is used, then all messages should be encrypted. If only "some" messages are encrypted then you generally reduce the anonymity properties of the users.

What I would recommend is:

always encrypt the whole message
The URL contains the symkey or not
- if it contains the symkey, use it to encrypt/decrypt
- if it does not contain a key, then the user is using a password.

This way, there is no different to the user whether its encrypted or whether the key is in the url of the note.

fryorcraken · 2023-11-30T04:08:08Z

examples/flush-notes/src/services/notes.ts

+      : { id: generateRandomString(), content, iv: undefined };
+
+    await waku.send(this.encoder, {
+      payload: utf8ToBytes(JSON.stringify(note)),


JSON strings over the wire is bigger than protobuf. We should prefer protobuf (or other efficient byte encoding) in examples to discourage devs to send large messages.

fryorcraken · 2023-11-30T04:10:10Z

examples/flush-notes/src/services/notes.ts

+    const symmetricKey = toEncrypt ? generateSymmetricKey() : undefined;
+    const note = toEncrypt
+      ? await this.encryptNote(content, symmetricKey)
+      : { id: generateRandomString(), content, iv: undefined };


It may be interesting to actually encrypt all notes by default.

Selective encryption should not be recommended as it is generally reduce anonymity properties by reducing the anonymity set.

fryorcraken · 2023-11-30T04:17:50Z

examples/flush-notes/src/services/notes.ts

+    }
+
+    const iv = hexToBytes(note.iv);
+    const symmetricKey = hexToBytes(password);


This is not recommend practice. PBKDF2 is generally the recommend practice to convert a password to a key.

fryorcraken · 2023-12-06T04:44:27Z

Not sure I mentioned but I think it's an awesome app idea and I think it can demonstrate how to do permission on a decentralized system.:

Alice creates note and private key KPO for note owner and symmetric key SK for encryption
Alice gives the note to Bob so he can view it, she provides SK and getPublicKey(KPO) to Bob.
When alice does an update, she sign the update (or new revision) of the note with KPO so Bob knows the update is legit
Alice wants to make Carole an editor of the note, Carole generate new private key KPE and send public key getPublicKey(KPE) to Alice.
Alice sends update "add editor" with getPublicKey(KPE) so Bob is aware that Carole's update should be taken in account.
Carole can now do an update on the note and sign it with KPE.

- Notes are fully encrypted using Waku Message version 1 (no metadata leak) - Notes are always encrypted, key is part of the URL - Using standard uuid v4 from browser API to generate ID - upgraded deps to fix a bug

weboko added 10 commits November 14, 2023 22:22

init flush-notes

df9c693

remove nextjs artefacts, remove tailwind css, add react markdown, add…

1abf528

… mocked view page

add create and edit pages, create Waku provider

63f222d

Merge branch 'master' of github.com:waku-org/js-waku-examples into we…

b4afc2c

…boko/notes

remove logs

cd8085f

add encryption/decryotion and other features

714c643

rename to share-notes

a01d6d3

add title

285013d

up command

597bf4a

add export

0ed01be

weboko marked this pull request as ready for review November 23, 2023 16:30

weboko requested a review from a team as a code owner November 23, 2023 16:30

weboko mentioned this pull request Nov 23, 2023

feat!: export crypto primitives waku-org/js-waku#1728

Merged

1 task

rename back to flush-notes and add support of password in URL param

63a92cf

danisharora099 approved these changes Nov 27, 2023

View reviewed changes

address comments

ce693cf

fryorcraken requested changes Nov 30, 2023

View reviewed changes

adklempner mentioned this pull request Dec 9, 2023

Revert "feat!: export crypto primitives (#1728)" waku-org/js-waku#1754

Closed

LordGhostX mentioned this pull request Dec 12, 2023

add js-waku encryption guide waku-org/docs.waku.org#145

Merged

2 tasks

Improved security (#291)

3c7795e

- Notes are fully encrypted using Waku Message version 1 (no metadata leak) - Notes are always encrypted, key is part of the URL - Using standard uuid v4 from browser API to generate ID - upgraded deps to fix a bug

weboko requested a review from fryorcraken January 10, 2024 21:47

This was referenced Apr 18, 2024

chore: move existing examples under experimental and add notes example waku-org/lab.waku.org#59

Closed

chore: update waku deps, add notes example, move other examples to experimental waku-org/lab.waku.org#58

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: note taking example #286

feat: note taking example #286

weboko commented Nov 17, 2023 •

edited

Loading

danisharora099 left a comment

danisharora099 Nov 27, 2023

weboko Nov 30, 2023

danisharora099 Nov 27, 2023

weboko Nov 30, 2023

danisharora099 Nov 27, 2023

weboko Nov 30, 2023

danisharora099 Nov 27, 2023

weboko Nov 30, 2023

danisharora099 Nov 27, 2023

weboko Nov 30, 2023

fryorcraken left a comment

fryorcraken Nov 30, 2023

fryorcraken Nov 30, 2023

fryorcraken Nov 30, 2023

fryorcraken commented Dec 6, 2023

		export const useWaku = () => {
		const { status, waku } = React.useContext(WakuContext);

feat: note taking example #286

Are you sure you want to change the base?

feat: note taking example #286

Conversation

weboko commented Nov 17, 2023 • edited Loading

danisharora099 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fryorcraken left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fryorcraken commented Dec 6, 2023

weboko commented Nov 17, 2023 •

edited

Loading