passphrase prompt

components.d.ts

@@ -23,6 +23,7 @@ declare module '@vue/runtime-core' {
     SearchBar: typeof import('./src/components/Search/SearchBar.vue')['default']
     SearchResult: typeof import('./src/components/Search/SearchResult.vue')['default']
     SideBar: typeof import('./src/components/SideBar.vue')['default']
+    SideBar2: typeof import('./src/components/SideBar2.vue')['default']
     SideBarMenu: typeof import('./src/components/SideBar/SideBarMenu.vue')['default']
     SideBarMenuItem: typeof import('./src/components/SideBar/SideBarMenuItem.vue')['default']
     SkeletonNote: typeof import('./src/components/Skeleton/SkeletonNote.vue')['default']

src/App.vue

@@ -1,6 +1,12 @@
 <script setup lang="ts">
-import { activeNote, updateNote, notes } from '@/composables/useNotes'
+import { activeNote, updateNote, notes, activeNotesSource } from '@/composables/useNotes'
 import { viewModes, activeViewMode } from '@/composables/useViewMode'
+import {
+  getClientKey,
+  getEncryptionKey,
+  setClientKey,
+  passphraseRequired
+} from '@/composables/useEncryption'
 import { windowIsMobile } from '@/utils/helpers'
 import firebase from 'firebase/compat/app'
 import * as firebaseui from 'firebaseui'
@@ -15,7 +21,29 @@ const firebaseAuthUI =
   firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(firebase.auth())
 provide('firebaseAuthUI', firebaseAuthUI)
 
-const loading = computed(() => notes.value.length === 0)
+watch(
+  activeNotesSource,
+  () => {
+    if (activeNotesSource.value === 'firebase') {
+      getClientKey()
+      getEncryptionKey()
+    }
+  },
+  { immediate: true }
+)
+
+const passphrase = ref('')
+
+const submitPassphrase = (close: () => void) => {
+  const passphraseValid = setClientKey(passphrase.value)
+  if (!passphraseValid) {
+    console.log('passphrase is invalid')
+  } else {
+    close()
+  }
+}
+
+const loading = computed(() => notes.value.length === 0 || passphraseRequired.value)
 provide('loading', loading)
 </script>
 
@@ -31,9 +59,10 @@ provide('loading', loading)
       @set-view-mode="(viewMode) => (activeViewMode = viewMode)"
       @collapse="(collapse) => (sideBarCollapsed = collapse)"
       class="mt-[50px] px-3 py-6"
+      :class="sideBarCollapsed && 'max-sm:hidden'"
     />
     <main
-      class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out"
+      class="transition[margin-left] z-10 mt-[50px] w-full border-x-[1px] bg-white px-10 py-6 duration-200 ease-out max-sm:px-4 max-sm:py-2"
       :class="sideBarCollapsed ? 'ml-0' : 'ml-sidebar max-sm:hidden'"
     >
       <template v-if="!loading">
@@ -50,4 +79,15 @@ provide('loading', loading)
       <SkeletonNote v-else />
     </main>
   </div>
+  <Modal :open="passphraseRequired" :persistent="true">
+    <template #default>
+      <p>
+        Your notes are encrypted. Please enter your encryption key passphrase to decrypt your notes.
+      </p>
+      <input type="password" class="input-bordered input mt-4 w-full" v-model="passphrase" />
+    </template>
+    <template #actions="{ close }">
+      <button class="btn-primary btn-sm btn" @click="submitPassphrase(close)">Submit</button>
+    </template>
+  </Modal>
 </template>

src/components/Modal.vue

@@ -4,13 +4,20 @@ import { onClickOutside } from '@vueuse/core'
 const props = withDefaults(
   defineProps<{
     open?: boolean
+    persistent?: boolean
   }>(),
   {
-    open: false
+    open: false,
+    persistent: false
   }
 )
 
-const show = ref<boolean>(Boolean(props.open))
+const show = ref<boolean>(false)
+watch(
+  () => props.open,
+  () => (show.value = props.open),
+  { immediate: true }
+)
 
 const modal = ref<HTMLElement | null>(null)
 const modalBox = ref(null)
@@ -25,7 +32,7 @@ const close = (): Promise<boolean> => {
 
 const slotProps = { open, close }
 
-onClickOutside(modalBox, () => close())
+if (!props.persistent) onClickOutside(modalBox, () => close())
 
 const onEnter = (el: Element, done: () => void): void => {
   setTimeout(() => {

src/composables/useEncryption.ts

@@ -2,7 +2,7 @@ import { doc, getDoc } from 'firebase/firestore'
 import { user, db } from '@/composables/useFirebase'
 import { decrypt, calculateClientKey } from '@/utils/crypto'
 
-function getClientKeysFromLocalStorage() {
+function getClientKeysFromLocalStorage(): { [uid: string]: string } {
   try {
     return JSON.parse(localStorage.getItem('clientKeys') || '{}')
   } catch (e) {
@@ -10,24 +10,58 @@ function getClientKeysFromLocalStorage() {
   }
 }
 
-export const getClientKey = (): ClientKey | void => {
+export const clientKey = ref<ClientKey>()
+
+export const getClientKey = () => {
   if (!user.value) return
   const clientKeys = getClientKeysFromLocalStorage()
-  const clientKey = clientKeys[user.value?.uid] || calculateClientKey('test')
-  return clientKey
+  clientKey.value = clientKeys[user.value?.uid]
 }
 
-export async function getEncryptionKey(): Promise<EncryptionKey | void> {
-  if (!user.value) return
-  const clientKey = getClientKey()
-  if (!db.value || !clientKey) return
-  const data = (await getDoc(doc(db.value, 'encryptionKeys', user.value?.uid || ''))).data()
-  if (!data) return
-  const { key } = data
-  const encryptionKey: EncryptionKey = decrypt(key, clientKey)
-  return encryptionKey
+export const setClientKey = (passphrase: string) => {
+  const calculatedClientKey = calculateClientKey(passphrase)
+  const verified = verifyClientKey(calculatedClientKey)
+  if (!user.value || !verified) return
+  const clientKeys = getClientKeysFromLocalStorage()
+  clientKeys[user.value.uid] = calculatedClientKey
+  localStorage.setItem('clientKeys', JSON.stringify(clientKeys))
+  clientKey.value = calculatedClientKey
+  getEncryptionKey()
+  return true
 }
 
+export const verifyClientKey = (clientKey: ClientKey) => {
+  try {
+    if (!encryptedEncryptionKey.value) throw new Error('Encryption key is null')
+    if (!clientKey) throw new Error('Client key is null')
+    decrypt(encryptedEncryptionKey.value, clientKey)
+    return true
+  } catch (e) {
+    console.log(e)
+    return false
+  }
+}
+
+const encryptedEncryptionKey = ref<EncryptedEncryptionKey>()
+
+async function getEncryptedEncryptionKey(): Promise<EncryptedEncryptionKey | void> {
+  if (!user.value || !db.value) return
+  const data = (await getDoc(doc(db.value, 'encryptionKeys', user.value?.uid || ''))).data()
+  return data?.key
+}
+
+export const encryptionKey = ref<EncryptionKey | null>()
+
+export async function getEncryptionKey() {
+  encryptedEncryptionKey.value = (await getEncryptedEncryptionKey()) || undefined
+  if (!encryptedEncryptionKey.value || !clientKey.value) return
+  encryptionKey.value = decrypt(encryptedEncryptionKey.value, clientKey.value)
+}
+
+export const passphraseRequired = computed(() => {
+  return Boolean(encryptedEncryptionKey.value && !clientKey.value)
+})
+
 const decryptNote = (note: BaseNote, key: EncryptionKey) => {
   return {
     ...note,

src/composables/useNotes.ts

@@ -3,19 +3,19 @@ import { useTitle } from '@vueuse/core'
 import { doc, getDoc } from 'firebase/firestore'
 import { viewModes, activeViewMode } from '@/composables/useViewMode'
 import { initialized, user, db } from '@/composables/useFirebase'
-import { decryptNotes, getEncryptionKey } from '@/composables/useEncryption'
+import { decryptNotes, encryptionKey } from '@/composables/useEncryption'
 import { defaultNotes } from '@/utils/defaultNotes'
 import { mdToHtml } from '@/utils/markdown'
 import { getAllMatches } from '@/utils/helpers'
 
-const notesSources = computed(() => ({
+export const notesSources = computed(() => ({
   local: true,
   firebase: initialized.value && user.value
 }))
 
 type notesSourceValues = keyof typeof notesSources.value | null
 
-const activeNotesSource = ref<notesSourceValues>(null)
+export const activeNotesSource = ref<notesSourceValues>(null)
 
 watchEffect(() => {
   const getSource = (): notesSourceValues => {
@@ -29,14 +29,14 @@ const baseNotes = ref<{ [noteId: string]: BaseNote }>({})
 watch(
   baseNotes,
   () => {
-    console.log(`Sync base notes with ${activeNotesSource.value}`, baseNotes.value)
-    if (!activeNotesSource.value) return
+    if (!activeNotesSource.value || Object.keys(baseNotes.value).length === 0) return
     if (activeNotesSource.value === 'local') {
       console.log('sync with local')
       localStorage.setItem('notes', JSON.stringify(baseNotes.value))
     } else if (activeNotesSource.value === 'firebase') {
       console.log('sync with firebase')
     }
+    console.log(`Sync base notes with ${activeNotesSource.value}`, baseNotes.value)
   },
   { deep: true }
 )
@@ -209,7 +209,7 @@ const parseBaseNotes = (notes: BaseNotes): BaseNotes => {
 }
 
 watch(
-  activeNotesSource,
+  [activeNotesSource, encryptionKey],
   async () => {
     if (!activeNotesSource.value) return
     baseNotes.value = {}
@@ -221,11 +221,11 @@ watch(
         console.log(error)
       }
     } else if (activeNotesSource.value === 'firebase' && db.value) {
+      if (encryptionKey.value === undefined) return
       const firebaseNotes = (
         await getDoc(doc(db.value, 'pages', user.value?.uid || ''))
       ).data() as { [noteId: string]: any }
-      const encryptionKey = await getEncryptionKey()
-      notes = encryptionKey ? decryptNotes(firebaseNotes, encryptionKey) : firebaseNotes
+      notes = encryptionKey.value ? decryptNotes(firebaseNotes, encryptionKey.value) : firebaseNotes
       console.log('get notes from firebase', notes)
     }
     baseNotes.value = parseBaseNotes(notes)

src/types.d.ts

@@ -42,6 +42,7 @@ declare global {
   }
 
   type ClientKey = string
+  type EncryptedEncryptionKey = string
   type EncryptionKey = string
 }
 export {}