Add security key support

_locales/en/messages.json

@@ -353,5 +353,20 @@
     },
     "algorithm": {
         "message": "Algorithm"
+    },
+    "operationFailed": {
+        "message": "Operation failed."
+    },
+    "noPassphraseWarning": {
+        "message": "You must set a passphrase before enable security key."
+    },
+    "securityKeyEnabled": {
+        "message": "Security key enabled."
+    },
+    "alreadyEnabledSecurityKeyWarning": {
+        "message": "You have already enabled security key, do you want to continue?"
+    },
+    "updatePassphraseDisableSecurityKeyWarning": {
+        "message": "Update passphrase will reset security key, do you want to continue?"
     }
 }

sass/_ui.scss

@@ -137,6 +137,19 @@ $theme-map: null;
   padding: 10px;
 }
 
+.button-u2f {
+  @extend .button;
+  margin: 20px 97px;
+  width: 84px;
+  border: none !important;
+  padding: 0;
+}
+
+.button-u2f svg {
+  width: 64px;
+  height: 64px;
+}
+
 .input {
   display: block;
   margin: 15px 10px 20px 10px;

src/components/Popup/EnterPasswordPage.vue

@@ -14,12 +14,23 @@
       i18n.phrase_not_match
     }}</label>
     <div class="button-small" v-on:click="applyPassphrase()">{{ i18n.ok }}</div>
+    <div
+      class="button-u2f"
+      v-on:click="applySecurityKey()"
+      v-show="securityKeyEnabled && u2fSupportedPlatform"
+    >
+      <IconWindowsHello v-if="u2fSupportedPlatform === 'Win'" />
+      <IconTouchId v-if="u2fSupportedPlatform === 'Mac'" />
+    </div>
   </div>
 </template>
 <script lang="ts">
 import Vue from "vue";
 import { mapState } from "vuex";
 
+import IconWindowsHello from "../../../svg/windows-hello.svg";
+import IconTouchId from "../../../svg/touch-id.svg";
+
 export default Vue.extend({
   data: function() {
     return {
@@ -29,12 +40,31 @@ export default Vue.extend({
   computed: {
     wrongPassword() {
       return this.$store.state.accounts.wrongPassword;
+    },
+    securityKeyEnabled() {
+      return !!localStorage.securityTokenEncryptedKey;
+    },
+    u2fSupportedPlatform() {
+      if (navigator.platform.indexOf("Win") > -1) {
+        return "Win";
+      } else if (navigator.platform.indexOf("Mac") > -1) {
+        return "Mac";
+      } else {
+        return null;
+      }
     }
   },
   methods: {
     applyPassphrase() {
       this.$store.dispatch("accounts/applyPassphrase", this.password);
+    },
+    applySecurityKey() {
+      this.$store.dispatch("accounts/applySecurityKey");
     }
+  },
+  components: {
+    IconWindowsHello,
+    IconTouchId
   }
 });
 </script>

src/components/Popup/SetPasswordPage.vue

@@ -25,11 +25,22 @@
     >
       {{ i18n.ok }}
     </div>
+    <div
+      class="button-u2f"
+      v-on:click="enableSecurityKey()"
+      v-show="encryption.getEncryptionStatus() && u2fSupportedPlatform"
+    >
+      <IconWindowsHello v-if="u2fSupportedPlatform === 'Win'" />
+      <IconTouchId v-if="u2fSupportedPlatform === 'Mac'" />
+    </div>
   </div>
 </template>
 <script lang="ts">
 import Vue from "vue";
 
+import IconWindowsHello from "../../../svg/windows-hello.svg";
+import IconTouchId from "../../../svg/touch-id.svg";
+
 export default Vue.extend({
   data: function() {
     return {
@@ -38,8 +49,20 @@ export default Vue.extend({
     };
   },
   computed: {
+    encryption: function() {
+      return this.$store.state.accounts.encryption;
+    },
     enforcePassword: function() {
       return this.$store.state.menu.enforcePassword;
+    },
+    u2fSupportedPlatform() {
+      if (navigator.platform.indexOf("Win") > -1) {
+        return "Win";
+      } else if (navigator.platform.indexOf("Mac") > -1) {
+        return "Mac";
+      } else {
+        return null;
+      }
     }
   },
   methods: {
@@ -60,12 +83,40 @@ export default Vue.extend({
         return;
       }
 
+      if (
+        localStorage.securityTokenEncryptedKey &&
+        !(await this.$store.dispatch(
+          "notification/confirm",
+          this.i18n.updatePassphraseDisableSecurityKeyWarning
+        ))
+      ) {
+        return;
+      }
+
       this.$store.commit("currentView/changeView", "LoadingPage");
       await this.$store.dispatch("accounts/changePassphrase", this.phrase);
       this.$store.commit("notification/alert", this.i18n.updateSuccess);
       this.$store.commit("style/hideInfo");
       return;
+    },
+    async enableSecurityKey() {
+      if (
+        !localStorage.securityTokenEncryptedKey ||
+        (await this.$store.dispatch(
+          "notification/confirm",
+          this.i18n.alreadyEnabledSecurityKeyWarning
+        ))
+      ) {
+        const result = await this.$store.dispatch("accounts/enableSecurityKey");
+        this.$store.commit("notification/alert", result);
+        this.$store.commit("style/hideInfo");
+      }
+      return;
     }
+  },
+  components: {
+    IconWindowsHello,
+    IconTouchId
   }
 });
 </script>

src/store/Accounts.ts

@@ -395,6 +395,9 @@ export class Accounts implements Module {
 
           // remove cached passphrase in old version
           localStorage.removeItem("encodedPhrase");
+
+          // remove security token encrypted key in old version
+          localStorage.removeItem("securityTokenEncryptedKey");
         },
         updateEntries: async (state: ActionContext<AccountsState, {}>) => {
           const entries = await this.getEntries();
@@ -483,6 +486,138 @@ export class Accounts implements Module {
               });
             });
           }
+        },
+        enableSecurityKey: async (state: ActionContext<AccountsState, {}>) => {
+          const createCredentialOptions: CredentialCreationOptions = {
+            publicKey: {
+              rp: {
+                id: chrome.runtime.id,
+                name: "Authenticator"
+              },
+              user: {
+                name: "Authenticator",
+                displayName: "Authenticator",
+                id: new Uint8Array(16)
+              },
+              challenge: new Uint8Array(16),
+              pubKeyCredParams: [
+                { type: "public-key", alg: -7 },
+                { type: "public-key", alg: -35 },
+                { type: "public-key", alg: -36 },
+                { type: "public-key", alg: -257 },
+                { type: "public-key", alg: -258 },
+                { type: "public-key", alg: -259 },
+                { type: "public-key", alg: -37 },
+                { type: "public-key", alg: -38 },
+                { type: "public-key", alg: -39 }
+              ],
+              authenticatorSelection: {
+                authenticatorAttachment: "platform",
+                requireResidentKey: false,
+                userVerification: "required"
+              }
+            }
+          };
+
+          let credentialInfo: Credential | null = null;
+
+          try {
+            credentialInfo = await navigator.credentials.create(
+              createCredentialOptions
+            );
+          } catch (e) {
+            console.error(e);
+          }
+
+          if (credentialInfo === null) {
+            return chrome.i18n.getMessage("operationFailed");
+          } else {
+            const cachedPassphrase = await this.getCachedPassphrase();
+            const encKey = await BrowserStorage.getKey();
+            if (encKey === null) {
+              return chrome.i18n.getMessage("noPassphraseWarning");
+            }
+            const encryptedKey = CryptoJS.AES.encrypt(
+              CryptoJS.enc.Hex.parse(cachedPassphrase),
+              credentialInfo.id
+            ).toString();
+            localStorage.securityTokenEncryptedKey = encryptedKey;
+            return chrome.i18n.getMessage("securityKeyEnabled");
+          }
+        },
+        applySecurityKey: async (state: ActionContext<AccountsState, {}>) => {
+          const encKey = await BrowserStorage.getKey();
+          if (!encKey) {
+            // TODO: alert to ask customer enter password first to migrate
+            return;
+          }
+
+          let credentialInfo: Credential | null = null;
+
+          try {
+            credentialInfo = await navigator.credentials.get({
+              publicKey: {
+                challenge: new Uint8Array(16),
+                rpId: chrome.runtime.id,
+                userVerification: "required"
+              }
+            });
+          } catch (e) {
+            console.error(e);
+          }
+
+          if (credentialInfo === null) {
+            state.commit("currentView/changeView", "EnterPasswordPage", {
+              root: true
+            });
+            return;
+          }
+
+          const credentialId = credentialInfo.id;
+
+          const key = CryptoJS.AES.decrypt(
+            localStorage.securityTokenEncryptedKey,
+            credentialId
+          ).toString();
+          const isCorrectPassword = await new Promise(
+            (resolve: (value: string) => void) => {
+              const iframe = document.getElementById("argon-sandbox");
+              const message = {
+                action: "verify",
+                value: key,
+                hash: encKey.hash
+              };
+              if (iframe) {
+                window.addEventListener("message", response => {
+                  resolve(response.data.response);
+                });
+                // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+                //@ts-ignore
+                iframe.contentWindow.postMessage(message, "*");
+              }
+            }
+          );
+
+          if (!isCorrectPassword) {
+            state.commit("wrongPassword");
+            state.commit("currentView/changeView", "EnterPasswordPage", {
+              root: true
+            });
+            return;
+          }
+
+          state.state.encryption.updateEncryptionPassword(key);
+          await state.dispatch("updateEntries");
+
+          if (!state.getters.currentlyEncrypted) {
+            chrome.runtime.sendMessage({
+              action: "cachePassphrase",
+              value: key
+            });
+          }
+
+          state.commit("style/hideInfo", true, { root: true });
+          return;
         }
       },
       namespaced: true