case 4678 - passkey sign-in and management

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/api/passkey.js

@@ -0,0 +1,76 @@
+// case 4678: passkeys (WebAuthn). The server sends the options as JSON with binary fields in base64url;
+// the browser API wants ArrayBuffers, and its answer goes back the same way
+
+function toBuffer(b64url) {
+  const b64 = b64url.replace(/-/g, "+").replace(/_/g, "/");
+  const bin = atob(b64 + "===".slice((b64.length + 3) % 4));
+  const bytes = new Uint8Array(bin.length);
+  for (let i = 0; i < bin.length; i++) {
+    bytes[i] = bin.charCodeAt(i);
+  }
+  return bytes.buffer;
+}
+
+function toB64Url(buffer) {
+  if (!buffer) {
+    return null;
+  }
+  const bytes = new Uint8Array(buffer);
+  let bin = "";
+  for (let i = 0; i < bytes.length; i++) {
+    bin += String.fromCharCode(bytes[i]);
+  }
+  return btoa(bin)
+    .replace(/\+/g, "-")
+    .replace(/\//g, "_")
+    .replace(/=+$/, "");
+}
+
+function credentialJson(cred, response) {
+  return {
+    id: cred.id,
+    rawId: toB64Url(cred.rawId),
+    type: cred.type,
+    response: response,
+    clientExtensionResults: cred.getClientExtensionResults
+      ? cred.getClientExtensionResults()
+      : {}
+  };
+}
+
+export default {
+  // passkeys need a browser that has them and a secure page (HTTPS, or localhost)
+  supported() {
+    return !!(window.PublicKeyCredential && window.isSecureContext);
+  },
+
+  // run navigator.credentials.create() with the server's register-options; returns the JSON to send back
+  async create(options) {
+    const o = JSON.parse(JSON.stringify(options));
+    o.challenge = toBuffer(o.challenge);
+    o.user.id = toBuffer(o.user.id);
+    (o.excludeCredentials || []).forEach(c => (c.id = toBuffer(c.id)));
+    const cred = await navigator.credentials.create({ publicKey: o });
+    return credentialJson(cred, {
+      clientDataJSON: toB64Url(cred.response.clientDataJSON),
+      attestationObject: toB64Url(cred.response.attestationObject),
+      transports: cred.response.getTransports
+        ? cred.response.getTransports()
+        : []
+    });
+  },
+
+  // run navigator.credentials.get() with the server's login-options; returns the JSON to send back
+  async get(options) {
+    const o = JSON.parse(JSON.stringify(options));
+    o.challenge = toBuffer(o.challenge);
+    (o.allowCredentials || []).forEach(c => (c.id = toBuffer(c.id)));
+    const cred = await navigator.credentials.get({ publicKey: o });
+    return credentialJson(cred, {
+      clientDataJSON: toB64Url(cred.response.clientDataJSON),
+      authenticatorData: toB64Url(cred.response.authenticatorData),
+      signature: toB64Url(cred.response.signature),
+      userHandle: toB64Url(cred.response.userHandle)
+    });
+  }
+};

src/plugins/vuetify.js

@@ -193,6 +193,7 @@ import {
   faSeedling,
   faServer,
   faShare,
+  faFingerprint,
   faShieldAlt,
   faShippingFast,
   faShoppingCart,
@@ -391,6 +392,7 @@ library.add(
   faSeedling,
   faServer,
   faShare,
+  faFingerprint,
   faShieldAlt,
   faShippingFast,
   faShoppingCart,
@@ -1281,6 +1283,12 @@ const CUSTOM_ICONS = {
       icon: ["fas", "shipping-fast"]
     }
   },
+  sockiFingerprint: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "fingerprint"]
+    }
+  },
   sockiShieldAlt: {
     component: FontAwesomeIcon,
     props: {

src/views/adm-user.vue

@@ -824,6 +824,30 @@ export default {
         window.$gz.errorHandler.handleFormError(error, vm);
       }
     },
+    //case 4678: for a user who lost their passkeys
+    async removePasskeys() {
+      const vm = this;
+      if ((await window.$gz.dialog.confirmDelete()) != true) {
+        return;
+      }
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      try {
+        const res = await window.$gz.api.remove(
+          `auth/passkey/user/${vm.obj.id}`
+        );
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+        } else {
+          window.$gz.eventBus.$emit(
+            "notify-success",
+            vm.$sock.t("PasskeyRemoveAll")
+          );
+        }
+      } catch (error) {
+        window.$gz.errorHandler.handleFormError(error, vm);
+      }
+    },
     async disableTfa() {
       const vm = this;
 
@@ -907,6 +931,9 @@ async function clickHandler(menuItem) {
       case "disable2fa":
         m.vm.disableTfa();
         break;
+      case "removepasskeys":
+        m.vm.removePasskeys();
+        break;
       case "WorkOrderItemScheduledUserList":
         m.vm.$router.push({
           name: "svc-workorder-item-scheduled-users",
@@ -1021,6 +1048,12 @@ function generateMenu(vm) {
         key: FORM_KEY + ":sendreset",
         vm: vm
       });
+      menuOptions.menuItems.push({
+        title: "PasskeyRemoveAll",
+        icon: "$sockiFingerprint",
+        key: FORM_KEY + ":removepasskeys",
+        vm: vm
+      });
       if (vm.obj.twoFactorEnabled) {
         menuOptions.menuItems.push({
           title: "AuthDisableTwoFactor",
@@ -1067,6 +1100,7 @@ async function initForm(vm) {
 //
 async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
+    "PasskeyRemoveAll",
     "Vendor",
     "User",
     "UserSettings",

src/views/home-security.vue

@@ -65,12 +65,59 @@
               </v-card>
             </v-col>
           </template>
+          <!-- case 4678: passkeys -->
+          <v-col cols="12">
+            <v-card data-cy="passkeys" class="mx-auto my-6" max-width="600">
+              <v-card-title>{{ $sock.t("Passkeys") }}</v-card-title>
+              <v-card-subtitle>{{ $sock.t("PasskeyIntro") }}</v-card-subtitle>
+              <v-card-text>
+                <div v-if="!passkeySupported" class="warning--text mb-4">
+                  {{ $sock.t("PasskeyNotSupported") }}
+                </div>
+                <v-simple-table v-if="passkeys.length > 0" dense>
+                  <tbody>
+                    <tr v-for="k in passkeys" :key="k.id">
+                      <td>{{ k.name }}</td>
+                      <td class="text-caption">
+                        {{ $sock.t("PasskeyCreated") }}: {{ date(k.created) }}
+                        <br />
+                        {{ $sock.t("PasskeyLastUsed") }}: {{ date(k.lastUsed) }}
+                      </td>
+                      <td>
+                        <v-btn
+                          icon
+                          :title="$sock.t('PasskeyRemove')"
+                          @click="removePasskey(k)"
+                        >
+                          <v-icon small>$sockiTrashAlt</v-icon>
+                        </v-btn>
+                      </td>
+                    </tr>
+                  </tbody>
+                </v-simple-table>
+                <div v-else class="mb-2">{{ $sock.t("PasskeyNone") }}</div>
+                <template v-if="passkeySupported">
+                  <v-text-field
+                    v-model="passkeyName"
+                    dense
+                    class="mt-6"
+                    :label="$sock.t('PasskeyName')"
+                    data-cy="passkeyName"
+                  ></v-text-field>
+                  <v-btn color="primary" @click="addPasskey()">{{
+                    $sock.t("PasskeyAdd")
+                  }}</v-btn>
+                </template>
+              </v-card-text>
+            </v-card>
+          </v-col>
         </v-row>
       </v-form>
     </v-col>
   </v-row>
 </template>
 <script>
+import passkey from "../api/passkey";
 const FORM_KEY = "security";
 
 export default {
@@ -83,6 +130,9 @@ export default {
       },
       pin: null,
       tfaEnabled: window.$gz.store.state.tfaEnabled,
+      passkeys: [],
+      passkeyName: null,
+      passkeySupported: passkey.supported(),
       formState: {
         ready: false,
         dirty: false,
@@ -116,6 +166,7 @@ export default {
         readOnly: false
       });
       window.$gz.eventBus.$on("menu-click", clickHandler);
+      await vm.getPasskeys();
       //fetch tfa secret and display here if tfa not enabled currently
       if (!this.tfaEnabled) {
         const res = await window.$gz.api.get("auth/totp");
@@ -135,6 +186,71 @@ export default {
     window.$gz.eventBus.$off("menu-click", clickHandler);
   },
   methods: {
+    //case 4678
+    date(d) {
+      if (!d) {
+        return "-";
+      }
+      return window.$gz.locale.utcDateToShortDateAndTimeLocalized(
+        d,
+        window.$gz.locale.getResolvedTimeZoneName(),
+        window.$gz.locale.getResolvedLanguage(),
+        window.$gz.locale.getHour12()
+      );
+    },
+    async getPasskeys() {
+      const res = await window.$gz.api.get("auth/passkey");
+      if (!res.error) {
+        this.passkeys = res.data;
+      }
+    },
+    async addPasskey() {
+      const vm = this;
+      window.$gz.form.deleteAllErrorBoxErrors(vm);
+      try {
+        let res = await window.$gz.api.post(
+          "auth/passkey/register-options",
+          {}
+        );
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+          return;
+        }
+        const answer = await passkey.create(res.data.options);
+        res = await window.$gz.api.post("auth/passkey/register", {
+          id: res.data.id,
+          name: vm.passkeyName,
+          response: answer
+        });
+        if (res.error) {
+          vm.formState.serverError = res.error;
+          window.$gz.form.setErrorBoxErrors(vm);
+          return;
+        }
+        vm.passkeyName = null;
+        await vm.getPasskeys();
+      } catch (error) {
+        //the user closed the browser's passkey prompt
+        if (error.name == "NotAllowedError" || error.name == "AbortError") {
+          return;
+        }
+        window.$gz.errorHandler.handleFormError(error, vm);
+      }
+    },
+    async removePasskey(k) {
+      const vm = this;
+      if ((await window.$gz.dialog.confirmDelete()) != true) {
+        return;
+      }
+      const res = await window.$gz.api.remove(`auth/passkey/${k.id}`);
+      if (res.error) {
+        vm.formState.serverError = res.error;
+        window.$gz.form.setErrorBoxErrors(vm);
+      } else {
+        await vm.getPasskeys();
+      }
+    },
     form() {
       return window.$gz.form;
     },
@@ -260,6 +376,15 @@ async function fetchTranslatedText() {
   await window.$gz.translation.cacheTranslations([
     "AuthConnectAppTitle",
     "AuthConnectAppSubTitle",
+    "Passkeys",
+    "PasskeyIntro",
+    "PasskeyAdd",
+    "PasskeyName",
+    "PasskeyCreated",
+    "PasskeyLastUsed",
+    "PasskeyNone",
+    "PasskeyRemove",
+    "PasskeyNotSupported",
     "AuthConnectAppManualEntry",
     "AuthEnterPin",
     "AuthTwoFactor",

src/views/login.vue

@@ -126,6 +126,16 @@
                 >
                   <v-icon>$sockiSignIn</v-icon>
                 </v-btn>
+                <!-- case 4678: passkey sign-in, offered where the browser and page allow it -->
+                <v-btn
+                  v-if="passkeySupported"
+                  class="ml-4"
+                  aria-label="Passkey"
+                  data-cy="passkeybutton"
+                  @click="passkeyLogin()"
+                >
+                  <v-icon>$sockiFingerprint</v-icon>
+                </v-btn>
               </v-col>
             </v-row>
           </form>
@@ -183,6 +193,7 @@
 </template>
 <script>
 import { processLogin, processLogout } from "../api/authutil";
+import passkey from "../api/passkey";
 import sockeyeVersion from "../api/sockeye-version";
 export default {
   data() {
@@ -201,6 +212,7 @@ export default {
       tt: null,
       pinError: null,
       loggedInWithKnownPassword: false,
+      passkeySupported: passkey.supported(),
       hasSmallLogo: false,
       hasMediumLogo: false,
       hasLargeLogo: false,
@@ -380,6 +392,45 @@ export default {
       //move focus to password
       document.getElementsByName("password")[0].focus();
     },
+    //case 4678
+    async passkeyLogin() {
+      const vm = this;
+      vm.errorBadCreds = false;
+      vm.formState.errorBoxMessage = null;
+      try {
+        let res = await window.$gz.api.upsert(
+          "auth/passkey/login-options",
+          {},
+          true
+        );
+        if (res.error) {
+          throw new Error(window.$gz.errorHandler.errorToString(res, vm));
+        }
+        const answer = await passkey.get(res.data.options);
+        res = await window.$gz.api.upsert(
+          "auth/passkey/login",
+          { id: res.data.id, response: answer },
+          true
+        );
+        if (res.error) {
+          throw new Error(window.$gz.errorHandler.errorToString(res, vm));
+        }
+        await this.step2(res);
+      } catch (error) {
+        //the user closed the browser's passkey prompt
+        if (error.name == "NotAllowedError" || error.name == "AbortError") {
+          return;
+        }
+        if (
+          error.message &&
+          error.message.includes("ErrorUserNotAuthenticated")
+        ) {
+          vm.errorBadCreds = true;
+          return;
+        }
+        vm.formState.errorBoxMessage = error.message;
+      }
+    },
     async login() {
       const vm = this;