From e87c4b69036e32b4fcf3df89e8158fb52df6a4e0 Mon Sep 17 00:00:00 2001
From: vnugent <public@vaughnnugent.com>
Date: Thu, 4 Jan 2024 11:13:31 -0500
Subject: package updates & partial account page added

---
 .../src/NVault.Crypto.Secp256k1.csproj             |   4 +-
 .../src/NVault.VaultExtensions.csproj              |   2 +-
 back-end/plugins/nvault/src/NVault.csproj          |   8 +-
 extension/package-lock.json                        |  33 +++
 extension/package.json                             |   4 +-
 extension/src/assets/modals.scss                   |   4 +-
 extension/src/components/ConfirmPrompt.vue         |  67 ++++++
 extension/src/components/PasswordPrompt.vue        | 110 ++++++++++
 extension/src/entries/background/main.ts           |   6 +-
 .../src/entries/contentScript/renderContent.js     |   6 +-
 extension/src/entries/options/App.vue              |  23 +-
 .../src/entries/options/components/Account.vue     |  34 +++
 .../src/entries/options/components/Identities.vue  |  23 +-
 extension/src/entries/options/components/Pki.vue   | 237 +++++++++++++++++++++
 .../src/entries/options/components/Privacy.vue     |  19 +-
 .../entries/options/components/SiteSettings.vue    |   6 +-
 extension/src/entries/options/components/Totp.vue  | 234 ++++++++++++++++++++
 extension/src/entries/options/main.js              |   7 +-
 .../entries/popup/Components/IdentitySelection.vue |  16 +-
 extension/src/entries/popup/Components/Login.vue   |  64 +++---
 .../src/entries/popup/Components/OtpLogin.vue      |  51 +++++
 .../src/entries/popup/Components/PageContent.vue   |   2 +-
 .../src/entries/popup/Components/PassLogin.vue     |  89 ++++++++
 extension/src/entries/popup/main.js                |   4 +-
 extension/src/entries/store/features.ts            |  25 ++-
 extension/src/entries/store/identity.ts            |  18 +-
 extension/src/entries/store/index.ts               |   9 +-
 extension/src/entries/store/mfaconfig.ts           |  67 ++++++
 extension/src/features/account-api.ts              | 190 -----------------
 extension/src/features/auth-api.ts                 | 106 +++++++--
 extension/src/features/framework/index.ts          |   6 +-
 extension/src/features/identity-api.ts             |  46 ++--
 extension/src/features/index.ts                    |   7 +-
 extension/src/features/mfa-api.ts                  |  87 ++++++++
 extension/src/features/pki-api.ts                  | 208 ++++++++++++++++++
 extension/src/features/types.ts                    |   9 +
 36 files changed, 1517 insertions(+), 314 deletions(-)
 create mode 100644 extension/src/components/ConfirmPrompt.vue
 create mode 100644 extension/src/components/PasswordPrompt.vue
 create mode 100644 extension/src/entries/options/components/Account.vue
 create mode 100644 extension/src/entries/options/components/Pki.vue
 create mode 100644 extension/src/entries/options/components/Totp.vue
 create mode 100644 extension/src/entries/popup/Components/OtpLogin.vue
 create mode 100644 extension/src/entries/popup/Components/PassLogin.vue
 create mode 100644 extension/src/entries/store/mfaconfig.ts
 delete mode 100644 extension/src/features/account-api.ts
 create mode 100644 extension/src/features/mfa-api.ts
 create mode 100644 extension/src/features/pki-api.ts

diff --git a/back-end/libs/NVault.Crypto.Secp256k1/src/NVault.Crypto.Secp256k1.csproj b/back-end/libs/NVault.Crypto.Secp256k1/src/NVault.Crypto.Secp256k1.csproj
index 3a9f9f4..59ff06e 100644
--- a/back-end/libs/NVault.Crypto.Secp256k1/src/NVault.Crypto.Secp256k1.csproj
+++ b/back-end/libs/NVault.Crypto.Secp256k1/src/NVault.Crypto.Secp256k1.csproj
@@ -20,8 +20,8 @@
   </PropertyGroup>
 
   <ItemGroup>
-    <PackageReference Include="VNLib.Hashing.Portable" Version="0.1.0-ci0105" />
-    <PackageReference Include="VNLib.Utils" Version="0.1.0-ci0105" />
+    <PackageReference Include="VNLib.Hashing.Portable" Version="0.1.0-ci0107" />
+    <PackageReference Include="VNLib.Utils" Version="0.1.0-ci0107" />
   </ItemGroup>
 
 </Project>
diff --git a/back-end/libs/NVault.VaultExtensions/src/NVault.VaultExtensions.csproj b/back-end/libs/NVault.VaultExtensions/src/NVault.VaultExtensions.csproj
index e42f37d..3783c83 100644
--- a/back-end/libs/NVault.VaultExtensions/src/NVault.VaultExtensions.csproj
+++ b/back-end/libs/NVault.VaultExtensions/src/NVault.VaultExtensions.csproj
@@ -21,7 +21,7 @@
 
   <ItemGroup>
     <PackageReference Include="VaultSharp" Version="1.13.0.1" />
-    <PackageReference Include="VNLib.Plugins.Extensions.Loading" Version="0.1.0-ci0044" />
+    <PackageReference Include="VNLib.Plugins.Extensions.Loading" Version="0.1.0-ci0045" />
   </ItemGroup>
 
 </Project>
diff --git a/back-end/plugins/nvault/src/NVault.csproj b/back-end/plugins/nvault/src/NVault.csproj
index d4b0776..fa82c90 100644
--- a/back-end/plugins/nvault/src/NVault.csproj
+++ b/back-end/plugins/nvault/src/NVault.csproj
@@ -1,4 +1,4 @@
-<Project Sdk="Microsoft.NET.Sdk">
+<Project Sdk="Microsoft.NET.Sdk">
 
   <PropertyGroup>
     <TargetFramework>net6.0</TargetFramework>
@@ -21,9 +21,9 @@
 
   <ItemGroup>
     <PackageReference Include="FluentValidation" Version="11.9.0" />
-    <PackageReference Include="VNLib.Plugins.Extensions.Data" Version="0.1.0-ci0044" />
-    <PackageReference Include="VNLib.Plugins.Extensions.Validation" Version="0.1.0-ci0044" />
-    <PackageReference Include="VNLib.Plugins.Extensions.Loading.Sql" Version="0.1.0-ci0044" />
+    <PackageReference Include="VNLib.Plugins.Extensions.Data" Version="0.1.0-ci0045" />
+    <PackageReference Include="VNLib.Plugins.Extensions.Validation" Version="0.1.0-ci0045" />
+    <PackageReference Include="VNLib.Plugins.Extensions.Loading.Sql" Version="0.1.0-ci0045" />
   </ItemGroup>
 
   <ItemGroup>
diff --git a/extension/package-lock.json b/extension/package-lock.json
index dec73f0..bf558a0 100644
--- a/extension/package-lock.json
+++ b/extension/package-lock.json
@@ -26,12 +26,14 @@
         "jose": "^5.0.x",
         "lodash-es": "^4.17.21",
         "nanoid": "^5.0.4",
+        "otpauth": "^9.2.1",
         "pinia": "^2.1.7",
         "sass": "^1.56.1",
         "serialize-error": "^11.0.0",
         "universal-cookie": "^7.0.x",
         "vite-plugin-web-extension": "^4.1.1",
         "vue": "^3.2.47",
+        "vue3-otp-input": "^0.4.1",
         "webextension-polyfill": "^0.10.0"
       },
       "devDependencies": {
@@ -5186,6 +5188,14 @@
         "node": ">=0.6.0"
       }
     },
+    "node_modules/jssha": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/jssha/-/jssha-3.3.1.tgz",
+      "integrity": "sha512-VCMZj12FCFMQYcFLPRm/0lOBbLi8uM2BhXPTqw3U4YAfs4AZfiApOoBLoN8cQE60Z50m1MYMTQVCfgF/KaCVhQ==",
+      "engines": {
+        "node": "*"
+      }
+    },
     "node_modules/jszip": {
       "version": "3.10.1",
       "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
@@ -5932,6 +5942,17 @@
         "node": ">= 0.4.0"
       }
     },
+    "node_modules/otpauth": {
+      "version": "9.2.1",
+      "resolved": "https://registry.npmjs.org/otpauth/-/otpauth-9.2.1.tgz",
+      "integrity": "sha512-/MRvcm63pzK20NCsIOe8Btun42/yWNylPbUo/h5dMpSRJpoAJstWodEUjm4zUDeT1+Vbqif2E8IcP4trl1U4gQ==",
+      "dependencies": {
+        "jssha": "~3.3.1"
+      },
+      "funding": {
+        "url": "https://github.com/hectorm/otpauth?sponsor=1"
+      }
+    },
     "node_modules/p-cancelable": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-3.0.0.tgz",
@@ -8382,6 +8403,18 @@
         "typescript": "*"
       }
     },
+    "node_modules/vue3-otp-input": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/vue3-otp-input/-/vue3-otp-input-0.4.1.tgz",
+      "integrity": "sha512-wVl9i3DcWlO0C7fBI9V+RIP3crm/1tY72fuhvb3YM2JfbLoYofB96aPl5AgFhA0Cse5bQEMYtIvOeiqW3rfbAw==",
+      "engines": {
+        "node": ">=16.0.0",
+        "npm": ">=8.0.0"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.*"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.4.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz",
diff --git a/extension/package.json b/extension/package.json
index 2ba409a..806d54f 100644
--- a/extension/package.json
+++ b/extension/package.json
@@ -52,13 +52,15 @@
     "base32-encode": "^2.0.0",
     "jose": "^5.0.x",
     "lodash-es": "^4.17.21",
+    "nanoid": "^5.0.4",
+    "otpauth": "^9.2.1",
     "pinia": "^2.1.7",
     "sass": "^1.56.1",
     "serialize-error": "^11.0.0",
-    "nanoid": "^5.0.4",
     "universal-cookie": "^7.0.x",
     "vite-plugin-web-extension": "^4.1.1",
     "vue": "^3.2.47",
+    "vue3-otp-input": "^0.4.1",
     "webextension-polyfill": "^0.10.0"
   }
 }
diff --git a/extension/src/assets/modals.scss b/extension/src/assets/modals.scss
index 254b8e1..b201073 100644
--- a/extension/src/assets/modals.scss
+++ b/extension/src/assets/modals.scss
@@ -3,8 +3,8 @@
     @apply fixed z-50 flex w-full px-6;
 
     .modal-content-container {
-        @apply w-full max-w-md p-5 m-auto rounded-md shadow-2xl mt-44;
-        @apply bg-white border border-transparent dark:bg-dark-600 dark:border-primary-500 dark:text-white;
+        @apply w-full max-w-md p-5 m-auto rounded shadow-2xl mt-44;
+        @apply bg-white border border-transparent dark:bg-dark-600 dark:border-dark-200 dark:text-white;
 
         .modal-title {
             @apply text-xl font-bold;
diff --git a/extension/src/components/ConfirmPrompt.vue b/extension/src/components/ConfirmPrompt.vue
new file mode 100644
index 0000000..fa8601b
--- /dev/null
+++ b/extension/src/components/ConfirmPrompt.vue
@@ -0,0 +1,67 @@
+
+<template>
+  <div id="confirm-prompt">
+    <Dialog class="modal-entry" :style="style" :open="isRevealed" @close="cancel" >
+      <div class="modal-content-container">
+        <DialogPanel>
+          <DialogTitle class="modal-title">
+            {{ message.title ?? 'Confirm' }}
+          </DialogTitle>
+
+          <DialogDescription class="modal-description">
+            {{ message.text }}
+          </DialogDescription>
+
+          <p class="modal-text-secondary">
+            {{ message.subtext }}
+          </p>
+          
+          <div class="modal-button-container">
+            <button class="rounded btn sm primary" @click="confirm">
+              Confirm
+            </button>
+            <button  class="rounded btn sm" @click="cancel">
+              Close
+            </button>
+          </div>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defaultTo } from 'lodash'
+import { computed, ref } from 'vue'
+
+import {
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+  DialogDescription,
+} from '@headlessui/vue'
+
+import { onClickOutside } from '@vueuse/core'
+import { useConfirm, useEnvSize } from '@vnuge/vnlib.browser'
+
+const { headerHeight } = useEnvSize()
+//Use component side of confirm
+const { isRevealed, confirm, cancel, onReveal } = useConfirm()
+
+const dialog = ref(null)
+const message = ref({})
+
+//Cancel prompt when user clicks outside of dialog, only when its open
+onClickOutside(dialog, () => isRevealed.value ? cancel() : null)
+
+//Set message on reveal
+onReveal(m => message.value = defaultTo(m, {}));
+
+const style = computed(() => {
+  return {
+    'height': `calc(100vh - ${headerHeight.value}px)`,
+    'top': `${headerHeight.value}px`
+  }
+})
+
+</script>
\ No newline at end of file
diff --git a/extension/src/components/PasswordPrompt.vue b/extension/src/components/PasswordPrompt.vue
new file mode 100644
index 0000000..ae29358
--- /dev/null
+++ b/extension/src/components/PasswordPrompt.vue
@@ -0,0 +1,110 @@
+<template>
+  <div id="password-prompt">
+    <Dialog
+      class="modal-entry"
+      :style="style"
+      :open="isRevealed"
+      @close="close"
+    >
+      <div ref="dialog" class="modal-content-container" >
+        <DialogPanel>
+          <DialogTitle class="modal-title">
+            Enter your password
+          </DialogTitle>
+
+          <DialogDescription class="modal-description">
+            Please re-enter your password to continue.
+          </DialogDescription>
+
+          <form id="password-form" @submit.prevent="formSubmitted" :disabled="waiting">
+            <fieldset>
+                <div class="input-container">
+                  <input v-model="v$.password.$model" type="password" class="rounded input primary" placeholder="Password" @input="onInput">
+                </div>
+            </fieldset>
+          </form>
+
+          <div class="modal-button-container">
+            <button class="rounded btn sm primary" form="password-form">
+              Submit
+            </button>
+            <button class="rounded btn sm" @click="close" >
+              Close
+            </button>
+          </div>
+        </DialogPanel>
+      </div>
+    </Dialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { onClickOutside } from '@vueuse/core'
+import useVuelidate from '@vuelidate/core'
+import { reactive, ref, computed } from 'vue'
+import { helpers, required, maxLength } from '@vuelidate/validators'
+import { useWait, useMessage, usePassConfirm, useEnvSize, useVuelidateWrapper } from '@vnuge/vnlib.browser'
+import { Dialog, DialogPanel, DialogTitle, DialogDescription } from '@headlessui/vue'
+
+const { headerHeight } = useEnvSize()
+
+//Use component side of pw prompt
+const { isRevealed, confirm, cancel } = usePassConfirm()
+
+const { waiting } = useWait()
+const { onInput } = useMessage()
+
+//Dialog html ref
+const dialog = ref(null)
+
+const pwState = reactive({ password: '' })
+
+const rules = {
+  password: {
+    required: helpers.withMessage('Please enter your password', required),
+    maxLength: helpers.withMessage('Password must be less than 100 characters', maxLength(100))
+  }
+}
+
+const v$ = useVuelidate(rules, pwState, { $lazy: true })
+
+//Wrap validator so we an display error message on validation, defaults to the form toaster
+const { validate } = useVuelidateWrapper(v$);
+
+const style = computed(() => {
+  return {
+    'height': `calc(100vh - ${headerHeight.value}px)`,
+    'top': `${headerHeight.value}px`
+  }
+})
+
+const formSubmitted = async function () {
+  //Calls validate on the vuelidate instance
+  if (!await validate()) {
+    return
+  }
+
+  //Store pw copy
+  const password = v$.value.password.$model;
+
+  //Clear the password form
+  v$.value.password.$model = '';
+  v$.value.$reset();
+
+  //Pass the password to the confirm function
+  confirm({ password });
+}
+
+const close = function () {
+  // Clear the password form
+  v$.value.password.$model = '';
+  v$.value.$reset();
+
+  //Close prompt
+  cancel(null);
+}
+
+//Cancel prompt when user clicks outside of dialog, only when its open
+onClickOutside(dialog, () => isRevealed.value ? cancel() : null)
+
+</script>
\ No newline at end of file
diff --git a/extension/src/entries/background/main.ts b/extension/src/entries/background/main.ts
index 1d74f26..85e358a 100644
--- a/extension/src/entries/background/main.ts
+++ b/extension/src/entries/background/main.ts
@@ -23,7 +23,8 @@ import {
   useAppSettings,
   usePkiApi,
   useEventTagFilterApi,
-  useInjectAllowList
+  useInjectAllowList,
+  useMfaConfigApi,
 } from "../../features";
 import { useBackgroundFeatures } from "../../features/framework";
 
@@ -40,5 +41,6 @@ register([
   useLocalPki,
   usePkiApi,
   useEventTagFilterApi,
-  useInjectAllowList
+  useInjectAllowList,
+  useMfaConfigApi
 ])
\ No newline at end of file
diff --git a/extension/src/entries/contentScript/renderContent.js b/extension/src/entries/contentScript/renderContent.js
index 293bdd5..ca45c4f 100644
--- a/extension/src/entries/contentScript/renderContent.js
+++ b/extension/src/entries/contentScript/renderContent.js
@@ -20,7 +20,11 @@ export default async function renderContent(
   cssPaths,
   render = (_appRoot) => {}
 ) {
+  
+  //insert a div into the top of the body
   const appContainer = document.createElement("div");
+  document.body.insertBefore(appContainer, document.body.firstChild);
+  
   const shadowRoot = appContainer.attachShadow({ mode: 'closed' });
   const appRoot = document.createElement("div");
 
@@ -40,7 +44,5 @@ export default async function renderContent(
   }
 
   shadowRoot.appendChild(appRoot);
-  document.body.appendChild(appContainer);
-
   render(appRoot, shadowRoot);
 }
\ No newline at end of file
diff --git a/extension/src/entries/options/App.vue b/extension/src/entries/options/App.vue
index dd71209..d1da48e 100644
--- a/extension/src/entries/options/App.vue
+++ b/extension/src/entries/options/App.vue
@@ -1,5 +1,9 @@
 <template>
   <main id="injected-root">
+    
+    <!-- Global password/confirm promps -->
+    <ConfirmPrompt />
+    <PasswordPrompt />
 
     <notifications class="toaster" group="form" position="top-right" />
 
@@ -15,6 +19,11 @@
                 Identities
               </button>
             </Tab>
+            <Tab v-slot="{ selected }">
+              <button class="tab-title" :class="{ selected }">
+                  Account
+              </button>
+            </Tab>
             <Tab v-slot="{ selected }">
               <button class="tab-title" :class="{ selected }">
                 Privacy
@@ -55,6 +64,9 @@
             <TabPanel class="mt-4">
              <Identities :all-keys="allKeys" @edit-key="editKey"/>
             </TabPanel>
+            <TabPanel>
+              <Account/>
+            </TabPanel>
             <TabPanel>
               <Privacy/>
             </TabPanel>
@@ -115,6 +127,9 @@ import SiteSettings from './components/SiteSettings.vue';
 import Identities from './components/Identities.vue';
 import Privacy from "./components/Privacy.vue";
 import { useStore } from "../store";
+import Account from "./components/Account.vue";
+import ConfirmPrompt from "../../components/ConfirmPrompt.vue";
+import PasswordPrompt from "../../components/PasswordPrompt.vue";
 
 
 //Configure the notifier to use the notification library
@@ -128,7 +143,7 @@ const keyBuffer = ref<NostrPubKey>({} as NostrPubKey)
 
 const editKey = (key: NostrPubKey) =>{
   //Goto hidden tab
-  selectedTab.value = 3
+  selectedTab.value = 4
   //Set selected key
   keyBuffer.value = { ...key }
 }
@@ -165,7 +180,7 @@ watchEffect(() => darkMode.value ? document.body.classList.add('dark') : documen
 
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 
 main {
   font-family: Avenir, Helvetica, Arial, sans-serif;
@@ -198,4 +213,8 @@ main {
   }
 }
 
+.text-color-background{
+  @apply text-gray-400 dark:text-gray-500;
+}
+
 </style>
\ No newline at end of file
diff --git a/extension/src/entries/options/components/Account.vue b/extension/src/entries/options/components/Account.vue
new file mode 100644
index 0000000..574dc51
--- /dev/null
+++ b/extension/src/entries/options/components/Account.vue
@@ -0,0 +1,34 @@
+<template>
+    <div id="account-settings-template" class="mt-4">
+        <div class="flex flex-col w-full max-w-lg gap-4 mx-auto">
+            <div class="">
+                <h3 class="text-center">Account Settings</h3>
+                <div class="">
+
+                </div>
+            </div>
+            <div class="">
+                <div class="w-full font-bold border-b border-gray-200 dark:border-dark-500">
+                    Multi Factor
+                </div>
+                <div class="mt-4">
+                    <Totp />
+                </div>
+                <div class="mt-8 ">
+                     <Pki />
+                </div>
+            </div>
+            <div class="mt-6">
+                <h4>Password</h4>
+                <div class="">
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import Pki from './Pki.vue';
+import Totp from './Totp.vue';
+
+</script>
\ No newline at end of file
diff --git a/extension/src/entries/options/components/Identities.vue b/extension/src/entries/options/components/Identities.vue
index 0e3e79d..b7765be 100644
--- a/extension/src/entries/options/components/Identities.vue
+++ b/extension/src/entries/options/components/Identities.vue
@@ -38,6 +38,13 @@
                     </PopoverPanel>
                 </Popover>
             </div>
+             <div class="">
+                <div class="">
+                    <button class="rounded btn sm" @click="store.refreshIdentities()">
+                        <fa-icon icon="refresh" class="" />
+                    </button>
+                </div>
+            </div>
         </div>
         <div v-for="key in allKeys" :key="key.Id" class="mt-2 mb-3">
             <div class="" :class="{'selected': isSelected(key)}" @click.self="selectKey(key)">
@@ -90,7 +97,7 @@ import {
     PopoverPanel,
     PopoverOverlay
 } from '@headlessui/vue'
-import { apiCall, configureNotifier } from '@vnuge/vnlib.browser';
+import { apiCall, configureNotifier, useConfirm } from '@vnuge/vnlib.browser';
 import { NostrPubKey } from '../../../features';
 import { notify } from "@kyvg/vue3-notification";
 import { get, useClipboard } from '@vueuse/core';
@@ -106,7 +113,7 @@ const downloadAnchor = ref<HTMLAnchorElement>()
 const store = useStore()
 const { selectedKey, allKeys } = storeToRefs(store)
 const { copy } = useClipboard()
-
+const { reveal } = useConfirm()
 
 const isSelected = (me : NostrPubKey) => isEqual(me, selectedKey.value)
 const editKey = (key : NostrPubKey) => emit('edit-key', key);
@@ -134,7 +141,17 @@ const prettyPrintDate = (key : NostrPubKey) => {
 
 const onDeleteKey = async (key : NostrPubKey) => {
     
-    if(!confirm(`Are you sure you want to delete ${key.UserName}?`)){
+    const { isCanceled } = await reveal({
+        title: 'Are you sure?',
+        text: `You are about to perminantly delete your identity ${key.UserName}.`,
+        subtext: 'This is a perminant action and cannot be undone.',
+    })
+
+    if(isCanceled){
+        return;
+    }
+
+    if(!confirm(`Are you REALLY sure you want to delete ${key.UserName}?`)){
         return;
     } 
 
diff --git a/extension/src/entries/options/components/Pki.vue b/extension/src/entries/options/components/Pki.vue
new file mode 100644
index 0000000..ff64840
--- /dev/null
+++ b/extension/src/entries/options/components/Pki.vue
@@ -0,0 +1,237 @@
+<template>
+    <div id="pki-settings" class="container">
+        <div class="panel-content">
+
+            <div class="flex flex-row flex-wrap justify-between">
+                <div class="text-sm font-bold">OTP Auth Keys</div>
+                <div class="">
+                    <div v-if="pkiEnabled" class="button-group">
+                        <button class="btn xs" @click.prevent="setIsOpen(true)">
+                            <fa-icon icon="plus" />
+                            <span class="pl-2">Add Key</span>
+                        </button>
+                        <button class="btn red xs" @click.prevent="onDisable">
+                            <fa-icon icon="minus-circle" />
+                            <span class="pl-2">Disable</span>
+                        </button>
+                    </div>
+                    <div v-else class="">
+                        <button class="btn xs" @click.prevent="setIsOpen(true)">
+                            <fa-icon icon="plus" />
+                            <span class="pl-2">Add Key</span>
+                        </button>
+                    </div>
+                </div>
+
+                <div v-if="store.pkiServerKeys.length > 0" class="w-full mt-2">
+                    <table class="min-w-full text-sm divide-y-2 divide-gray-200 dark:divide-dark-500">
+                        <thead class="text-left">
+                            <tr>
+                                <th class="p-2 font-medium whitespace-nowrap dark:text-white">
+                                    KeyID
+                                </th>
+                                <th class="p-2 font-medium whitespace-nowrap dark:text-white">
+                                    Algorithm
+                                </th>
+                                <th class="p-2 font-medium whitespace-nowrap dark:text-white">
+                                    Curve
+                                </th>
+                                <th class="p-2"></th>
+                            </tr>
+                        </thead>
+
+                        <tbody class="divide-y divide-gray-200 dark:divide-dark-500">
+                            <tr v-for="key in store.pkiServerKeys">
+                                <td class="p-2 t font-medium truncate max-w-[8rem] whitespace-nowrap dark:text-white">
+                                    {{ key.kid }}
+                                </td>
+                                <td class="p-2 text-gray-700 whitespace-nowrap dark:text-gray-200">
+                                    {{ key.alg }}
+                                </td>
+                                <td class="p-2 text-gray-700 whitespace-nowrap dark:text-gray-200">
+                                    {{ key.crv }}
+                                </td>
+                                <td class="p-2 text-right whitespace-nowrap">
+                                    <button class="rounded btn red xs borderless" @click="onRemoveKey(key)">
+                                        <span class="hidden sm:inline">Remove</span>
+                                        <fa-icon icon="trash-can" class="inline sm:hidden" />
+                                    </button>
+                                </td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <p v-else class="p-1 pt-3 text-sm text-color-background">
+                    PKI authentication is a method of authenticating your user account with signed messages and a shared
+                    public key. This method implementation
+                    uses client signed Json Web Tokens to authenticate user generated outside this website as a One Time
+                    Password (OTP). This allows for you to
+                    use your favorite hardware or software tools, to generate said OTPs to authenticate your user.
+                </p>
+            </div>
+        </div>
+    </div>
+    <Dialog :open="isOpen" @close="setIsOpen" class="relative z-30">
+        <div class="fixed inset-0 bg-black/30" aria-hidden="true" />
+
+        <div class="fixed inset-0 flex justify-center">
+            <DialogPanel class="w-full max-w-lg p-4 m-auto mt-24 bg-white rounded dark:bg-dark-700 dark:text-gray-300">
+                <h4>Configure your authentication key</h4>
+                <p class="mt-2 text-sm">
+                    Please paste your authenticator's public key as a Json Web Key (JWK) object. Your JWK must include a kid
+                    (key id) and a kty (key type) field.
+                </p>
+                <div class="p-2 mt-3">
+                    <textarea class="w-full p-1 text-sm border dark:bg-dark-700 ring-0 dark:border-dark-400" rows="10"
+                        v-model="keyData" />
+                </div>
+                <div class="flex justify-end gap-2 mt-4">
+                    <button class="rounded btn sm primary" @click.prevent="onSubmitKeys">Submit</button>
+                    <button class="rounded btn sm" @click.prevent="setIsOpen(false)">Cancel</button>
+                </div>
+            </DialogPanel>
+        </div>
+    </Dialog>
+</template>
+
+<script setup lang="ts">
+import { includes, isEmpty } from 'lodash'
+import { apiCall, useConfirm, useSession, debugLog, useFormToaster, MfaMethod } from '@vnuge/vnlib.browser'
+import { computed, ref, watch } from 'vue'
+import { Dialog, DialogPanel } from '@headlessui/vue'
+import { } from 'pinia'
+import { useStore } from '../../store'
+import { PkiPubKey } from '../../../features'
+
+const store = useStore()
+const { reveal } = useConfirm()
+const { isLocalAccount } = useSession()
+const { error, success } = useFormToaster()
+
+const pkiEnabled = computed(() => isLocalAccount.value && includes(store.mfaEnabledMethods, "pki" as MfaMethod))
+
+const isOpen = ref(false)
+const keyData = ref('')
+const pemFormat = ref(false)
+const explicitCurve = ref("")
+
+watch(isOpen, () => {
+    keyData.value = ''
+    pemFormat.value = false
+    explicitCurve.value = ""
+    //Reload status
+    store.mfaRefresh()
+})
+
+const setIsOpen = (value: boolean) => isOpen.value = value
+
+const onRemoveKey = async (single: PkiPubKey) => {
+    const { isCanceled } = await reveal({
+        title: 'Are you sure?',
+        text: `This will remove key ${single.kid} from your account.`
+    })
+    if (isCanceled) {
+        return;
+    }
+
+    //Delete pki
+    await apiCall(async () => {
+
+        //TODO: require password or some upgrade to disable
+        await store.pkiRemoveKey(single);
+
+        success({
+            title: 'Key was removed successfully.',
+        })
+
+        //Refresh the status
+        store.mfaRefresh()
+    });
+}
+
+const onDisable = async () => {
+    const { isCanceled } = await reveal({
+        title: 'Are you sure?',
+        text: 'This will disable PKI authentication for your account.'
+    })
+    if (isCanceled) {
+        return;
+    }
+
+    //Delete pki
+    await apiCall(async ({ toaster }) => {
+
+        //Disable pki
+        //TODO: require password or some upgrade to disable
+        const { success } = await store.disable();
+
+        if (success) {
+            toaster.general.success({
+                title: 'Success',
+                text: 'PKI authentication has been disabled.'
+            })
+        }
+        else {
+            toaster.general.error({
+                title: 'Error',
+                text: 'PKI authentication could not be disabled.'
+            })
+        }
+
+        //Refresh the status
+        store.mfaRefresh()
+    });
+}
+
+const onSubmitKeys = async () => {
+
+    if (window.crypto.subtle == null) {
+        error({ title: "Your browser does not support PKI authentication." })
+        return;
+    }
+
+    //Validate key data
+    if (isEmpty(keyData.value)) {
+        error({ title: "Please enter key data" })
+        return;
+    }
+
+    let jwk: PkiPubKey;
+    try {
+        //Try to parse as jwk
+        jwk = JSON.parse(keyData.value)
+        if (isEmpty(jwk.use)
+            || isEmpty(jwk.kty)
+            || isEmpty(jwk.alg)
+            || isEmpty(jwk.kid)
+            || isEmpty(jwk.x)
+            || isEmpty(jwk.y)) {
+            throw new Error("Invalid JWK");
+        }
+    }
+    catch (e) {
+        //Write error to debug log
+        debugLog(e)
+        error({ title: "The key is not a valid Json Web Key (JWK)" })
+        return;
+    }
+
+    //Send to server
+    await apiCall(async () => {
+
+        //init/update the key
+        //TODO: require password or some upgrade to disable
+        await store.pkiAddKey(jwk);
+
+        success({
+            title: 'Successfully update your PKI keys.',
+        })
+
+        setIsOpen(false)
+    })
+}
+
+</script>
+
+<style></style>
diff --git a/extension/src/entries/options/components/Privacy.vue b/extension/src/entries/options/components/Privacy.vue
index d54f679..46261b3 100644
--- a/extension/src/entries/options/components/Privacy.vue
+++ b/extension/src/entries/options/components/Privacy.vue
@@ -1,18 +1,19 @@
 <template>
-    <div class="flex flex-col w-full mt-4 sm:px-2">
-        <div class="flex flex-row gap-1">
-            <div class="text-2xl">
-                Tracking protection
-            </div>
-            <div class="mt-auto" :class="[isOriginProtectionOn ? 'text-primary-600' : 'text-red-500']">
-                {{ isOriginProtectionOn ? 'active' : 'inactive' }}
+    <div class="flex flex-col w-full max-w-md mx-auto mt-4 sm:px-2">
+        <div class="flex flex-row gap-1 mx-auto">
+            <div class="mb-auto mr-1" >
+                <div class="w-2 h-2 rounded-full" :class="[isOriginProtectionOn ? 'bg-primary-600' : 'bg-red-500']">
+                </div>
             </div>
+            <h3 class="text-2xl">
+                Tracking protection
+            </h3>
         </div>
         <div class="">
             <div class="p-2">
                 <div class="my-1">
-                    <form @submit.prevent="allowOrigin()">
-                        <input class="w-full max-w-xs input primary" type="text" v-model="newOrigin" placeholder="Add new origin"/>
+                    <form class="flex flex-row w-full" @submit.prevent="allowOrigin()">
+                        <input class="flex-1 input primary" type="text" v-model="newOrigin" placeholder="Add new origin"/>
                         <button type="submit" class="ml-1 btn xs" >
                             <fa-icon icon="plus" />
                         </button>
diff --git a/extension/src/entries/options/components/SiteSettings.vue b/extension/src/entries/options/components/SiteSettings.vue
index b31bb9c..17f41c4 100644
--- a/extension/src/entries/options/components/SiteSettings.vue
+++ b/extension/src/entries/options/components/SiteSettings.vue
@@ -128,9 +128,9 @@ import { useStore } from '../../store';
 import { storeToRefs } from 'pinia';
 import useVuelidate from '@vuelidate/core'
 
-const { waiting } = useWait();
 const store = useStore()
-const { settings, isOriginProtectionOn } = storeToRefs(store)
+const { settings } = storeToRefs(store)
+const { waiting } = useWait();
 
 const { apply, data, buffer, modified, update } = useDataBuffer(settings.value, async sb =>{
     const newConfig = await store.saveSiteConfig(sb.buffer)
@@ -142,7 +142,7 @@ const { apply, data, buffer, modified, update } = useDataBuffer(settings.value,
 watch(settings, v => apply(v))
 
 const originProtection = computed({
-    get: () => isOriginProtectionOn.value,
+    get: () => store.isOriginProtectionOn,
     set: v => store.setOriginProtection(v)
 })
 
diff --git a/extension/src/entries/options/components/Totp.vue b/extension/src/entries/options/components/Totp.vue
new file mode 100644
index 0000000..ed836b7
--- /dev/null
+++ b/extension/src/entries/options/components/Totp.vue
@@ -0,0 +1,234 @@
+<template>
+    <div id="totp-settings">
+
+        <div v-if="showTotpCode" class="w-full py-2 text-center">
+            <h5 class="text-center" />
+            <p class="py-2">
+                Scan the QR code with your TOTP authenticator app.
+            </p>
+
+            <div class="flex">
+                <VueQrcode class="m-auto" :value="qrCode" />
+            </div>
+
+            <p class="py-2">
+                Your secret, if your application requires it.
+            </p>
+
+            <p
+                class="flex flex-row flex-wrap justify-center p-2 bg-gray-200 border border-gray-300 dark:bg-dark-800 dark:border-dark-500">
+                <span v-for="code in secretSegments" :key="code" class="px-2 font-mono tracking-wider">
+                    {{ code }}
+                </span>
+            </p>
+
+            <p class="py-2 text-color-background">
+                Please enter your code from your authenticator app to continue.
+            </p>
+
+            <div class="m-auto w-min">
+                <VOtpInput class="otp-input" input-type="letter-numeric" separator="" value="" :is-disabled="showSubmitButton"
+                    input-classes="primary input rounded" :num-inputs="6" @on-change="onInput" @on-complete="VerifyTotp" />
+            </div>
+
+            <div v-if="showSubmitButton" class="flex flex-row justify-end my-2">
+                <button class="btn primary" @click.prevent="CloseQrWindow">
+                    Complete
+                </button>
+            </div>
+        </div>
+
+        <div v-else class="flex flex-row flex-wrap justify-between">
+            <div class="text-sm font-bold">TOTP Authenticator App</div>
+
+            <div v-if="totpEnabled" class="button-group">
+                <button class="btn xs" @click.prevent="regenTotp">
+                    <fa-icon icon="sync" />
+                    <span class="pl-2">Regenerate</span>
+                </button>
+                <button class="btn red xs" @click.prevent="disable">
+                    <fa-icon icon="minus-circle" />
+                    <span class="pl-2">Disable</span>
+                </button>
+            </div>
+
+            <div v-else>
+                <button class="btn xs" @click.prevent="configTotp">
+                    <fa-icon icon="plus" />
+                    <span class="pl-2">Setup</span>
+                </button>
+            </div>
+            <p v-if="!totpEnabled" class="p-1 pt-3 text-sm text-color-background">
+                TOTP is a time based one time password. You can use it as a form of Multi Factor Authentication when
+                using another device such as a smart phone or TOTP hardware device. You can use TOTP with your smart
+                phone
+                using apps like Google Authenticator, Authy, or Duo. Read more on
+                <a class="link" href="https://en.wikipedia.org/wiki/Time-based_one-time_password" target="_blank">
+                    Wikipedia.
+                </a>
+            </p>
+
+            <p v-else class="w-full p-1 pt-1 text-sm text-color-background">
+                TOTP is enabled for your account.
+            </p>
+        </div>
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { isNil, chunk, defaultTo, includes, map, join } from 'lodash'
+import { TOTP } from 'otpauth'
+import base32Encode from 'base32-encode'
+import VueQrcode from '@chenfengyuan/vue-qrcode'
+import VOtpInput from "vue3-otp-input";
+import { computed, ref } from 'vue'
+import {
+    useSession,
+    useMessage,
+    useConfirm,
+    usePassConfirm,
+    useFormToaster,
+    MfaMethod
+} from '@vnuge/vnlib.browser'
+import { storeToRefs } from 'pinia';
+import { useStore } from '../../store';
+import { Mutable } from '@vueuse/core';
+import { TotpUpdateMessage } from '../../../features/types';
+
+type TotpConfig = Mutable<TotpUpdateMessage>
+
+const store = useStore()
+const { userName } = storeToRefs(store);
+
+const { KeyStore } = useSession()
+const { reveal } = useConfirm()
+const { elevatedApiCall } = usePassConfirm()
+const { onInput, setMessage } = useMessage()
+
+const totpEnabled = computed(() => includes(store.mfaEnabledMethods, MfaMethod.TOTP))
+
+const totpMessage = ref<TotpConfig>()
+const showSubmitButton = ref(false)
+const toaster = useFormToaster()
+
+const showTotpCode = computed(() => !isNil(totpMessage.value?.secret))
+
+const secretSegments = computed<string[]>(() => {
+    //Chunk the secret into 6 character segments
+    const chunks = chunk(totpMessage.value?.secret, 6)
+    //Join the chunks into their chunk arrays
+    return map(chunks, chunk => join(chunk, ''))
+})
+
+const qrCode = computed(() => {
+    if (isNil(totpMessage.value?.secret)) {
+        return ''
+    }
+
+    const m = totpMessage.value!;
+
+    // Build the totp qr codeurl
+    const params = new URLSearchParams()
+    params.append('secret', m.secret)
+    params.append('issuer', m.issuer)
+    params.append('algorithm', m.algorithm)
+    params.append('digits', defaultTo(m.digits, 6).toString())
+    params.append('period', defaultTo(m.period, 30).toString())
+    const url = `otpauth://totp/${m.issuer}:${userName.value}?${params.toString()}`
+    return url
+})
+
+const ProcessAddOrUpdate = async () => {
+    await elevatedApiCall(async ({ password }) => {
+
+        // Init or update the totp method and get the encrypted totp message
+        const totp = await store.mfaUpsertMethod(MfaMethod.TOTP, password) as TotpConfig
+
+        // Decrypt the totp secret
+        const secretBuf = await KeyStore.decryptDataAsync(totp.secret)
+
+        // Encode the secret to base32
+        totp.secret = base32Encode(secretBuf, 'RFC3548', { padding: false })
+
+        totpMessage.value = totp
+    })
+}
+
+const configTotp = async () => {
+    const { isCanceled } = await reveal({
+        title: 'Enable TOTP multi factor?',
+        text: 'Are you sure you understand TOTP multi factor and wish to enable it?',
+    })
+
+    if (!isCanceled) {
+        ProcessAddOrUpdate()
+    }
+}
+
+const regenTotp = async () => {
+    // If totp is enabled, show a prompt to regenerate totp
+    if (!totpEnabled.value) {
+        return
+    }
+
+    const { isCanceled } = await reveal({
+        title: 'Are you sure?',
+        text: 'If you continue your previous TOTP authenticator and recovery codes will no longer be valid.'
+    })
+
+    if (!isCanceled) {
+        ProcessAddOrUpdate()
+    }
+}
+
+const disable = async () => {
+    // Show a confrimation prompt
+    const { isCanceled } = await reveal({
+        title: 'Disable TOTP',
+        text: 'Are you sure you want to disable TOTP? You may re-enable TOTP later.'
+    })
+
+    if (isCanceled) {
+        return
+    }
+
+    await elevatedApiCall(async ({ password }) => {
+        // Disable the totp method
+        await store.mfaDisableMethod(MfaMethod.TOTP, password)
+    })
+}
+
+const VerifyTotp = async (code: string) => {
+    // Create a new TOTP instance from the current message
+    const totp = new TOTP(totpMessage.value)
+
+    // validate the code
+    const valid = totp.validate({ token: code, window: 4 })
+
+    if (valid) {
+        showSubmitButton.value = true
+        toaster.success({
+            title: 'Success',
+            text: 'Your TOTP code is valid and your account is now verified.'
+        })
+    } else {
+        setMessage('Your TOTP code is not valid.')
+    }
+}
+
+const CloseQrWindow = () => {
+    showSubmitButton.value = false
+    totpMessage.value = undefined
+
+    //Fresh methods
+    store.mfaRefresh()
+}
+
+</script>
+
+<style>
+#totp-settings .otp-input input {
+    @apply w-12 text-center text-lg mx-1 focus:border-primary-500;
+}
+</style>
diff --git a/extension/src/entries/options/main.js b/extension/src/entries/options/main.js
index 827c426..7747735 100644
--- a/extension/src/entries/options/main.js
+++ b/extension/src/entries/options/main.js
@@ -22,12 +22,12 @@ import Notifications from "@kyvg/vue3-notification";
 
 /* FONT AWESOME CONFIG */
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faChevronLeft, faChevronRight, faCopy, faDownload, faEdit, faExternalLinkAlt, faLock, faLockOpen, faMoon, faPlus, faSun, faTrash } from '@fortawesome/free-solid-svg-icons'
+import { faChevronLeft, faChevronRight, faCopy, faDownload, faEdit, faExternalLinkAlt, faLock, faLockOpen, faMinusCircle, faMoon, faPlus, faRefresh, faSun, faTrash, faTrashCan } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { createPinia } from "pinia";
-import { identityPlugin, originPlugin, useBackgroundPiniaPlugin } from "../store";
+import { identityPlugin, mfaConfigPlugin, originPlugin, useBackgroundPiniaPlugin } from "../store";
 
-library.add(faCopy, faEdit, faChevronLeft, faMoon, faSun, faLock, faLockOpen, faExternalLinkAlt, faTrash, faDownload, faChevronRight, faPlus)
+library.add(faCopy, faEdit, faChevronLeft, faMoon, faSun, faLock, faLockOpen, faExternalLinkAlt, faTrash, faDownload, faChevronRight, faPlus, faRefresh, faTrashCan, faMinusCircle)
 
 //Create the background feature wiring
 const bgPlugins = useBackgroundPiniaPlugin('options')
@@ -36,6 +36,7 @@ const pinia = createPinia()
     .use(bgPlugins) //Add the background pinia plugin
     .use(identityPlugin) //Add the identity plugin
     .use(originPlugin) //Add the origin plugin
+    .use(mfaConfigPlugin) //Add the mfa config plugin
 
 createApp(App)
     .use(Notifications)
diff --git a/extension/src/entries/popup/Components/IdentitySelection.vue b/extension/src/entries/popup/Components/IdentitySelection.vue
index 99d8e34..eb08fb1 100644
--- a/extension/src/entries/popup/Components/IdentitySelection.vue
+++ b/extension/src/entries/popup/Components/IdentitySelection.vue
@@ -1,18 +1,22 @@
 <template>
     <div class="text-left">
-       <div class="w-full">
-            <div class="">
+       <div class="flex flex-row w-full gap-1">
+            <div class="flex-1">
                 <select class="w-full input" 
-                :disabled="waiting"
-                :value="selected?.Id"
-                @change.prevent="onSelected"
+                    :disabled="waiting"
+                    :value="selected?.Id"
+                    @change.prevent="onSelected"
                 >
                     <option disabled value="">Select an identity</option>
                     <option v-for="key in allKeys" :value="key.Id">{{ key.UserName }}</option>
                 </select>
             </div>
+            <div class="my-auto">
+                <button class="btn sm borderless" @click="store.refreshIdentities()">
+                    <fa-icon icon="refresh" class="" />
+                </button>
+            </div>
        </div>
-       
     </div>
 </template>
 
diff --git a/extension/src/entries/popup/Components/Login.vue b/extension/src/entries/popup/Components/Login.vue
index 93c0178..8b7b807 100644
--- a/extension/src/entries/popup/Components/Login.vue
+++ b/extension/src/entries/popup/Components/Login.vue
@@ -1,44 +1,46 @@
 <template>
     <div id="login-template" class="py-4">
-        <form class="" @submit.prevent="onSubmit">
-            <fieldset class="px-4 input-container">
-                <label class="">Please enter your authentication token</label>
-                <textarea class="w-full input" v-model="token" rows="5">
-                </textarea>
-            </fieldset>
-            <div class="flex justify-end mt-2">
-                <div class="px-3">
-                    <button class="w-24 rounded btn sm primary">
-                        <fa-icon v-if="waiting" icon="spinner" class="animate-spin" />
-                        <span v-else>Submit</span>
-                    </button>
-                </div>
-            </div>
-        </form>
+        <TabGroup @change="onChange">
+            <TabList as="div" class="flex flex-row mx-auto mb-3 font-bold w-fit">
+                <Tab 
+                    class="p-0.5 mx-1 border-b"
+                    :class="[ isActive(0) ? 'border-gray-400' : 'border-transparent']"
+                >
+                    OTP
+                </Tab>
+                <Tab 
+                    class="p-0.5 mx-1 border-b"
+                    :class="[ isActive(1) ? 'border-gray-400' : 'border-transparent']"
+                >
+                    User/Pass
+                </Tab>
+            </TabList>
+            <TabPanels>
+                <TabPanel>
+                    <OtpLogin />
+                </TabPanel>
+                <TabPanel>
+                    <PassLogin />
+                </TabPanel>
+            </TabPanels>
+        </TabGroup>
     </div>
 </template>
 
 <script setup lang="ts">
-import { apiCall, useWait } from "@vnuge/vnlib.browser";
-import { ref } from "vue";
-import { useStore } from "../../store";
+import { TabGroup, TabList, Tab, TabPanels, TabPanel } from '@headlessui/vue'
+import PassLogin from "./PassLogin.vue";
+import OtpLogin from "./OtpLogin.vue";
+import { shallowRef } from 'vue';
 
-const { login } = useStore()
-const { waiting } = useWait()
+const activeTab = shallowRef(0)
 
-const token = ref('')
-
-const onSubmit = async () => {
-    await apiCall(async ({ toaster }) => {
-        await login(token.value)
-        toaster.form.success({
-            'title': 'Login successful',
-            'text': 'Successfully logged into your profile'
-        })
-    })
- 
+const onChange = (index: any) => {
+    activeTab.value = index
 }
 
+const isActive = (index: any) => activeTab.value === index
+
 </script>
 
 <style lang="scss">
diff --git a/extension/src/entries/popup/Components/OtpLogin.vue b/extension/src/entries/popup/Components/OtpLogin.vue
new file mode 100644
index 0000000..a2b8ac7
--- /dev/null
+++ b/extension/src/entries/popup/Components/OtpLogin.vue
@@ -0,0 +1,51 @@
+<template>
+    <form class="" @submit.prevent="onSubmit">
+        <fieldset class="px-4 input-container">
+            <label class="">Please enter your authentication token</label>
+            <textarea class="w-full input" v-model="token" rows="5" />
+        </fieldset>
+        <div class="flex justify-end mt-2">
+            <div class="px-3">
+                <button class="w-24 rounded btn sm primary">
+                    <fa-icon v-if="waiting" icon="spinner" class="animate-spin" />
+                    <span v-else>Submit</span>
+                </button>
+            </div>
+        </div>
+    </form>
+</template>
+
+<script setup lang="ts">
+import { apiCall, useWait } from "@vnuge/vnlib.browser";
+import { ref } from "vue";
+import { useStore } from "../../store";
+
+const { login } = useStore()
+const { waiting } = useWait()
+
+const token = ref('')
+
+const onSubmit = async () => {
+    await apiCall(async ({ toaster }) => {
+        try{
+            await login(token.value)
+
+             toaster.form.success({
+                'title': 'Login successful',
+                'text': 'Successfully logged into your profile'
+            })
+        }
+        catch(e:any){
+            if('response' in e){
+                throw e;
+            }
+
+            toaster.form.error({
+                title: 'Failed to login',
+                text: e.message
+            })
+        }
+    })
+}
+
+</script>
\ No newline at end of file
diff --git a/extension/src/entries/popup/Components/PageContent.vue b/extension/src/entries/popup/Components/PageContent.vue
index e4fcb49..8a48840 100644
--- a/extension/src/entries/popup/Components/PageContent.vue
+++ b/extension/src/entries/popup/Components/PageContent.vue
@@ -57,7 +57,7 @@
                     {{ pubKey ?? 'No key selected' }}
                   </div>
                   <div class="my-auto ml-auto cursor-pointer" :class="{'text-primary-500': copied }">
-                      <fa-icon class="mr-1" icon="copy" @click="copy(pubKey)"/>
+                      <fa-icon class="mr-1" icon="copy" @click="copy(pubKey!)"/>
                   </div>
                 </div>
               </div>
diff --git a/extension/src/entries/popup/Components/PassLogin.vue b/extension/src/entries/popup/Components/PassLogin.vue
new file mode 100644
index 0000000..29aeeb6
--- /dev/null
+++ b/extension/src/entries/popup/Components/PassLogin.vue
@@ -0,0 +1,89 @@
+<template>
+    <div v-if="showTotp" class="">
+         <form id="totp-login" class="" @submit.prevent="">
+            <fieldset class="px-4 input-container">
+                <div class="text-center">
+                    <label class="text-sm text-center">Enter your totp code</label>
+                    <div class="m-auto mt-3 w-min">
+                        <VOtpInput 
+                            class="otp-input" 
+                            input-type="letter-numeric" 
+                            separator="" 
+                            value="" 
+                            input-classes="primary input rounded" 
+                            :num-inputs="6" 
+                            @on-complete="onSubmitTotp" 
+                        />
+                    </div>
+                </div>
+            </fieldset>
+        </form>
+    </div>
+    <div v-else>
+          <form class="" @submit.prevent="onSubmit()">
+            <fieldset class="px-4 input-container">
+                <div class="">
+                    <label class="">Username</label>
+                    <input type="text" name="username" class="w-full input" v-model="username" />
+                </div>
+                <div class="mt-1">
+                    <label class="">Password</label>
+                    <input type="password" name="password" class="w-full input" v-model="password" />
+                </div>
+            </fieldset>
+            <div class="flex justify-end mt-2">
+                <div class="px-3">
+                    <button class="w-24 rounded btn sm primary">
+                        <fa-icon v-if="waiting" icon="spinner" class="animate-spin" />
+                        <span v-else>Submit</span>
+                    </button>
+                </div>
+            </div>
+        </form>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useStore } from '../../store';
+import { computed, shallowRef } from 'vue';
+import { apiCall, useWait } from "@vnuge/vnlib.browser";
+import { isEmpty, toNumber } from 'lodash';
+import VOtpInput from "vue3-otp-input";
+
+const { waiting } = useWait()
+const store = useStore();
+
+const showTotp = computed(() => store.mfaStatus?.type === 'totp')
+
+const username = shallowRef('');
+const password = shallowRef('');
+
+const onSubmit = () => {
+
+    //Invoke user-pass login
+    apiCall(async ({ toaster }) => {
+        
+        //Validate
+        if(isEmpty(username.value) || isEmpty(password.value)) {
+            toaster.form.error({
+                title:'Please enter your username and password'
+            })
+            return
+        }
+        
+        await store.login(username.value, password.value)
+    });
+};
+
+const onSubmitTotp = (code: string) => {
+    //Invoke totp login
+    apiCall(() => store.plugins.user.submitMfa({ code: toNumber(code) }));
+};
+
+</script>
+
+<style lang="scss">
+   #totp-login .otp-input input {
+    @apply w-10 p-0.5 rounded text-center text-lg mx-1 focus:border-primary-500;
+}
+</style>
\ No newline at end of file
diff --git a/extension/src/entries/popup/main.js b/extension/src/entries/popup/main.js
index 8b8a3d9..c8e9ef8 100644
--- a/extension/src/entries/popup/main.js
+++ b/extension/src/entries/popup/main.js
@@ -24,10 +24,10 @@ import "./local.scss"
 
 /* FONT AWESOME CONFIG */
 import { library } from '@fortawesome/fontawesome-svg-core'
-import { faArrowRightFromBracket, faCopy, faEdit, faGear, faMinus, faMoon, faPlus, faSpinner, faSun } from '@fortawesome/free-solid-svg-icons'
+import { faArrowRightFromBracket, faCopy, faEdit, faGear, faMinus, faMoon, faPlus, faRefresh, faSpinner, faSun } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 
-library.add(faSpinner, faEdit, faGear, faCopy, faArrowRightFromBracket, faPlus, faMinus, faSun, faMoon)
+library.add(faSpinner, faEdit, faGear, faCopy, faArrowRightFromBracket, faPlus, faMinus, faSun, faMoon, faRefresh)
 
 const bgPlugin = useBackgroundPiniaPlugin('popup')
 
diff --git a/extension/src/entries/store/features.ts b/extension/src/entries/store/features.ts
index c619b0e..9f9a4db 100644
--- a/extension/src/entries/store/features.ts
+++ b/extension/src/entries/store/features.ts
@@ -1,7 +1,22 @@
+// Copyright (C) 2023 Vaughn Nugent
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import 'pinia'
 import { } from 'lodash'
 import { PiniaPluginContext } from 'pinia'
+import type { IMfaFlowContinuiation } from '@vnuge/vnlib.browser'
 
 import {
     useAuthApi,
@@ -14,7 +29,8 @@ import {
     useForegoundFeatures,
     useEventTagFilterApi,
     useInjectAllowList,
-    onWatchableChange
+    onWatchableChange,
+    useMfaConfigApi
 } from "../../features"
 
 import { ChannelContext } from '../../messaging'
@@ -25,6 +41,7 @@ export type BgPluginState<T> = { plugins: BgPlugins } & T
 declare module 'pinia' {
     export interface PiniaCustomProperties {
         plugins: BgPlugins
+        mfaStatus: Partial<IMfaFlowContinuiation> | null
     }
 }
 
@@ -41,7 +58,8 @@ const usePlugins = (context: ChannelContext) => {
         localPki: use(useLocalPki),
         pki: use(usePkiApi),
         tagFilter: use(useEventTagFilterApi),
-        allowedOrigins: use(useInjectAllowList)
+        allowedOrigins: use(useInjectAllowList),
+        mfaConfig: use(useMfaConfigApi)
     }
 }
 
@@ -56,9 +74,10 @@ export const useBackgroundPiniaPlugin = (context: ChannelContext) => {
         //watch for status changes
         onWatchableChange(user, async () => {
             //Get status update and set the values
-            const { loggedIn, userName } = await user.getStatus();
+            const { loggedIn, userName, mfaStatus } = await user.getStatus();
             store.loggedIn = loggedIn;
             store.userName = userName;
+            store.mfaStatus = mfaStatus
 
         }, { immediate: true })
 
diff --git a/extension/src/entries/store/identity.ts b/extension/src/entries/store/identity.ts
index ef1941e..5bbc67a 100644
--- a/extension/src/entries/store/identity.ts
+++ b/extension/src/entries/store/identity.ts
@@ -1,3 +1,17 @@
+// Copyright (C) 2023 Vaughn Nugent
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import 'pinia'
 import {  } from 'lodash'
@@ -13,6 +27,7 @@ declare module 'pinia' {
         createIdentity(id: Partial<NostrPubKey>): Promise<NostrPubKey>;
         updateIdentity(id: NostrPubKey): Promise<NostrPubKey>;
         selectKey(key: NostrPubKey): Promise<void>;
+        refreshIdentities(): Promise<void>;
     }
 }
 
@@ -40,6 +55,7 @@ export const identityPlugin = ({ store }: PiniaPluginContext) => {
         selectKey: identity.selectKey,
         deleteIdentity: identity.deleteIdentity,
         createIdentity: identity.createIdentity,
-        updateIdentity: identity.updateIdentity
+        updateIdentity: identity.updateIdentity,
+        refreshIdentities: identity.refreshKeys
     }
 }
\ No newline at end of file
diff --git a/extension/src/entries/store/index.ts b/extension/src/entries/store/index.ts
index 07fce6d..e3eef2f 100644
--- a/extension/src/entries/store/index.ts
+++ b/extension/src/entries/store/index.ts
@@ -23,6 +23,7 @@ export type * from './types'
 export * from './allowedOrigins'
 export * from './features'
 export * from './identity'
+export * from './mfaconfig'
 
 export const useStore = defineStore({
     id: 'main',
@@ -34,8 +35,8 @@ export const useStore = defineStore({
     }),
     actions: {
 
-        async login (token: string) {
-            await this.plugins.user.login(token);
+        async login (usernameOrToken: string, password?: string) {
+            await this.plugins.user.login(usernameOrToken, password);
         },
 
         async logout () {
@@ -49,10 +50,6 @@ export const useStore = defineStore({
         async toggleDarkMode(){
             await this.plugins.settings.setDarkMode(this.darkMode === false)
         },
-        
-        checkIsCurrentOriginAllowed() {
-            
-        }
     },
     getters:{
          
diff --git a/extension/src/entries/store/mfaconfig.ts b/extension/src/entries/store/mfaconfig.ts
new file mode 100644
index 0000000..6a5116d
--- /dev/null
+++ b/extension/src/entries/store/mfaconfig.ts
@@ -0,0 +1,67 @@
+// Copyright (C) 2023 Vaughn Nugent
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import 'pinia'
+import { } from 'lodash'
+import { PiniaPluginContext } from 'pinia'
+import { shallowRef } from 'vue';
+import { MfaUpdateResult, PkiPubKey, onWatchableChange } from '../../features';
+import { MfaMethod } from '@vnuge/vnlib.browser';
+
+declare module 'pinia' {
+    export interface PiniaCustomProperties {
+        readonly mfaEnabledMethods: Array<MfaMethod>;
+        readonly pkiServerKeys: Array<PkiPubKey>;
+        mfaUpsertMethod(method: MfaMethod, password: string): Promise<MfaUpdateResult>;
+        mfaDisableMethod(method: MfaMethod, password: string): Promise<void>;
+        mfaRefresh(): void;
+        pkiAddKey(key: PkiPubKey): Promise<void>;
+        pkiRemoveKey(key: PkiPubKey): Promise<void>;
+    }
+}
+
+export const mfaConfigPlugin = ({ store }: PiniaPluginContext) => {
+   
+    const mfaEnabledMethods = shallowRef<MfaMethod[]>()
+    const pkiServerKeys = shallowRef<PkiPubKey[]>()
+    const { mfaConfig, pki } = store.plugins
+
+    onWatchableChange(mfaConfig, async () => {
+        //store enabled methods
+        mfaEnabledMethods.value = await mfaConfig.getMfaMethods()
+    }, { immediate: true })
+
+    onWatchableChange(pki, async () => {
+        //store pki keys
+        pkiServerKeys.value = await pki.getAllKeys()
+    }, { immediate: true })
+
+    return {
+        mfaEnabledMethods,
+        pkiServerKeys,
+        mfaUpsertMethod: (method: MfaMethod, password: string) => {
+            return  mfaConfig.enableOrUpdate(method, password)
+        },
+        mfaDisableMethod: async (method: MfaMethod, password: string) => {
+            await mfaConfig.disableMethod(method, password)
+        },
+        mfaRefresh: () => {
+            mfaConfig.refresh()
+            pki.refresh()
+        },
+        pkiAddKey: pki.addOrUpdate,
+        pkiRemoveKey: pki.removeKey
+    }
+}
diff --git a/extension/src/features/account-api.ts b/extension/src/features/account-api.ts
deleted file mode 100644
index 96948c4..0000000
--- a/extension/src/features/account-api.ts
+++ /dev/null
@@ -1,190 +0,0 @@
-// Copyright (C) 2023 Vaughn Nugent
-//
-// This program is free software: you can redistribute it and/or modify
-// it under the terms of the GNU Affero General Public License as
-// published by the Free Software Foundation, either version 3 of the
-// License, or (at your option) any later version.
-//
-// This program is distributed in the hope that it will be useful,
-// but WITHOUT ANY WARRANTY; without even the implied warranty of
-// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-// GNU Affero General Public License for more details.
-//
-// You should have received a copy of the GNU Affero General Public License
-// along with this program.  If not, see <https://www.gnu.org/licenses/>.
-
-import { useMfaConfig, usePkiConfig, type PkiPublicKey } from "@vnuge/vnlib.browser";
-import { ArrayToHexString, Base64ToUint8Array } from "@vnuge/vnlib.browser/dist/binhelpers";
-import { JsonObject } from "type-fest";
-import { computed, watch } from "vue";
-import { JWK, SignJWT, importJWK } from "jose";
-import { clone } from "lodash";
-import { FeatureApi, BgRuntime, IFeatureExport, exportForegroundApi, optionsOnly, popupAndOptionsOnly } from "./framework";
-import { AppSettings } from "./settings";
-import { set, toRefs } from "@vueuse/core";
-
-
-export interface EcKeyParams extends JsonObject {
-    readonly namedCurve: string
-}
-
-export interface PkiPubKey extends JsonObject, PkiPublicKey {
-    readonly kid: string,
-    readonly alg: string,
-    readonly use: string,
-    readonly kty: string,
-    readonly x: string,
-    readonly y: string,
-    readonly serial: string
-    readonly userName: string
-}
-
-export interface PkiApi extends FeatureApi{
-    getAllKeys(): Promise<PkiPubKey[]>
-    removeKey(kid: PkiPubKey): Promise<void>
-    isEnabled(): Promise<boolean>
-}
-
-export const usePkiApi = (): IFeatureExport<AppSettings, PkiApi> => {
-    return{
-        background: ({ state } : BgRuntime<AppSettings>):PkiApi =>{
-            const accountPath = computed(() => state.currentConfig.value.accountBasePath)
-            const mfaEndpoint = computed(() => `${accountPath.value}/mfa`)
-            const pkiEndpoint = computed(() => `${accountPath.value}/pki`)
-
-            //Compute config
-            const mfaConfig = useMfaConfig(mfaEndpoint);
-            const pkiConfig = usePkiConfig(pkiEndpoint, mfaConfig);
-
-            //Refresh the config when the endpoint changes
-            watch(mfaEndpoint, () => pkiConfig.refresh());
-
-            return{
-                getAllKeys: optionsOnly(async () => {
-                    const res = await pkiConfig.getAllKeys();
-                    return res as PkiPubKey[]
-                }),
-                removeKey: optionsOnly(async (key: PkiPubKey) => {
-                    await pkiConfig.removeKey(key.kid)
-                }),
-                isEnabled: popupAndOptionsOnly(async () => {
-                    return pkiConfig.enabled.value
-                })
-            }
-        },
-        foreground: exportForegroundApi<PkiApi>([
-            'getAllKeys',
-            'removeKey',
-            'isEnabled'
-        ])
-    }
-}
-
-interface PkiSettings {
-    userName: string,
-    privateKey:JWK | undefined
-}
-
-export interface LocalPkiApi extends FeatureApi {
-    regenerateKey: (userName:string, params: EcKeyParams) => Promise<void>
-    getPubKey: () => Promise<PkiPubKey | undefined>
-    generateOtp: () => Promise<string>
-}
-
-export const useLocalPki = (): IFeatureExport<AppSettings, LocalPkiApi> => {
-
-    return{
-        //Setup registration
-        background: ({ state } : BgRuntime<AppSettings>) =>{
-            const store = state.useStorageSlot<PkiSettings>('pki-settings', { userName: '', privateKey: undefined })
-            const { userName, privateKey } = toRefs(store)
-
-            const getPubKey = async (): Promise<PkiPubKey | undefined> => {
-
-                if (!privateKey.value) {
-                    return undefined
-                }
-
-                //Clone the private key, remove the private parts
-                const c = clone(privateKey.value)
-
-                delete c.d
-                delete c.p
-                delete c.q
-                delete c.dp
-                delete c.dq
-                delete c.qi
-
-                return {
-                    ...c,
-                    userName: userName.value
-                } as PkiPubKey
-            }
-
-            return{
-                regenerateKey: optionsOnly(async (uname:string, params:EcKeyParams) => {
-                    const p = {
-                        ...params,
-                        name: "ECDSA",
-                    }
-
-                    //Generate a new key
-                    const key = await window.crypto.subtle.generateKey(p, true, ['sign', 'verify'])
-
-                    //Convert to jwk
-                    const newKey = await window.crypto.subtle.exportKey('jwk', key.privateKey) as JWK;
-
-                    //Convert to base64 so we can hash it easier
-                    const b = btoa(newKey.x! + newKey.y!);
-
-                    //take sha256 of the binary version of the coords
-                    const digest = await crypto.subtle.digest('SHA-256', Base64ToUint8Array(b));
-
-                    //Set the kid
-                    newKey.kid = ArrayToHexString(digest);
-
-                    //Serial number is random hex
-                    const serial = new Uint8Array(32)
-                    crypto.getRandomValues(serial)
-                    newKey.serial = ArrayToHexString(serial);
-
-                    //Set the username
-                    set(userName, uname)
-                    set(privateKey, newKey)
-                }),
-                getPubKey: optionsOnly(getPubKey),
-                generateOtp: optionsOnly(async () =>{
-                   
-                    if (!privateKey.value) {
-                        throw new Error('No key found')
-                    }
-
-                    const privKey = await importJWK(privateKey.value as JWK)
-
-                    const random = new Uint8Array(32)
-                    crypto.getRandomValues(random)
-
-                    const jwt = new SignJWT({
-                        'sub': userName.value,
-                        'n': ArrayToHexString(random),
-                        keyid: privateKey.value.kid,
-                        serial: (privKey as any).serial
-                    });
-
-                    const token = await jwt.setIssuedAt()
-                        .setProtectedHeader({ alg: privateKey.value.alg! })
-                        .setIssuer(state.currentConfig.value.apiUrl)
-                        .setExpirationTime('30s')
-                        .sign(privKey)
-
-                    return token
-                })
-            }  
-        },
-        foreground: exportForegroundApi<LocalPkiApi>([
-            'regenerateKey',
-            'getPubKey',
-            'generateOtp'
-        ])
-    }
-}
diff --git a/extension/src/features/auth-api.ts b/extension/src/features/auth-api.ts
index f47d505..fbc9420 100644
--- a/extension/src/features/auth-api.ts
+++ b/extension/src/features/auth-api.ts
@@ -1,4 +1,4 @@
-// Copyright (C) 2023 Vaughn Nugent
+// Copyright (C) 2024 Vaughn Nugent
 //
 // This program is free software: you can redistribute it and/or modify
 // it under the terms of the GNU Affero General Public License as
@@ -14,15 +14,17 @@
 // along with this program.  If not, see <https://www.gnu.org/licenses/>.
 
 import { AxiosInstance } from "axios";
-import { get } from "@vueuse/core";
-import { computed } from "vue";
-import { delay } from "lodash";
-import { usePkiAuth, useSession, useUser } from "@vnuge/vnlib.browser";
+import { get, useTimeoutFn, set } from "@vueuse/core";
+import { computed, shallowRef } from "vue";
+import { clone, defer, delay } from "lodash";
+import { IMfaFlowContinuiation, totpMfaProcessor, useMfaLogin, usePkiAuth, useSession, useUser,
+     type IMfaSubmission, type IMfaMessage, type WebMessage 
+} from "@vnuge/vnlib.browser";
+import { type FeatureApi, type BgRuntime, type IFeatureExport, exportForegroundApi, popupAndOptionsOnly, popupOnly } from "./framework";
+import { waitForChangeFn } from "./util";
 import type { ClientStatus } from "./types";
 import type { AppSettings } from "./settings";
 import type { JsonObject } from "type-fest";
-import { type FeatureApi, type BgRuntime, type IFeatureExport, exportForegroundApi, popupAndOptionsOnly, popupOnly } from "./framework";
-import { waitForChangeFn } from "./util";
 
 
 export interface ProectedHandler<T extends JsonObject> {
@@ -38,11 +40,12 @@ export interface ApiMessageHandler<T extends JsonObject> {
 }
 
 export interface UserApi extends FeatureApi {
-    login: (token: string) => Promise<boolean>
+    login(username: string, password?: string): Promise<boolean>
     logout: () => Promise<void>
     getProfile: () => Promise<any>
     getStatus: () => Promise<ClientStatus>
     waitForChange: () => Promise<void>
+    submitMfa: (submission: IMfaSubmission) => Promise<boolean>
 }
 
 export const useAuthApi = (): IFeatureExport<AppSettings, UserApi> => {
@@ -55,7 +58,8 @@ export const useAuthApi = (): IFeatureExport<AppSettings, UserApi> => {
             const currentPkiPath = computed(() => `${currentConfig.value.accountBasePath}/pki`)
             
             //Use pki login controls
-            const { login } = usePkiAuth(currentPkiPath as any)
+            const pkiAuth = usePkiAuth(currentPkiPath as any)
+            const { login } = useMfaLogin([ totpMfaProcessor() ])
 
             //We can send post messages to the server heartbeat endpoint to get status
             const runHeartbeat = async () => {
@@ -76,15 +80,73 @@ export const useAuthApi = (): IFeatureExport<AppSettings, UserApi> => {
                 }
             }
 
+            const mfaUpgrade = (() => {
+
+                const store = shallowRef<IMfaFlowContinuiation | null>(null)
+                const message = computed<IMfaMessage | null>(() =>{
+                    if(!store.value){
+                        return null
+                    }
+                    //clone the continuation to send to the popup
+                    const cl = clone<Partial<IMfaFlowContinuiation>>(store.value)
+                    //Remove the submit method from the continuation
+                    delete cl.submit;
+                    return cl as IMfaMessage
+                })
+
+                const { start, stop } = useTimeoutFn(() => set(store, null), 360 * 1000)
+
+                return{
+                    setContiuation(cont: IMfaFlowContinuiation){
+                        //Store continuation for later
+                        set(store, cont)
+                        //Restart cleanup timer
+                        start()
+                    },
+                    continuation: message,
+                    async submit(submission: IMfaSubmission){
+                        const cont = get(store)
+                        if(!cont){
+                            throw new Error('MFA login expired')
+                        }
+                        const response = await cont.submit(submission)
+                        response.getResultOrThrow()
+
+                        //Stop timer
+                        stop()
+                        //clear the continuation
+                        defer(() => set(store, null))
+                    }
+                }
+            })()
+
             //Configure interval to run every 5 minutes to update the status
             setInterval(runHeartbeat, 60 * 1000);
             delay(runHeartbeat, 1000)   //Delay 1 second to allow the extension to load
 
             return {
-                waitForChange: waitForChangeFn([currentConfig, loggedIn, userName]),
-                login: popupOnly(async (token: string): Promise<boolean> => {
-                    //Perform login
-                    await login(token)
+                waitForChange: waitForChangeFn([currentConfig, loggedIn, userName, mfaUpgrade.continuation]),
+                login: popupOnly(async (usernameOrToken: string, password?: string): Promise<boolean> => {
+                    
+                    if(password){
+                        const result = await login(usernameOrToken, password)
+                        if ('getResultOrThrow' in result){
+                            (result as WebMessage).getResultOrThrow()
+                        }
+                        
+                        if((result as IMfaFlowContinuiation).submit){
+                            //Capture continuation, store for submission for later, and set the continuation
+                            mfaUpgrade.setContiuation(result as IMfaFlowContinuiation);
+                            return true;
+                        }
+
+                        //Otherwise normal login
+                    }
+                    else{
+                        //Perform login
+                        await pkiAuth.login(usernameOrToken)
+                    }
+                  
                     //load profile
                     getProfile()
                     return true;
@@ -95,6 +157,19 @@ export const useAuthApi = (): IFeatureExport<AppSettings, UserApi> => {
                     //Cleanup after logout
                     clearLoginState()
                 }),
+                submitMfa: popupOnly(async (submission: IMfaSubmission): Promise<boolean> => {
+                    const cont = get(mfaUpgrade.continuation)
+                    if(!cont || cont.expired){
+                        return false;
+                    }
+
+                    //Submit the continuation
+                    await mfaUpgrade.submit(submission);
+
+                    //load profile
+                    getProfile()
+                    return true;
+                }),
                 getProfile: popupAndOptionsOnly(getProfile),
                 async getStatus (){
                     return {
@@ -102,6 +177,8 @@ export const useAuthApi = (): IFeatureExport<AppSettings, UserApi> => {
                         loggedIn: get(loggedIn),
                         //username
                         userName: get(userName),
+                        //mfa status
+                        mfaStatus: get(mfaUpgrade.continuation)
                     } as ClientStatus
                 },
             }
@@ -111,7 +188,8 @@ export const useAuthApi = (): IFeatureExport<AppSettings, UserApi> => {
             'logout',
             'getProfile',
             'getStatus',
-            'waitForChange'
+            'waitForChange',
+            'submitMfa',
         ]),
     } 
 }
\ No newline at end of file
diff --git a/extension/src/features/framework/index.ts b/extension/src/features/framework/index.ts
index 44ae031..2d9cad5 100644
--- a/extension/src/features/framework/index.ts
+++ b/extension/src/features/framework/index.ts
@@ -34,7 +34,11 @@ export type FeatureApi = {
 export type SendMessageHandler = <T extends JsonObject | JsonObject[]>(action: string, data: any) => Promise<T>
 export type VarArgsFunction<T> = (...args: any[]) => T
 export type FeatureConstructor<TState, T extends FeatureApi> = () => IFeatureExport<TState, T>
-export type DummyApiExport<T extends FeatureApi> = Array<keyof T> 
+
+export type DummyApiExport<T extends FeatureApi> = {
+    [K in keyof T]: T[K] extends Function ? K : never
+}[keyof T][]
+
 
 export interface IFeatureExport<TState, TFeature extends FeatureApi> {
     /**
diff --git a/extension/src/features/identity-api.ts b/extension/src/features/identity-api.ts
index a8ac4e6..d909162 100644
--- a/extension/src/features/identity-api.ts
+++ b/extension/src/features/identity-api.ts
@@ -24,10 +24,10 @@ import {
     exportForegroundApi 
 } from "./framework";
 import { AppSettings } from "./settings";
-import { shallowRef, watch } from "vue";
+import { shallowRef } from "vue";
 import { useSession } from "@vnuge/vnlib.browser";
-import { set, useToggle } from "@vueuse/core";
-import { defer, isArray } from "lodash";
+import { set, useToggle, watchDebounced } from "@vueuse/core";
+import { isArray } from "lodash";
 import { waitForChange, waitForChangeFn } from "./util";
 
 export interface IdentityApi extends FeatureApi, Watchable {
@@ -37,6 +37,7 @@ export interface IdentityApi extends FeatureApi, Watchable {
     getAllKeys: () => Promise<NostrPubKey[]>;
     getPublicKey: () => Promise<NostrPubKey | undefined>;
     selectKey: (key: NostrPubKey) => Promise<void>;
+    refreshKeys: () => Promise<void>;
 }
 
 export const useIdentityApi = (): IFeatureExport<AppSettings, IdentityApi> => {
@@ -50,27 +51,23 @@ export const useIdentityApi = (): IFeatureExport<AppSettings, IdentityApi> => {
             const allKeys = shallowRef<NostrPubKey[]>([]);
             const [ onKeyUpdateTriggered , triggerKeyUpdate ] = useToggle()
 
-            const keyLoadWatchLoop = async () => {
-                while(true){
-                    //Load keys from server if logged in
-                    if(loggedIn.value){
-                        const [...keys] = await execRequest(Endpoints.GetKeys);
-                        allKeys.value = isArray(keys) ? keys : [];
-                    }
-                    else{
-                        //Clear all keys when logged out
-                        allKeys.value = [];
-                    }
-
-                    //Wait for changes to trigger a new key-load
-                    await waitForChange([loggedIn, onKeyUpdateTriggered])
+            watchDebounced([onKeyUpdateTriggered, loggedIn], async () => {
+                //Load keys from server if logged in
+                if (loggedIn.value) {
+                    const [...keys] = await execRequest(Endpoints.GetKeys);
+                    allKeys.value = isArray(keys) ? keys : [];
                 }
-            }
+                else {
+                    //Clear all keys when logged out
+                    allKeys.value = [];
 
-            defer(keyLoadWatchLoop)
+                    //Clear the selected key if the user becomes logged out
+                    selectedKey.value = undefined;
+                }
 
-            //Clear the selected key if the user logs out
-            watch(loggedIn, (li) => li ? null : selectedKey.value = undefined)
+                //Wait for changes to trigger a new key-load
+                await waitForChange([ loggedIn, onKeyUpdateTriggered ])
+            }, { debounce: 100 })
 
             return {
                 //Identity is only available in options context
@@ -98,6 +95,10 @@ export const useIdentityApi = (): IFeatureExport<AppSettings, IdentityApi> => {
                 getPublicKey: (): Promise<NostrPubKey | undefined> => {
                     return Promise.resolve(selectedKey.value);
                 },
+                refreshKeys: () => {
+                    triggerKeyUpdate()
+                    return Promise.resolve()
+                },
                 waitForChange: waitForChangeFn([selectedKey, loggedIn, allKeys])
             }
         },
@@ -108,7 +109,8 @@ export const useIdentityApi = (): IFeatureExport<AppSettings, IdentityApi> => {
             'getAllKeys',
             'getPublicKey',
             'selectKey',
-            'waitForChange'
+            'waitForChange',
+            'refreshKeys'
         ])
     }
 }
\ No newline at end of file
diff --git a/extension/src/features/index.ts b/extension/src/features/index.ts
index c146cef..f05de9b 100644
--- a/extension/src/features/index.ts
+++ b/extension/src/features/index.ts
@@ -17,13 +17,13 @@
 export type { NostrPubKey, LoginMessage } from './types'
 export type * from './framework'
 export type { PluginConfig } from './settings'
-export type { PkiPubKey, EcKeyParams, LocalPkiApi as PkiApi } from './account-api'
+export type { PkiPubKey, EcKeyParams, LocalPkiApi as PkiApi } from './pki-api'
 export type { NostrApi } from './nostr-api'
 export type { UserApi } from './auth-api'
 export type { IdentityApi } from './identity-api'
 
 export { useBackgroundFeatures, useForegoundFeatures } from './framework'
-export { useLocalPki, usePkiApi } from './account-api'
+export { useLocalPki, usePkiApi } from './pki-api'
 export { useAuthApi } from './auth-api'
 export { useIdentityApi } from './identity-api'
 export { useNostrApi } from './nostr-api'
@@ -31,4 +31,5 @@ export { useSettingsApi, useAppSettings } from './settings'
 export { useHistoryApi } from './history'
 export { useEventTagFilterApi } from './tagfilter-api'
 export { useInjectAllowList } from './nip07allow-api'
-export { onWatchableChange } from './util'
\ No newline at end of file
+export { onWatchableChange } from './util'
+export { useMfaConfigApi, type MfaUpdateResult } from './mfa-api'
\ No newline at end of file
diff --git a/extension/src/features/mfa-api.ts b/extension/src/features/mfa-api.ts
new file mode 100644
index 0000000..fc6d51a
--- /dev/null
+++ b/extension/src/features/mfa-api.ts
@@ -0,0 +1,87 @@
+// Copyright (C) 2023 Vaughn Nugent
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { get, set, useToggle, watchDebounced } from "@vueuse/core";
+import { computed, shallowRef } from "vue";
+import {  } from "lodash";
+import { useSession, useMfaConfig, MfaMethod } from "@vnuge/vnlib.browser";
+import type { TotpUpdateMessage, Watchable } from "./types";
+import type { AppSettings } from "./settings";
+import { type FeatureApi, type BgRuntime, type IFeatureExport, exportForegroundApi, optionsOnly } from "./framework";
+import { waitForChangeFn } from "./util";
+
+export type MfaUpdateResult = TotpUpdateMessage
+
+export interface MfaConfigApi extends FeatureApi, Watchable {
+    getMfaMethods: () => Promise<MfaMethod[]>
+    enableOrUpdate: (method: MfaMethod, password: string) => Promise<MfaUpdateResult>
+    disableMethod: (method: MfaMethod, password: string) => Promise<void>
+    refresh: () => Promise<void>
+}
+
+export const useMfaConfigApi = (): IFeatureExport<AppSettings, MfaConfigApi> => {
+
+    return {
+        background: ({ state }: BgRuntime<AppSettings>): MfaConfigApi => {
+            const { loggedIn } = useSession();
+            const { currentConfig } = state
+           
+            const [onRefresh, refresh] = useToggle()
+
+            const mfaPath = computed(() => `${currentConfig.value.accountBasePath}/mfa`)
+            const mfaConfig = useMfaConfig(mfaPath)
+            const mfaEnabledMethods = shallowRef<MfaMethod[]>([])
+
+            //Update enabled methods
+            watchDebounced([currentConfig, loggedIn, onRefresh], async () => {
+                if(!loggedIn.value){
+                    set(mfaEnabledMethods, [])
+                    return
+                }
+                const methods = await mfaConfig.getMethods()
+                set(mfaEnabledMethods, methods)
+            }, { debounce: 100  })
+
+            return {
+                waitForChange: waitForChangeFn([currentConfig, loggedIn, mfaEnabledMethods]),
+                
+                getMfaMethods: optionsOnly(() => {
+                    return Promise.resolve(get(mfaEnabledMethods))
+                }),
+                enableOrUpdate: optionsOnly(async (method: MfaMethod, password: string) => {
+                    //Exec request to update mfa method
+                    const result = await mfaConfig.initOrUpdateMethod<MfaUpdateResult>(method, password)
+                    refresh()
+                    return result.getResultOrThrow()
+                }),
+                disableMethod: optionsOnly(async (method: MfaMethod, password: string) => {
+                    await mfaConfig.disableMethod(method, password)
+                    refresh()
+                }),
+                refresh() {
+                    refresh()
+                    return Promise.resolve()
+                }
+            }
+        },
+        foreground: exportForegroundApi<MfaConfigApi>([
+            'waitForChange',
+            'getMfaMethods',
+            'enableOrUpdate',            
+            'disableMethod',
+            'refresh'
+        ]),
+    }
+}
\ No newline at end of file
diff --git a/extension/src/features/pki-api.ts b/extension/src/features/pki-api.ts
new file mode 100644
index 0000000..41fbd48
--- /dev/null
+++ b/extension/src/features/pki-api.ts
@@ -0,0 +1,208 @@
+// Copyright (C) 2023 Vaughn Nugent
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as
+// published by the Free Software Foundation, either version 3 of the
+// License, or (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+import { usePkiConfig, type PkiPublicKey, useSession } from "@vnuge/vnlib.browser";
+import { ArrayToHexString, Base64ToUint8Array } from "@vnuge/vnlib.browser/dist/binhelpers";
+import { JsonObject } from "type-fest";
+import { computed, shallowRef } from "vue";
+import { JWK, SignJWT, importJWK } from "jose";
+import { clone } from "lodash";
+import { FeatureApi, BgRuntime, IFeatureExport, exportForegroundApi, optionsOnly } from "./framework";
+import { AppSettings } from "./settings";
+import { get, set, toRefs, useToggle, watchDebounced } from "@vueuse/core";
+import { Watchable } from "./types";
+import { waitForChangeFn } from "./util";
+
+
+export interface EcKeyParams extends JsonObject {
+    readonly namedCurve: string
+}
+
+export interface PkiPubKey extends JsonObject, PkiPublicKey {
+    readonly kid: string,
+    readonly alg: string,
+    readonly use: string,
+    readonly kty: string,
+    readonly x: string,
+    readonly y: string,
+    readonly serial: string
+    readonly userName: string
+}
+
+export interface PkiApi extends FeatureApi, Watchable{
+    getAllKeys(): Promise<PkiPubKey[]>
+    addOrUpdate(key: PkiPubKey): Promise<void>
+    removeKey(kid: PkiPubKey): Promise<void>
+    refresh(): Promise<void>
+}
+
+export const usePkiApi = (): IFeatureExport<AppSettings, PkiApi> => {
+    return{
+        background: ({ state } : BgRuntime<AppSettings>):PkiApi =>{
+            const { loggedIn } = useSession()
+            const accountPath = computed(() => state.currentConfig.value.accountBasePath)
+            const pkiEndpoint = computed(() => `${accountPath.value}/pki`)
+            const [ onRefresh, refresh ] = useToggle()
+            //Compute config
+          
+            const pkiConfig = usePkiConfig(pkiEndpoint);
+            const keys = shallowRef<PkiPubKey[]>([])
+
+            //Refresh the config when the endpoint changes
+            watchDebounced([pkiEndpoint, loggedIn, onRefresh], async () => {
+                if(!loggedIn.value){
+                    set(keys, [])
+                    return
+                }
+
+                const res = await pkiConfig.getAllKeys()
+                set(keys, res as PkiPubKey[])
+            }, {debounce: 100});
+
+            return{
+                waitForChange: waitForChangeFn([loggedIn, keys]),
+                getAllKeys: optionsOnly(() => {
+                    return Promise.resolve(get(keys))
+                }),
+                removeKey: optionsOnly(async (key: PkiPubKey) => {
+                    await pkiConfig.removeKey(key.kid)
+                }),
+                addOrUpdate: optionsOnly(async (key: PkiPubKey) => {
+                    await pkiConfig.addOrUpdate(key)
+                }),
+                refresh() {
+                    refresh()
+                    return Promise.resolve()
+                }
+            }
+        },
+        foreground: exportForegroundApi<PkiApi>([
+            'waitForChange',
+            'getAllKeys',
+            'addOrUpdate',
+            'removeKey',
+            'refresh'
+        ])
+    }
+}
+
+interface PkiSettings {
+    userName: string,
+    privateKey:JWK | undefined
+}
+
+export interface LocalPkiApi extends FeatureApi {
+    regenerateKey: (userName:string, params: EcKeyParams) => Promise<void>
+    getPubKey: () => Promise<PkiPubKey | undefined>
+    generateOtp: () => Promise<string>
+}
+
+export const useLocalPki = (): IFeatureExport<AppSettings, LocalPkiApi> => {
+
+    return{
+        //Setup registration
+        background: ({ state } : BgRuntime<AppSettings>) =>{
+            const store = state.useStorageSlot<PkiSettings>('pki-settings', { userName: '', privateKey: undefined })
+            const { userName, privateKey } = toRefs(store)
+
+            const getPubKey = async (): Promise<PkiPubKey | undefined> => {
+
+                if (!privateKey.value) {
+                    return undefined
+                }
+
+                //Clone the private key, remove the private parts
+                const c = clone(privateKey.value)
+
+                delete c.d
+                delete c.p
+                delete c.q
+                delete c.dp
+                delete c.dq
+                delete c.qi
+
+                return {
+                    ...c,
+                    userName: userName.value
+                } as PkiPubKey
+            }
+
+            return{
+                regenerateKey: optionsOnly(async (uname:string, params:EcKeyParams) => {
+                    const p = {
+                        ...params,
+                        name: "ECDSA",
+                    }
+
+                    //Generate a new key
+                    const key = await window.crypto.subtle.generateKey(p, true, ['sign', 'verify'])
+
+                    //Convert to jwk
+                    const newKey = await window.crypto.subtle.exportKey('jwk', key.privateKey) as JWK;
+
+                    //Convert to base64 so we can hash it easier
+                    const b = btoa(newKey.x! + newKey.y!);
+
+                    //take sha256 of the binary version of the coords
+                    const digest = await crypto.subtle.digest('SHA-256', Base64ToUint8Array(b));
+
+                    //Set the kid
+                    newKey.kid = ArrayToHexString(digest);
+
+                    //Serial number is random hex
+                    const serial = new Uint8Array(32)
+                    crypto.getRandomValues(serial)
+                    newKey.serial = ArrayToHexString(serial);
+
+                    //Set the username
+                    set(userName, uname)
+                    set(privateKey, newKey)
+                }),
+                getPubKey: optionsOnly(getPubKey),
+                generateOtp: optionsOnly(async () =>{
+                   
+                    if (!privateKey.value) {
+                        throw new Error('No key found')
+                    }
+
+                    const privKey = await importJWK(privateKey.value as JWK)
+
+                    const random = new Uint8Array(32)
+                    crypto.getRandomValues(random)
+
+                    const jwt = new SignJWT({
+                        'sub': userName.value,
+                        'n': ArrayToHexString(random),
+                        keyid: privateKey.value.kid,
+                        serial: (privKey as any).serial
+                    });
+
+                    const token = await jwt.setIssuedAt()
+                        .setProtectedHeader({ alg: privateKey.value.alg! })
+                        .setIssuer(state.currentConfig.value.apiUrl)
+                        .setExpirationTime('30s')
+                        .sign(privKey)
+
+                    return token
+                })
+            }  
+        },
+        foreground: exportForegroundApi<LocalPkiApi>([
+            'regenerateKey',
+            'getPubKey',
+            'generateOtp'
+        ])
+    }
+}
diff --git a/extension/src/features/types.ts b/extension/src/features/types.ts
index 856b95a..92cf6cf 100644
--- a/extension/src/features/types.ts
+++ b/extension/src/features/types.ts
@@ -63,6 +63,7 @@ export interface LoginMessage extends JsonObject {
 export interface ClientStatus extends JsonObject {
     readonly loggedIn: boolean;
     readonly userName: string | null;
+    readonly mfaStatus: object | null;
 }
 
 export enum NostrRelayFlags {
@@ -96,4 +97,12 @@ export interface Watchable{
      * must be called again to listen for the next change. 
      */
     waitForChange(): Promise<void>;
+}
+
+export interface TotpUpdateMessage extends JsonObject {
+    readonly issuer: string
+    readonly digits: number
+    readonly period: number
+    readonly algorithm: string
+    readonly secret: string
 }
\ No newline at end of file
-- 
cgit