@authid/web-component 1.4.0 → 1.5.0

package/CHANGELOG.txt

@@ -1,3 +1,9 @@
-1.4.0
------
-CHANGED: removed loader graphics, user should provide own one while waiting for the 'load' event.
+1.5.0
+-----
+CHANGED: all dependencies are loaded by default unless disabled.
+CHANGED: component initialization issues are detected now.
+NEW: component emits "error" event, if loading error occurs.
+
+1.4.0
+-----
+CHANGED: removed loader graphics, user should provide own one while waiting for the 'load' event.

package/README.md

@@ -1,24 +1,24 @@
-
-# authID integration as a Web Component
-
-This [authID](https://authid.ai/) Web Component provides a convenient integration overlay. The overlay hovers over your website in desktop environment and occupies maximum space in mobile environment.
-
-This integration is the most universal one as it can be used with any frontend technology.
-
-## API
-
-* `authid-component` - a custom HTML component with the following attributes:
-    - `data-url` - required parameter with operation/transaction URL received from authID,
-    - `data-target` - force selection of either `mobile` or `desktop` integration variant, `auto` is the default.
-      *NOTE: this parameter is obsolete, and it has no effect at the moment.*
-    - `data-webauth="true"` - enable automatic handling of Passkey features.
-    - `data-control="true"` - enable advanced control features.
-
-## Example
-
-Please see `example.html` for full details.
-
-```html
-<script src="path-to/authid-web-component.js"></script>
-<authid-component data-url="https://id.authid.ai/?...."></authid-component>
-```
+
+# authID integration as a Web Component
+
+This [authID](https://authid.ai/) Web Component provides a convenient integration overlay. The overlay hovers over your website in desktop environment and occupies maximum space in mobile environment.
+
+This integration is the most universal one as it can be used with any frontend technology.
+
+## API
+
+* `authid-component` - a custom HTML component with the following attributes:
+    - `data-url` - required parameter with operation/transaction URL received from authID,
+    - `data-target` - force selection of either `mobile` or `desktop` integration variant, `auto` is the default.
+      *NOTE: this parameter is obsolete, and it has no effect at the moment.*
+    - `data-webauth="true"` - enable automatic handling of Passkey features.
+    - `data-control="true"` - enable advanced control features.
+
+## Example
+
+Please see `example.html` for full details.
+
+```html
+<script src="path-to/authid-web-component.js"></script>
+<authid-component data-url="https://id.authid.ai/?...."></authid-component>
+```

package/authid-web-component.js

@@ -1,85 +1,136 @@
-/**
- *    Copyright 2022-2023 authID.ai (Ipsidy, Inc.)
- *
- *   Licensed under the Apache License, Version 2.0 (the "License");
- *   you may not use this file except in compliance with the License.
- *   You may obtain a copy of the License at
-
- *       http://www.apache.org/licenses/LICENSE-2.0
-
- *   Unless required by applicable law or agreed to in writing, software
- *   distributed under the License is distributed on an "AS IS" BASIS,
- *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- *   See the License for the specific language governing permissions and
- *   limitations under the License.
- */
-class AuthIDComponent extends HTMLElement {
-    connectedCallback() {
-        const dataUrl = this.getAttribute('data-url');
-        if (!dataUrl) {
-            throw new Error('Missing data-url configuration!');
-        }
-
-        let dataTarget = this.getAttribute('data-target');
-
-        if (!dataTarget || dataTarget === 'auto') {
-            dataTarget = /Mobi|Android/i.test(navigator.userAgent) ? 'mobile' : 'desktop';
-        }
-
-        const iframe = document.createElement('iframe');
-        iframe.setAttribute('allow', 'fullscreen *;camera *;encrypted-media *;');
-        iframe.setAttribute('src', dataUrl);
-        
-        const styleNode = document.createElement('style');
-        styleNode.textContent = (
-            'div, iframe {' +
-              'position: fixed;' +
-              'top: 0;' +
-              'left: 0;' +
-              'height: 100vh;' +
-              'width: 100vw;' +
-              'border: 0;' +
-              'padding: 0;' +
-              'margin: 0;' +
-            '}'
-        );
-
-        const shadow = this.attachShadow({ mode: 'closed' });
-        shadow.appendChild(styleNode);
-        const container = document.createElement('div');
-        shadow.appendChild(container);
-
-        const dataWebauth = this.getAttribute('data-webauth');
-
-        if (dataWebauth && dataWebauth !== 'false' && dataWebauth !== 'no') {
-            const webauthHandler = document.createElement('script');
-            webauthHandler.setAttribute('src', dataUrl.replace('/?', '/webauthhandler.js?'));
-            shadow.appendChild(webauthHandler);
-        }
-
-        const dataControl = this.getAttribute('data-control');
-
-        if (dataControl && dataControl !== 'false' && dataControl !== 'no') {
-            const controlHandler = document.createElement('script');
-            controlHandler.setAttribute('src', dataUrl.replace('/?', '/controlhandler.js?'));
-            shadow.appendChild(controlHandler);
-        }
-
-        shadow.appendChild(iframe);
-
-        iframe.addEventListener('load', () => {
-            shadow.removeChild(container);
-
-            shadow.dispatchEvent(new CustomEvent('load', {
-                composed: true,
-                bubbles: true,
-            }));
-        }, { capture: true, once: true });
-
-        if (window.getComputedStyle(this)['z-index'] === 'auto') {
-            this.style['z-index'] = 1000;
-        }
-    }
-}
-
-window.customElements.define('authid-component', AuthIDComponent);
+/**
+ *    Copyright 2022-2023 authID.ai (Ipsidy, Inc.)
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License");
+ *   you may not use this file except in compliance with the License.
+ *   You may obtain a copy of the License at
+
+ *       http://www.apache.org/licenses/LICENSE-2.0
+
+ *   Unless required by applicable law or agreed to in writing, software
+ *   distributed under the License is distributed on an "AS IS" BASIS,
+ *   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *   See the License for the specific language governing permissions and
+ *   limitations under the License.
+ */
+class AuthIDComponent extends HTMLElement {
+    connectedCallback() {
+        const dataUrl = this.getAttribute('data-url');
+        if (!dataUrl) {
+            throw new Error('Missing data-url configuration!');
+        }
+
+        let dataTarget = this.getAttribute('data-target');
+
+        if (!dataTarget || dataTarget === 'auto') {
+            dataTarget = /Mobi|Android/i.test(navigator.userAgent) ? 'mobile' : 'desktop';
+        }
+
+        const iframe = document.createElement('iframe');
+        iframe.setAttribute('allow', 'fullscreen *;camera *;encrypted-media *;');
+        iframe.setAttribute('src', dataUrl);
+
+        const styleNode = document.createElement('style');
+        styleNode.textContent = (
+            'div, iframe {' +
+              'position: fixed;' +
+              'top: 0;' +
+              'left: 0;' +
+              'height: 100vh;' +
+              'width: 100vw;' +
+              'border: 0;' +
+              'padding: 0;' +
+              'margin: 0;' +
+            '}'
+        );
+
+        const shadow = this.attachShadow({ mode: 'closed' });
+        shadow.appendChild(styleNode);
+        const container = document.createElement('div');
+        shadow.appendChild(container);
+
+        const dataWebauth = this.getAttribute('data-webauth');
+        const dataControl = this.getAttribute('data-control');
+
+        const requiredDeps = [];
+        const loadedDeps = [];
+        let depFailed = false;
+
+        const tryAttachIframe = () => {
+            if (depFailed) return;
+            if (loadedDeps.length === requiredDeps.length) {
+                shadow.appendChild(iframe);
+            }
+        };
+
+        const onDepError = () => {
+            if (depFailed) return;
+            depFailed = true;
+            shadow.dispatchEvent(new CustomEvent('error', {
+                composed: true,
+                bubbles: true,
+                detail: { message: 'Dependency load failed.' },
+            }));
+        };
+
+        if (dataWebauth !== 'false' && dataWebauth !== 'no') {
+            requiredDeps.push('webauthhandler');
+            const webauthHandler = document.createElement('script');
+            webauthHandler.setAttribute('src', dataUrl.replace('/?', '/webauthhandler.js?'));
+            webauthHandler.onload = () => {
+                loadedDeps.push('webauthhandler');
+                tryAttachIframe();
+            };
+            webauthHandler.onerror = onDepError;
+            shadow.appendChild(webauthHandler);
+        }
+
+        if (dataControl !== 'false' && dataControl !== 'no') {
+            requiredDeps.push('controlhandler');
+            const controlHandler = document.createElement('script');
+            controlHandler.setAttribute('src', dataUrl.replace('/?', '/controlhandler.js?'));
+            controlHandler.onload = () => {
+                loadedDeps.push('controlhandler');
+                tryAttachIframe();
+            };
+            controlHandler.onerror = onDepError;
+            shadow.appendChild(controlHandler);
+        }
+
+        tryAttachIframe();
+
+        let wasInit = false;
+
+        const messageHandler = (event) => {
+            if (event.origin !== new URL(dataUrl).origin) return;
+            if (event.data && event.data.type === 'authid:init') {
+                wasInit = true;
+
+                shadow.dispatchEvent(new CustomEvent('load', {
+                    composed: true,
+                    bubbles: true,
+                }));
+            }
+        };
+
+        window.addEventListener('message', messageHandler);
+
+        iframe.addEventListener('load', () => {
+            setTimeout(() => {
+                if (!wasInit) {
+                    shadow.dispatchEvent(new CustomEvent('error', {
+                        composed: true,
+                        bubbles: true,
+                        detail: { message: 'Component initialization failed.' },
+                    }));
+                }
+            }, 1e3);
+        }, { capture: true, once: true });
+
+        if (window.getComputedStyle(this)['z-index'] === 'auto') {
+            this.style['z-index'] = 1000;
+        }
+    }
+}
+
+window.customElements.define('authid-component', AuthIDComponent);

package/eslint.config.mjs

@@ -0,0 +1,38 @@
+import { defineConfig } from "eslint/config";
+import globals from "globals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default defineConfig([{
+    extends: compat.extends("eslint:recommended"),
+
+    languageOptions: {
+        globals: {
+            ...globals.browser,
+            ENABLE_DEBUG: "readonly",
+            BUILD_ID: "readonly",
+        },
+
+        ecmaVersion: 6,
+        sourceType: "script",
+    },
+
+    rules: {
+        complexity: ["error", 25],
+
+        "no-unused-vars": ["error", {
+            argsIgnorePattern: "^_",
+            varsIgnorePattern: "^_",
+        }],
+    },
+}]);

package/example.html

@@ -1,20 +1,24 @@
-<html>
-<head>
-    <title>authID Web Component example</title>
-    <meta name="viewport" content="initial-scale=1,user-scalable=no">
-    <style>
-        body {
-            background-color: darkslateblue;
-        }
-    </style>
-    <script src="./authid-web-component.js"></script>
-</head>
-<body>
-    <authid-component data-url="https://id.authid.ai/?demo" data-webauth="true"></authid-component>
-    <script>
-        document.getElementsByTagName('authid-component')[0].addEventListener('load', function(){
-            console.log('Iframe has just loaded, the component is ready');
-        });
-    </script>
-</body>
-</html>
+<html>
+<head>
+    <title>authID Web Component example</title>
+    <meta name="viewport" content="initial-scale=1">
+    <style>
+        body {
+            background-color: darkslateblue;
+        }
+    </style>
+    <script src="./authid-web-component.js"></script>
+</head>
+<body>
+    <authid-component data-url="https://id.authid.ai/?demo"></authid-component>
+    <script>
+        document.getElementsByTagName('authid-component')[0].addEventListener('load', function(){
+            console.log('authID web component has just loaded.');
+        });
+
+        document.getElementsByTagName('authid-component')[0].addEventListener('error', function () {
+            alert('authID web component failed to load');
+        });
+    </script>
+</body>
+</html>

package/package.json

@@ -1,20 +1,20 @@
-{
-  "name": "@authid/web-component",
-  "version": "1.4.0",
-  "description": "authID integration as a Web Component",
-  "main": "authid-web-component.js",
-  "scripts": {
-    "test": "eslint --ext .js ."
-  },
-  "keywords": [
-    "authid",
-    "identity",
-    "authentication",
-    "kyc"
-  ],
-  "author": "authID Team <team@authid.ai>",
-  "license": "Apache-2.0",
-  "devDependencies": {
-    "eslint": "^8.36.0"
-  }
-}
+{
+  "name": "@authid/web-component",
+  "version": "1.5.0",
+  "description": "authID integration as a Web Component",
+  "main": "authid-web-component.js",
+  "scripts": {
+    "test": "eslint --ext .js . --ignore-pattern eslint.*"
+  },
+  "keywords": [
+    "authid",
+    "identity",
+    "authentication",
+    "kyc"
+  ],
+  "author": "authID Team <team@authid.ai>",
+  "license": "Apache-2.0",
+  "devDependencies": {
+    "eslint": "^9.39.1"
+  }
+}

package/.eslintrc.yml

@@ -1,15 +0,0 @@
-env:
-  browser: true
-extends: 'eslint:recommended'
-parserOptions:
-  ecmaVersion: 6
-rules: {
-  "complexity": ["error", 25],
-  "no-unused-vars": ["error", {
-    "argsIgnorePattern": "^_",
-    "varsIgnorePattern": "^_"
-  }],
-}
-globals:
-  ENABLE_DEBUG: readonly
-  BUILD_ID: readonly