jwtbutler 1.9.2 → 1.9.4

package/README.md

@@ -62,6 +62,29 @@ const api = new jwtbutler({
 });
 ```
 
+if your auth server uses [hCaptcha](https://www.hcaptcha.com), \
+add the public sitekey:
+
+```js
+const api = new jwtbutler({
+    /* ... */
+    captcha: {
+        provider: 'hcaptcha',
+        sitekey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
+    }
+});
+```
+
+if your auth server uses passkeys and you want to show \
+the passkey button in the default login form, enable it:
+
+```js
+const api = new jwtbutler({
+    /* ... */
+    passkeys: true
+});
+```
+
 ### single sign on
 
 if you want to use sso, add all pages to the configuration object:

package/_js/_build/script.js

@@ -5,9 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("core-js/modules/es.array-buffer.constructor.js");
+require("core-js/modules/es.array-buffer.slice.js");
 require("core-js/modules/es.json.stringify.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.string.replace.js");
+require("core-js/modules/es.typed-array.uint8-array.js");
+require("core-js/modules/es.typed-array.fill.js");
+require("core-js/modules/es.typed-array.set.js");
+require("core-js/modules/es.typed-array.sort.js");
 require("core-js/modules/esnext.iterator.constructor.js");
 require("core-js/modules/esnext.iterator.for-each.js");
+require("core-js/modules/esnext.typed-array.at.js");
 require("whatwg-fetch");
 var _helpers = _interopRequireDefault(require("./_helpers"));
 // use fetch
@@ -17,6 +26,12 @@ class jwtbutler {
     if (!('auth_login' in config)) {
       config.auth_login = 'email';
     }
+    if (!('captcha' in config)) {
+      config.captcha = false;
+    }
+    if (!('passkeys' in config)) {
+      config.passkeys = false;
+    }
     this.config = config;
   }
   isLoggedIn() {
@@ -62,6 +77,124 @@ class jwtbutler {
       });
     });
   }
+  passkeyRegister() {
+    return new Promise((resolve, reject) => {
+      if (this.isLoggedIn() === false || !('credentials' in navigator)) {
+        reject();
+        return;
+      }
+      this.addLoadingState('logging-in');
+      fetch(this.config.auth_server + '/passkey-register-options', {
+        method: 'POST',
+        headers: {
+          'content-type': 'application/json',
+          Authorization: 'Bearer ' + _helpers.default.cookieGet('access_token')
+        },
+        cache: 'no-cache'
+      }).then(res => res.json()).catch(error => error).then(response => {
+        if (response === undefined || response === null || response.success !== true) {
+          this.removeLoadingStates();
+          reject(response);
+          return;
+        }
+        let publicKey = this.passkeyPublicKeyFromJson(response.data.publicKey);
+        navigator.credentials.create({
+          publicKey: publicKey
+        }).then(credential => {
+          if (credential === null) {
+            this.removeLoadingStates();
+            reject();
+            return;
+          }
+          fetch(this.config.auth_server + '/passkey-register', {
+            method: 'POST',
+            body: JSON.stringify({
+              credential: this.passkeyCredentialToJson(credential)
+            }),
+            headers: {
+              'content-type': 'application/json',
+              Authorization: 'Bearer ' + _helpers.default.cookieGet('access_token')
+            },
+            cache: 'no-cache'
+          }).then(res => res.json()).catch(error => error).then(response => {
+            this.removeLoadingStates();
+            if (response !== undefined && response !== null && response.success === true) {
+              resolve(response);
+            } else {
+              reject(response);
+            }
+          });
+        }).catch(error => {
+          this.removeLoadingStates();
+          reject(error);
+        });
+      });
+    });
+  }
+  passkeyLogin() {
+    let login = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    return new Promise((resolve, reject) => {
+      if (!('credentials' in navigator)) {
+        reject();
+        return;
+      }
+      this.addLoadingState('logging-in');
+      let body = {};
+      if (login !== null && login !== '') {
+        body[this.config.auth_login] = login;
+      }
+      fetch(this.config.auth_server + '/passkey-login-options', {
+        method: 'POST',
+        body: JSON.stringify(body),
+        headers: {
+          'content-type': 'application/json'
+        },
+        cache: 'no-cache'
+      }).then(res => res.json()).catch(error => error).then(response => {
+        if (response === undefined || response === null || response.success !== true) {
+          this.removeLoadingStates();
+          reject(response);
+          return;
+        }
+        let publicKey = this.passkeyPublicKeyFromJson(response.data.publicKey);
+        navigator.credentials.get({
+          publicKey: publicKey
+        }).then(credential => {
+          if (credential === null) {
+            this.removeLoadingStates();
+            reject();
+            return;
+          }
+          fetch(this.config.auth_server + '/passkey-login', {
+            method: 'POST',
+            body: JSON.stringify({
+              credential: this.passkeyCredentialToJson(credential)
+            }),
+            headers: {
+              'content-type': 'application/json'
+            },
+            cache: 'no-cache'
+          }).then(res => res.json()).catch(error => error).then(response => {
+            if (response !== undefined && response !== null && response.success === true) {
+              this.setCookies(response.data.access_token).then(() => {
+                this.removeLoadingStates();
+                resolve(response);
+              }).catch(error => {
+                this.removeLoadingStates();
+                reject(error);
+              });
+            } else {
+              this.removeLoadingStates();
+              reject(response);
+            }
+          });
+        }).catch(error => {
+          this.removeLoadingStates();
+          reject(error);
+        });
+      });
+    });
+  }
   login() {
     return new Promise((resolve, reject) => {
       if (_helpers.default.cookieGet('access_token') !== null) {
@@ -265,20 +398,30 @@ class jwtbutler {
   renderLoginFormWithPromise() {
     return new Promise((resolve, reject) => {
       this.buildUpLoginFormHtml();
-      this.bindLoginFormSubmit().then(() => {
-        resolve();
+      this.captchaRender().then(() => {
+        this.bindLoginFormSubmit().then(() => {
+          resolve();
+        }).catch(error => {
+          reject(error);
+        });
+        this.triggerLoginFormRenderedEvent();
       }).catch(error => {
         reject(error);
       });
-      this.triggerLoginFormRenderedEvent();
     });
   }
   buildUpLoginFormHtml() {
     if (!('login_form' in this.config) || this.config.login_form == '') {
-      this.config.login_form = "<div class=\"login-form\">\n                <div class=\"login-form__inner\">\n                    <form class=\"login-form__form\">\n                        <ul class=\"login-form__items\">\n                            <li class=\"login-form__item\">\n                                <label class=\"login-form__label login-form__label--".concat(this.config.auth_login, "\" for=\"login-form__label--").concat(this.config.auth_login, "\">").concat(this.config.auth_login === 'email' ? 'E-Mail-Adresse' : this.config.auth_login === 'username' ? 'Benutzername' : this.config.auth_login, "</label>\n                                <input class=\"login-form__input login-form__input--").concat(this.config.auth_login, "\" id=\"login-form__label--").concat(this.config.auth_login, "\" type=\"text\" required=\"required\" autocomplete=\"").concat(this.config.auth_login, "\" name=\"").concat(this.config.auth_login, "\" />\n                            </li>\n                            <li class=\"login-form__item\">\n                                <label class=\"login-form__label login-form__label--password\" for=\"login-form__label--password\">Passwort</label>\n                                <input class=\"login-form__input login-form__input--password\" id=\"login-form__label--password\" type=\"password\" required=\"required\" autocomplete=\"current-password\" name=\"password\" />\n                            </li>\n                            <li class=\"login-form__item\">\n                                <input class=\"login-form__submit\" type=\"submit\" value=\"Anmelden\" />\n                            </li>\n                        </ul>\n                    </form>\n                </div>\n            </div>");
+      this.config.login_form = "<div class=\"login-form\">\n                <div class=\"login-form__inner\">\n                    <form class=\"login-form__form\">\n                        <ul class=\"login-form__items\">\n                            <li class=\"login-form__item\">\n                                <label class=\"login-form__label login-form__label--".concat(this.config.auth_login, "\" for=\"login-form__label--").concat(this.config.auth_login, "\">").concat(this.config.auth_login === 'email' ? 'E-Mail-Adresse' : this.config.auth_login === 'username' ? 'Benutzername' : this.config.auth_login, "</label>\n                                <input class=\"login-form__input login-form__input--").concat(this.config.auth_login, "\" id=\"login-form__label--").concat(this.config.auth_login, "\" type=\"text\" required=\"required\" autocomplete=\"").concat(this.config.auth_login, "\" name=\"").concat(this.config.auth_login, "\" />\n                            </li>\n                            <li class=\"login-form__item\">\n                                <label class=\"login-form__label login-form__label--password\" for=\"login-form__label--password\">Passwort</label>\n                                <input class=\"login-form__input login-form__input--password\" id=\"login-form__label--password\" type=\"password\" required=\"required\" autocomplete=\"current-password\" name=\"password\" />\n                            </li>\n                            ").concat(this.captchaEnabled() ? "<li class=\"login-form__item\">\n                                <div class=\"login-form__captcha\"></div>\n                            </li>" : '', "\n                            <li class=\"login-form__item\">\n                                <input class=\"login-form__submit\" type=\"submit\" value=\"Anmelden\" />\n                            </li>\n                            ").concat(this.passkeyEnabled() ? "<li class=\"login-form__item\">\n                                <button class=\"login-form__passkey\" type=\"button\">Mit Passkey anmelden</button>\n                            </li>" : '', "\n                        </ul>\n                    </form>\n                </div>\n            </div>");
     }
     let dom = new DOMParser().parseFromString(this.config.login_form, 'text/html').body.childNodes[0];
     this.config.login_form_class = dom.getAttribute('class').split(' ')[0];
+    if (this.captchaEnabled() && dom.querySelector('.' + this.config.login_form_class + '__captcha') === null) {
+      let submit = dom.querySelector('input[type="submit"]');
+      if (submit !== null && submit.closest('li') !== null) {
+        submit.closest('li').insertAdjacentHTML('beforebegin', '<li class="' + this.config.login_form_class + '__item"><div class="' + this.config.login_form_class + '__captcha"></div></li>');
+      }
+    }
     _helpers.default.remove(document.querySelector('.' + this.config.login_form_class));
     this.addLoadingState('login-form-visible');
     let parent = document.body;
@@ -292,6 +435,91 @@ class jwtbutler {
       this.config.login_form_rendered(document.querySelector('.' + this.config.login_form_class));
     }
   }
+  captchaEnabled() {
+    return this.config.captcha !== false && typeof this.config.captcha === 'object' && (!('provider' in this.config.captcha) || this.config.captcha.provider === 'hcaptcha') && 'sitekey' in this.config.captcha && this.config.captcha.sitekey !== '';
+  }
+  passkeyEnabled() {
+    return this.config.passkeys !== false;
+  }
+  captchaRender() {
+    return new Promise((resolve, reject) => {
+      if (!this.captchaEnabled()) {
+        resolve();
+        return;
+      }
+      this.captchaLoad().then(() => {
+        let captcha = document.querySelector('.' + this.config.login_form_class + '__captcha');
+        if (captcha === null) {
+          resolve();
+          return;
+        }
+        if (captcha.getAttribute('data-widget-id') !== null) {
+          resolve();
+          return;
+        }
+        captcha.setAttribute('data-widget-id', window.hcaptcha.render(captcha, {
+          sitekey: this.config.captcha.sitekey
+        }));
+        resolve();
+      }).catch(error => {
+        reject(error);
+      });
+    });
+  }
+  captchaLoad() {
+    return new Promise((resolve, reject) => {
+      if (!this.captchaEnabled() || 'hcaptcha' in window) {
+        resolve();
+        return;
+      }
+      if (document.querySelector('script[data-jwtbutler-hcaptcha]') !== null) {
+        document.querySelector('script[data-jwtbutler-hcaptcha]').addEventListener('load', () => resolve());
+        document.querySelector('script[data-jwtbutler-hcaptcha]').addEventListener('error', error => reject(error));
+        return;
+      }
+      let script = document.createElement('script');
+      script.setAttribute('src', 'https://js.hcaptcha.com/1/api.js?render=explicit');
+      script.setAttribute('async', 'async');
+      script.setAttribute('defer', 'defer');
+      script.setAttribute('data-jwtbutler-hcaptcha', 'true');
+      script.addEventListener('load', () => resolve());
+      script.addEventListener('error', error => reject(error));
+      document.head.appendChild(script);
+    });
+  }
+  captchaToken(form) {
+    return new Promise((resolve, reject) => {
+      if (!this.captchaEnabled()) {
+        resolve(null);
+        return;
+      }
+      let captcha = form.querySelector('.' + this.config.login_form_class + '__captcha');
+      if (captcha === null || !('hcaptcha' in window)) {
+        reject({
+          public_message: 'Captcha nicht erfolgreich'
+        });
+        return;
+      }
+      let token = window.hcaptcha.getResponse(captcha.getAttribute('data-widget-id'));
+      if (token === '') {
+        reject({
+          public_message: 'Captcha nicht erfolgreich'
+        });
+        return;
+      }
+      resolve(token);
+    });
+  }
+  captchaReset(form) {
+    if (!this.captchaEnabled() || !('hcaptcha' in window)) {
+      return;
+    }
+    let captcha = form.querySelector('.' + this.config.login_form_class + '__captcha');
+    if (captcha === null || captcha.getAttribute('data-widget-id') === null) {
+      return;
+    }
+    window.hcaptcha.reset(captcha.getAttribute('data-widget-id'));
+  }
   bindLoginFormSubmit() {
     return new Promise((resolve, reject) => {
       let dom = document.querySelector('.' + this.config.login_form_class),
@@ -302,17 +530,23 @@ class jwtbutler {
           form.querySelector('input[type="submit"]').disabled = true;
         }
         _helpers.default.remove(dom.querySelector('.' + this.config.login_form_class + '__error'));
-        fetch(this.config.auth_server + '/login', {
-          method: 'POST',
-          body: JSON.stringify({
-            [this.config.auth_login]: form.querySelector('input[name="' + this.config.auth_login + '"]').value,
-            password: form.querySelector('input[name="password"]').value
-          }),
-          headers: {
-            'content-type': 'application/json'
-          },
-          cache: 'no-cache'
-        }).then(res => res.json()).catch(err => err).then(response => {
+        let body = {
+          [this.config.auth_login]: form.querySelector('input[name="' + this.config.auth_login + '"]').value,
+          password: form.querySelector('input[name="password"]').value
+        };
+        this.captchaToken(form).then(captchaToken => {
+          if (captchaToken !== null) {
+            body['h-captcha-response'] = captchaToken;
+          }
+          return fetch(this.config.auth_server + '/login', {
+            method: 'POST',
+            body: JSON.stringify(body),
+            headers: {
+              'content-type': 'application/json'
+            },
+            cache: 'no-cache'
+          });
+        }).then(res => res.json()).catch(error => error).then(response => {
           if (form.querySelector('input[type="submit"]') !== null) {
             form.querySelector('input[type="submit"]').disabled = false;
           }
@@ -325,13 +559,94 @@ class jwtbutler {
               reject(error);
             });
           } else {
-            form.insertAdjacentHTML('afterbegin', '<div class="' + this.config.login_form_class + '__error">' + response.public_message + '</div>');
+            this.removeLoadingStates();
+            this.captchaReset(form);
+            form.insertAdjacentHTML('afterbegin', '<div class="' + this.config.login_form_class + '__error">' + (response !== undefined && response !== null && 'public_message' in response ? response.public_message : 'Nicht erfolgreich') + '</div>');
           }
         });
         e.preventDefault();
       }, false);
+      if (form.querySelector('.' + this.config.login_form_class + '__passkey') !== null) {
+        form.querySelector('.' + this.config.login_form_class + '__passkey').addEventListener('click', e => {
+          this.addLoadingState('logging-in');
+          _helpers.default.remove(dom.querySelector('.' + this.config.login_form_class + '__error'));
+          let login = null;
+          if (form.querySelector('input[name="' + this.config.auth_login + '"]') !== null) {
+            login = form.querySelector('input[name="' + this.config.auth_login + '"]').value;
+          }
+          this.passkeyLogin(login).then(() => {
+            _helpers.default.remove(document.querySelector('.' + this.config.login_form_class));
+            this.removeLoadingStates();
+            resolve();
+          }).catch(response => {
+            this.removeLoadingStates();
+            form.insertAdjacentHTML('afterbegin', '<div class="' + this.config.login_form_class + '__error">' + (response !== undefined && response !== null && 'public_message' in response ? response.public_message : 'Nicht erfolgreich') + '</div>');
+          });
+          e.preventDefault();
+        }, false);
+      }
     });
   }
+  passkeyPublicKeyFromJson(publicKey) {
+    publicKey.challenge = this.passkeyBase64UrlToBuffer(publicKey.challenge);
+    if ('user' in publicKey && 'id' in publicKey.user) {
+      publicKey.user.id = this.passkeyBase64UrlToBuffer(publicKey.user.id);
+    }
+    if ('excludeCredentials' in publicKey) {
+      publicKey.excludeCredentials.forEach(credential => {
+        credential.id = this.passkeyBase64UrlToBuffer(credential.id);
+      });
+    }
+    if ('allowCredentials' in publicKey) {
+      publicKey.allowCredentials.forEach(credential => {
+        credential.id = this.passkeyBase64UrlToBuffer(credential.id);
+      });
+    }
+    return publicKey;
+  }
+  passkeyCredentialToJson(credential) {
+    let response = {
+      clientDataJSON: this.passkeyBufferToBase64Url(credential.response.clientDataJSON)
+    };
+    if ('attestationObject' in credential.response) {
+      response.attestationObject = this.passkeyBufferToBase64Url(credential.response.attestationObject);
+      if (typeof credential.response.getTransports === 'function') {
+        response.transports = credential.response.getTransports();
+      }
+    }
+    if ('authenticatorData' in credential.response) {
+      response.authenticatorData = this.passkeyBufferToBase64Url(credential.response.authenticatorData);
+      response.signature = this.passkeyBufferToBase64Url(credential.response.signature);
+      response.userHandle = !('userHandle' in credential.response) || credential.response.userHandle === null ? null : this.passkeyBufferToBase64Url(credential.response.userHandle);
+    }
+    return {
+      id: credential.id,
+      rawId: this.passkeyBufferToBase64Url(credential.rawId),
+      type: credential.type,
+      response: response,
+      clientExtensionResults: credential.getClientExtensionResults()
+    };
+  }
+  passkeyBase64UrlToBuffer(value) {
+    let base64 = value.replace(/-/g, '+').replace(/_/g, '/');
+    while (base64.length % 4 !== 0) {
+      base64 += '=';
+    }
+    let binary = atob(base64),
+      bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) {
+      bytes[i] = binary.charCodeAt(i);
+    }
+    return bytes.buffer;
+  }
+  passkeyBufferToBase64Url(buffer) {
+    let binary = '',
+      bytes = new Uint8Array(buffer);
+    for (let i = 0; i < bytes.byteLength; i++) {
+      binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/g, '');
+  }
   addLoadingState(state) {
     document.documentElement.classList.add('jwtbutler-' + state);
     if (state === 'logging-in' || state === 'logging-out') {

package/package.json

@@ -22,19 +22,19 @@
         "dev": "cross-env NODE_ENV=development npm-run-all --parallel js:watch js:tests:watch copy:watch"
     },
     "dependencies": {
-        "@babel/cli": "^7.28.6",
-        "@babel/core": "^7.29.0",
+        "@babel/cli": "^7.29.7",
+        "@babel/core": "^7.29.7",
         "@babel/plugin-proposal-class-properties": "^7.18.6",
         "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
         "@babel/plugin-proposal-optional-chaining": "^7.21.0",
         "@babel/plugin-proposal-private-methods": "^7.18.6",
-        "@babel/plugin-transform-runtime": "^7.29.0",
+        "@babel/plugin-transform-runtime": "^7.29.7",
         "@babel/polyfill": "^7.12.1",
-        "@babel/preset-env": "^7.29.5",
-        "@babel/preset-react": "^7.28.5",
-        "@babel/runtime": "^7.29.2",
+        "@babel/preset-env": "^7.29.7",
+        "@babel/preset-react": "^7.29.7",
+        "@babel/runtime": "^7.29.7",
         "@prettier/plugin-php": "^0.25.0",
-        "auto-changelog": "^2.5.1",
+        "auto-changelog": "^2.6.0",
         "autoprefixer": "^10.5.0",
         "babel-jest": "30.4.1",
         "babel-plugin-array-includes": "^2.0.3",
@@ -49,11 +49,11 @@
         "dotenv": "^17.4.2",
         "element-closest": "^3.0.2",
         "env-cmd": "^11.0.0",
-        "eslint": "^10.4.0",
+        "eslint": "^10.4.1",
         "exit": "^0.1.2",
         "from-env": "^1.1.4",
         "highlight.js": "^11.11.1",
-        "hlp": "^3.8.1",
+        "hlp": "^3.8.4",
         "ismobilejs": "^1.1.1",
         "jest": "30.4.2",
         "jest-cli": "30.4.2",
@@ -61,13 +61,13 @@
         "mdn-polyfills": "^5.20.0",
         "move-file-cli": "^3.0.0",
         "ncp": "^2.0.0",
-        "npm-check-updates": "^22.2.0",
+        "npm-check-updates": "^22.2.1",
         "npm-run-all": "^4.1.5",
         "onchange": "^7.1.0",
         "postcss": "^8.5.15",
         "postcss-cli": "^11.0.1",
         "prettier": "^3.8.3",
-        "puppeteer": "^25.0.4",
+        "puppeteer": "^25.1.0",
         "regenerator-runtime": "^0.14.1",
         "replace-in-file": "^8.4.0",
         "run-sequence": "^2.2.1",
@@ -81,7 +81,7 @@
         "jest-environment-node": "30.4.1"
     },
     "name": "jwtbutler",
-    "version": "1.9.2",
+    "version": "1.9.4",
     "description": "",
     "main": "_js/_build/script.js",
     "files": [