@things-factory/auth-ui 7.0.1-rc.1 → 7.0.1-rc.10

package/client/auth-style-sign.ts

@@ -3,7 +3,8 @@ import { css } from 'lit'
 export const AUTH_STYLE_SIGN = css`
   :host {
     display: flex;
-    background-color: var(--auth-background, var(--md-sys-color-primary));
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
   }
 
   :host *:focus {

package/client/components/abstract-sign.ts

@@ -1,8 +1,8 @@
-import { html, nothing } from 'lit'
-import base64url from 'base64url'
-
 import '@operato/i18n/ox-i18n.js'
 
+import { html, nothing } from 'lit'
+import { startAuthentication } from '@simplewebauthn/browser'
+
 import { i18next } from '@operato/i18n'
 import { notify } from '@operato/layout'
 
@@ -85,84 +85,42 @@ export abstract class AbstractSign extends AbstractAuthPage {
           <ox-i18n msgid="field.${this.pageName}"> </ox-i18n>
         </md-elevated-button>
         ${isAvailableWebauthn
-          ? html` <md-icon class="fingerprint" raised @click=${e => this.signinWithAuthn()}> fingerprint </md-icon>`
+          ? html` <md-icon class="fingerprint" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`
           : nothing}
       </div>
     `
   }
 
-  async signinWithAuthn() {
-    const response = await fetch('/auth/signin-webauthn/challenge', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Accept: 'application/json'
-      },
-      credentials: 'include'
-    })
-
-    if (!response.ok) {
-      notify({
-        level: 'error',
-        message: await response.text()
-      })
-
-      return
-    }
-
-    const options = await response.json()
-    const credential = (await navigator.credentials.get({
-      publicKey: {
-        challenge: Buffer.from(options.challenge, 'base64')
-      }
-    })) as PublicKeyCredential
-
-    if (!credential) {
-      notify({
-        level: 'error',
-        message: 'can not get user credential'
-      })
-
-      return
-    }
-
-    const assertionResponse = {
-      id: credential.id,
-      response: {
-        clientDataJSON: base64url.encode(Buffer.from(credential.response.clientDataJSON)),
-        authenticatorData: base64url.encode((credential.response as any).authenticatorData),
-        signature: base64url.encode((credential.response as any).signature),
-        userHandle: (credential.response as any).userHandle
-          ? base64url.encode((credential.response as any).userHandle)
-          : null
+  async authenticateUser() {
+    try {
+      const options = await fetch('/auth/signin-webauthn/challenge').then(res => res.json())
+      const assertionResp = await startAuthentication(options)
+      const verification = await fetch('/auth/signin-webauthn', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
+        },
+        body: JSON.stringify(assertionResp)
+      }).then(res => res.json())
+
+      if (verification.verified) {
+        const { redirectURL } = verification
+  
+        if (redirectURL) {
+          window.location.href = redirectURL
+        }
+      } else {
+        notify({
+          level: 'error',
+          message: verification.message
+        })
       }
-    } as AssertionResponse
-
-    if (credential.authenticatorAttachment) {
-      assertionResponse.authenticatorAttachment = credential.authenticatorAttachment as AuthenticatorAttachment
-    }
-
-    const signinResponse = await fetch('/auth/signin-webauthn', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Accept: 'application/json'
-      },
-      body: JSON.stringify(assertionResponse),
-      credentials: 'include'
-    })
-
-    if (!signinResponse.ok) {
+  
+    } catch (error) {
       notify({
         level: 'error',
-        message: await signinResponse.text()
+        message: i18next.t('error.authn verification failed')
       })
-    } else {
-      const { redirectURL } = await signinResponse.json()
-
-      if (redirectURL) {
-        window.location.href = redirectURL
-      }
     }
   }
 }

package/client/components/profile-component.ts

@@ -7,6 +7,7 @@ import './my-login-history'
 import base64url from 'base64url'
 import { css, html, LitElement, nothing } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
+import { startRegistration } from '@simplewebauthn/browser'
 
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
@@ -164,7 +165,7 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
 
         ${isAvailableWebauthn
           ? html`
-              <md-text-button @click=${() => this.registerWebAuthn()}
+              <md-text-button @click=${() => this.registerUser()}
                 >${i18next.t('button.security-key registration')}</md-text-button
               >
             `
@@ -244,96 +245,35 @@ export class ProfileComponent extends localize(i18next)(LitElement) {
     })
   }
 
-  async registerWebAuthn() {
-    const challenge = await fetch('/auth/register-webauthn/challenge', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Accept: 'application/json'
-      },
-      body: JSON.stringify({ id: this.userId }),
-      credentials: 'include'
-    })
-
-    if (!challenge.ok) {
-      notify({
-        level: 'error',
-        message: await challenge.text()
-      })
-
-      return
-    }
-
-    const options = await challenge.json()
-
-    const credential = (await navigator.credentials.create({
-      publicKey: {
-        rp: {
-          name: this.applicationMeta.title
-        },
-        user: {
-          id: Uint8Array.from(base64url.toBuffer(options.user.id)).buffer,
-          name: options.user.name,
-          displayName: options.user.displayName
+  async registerUser() {
+    try {
+      const options = await fetch('/auth/register-webauthn/challenge').then(res => res.json())
+      const attResp = await startRegistration(options)
+      const verification = await fetch('/auth/verify-registration', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json'
         },
-        challenge: Uint8Array.from(atob(options.challenge), c => c.charCodeAt(0)),
-        pubKeyCredParams: [
-          {
-            type: 'public-key',
-            alg: -7 // ES256
-          },
-          {
-            type: 'public-key',
-            alg: -257 // RS256
-          }
-        ],
-        authenticatorSelection: {
-          userVerification: 'preferred'
-        }
+        body: JSON.stringify(attResp)
+      }).then(res => res.json())
+
+      if (verification.verified) {
+        notify({
+          level: 'info',
+          message: i18next.t('text.user credential registered successfully')
+        })
+      } else {
+        console.error(await verification.text())
+
+        notify({
+          level: 'error',
+          message: i18next.t('error.user credential registeration not allowed')
+        })
       }
-    })) as PublicKeyCredential
-
-    if (!credential) {
+    } catch (error) {
       notify({
         level: 'error',
-        message: 'can not get user credential'
-      })
-
-      return
-    }
-
-    const response = credential.response as AuthenticatorAttestationResponse
-
-    var body = {
-      response: {
-        clientDataJSON: Buffer.from(response.clientDataJSON).toString('base64'),
-        attestationObject: Buffer.from(response.attestationObject).toString('base64')
-      } as any
-    }
-
-    if (response.getTransports) {
-      body.response.transports = response.getTransports()
-    }
-
-    const signinResponse = await fetch('/auth/signin-webauthn', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        Accept: 'application/json'
-      },
-      body: JSON.stringify(body),
-      credentials: 'include'
-    })
-
-    if (!signinResponse.ok) {
-      notify({
-        level: 'error',
-        message: await signinResponse.text()
-      })
-    } else {
-      notify({
-        level: 'info',
-        message: i18next.t('text.user credential registered successfully')
+        message: i18next.t('error.user credential registeration failed')
       })
     }
   }

package/client/entries/auth/activate.ts

@@ -20,7 +20,8 @@ export class AuthActivate extends localize(i18next)(LitElement) {
         width: 100vw;
         height: 100vh;
         height: 100dvh;
-        background-color: var(--auth-background, var(--md-sys-color-primary));
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
       }
 
       .wrap {

package/client/entries/auth/checkin.ts

@@ -21,12 +21,14 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         display: flex;
         flex-direction: column;
         margin: auto;
-        background-color: var(--auth-background, var(--md-sys-color-primary));
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
         height: 100vh;
         height: 100dvh;
       }
       .header {
         background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
         height: var(--checkin-header-height);
       }
       .content {
@@ -38,6 +40,7 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         margin: var(--margin-wide) 0;
         padding: 0;
         background-color: var(--md-sys-color-surface);
+        color: var(--md-sys-color-on-surface);
         border-radius: var(--border-radius);
         border: var(--border-dim-color);
         list-style: none;
@@ -47,13 +50,13 @@ export class AuthCheckIn extends localize(i18next)(LitElement) {
         margin-bottom: -1px;
         padding: var(--padding-default) var(--padding-wide);
         font-size: 18px;
-        color: var(--md-sys-color-secondary);
         text-align: left;
 
         cursor: pointer;
       }
       li:hover {
         background-color: var(--md-sys-color-primary-container);
+        color: var(--md-sys-color-on-primary-container);
       }
       li span {
         display: block;

package/client/entries/auth/result.ts

@@ -18,7 +18,8 @@ export class AuthResult extends localize(i18next)(LitElement) {
         width: 100vw;
         height: 100vh;
         height: 100dvh;
-        background-color: var(--auth-background, var(--md-sys-color-primary));
+        background-color: var(--md-sys-color-primary);
+        color: var(--md-sys-color-on-primary);
       }
       .wrap {
         display: block;

package/dist-client/auth-style-sign.js

@@ -2,7 +2,8 @@ import { css } from 'lit';
 export const AUTH_STYLE_SIGN = css `
   :host {
     display: flex;
-    background-color: var(--auth-background, var(--md-sys-color-primary));
+    background-color: var(--md-sys-color-primary);
+    color: var(--md-sys-color-on-primary);
   }
 
   :host *:focus {

package/dist-client/auth-style-sign.js.map

@@ -1 +1 @@
-{"version":3,"file":"auth-style-sign.js","sourceRoot":"","sources":["../client/auth-style-sign.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4LjC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const AUTH_STYLE_SIGN = css`\n  :host {\n    display: flex;\n    background-color: var(--auth-background, var(--md-sys-color-primary));\n  }\n\n  :host *:focus {\n    outline: none;\n  }\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n  .wrap {\n    display: block;\n    width: 450px;\n    min-width: 350px;\n    margin: 0 auto;\n    padding-bottom: 100px;\n    text-align: center;\n  }\n\n  .auth-brand {\n    color: var(--md-sys-color-on-primary);\n  }\n\n  .auth-brand img {\n    margin: 15% auto 5px auto;\n    width: 100px;\n    border: 3px solid var(--md-sys-color-on-primary);\n    border-radius: 25px;\n    box-shadow: var(--box-shadow);\n  }\n  .name {\n    display: block;\n    font: var(--auth-brand-name);\n    text-shadow: var(--auth-brand-name-shadow);\n  }\n  .auth-brand .welcome-msg {\n    font: var(--auth-brand-welcome-msg);\n  }\n  .auth-form {\n    display: grid;\n    grid-gap: var(--margin-default);\n    grid-template-columns: 1fr 1fr;\n  }\n\n  form {\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-gap: var(--margin-default);\n    align-items: center;\n  }\n\n  h3 {\n    grid-column: 1 / -1;\n    margin: 50px 0 0 0;\n    font: var(--auth-title-font);\n    color: var(--auth-title-color, var(--md-sys-color-on-primary));\n    text-transform: uppercase;\n  }\n\n  .field {\n    grid-column: 1 / -1;\n    text-align: left;\n  }\n\n  .submit-buttons-container {\n    grid-column: 1 / -1;\n    text-align: center;\n\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .fingerprint {\n    color: var(--md-sys-color-on-primary);\n    border: 1.5px solid var(--md-sys-color-on-primary);\n    border-radius: 20%;\n    width: 36px;\n    height: 36px;\n  }\n\n  .field md-filled-text-field {\n    grid-column: 1 / -1;\n    width: 100%;\n  }\n\n  md-text-button,\n  md-elevated-button {\n    grid-column: 1 / -1;\n    flex: 1;\n  }\n\n  .wrap .link {\n    text-decoration: none;\n    justify-self: flex-start;\n  }\n\n  .wrap .link md-text-button {\n    --md-text-button-label-text-color: var(--md-sys-color-on-primary);\n    --md-text-button-focus-label-text-color: var(--md-sys-color-on-primary);\n    --md-text-button-hover-label-text-color: var(--md-sys-color-on-primary);\n  }\n\n  .wrap .link md-icon {\n    color: var(--md-sys-color-on-primary);\n  }\n\n  #locale-area {\n    display: flex;\n    grid-column: 1 / -1;\n    padding: 0 var(--padding-default);\n  }\n\n  #locale-area > label {\n    display: flex;\n    align-items: center;\n    color: var(--md-sys-color-on-primary);\n    --md-icon-size: 16px;\n  }\n\n  #locale-selector {\n    font-size: 16px;\n    width: 100%;\n  }\n\n  #locale-selector {\n    --i18n-selector-field-border: none;\n    --i18n-selector-field-background-color: none;\n    --i18n-selector-field-font-size: 14px;\n    --i18n-selector-field-color: var(--md-sys-color-on-primary);\n  }\n\n  .lottie-container {\n    width: 100%;\n    height: 300px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    pointer-events: none;\n  }\n  .lottie-container lottie-player {\n    position: absolute;\n    bottom: -6%;\n    width: 100%;\n    height: auto;\n  }\n\n  @media (max-width: 450px) {\n    .wrap {\n      width: 85%;\n      min-width: 320px;\n    }\n    .auth-form {\n      grid-template-columns: 1fr;\n    }\n    .auth-brand img {\n      margin: 12% auto 5px auto;\n      width: 75px;\n    }\n    h3 {\n      margin: 15px 0 0 0;\n    }\n    .lottie-container {\n      overflow: hidden;\n      height: 200px;\n      pointer-events: none;\n    }\n    .lottie-container lottie-player {\n      width: 1200px;\n      left: -30%;\n    }\n  }\n\n  @media screen and (min-width: 1400px) {\n    .wrap {\n      padding-bottom: 150px;\n    }\n  }\n  @media screen and (min-width: 2500px) {\n    .wrap {\n      padding-bottom: 280px;\n    }\n  }\n`\n"]}
+{"version":3,"file":"auth-style-sign.js","sourceRoot":"","sources":["../client/auth-style-sign.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6LjC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const AUTH_STYLE_SIGN = css`\n  :host {\n    display: flex;\n    background-color: var(--md-sys-color-primary);\n    color: var(--md-sys-color-on-primary);\n  }\n\n  :host *:focus {\n    outline: none;\n  }\n\n  :host * {\n    box-sizing: border-box;\n  }\n\n  .wrap {\n    display: block;\n    width: 450px;\n    min-width: 350px;\n    margin: 0 auto;\n    padding-bottom: 100px;\n    text-align: center;\n  }\n\n  .auth-brand {\n    color: var(--md-sys-color-on-primary);\n  }\n\n  .auth-brand img {\n    margin: 15% auto 5px auto;\n    width: 100px;\n    border: 3px solid var(--md-sys-color-on-primary);\n    border-radius: 25px;\n    box-shadow: var(--box-shadow);\n  }\n  .name {\n    display: block;\n    font: var(--auth-brand-name);\n    text-shadow: var(--auth-brand-name-shadow);\n  }\n  .auth-brand .welcome-msg {\n    font: var(--auth-brand-welcome-msg);\n  }\n  .auth-form {\n    display: grid;\n    grid-gap: var(--margin-default);\n    grid-template-columns: 1fr 1fr;\n  }\n\n  form {\n    grid-column: 1 / -1;\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-gap: var(--margin-default);\n    align-items: center;\n  }\n\n  h3 {\n    grid-column: 1 / -1;\n    margin: 50px 0 0 0;\n    font: var(--auth-title-font);\n    color: var(--auth-title-color, var(--md-sys-color-on-primary));\n    text-transform: uppercase;\n  }\n\n  .field {\n    grid-column: 1 / -1;\n    text-align: left;\n  }\n\n  .submit-buttons-container {\n    grid-column: 1 / -1;\n    text-align: center;\n\n    display: flex;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .fingerprint {\n    color: var(--md-sys-color-on-primary);\n    border: 1.5px solid var(--md-sys-color-on-primary);\n    border-radius: 20%;\n    width: 36px;\n    height: 36px;\n  }\n\n  .field md-filled-text-field {\n    grid-column: 1 / -1;\n    width: 100%;\n  }\n\n  md-text-button,\n  md-elevated-button {\n    grid-column: 1 / -1;\n    flex: 1;\n  }\n\n  .wrap .link {\n    text-decoration: none;\n    justify-self: flex-start;\n  }\n\n  .wrap .link md-text-button {\n    --md-text-button-label-text-color: var(--md-sys-color-on-primary);\n    --md-text-button-focus-label-text-color: var(--md-sys-color-on-primary);\n    --md-text-button-hover-label-text-color: var(--md-sys-color-on-primary);\n  }\n\n  .wrap .link md-icon {\n    color: var(--md-sys-color-on-primary);\n  }\n\n  #locale-area {\n    display: flex;\n    grid-column: 1 / -1;\n    padding: 0 var(--padding-default);\n  }\n\n  #locale-area > label {\n    display: flex;\n    align-items: center;\n    color: var(--md-sys-color-on-primary);\n    --md-icon-size: 16px;\n  }\n\n  #locale-selector {\n    font-size: 16px;\n    width: 100%;\n  }\n\n  #locale-selector {\n    --i18n-selector-field-border: none;\n    --i18n-selector-field-background-color: none;\n    --i18n-selector-field-font-size: 14px;\n    --i18n-selector-field-color: var(--md-sys-color-on-primary);\n  }\n\n  .lottie-container {\n    width: 100%;\n    height: 300px;\n    position: absolute;\n    left: 0;\n    bottom: 0;\n    pointer-events: none;\n  }\n  .lottie-container lottie-player {\n    position: absolute;\n    bottom: -6%;\n    width: 100%;\n    height: auto;\n  }\n\n  @media (max-width: 450px) {\n    .wrap {\n      width: 85%;\n      min-width: 320px;\n    }\n    .auth-form {\n      grid-template-columns: 1fr;\n    }\n    .auth-brand img {\n      margin: 12% auto 5px auto;\n      width: 75px;\n    }\n    h3 {\n      margin: 15px 0 0 0;\n    }\n    .lottie-container {\n      overflow: hidden;\n      height: 200px;\n      pointer-events: none;\n    }\n    .lottie-container lottie-player {\n      width: 1200px;\n      left: -30%;\n    }\n  }\n\n  @media screen and (min-width: 1400px) {\n    .wrap {\n      padding-bottom: 150px;\n    }\n  }\n  @media screen and (min-width: 2500px) {\n    .wrap {\n      padding-bottom: 280px;\n    }\n  }\n`\n"]}

package/dist-client/components/abstract-sign.d.ts

@@ -4,5 +4,5 @@ export declare abstract class AbstractSign extends AbstractAuthPage {
     submit(): Promise<void>;
     updated(changed: any): void;
     get formfields(): import("lit-html").TemplateResult<1>;
-    signinWithAuthn(): Promise<void>;
+    authenticateUser(): Promise<void>;
 }

package/dist-client/components/abstract-sign.js

@@ -1,6 +1,6 @@
-import { html, nothing } from 'lit';
-import base64url from 'base64url';
 import '@operato/i18n/ox-i18n.js';
+import { html, nothing } from 'lit';
+import { startAuthentication } from '@simplewebauthn/browser';
 import { i18next } from '@operato/i18n';
 import { notify } from '@operato/layout';
 import { AbstractAuthPage } from './abstract-auth-page.js';
@@ -66,75 +66,41 @@ export class AbstractSign extends AbstractAuthPage {
           <ox-i18n msgid="field.${this.pageName}"> </ox-i18n>
         </md-elevated-button>
         ${isAvailableWebauthn
-            ? html ` <md-icon class="fingerprint" raised @click=${e => this.signinWithAuthn()}> fingerprint </md-icon>`
+            ? html ` <md-icon class="fingerprint" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`
             : nothing}
       </div>
     `;
     }
-    async signinWithAuthn() {
-        const response = await fetch('/auth/signin-webauthn/challenge', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json'
-            },
-            credentials: 'include'
-        });
-        if (!response.ok) {
-            notify({
-                level: 'error',
-                message: await response.text()
-            });
-            return;
-        }
-        const options = await response.json();
-        const credential = (await navigator.credentials.get({
-            publicKey: {
-                challenge: Buffer.from(options.challenge, 'base64')
+    async authenticateUser() {
+        try {
+            const options = await fetch('/auth/signin-webauthn/challenge').then(res => res.json());
+            const assertionResp = await startAuthentication(options);
+            const verification = await fetch('/auth/signin-webauthn', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json'
+                },
+                body: JSON.stringify(assertionResp)
+            }).then(res => res.json());
+            if (verification.verified) {
+                const { redirectURL } = verification;
+                if (redirectURL) {
+                    window.location.href = redirectURL;
+                }
             }
-        }));
-        if (!credential) {
-            notify({
-                level: 'error',
-                message: 'can not get user credential'
-            });
-            return;
-        }
-        const assertionResponse = {
-            id: credential.id,
-            response: {
-                clientDataJSON: base64url.encode(Buffer.from(credential.response.clientDataJSON)),
-                authenticatorData: base64url.encode(credential.response.authenticatorData),
-                signature: base64url.encode(credential.response.signature),
-                userHandle: credential.response.userHandle
-                    ? base64url.encode(credential.response.userHandle)
-                    : null
+            else {
+                notify({
+                    level: 'error',
+                    message: verification.message
+                });
             }
-        };
-        if (credential.authenticatorAttachment) {
-            assertionResponse.authenticatorAttachment = credential.authenticatorAttachment;
         }
-        const signinResponse = await fetch('/auth/signin-webauthn', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                Accept: 'application/json'
-            },
-            body: JSON.stringify(assertionResponse),
-            credentials: 'include'
-        });
-        if (!signinResponse.ok) {
+        catch (error) {
             notify({
                 level: 'error',
-                message: await signinResponse.text()
+                message: i18next.t('error.authn verification failed')
             });
         }
-        else {
-            const { redirectURL } = await signinResponse.json();
-            if (redirectURL) {
-                window.location.href = redirectURL;
-            }
-        }
     }
 }
 //# sourceMappingURL=abstract-sign.js.map

package/dist-client/components/abstract-sign.js.map

@@ -1 +1 @@
-{"version":3,"file":"abstract-sign.js","sourceRoot":"","sources":["../../client/components/abstract-sign.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, nothing } from 'lit'\nimport base64url from 'base64url'\n\nimport '@operato/i18n/ox-i18n.js'\n\nimport { i18next } from '@operato/i18n'\nimport { notify } from '@operato/layout'\n\nimport { AbstractAuthPage } from './abstract-auth-page.js'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n\ninterface AssertionResponse {\n  id: string\n  rawId?: number[]\n  response: {\n    authenticatorData: string\n    clientDataJSON: string\n    signature: string\n    userHandle: string | null\n  }\n  type: PublicKeyCredentialType\n  authenticatorAttachment?: AuthenticatorAttachment\n}\n\nexport abstract class AbstractSign extends AbstractAuthPage {\n  async submit() {\n    this.formEl.submit()\n  }\n\n  updated(changed) {\n    super.updated(changed)\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          level: 'error',\n          timer: -1\n        })\n      }\n    }\n  }\n\n  get formfields() {\n    const email = this.data?.email || ''\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"email\"\n          type=\"email\"\n          label=${String(i18next.t('field.email'))}\n          required\n          .value=${email}\n          autocomplete=\"username\"\n          autocapitalize=\"off\"\n          @input=${(e: Event) => {\n            const target = e.target as HTMLInputElement\n            if (target.validity.typeMismatch) {\n              target.setCustomValidity(i18next.t('text.invalid-email'))\n            } else {\n              target.setCustomValidity('')\n            }\n          }}\n          ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n        >\n      </div>\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=\"current-password\"\n          required\n          ><md-icon slot=\"leading-icon\">vpn_key</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <div class=\"submit-buttons-container\">\n        <md-elevated-button class=\"submit-button\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n          <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n        </md-elevated-button>\n        ${isAvailableWebauthn\n          ? html` <md-icon class=\"fingerprint\" raised @click=${e => this.signinWithAuthn()}> fingerprint </md-icon>`\n          : nothing}\n      </div>\n    `\n  }\n\n  async signinWithAuthn() {\n    const response = await fetch('/auth/signin-webauthn/challenge', {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        Accept: 'application/json'\n      },\n      credentials: 'include'\n    })\n\n    if (!response.ok) {\n      notify({\n        level: 'error',\n        message: await response.text()\n      })\n\n      return\n    }\n\n    const options = await response.json()\n    const credential = (await navigator.credentials.get({\n      publicKey: {\n        challenge: Buffer.from(options.challenge, 'base64')\n      }\n    })) as PublicKeyCredential\n\n    if (!credential) {\n      notify({\n        level: 'error',\n        message: 'can not get user credential'\n      })\n\n      return\n    }\n\n    const assertionResponse = {\n      id: credential.id,\n      response: {\n        clientDataJSON: base64url.encode(Buffer.from(credential.response.clientDataJSON)),\n        authenticatorData: base64url.encode((credential.response as any).authenticatorData),\n        signature: base64url.encode((credential.response as any).signature),\n        userHandle: (credential.response as any).userHandle\n          ? base64url.encode((credential.response as any).userHandle)\n          : null\n      }\n    } as AssertionResponse\n\n    if (credential.authenticatorAttachment) {\n      assertionResponse.authenticatorAttachment = credential.authenticatorAttachment as AuthenticatorAttachment\n    }\n\n    const signinResponse = await fetch('/auth/signin-webauthn', {\n      method: 'POST',\n      headers: {\n        'Content-Type': 'application/json',\n        Accept: 'application/json'\n      },\n      body: JSON.stringify(assertionResponse),\n      credentials: 'include'\n    })\n\n    if (!signinResponse.ok) {\n      notify({\n        level: 'error',\n        message: await signinResponse.text()\n      })\n    } else {\n      const { redirectURL } = await signinResponse.json()\n\n      if (redirectURL) {\n        window.location.href = redirectURL\n      }\n    }\n  }\n}\n"]}
+{"version":3,"file":"abstract-sign.js","sourceRoot":"","sources":["../../client/components/abstract-sign.ts"],"names":[],"mappings":"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","sourcesContent":["import '@operato/i18n/ox-i18n.js'\n\nimport { html, nothing } from 'lit'\nimport { startAuthentication } from '@simplewebauthn/browser'\n\nimport { i18next } from '@operato/i18n'\nimport { notify } from '@operato/layout'\n\nimport { AbstractAuthPage } from './abstract-auth-page.js'\n\nconst isAvailableWebauthn = 'PublicKeyCredential' in window\n\ninterface AssertionResponse {\n  id: string\n  rawId?: number[]\n  response: {\n    authenticatorData: string\n    clientDataJSON: string\n    signature: string\n    userHandle: string | null\n  }\n  type: PublicKeyCredentialType\n  authenticatorAttachment?: AuthenticatorAttachment\n}\n\nexport abstract class AbstractSign extends AbstractAuthPage {\n  async submit() {\n    this.formEl.submit()\n  }\n\n  updated(changed) {\n    super.updated(changed)\n\n    if (changed.has('message')) {\n      if (!this.message) {\n        this.hideSnackbar()\n      } else {\n        this.showSnackbar({\n          level: 'error',\n          timer: -1\n        })\n      }\n    }\n  }\n\n  get formfields() {\n    const email = this.data?.email || ''\n\n    return html`\n      <input id=\"redirectTo\" type=\"hidden\" name=\"redirectTo\" .value=${this.redirectTo || '/'} />\n\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"email\"\n          type=\"email\"\n          label=${String(i18next.t('field.email'))}\n          required\n          .value=${email}\n          autocomplete=\"username\"\n          autocapitalize=\"off\"\n          @input=${(e: Event) => {\n            const target = e.target as HTMLInputElement\n            if (target.validity.typeMismatch) {\n              target.setCustomValidity(i18next.t('text.invalid-email'))\n            } else {\n              target.setCustomValidity('')\n            }\n          }}\n          ><md-icon slot=\"leading-icon\">mail</md-icon></md-filled-text-field\n        >\n      </div>\n      <div class=\"field\">\n        <md-filled-text-field\n          name=\"password\"\n          type=\"password\"\n          label=${String(i18next.t('field.password'))}\n          autocomplete=\"current-password\"\n          required\n          ><md-icon slot=\"leading-icon\">vpn_key</md-icon></md-filled-text-field\n        >\n      </div>\n\n      <div class=\"submit-buttons-container\">\n        <md-elevated-button class=\"submit-button\" type=\"submit\" raised @click=${e => this._onSubmit(e)}>\n          <ox-i18n msgid=\"field.${this.pageName}\"> </ox-i18n>\n        </md-elevated-button>\n        ${isAvailableWebauthn\n          ? html` <md-icon class=\"fingerprint\" raised @click=${e => this.authenticateUser()}> fingerprint </md-icon>`\n          : nothing}\n      </div>\n    `\n  }\n\n  async authenticateUser() {\n    try {\n      const options = await fetch('/auth/signin-webauthn/challenge').then(res => res.json())\n      const assertionResp = await startAuthentication(options)\n      const verification = await fetch('/auth/signin-webauthn', {\n        method: 'POST',\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        body: JSON.stringify(assertionResp)\n      }).then(res => res.json())\n\n      if (verification.verified) {\n        const { redirectURL } = verification\n  \n        if (redirectURL) {\n          window.location.href = redirectURL\n        }\n      } else {\n        notify({\n          level: 'error',\n          message: verification.message\n        })\n      }\n  \n    } catch (error) {\n      notify({\n        level: 'error',\n        message: i18next.t('error.authn verification failed')\n      })\n    }\n  }\n}\n"]}

package/dist-client/components/profile-component.d.ts

@@ -23,7 +23,7 @@ export declare class ProfileComponent extends ProfileComponent_base {
     onLocaleChanged(value: any): Promise<void>;
     openLoginHistory(): void;
     deleteUser(): void;
-    registerWebAuthn(): Promise<void>;
+    registerUser(): Promise<void>;
     get applicationMeta(): {
         icon: string;
         title: string;