@gataca/qr 3.0.0 → 3.0.7

package/dist/collection/components/gataca-ssibutton/gataca-ssibutton.js

@@ -1,13 +1,20 @@
 import { h, } from "@stencil/core";
 import "../gataca-qrdisplay/gataca-qrdisplay";
+import { RESULT_STATUS } from "../../utils/utils";
 const PHONE_ICON = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHvSURBVHgB3ZZPTttAFMbfe3YjL7qYLopcpZXSG7Q3CDfIsqrSJpyg5QQtJ2h7glgUdVs4AeEE5AYEQSDAgtnw357Hm0hAQDaeIRFCfFKyeKPxzzPzvc+DUKCZN80GEv1ABgWOQgSdGbOwv7u0nDueV4zjTzUIKhuAZna4vdQFR828azbI0K/TI/qodaLvjlP+tLDGDCs+IKv9Lbsi7kcv0w9541Q0EREPYcoieEQ9KiyECRXHzbpBUOcnYTfPFOOaaGVx9WsLiDrSIp0iU0wFNgIx/AQyc9I/OmOjy+Y8aBvHQcDUYebewc6/Xtk8J5htcg5efEPGhk0JtqkyBjo7DuZcnuO2sqCyKv8rUDmfTS9IBURqBAL+I6CkzBjOMOs22TLY21n8fl17KzXR3uDvb/CQk0GEdfvN07QvpnAOaGfYaRT25JzU6+rnG2tTpcWAy+Cp0m3U/URLms8HWfg/rn6RFaGSs9KQkZMpvGBWNs2Vandt46ac6YNBuc0fDLMaOU5DFybQ8039p/KJ4bq4rwPewtqoM/1gsCm/NfBXvWjgHhhuDAeLyd3qVSifHQULeZkou9EqemLhmUmav8qrZ4GEMGA7ivzjKvfeqGptFV2YdWPMPHHq0cCh3DdpVdLl/XCY9J1gVvbCiWa6N+JLocPFjCsx9cAAAAAASUVORK5CYII=";
+//Default values
+const DEFAULT_SESSION_TIMEOUT = 300; //5mins as in connect
+const DEFAULT_POLLING_FREQ = 3;
 export class GatacaSSIButton {
   constructor() {
     this.buttonText = "Easy login";
+    this.autostart = true;
     this.checkStatus = undefined;
     this.createSession = undefined;
     this.successCallback = undefined;
     this.errorCallback = undefined;
+    this.handleCheckAppLoading = undefined;
+    this.checkAppTimeout = 6;
     this.qrRole = undefined;
     this.callbackServer = undefined;
     this.sessionTimeout = undefined;
@@ -34,7 +41,11 @@ export class GatacaSSIButton {
     this.waitingStartSessionLabel = "waiting to start a session";
     this.hideQrModalDescription = false;
     this.open = false;
-    this.qr = (h("gataca-qr", { checkStatus: this.checkStatus, createSession: this.createSession, successCallback: this.successCallback, errorCallback: this.errorCallback, qrRole: this.qrRole, callbackServer: this.callbackServer, sessionTimeout: this.sessionTimeout, pollingFrequency: this.pollingFrequency, autostart: true, autorefresh: this.autorefresh, v: this.v, qrModalTitle: this.qrModalTitle, qrModalDescription: this.qrModalDescription, hideBrandTitle: this.hideBrandTitle, dynamicLink: this.dynamicLink, logoSize: this.logoSize, logoSrc: this.logoSrc, modalTitleColor: this.modalTitleColor, qrCodeExpiredLabel: this.qrCodeExpiredLabel, credentialsNotValidatedLabel: this.credentialsNotValidatedLabel, clickInsideBoxLabel: this.clickInsideBoxLabel, refreshQrLabel: this.refreshQrLabel, scanQrLabel: this.scanQrLabel, userNotScanInTimeErrorLabel: this.userNotScanInTimeErrorLabel, credsNotValidatedErrorLabel: this.credsNotValidatedErrorLabel, failedLoginErrorLabel: this.failedLoginErrorLabel, successLoginLabel: this.successLoginLabel, byBrandLabel: this.byBrandLabel, waitingStartSessionLabel: this.waitingStartSessionLabel, hideQrModalDescription: this.hideQrModalDescription }));
+    this.sessionId = undefined;
+    this.authenticationRequest = undefined;
+    this.sessionData = undefined;
+    this.result = RESULT_STATUS.NOT_STARTED;
+    this.qr = (h("gataca-qr", { ref: (el) => (this.qrElement = el), checkStatus: this.checkStatus, createSession: this.createSession, successCallback: this.successCallback, errorCallback: this.errorCallback, qrRole: this.qrRole, callbackServer: this.callbackServer, sessionTimeout: this.sessionTimeout, pollingFrequency: this.pollingFrequency, autostart: this.autostart, autorefresh: this.autorefresh, v: this.v, qrModalTitle: this.qrModalTitle, qrModalDescription: this.qrModalDescription, hideBrandTitle: this.hideBrandTitle, dynamicLink: this.dynamicLink, logoSize: this.logoSize, logoSrc: this.logoSrc, modalTitleColor: this.modalTitleColor, qrCodeExpiredLabel: this.qrCodeExpiredLabel, credentialsNotValidatedLabel: this.credentialsNotValidatedLabel, clickInsideBoxLabel: this.clickInsideBoxLabel, refreshQrLabel: this.refreshQrLabel, scanQrLabel: this.scanQrLabel, userNotScanInTimeErrorLabel: this.userNotScanInTimeErrorLabel, credsNotValidatedErrorLabel: this.credsNotValidatedErrorLabel, failedLoginErrorLabel: this.failedLoginErrorLabel, successLoginLabel: this.successLoginLabel, byBrandLabel: this.byBrandLabel, waitingStartSessionLabel: this.waitingStartSessionLabel, hideQrModalDescription: this.hideQrModalDescription }));
   }
   /**
    * Retrieve manually the session data on a successful login
@@ -42,22 +53,195 @@ export class GatacaSSIButton {
   async getSessionData() {
     return this.qr.getSessionData();
   }
+  async getSessionId() {
+    if (this.sessionId) {
+      return this.sessionId;
+    }
+    let { sessionId, authenticationRequest } = await this.createSession();
+    this.sessionId = sessionId;
+    this.authenticationRequest = authenticationRequest;
+    return this.sessionId;
+  }
+  /**
+   * Force manually the start polling
+   */
+  async startMobilePolling() {
+    await this.getSessionId();
+    this.result = RESULT_STATUS.ONGOING;
+    this.poll()
+      .then((data) => {
+      this.result = RESULT_STATUS.SUCCESS;
+      this.sessionData = data;
+      this.gatacaLoginCompleted.emit(data);
+      this.successCallback(data);
+    })
+      .catch((err) => {
+      this.clean();
+      let expired = err === RESULT_STATUS.EXPIRED;
+      if (expired && this.autorefresh) {
+        this.startMobilePolling();
+      }
+      else {
+        if (err !== RESULT_STATUS.NOT_STARTED) {
+          let error = expired
+            ? new Error(this.userNotScanInTimeErrorLabel)
+            : new Error(this.credsNotValidatedErrorLabel);
+          this.result = err;
+          this.gatacaLoginFailed.emit(error);
+          this.errorCallback(error);
+        }
+      }
+    });
+  }
+  /**
+   * Stop manually an ongoing session
+   */
+  async stop() {
+    this.clean();
+    if (this.result === RESULT_STATUS.ONGOING || RESULT_STATUS.READ) {
+      this.result = RESULT_STATUS.NOT_STARTED;
+    }
+  }
+  clean() {
+    this.sessionData = undefined;
+    this.sessionId = undefined;
+  }
   renderModal() {
     return this.qr;
   }
-  renderButton() {
+  async poll() {
+    let endTime = new Date().getTime() +
+      (this.sessionTimeout || DEFAULT_SESSION_TIMEOUT) * 1000;
+    let interval = (this.pollingFrequency || DEFAULT_POLLING_FREQ) * 1000;
+    let checkFunc = async (component) => {
+      if (component.result === RESULT_STATUS.NOT_STARTED) {
+        return { result: RESULT_STATUS.NOT_STARTED };
+      }
+      let id = await component.getSessionId();
+      return component.checkStatus(id);
+    };
+    let component = this;
+    let checkCondition = async function (resolve, reject) {
+      // If the condition is met, we're done!
+      let { result, data } = await checkFunc(component);
+      switch (result) {
+        case RESULT_STATUS.SUCCESS:
+          resolve(data);
+          break;
+        case RESULT_STATUS.READ:
+          component.result = RESULT_STATUS.READ;
+        case RESULT_STATUS.ONGOING:
+          if (component.sessionTimeout > 0 && new Date().getTime() < endTime) {
+            setTimeout(checkCondition, interval, resolve, reject);
+          }
+          else {
+            reject(RESULT_STATUS.EXPIRED);
+          }
+          break;
+        default:
+          reject(result);
+          break;
+      }
+    };
+    return new Promise(checkCondition);
+  }
+  isAppInstalled(appScheme, callback) {
+    let timeout;
+    let detected = false;
+    if (appScheme === null || appScheme === void 0 ? void 0 : appScheme.length) {
+      window.location.href = appScheme;
+    }
+    const waitTimeToCheckApp = this.checkAppTimeout * 1000;
+    timeout = setTimeout(() => {
+      if (!detected) {
+        callback(false);
+      }
+      cleanup();
+    }, waitTimeToCheckApp);
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        detected = true;
+        callback(true);
+        this.startMobilePolling();
+        cleanup();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    function cleanup() {
+      clearTimeout(timeout);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    }
+  }
+  renderDesktopButton() {
     return (h("div", { class: "gatacaButtonWrapper" }, h("button", { class: "gatacaButton", onClick: () => {
         this.open = !this.open;
-        if (this.open) {
-          this.qr.display();
-        }
-        else {
-          this.qr.stop();
-        }
+        setTimeout(() => {
+          var _a, _b;
+          if (this.open) {
+            (_a = this.qrElement) === null || _a === void 0 ? void 0 : _a.display();
+          }
+          else {
+            (_b = this.qrElement) === null || _b === void 0 ? void 0 : _b.stop();
+          }
+        }, 0);
       } }, h("img", { src: PHONE_ICON, class: "buttonImg", alt: this.buttonText }), h("span", null, this.buttonText))));
   }
+  async getAuthRequest() {
+    let { authenticationRequest } = await this.createSession();
+    return authenticationRequest;
+  }
+  renderMobileButton(isAndroid, isIos) {
+    if (this.autostart) {
+      this.startMobilePolling();
+    }
+    let loading = false;
+    const handleLoading = (isLoading) => {
+      loading = isLoading;
+      if (this.handleCheckAppLoading) {
+        this.handleCheckAppLoading(isLoading);
+      }
+    };
+    const executeRedirection = async () => {
+      handleLoading(true);
+      const androidStoreLink = "https://play.google.com/store/apps/details?id=com.gataca.identity";
+      const iosStoreLink = "https://apps.apple.com/us/app/gataca/id1498607616";
+      try {
+        const appScheme = await this.getAuthRequest();
+        this.isAppInstalled(appScheme, (installed) => {
+          if (!installed) {
+            this.stop();
+            if (isAndroid) {
+              window.location.href = androidStoreLink;
+            }
+            else if (isIos) {
+              window.location.href = iosStoreLink;
+            }
+          }
+          handleLoading(false);
+        });
+      }
+      catch (error) {
+        this.stop();
+        handleLoading(false);
+      }
+    };
+    return (h("div", { class: "gatacaButtonWrapper" }, h("button", { class: "gatacaButton", onClick: () => {
+        executeRedirection();
+      }, disabled: loading }, h("img", { src: PHONE_ICON, class: "buttonImg", alt: this.buttonText }), h("span", null, this.buttonText))));
+  }
   render() {
-    return (h("div", { class: "buttonContainer" }, this.renderButton(), this.open && this.renderModal()));
+    const userAgent = 
+    // @ts-ignore
+    (navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) || (navigator === null || navigator === void 0 ? void 0 : navigator.vendor) || (window === null || window === void 0 ? void 0 : window.opera);
+    const isAndroid = /android/i.test(userAgent);
+    const isIos = 
+    // @ts-ignore
+    (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) ||
+      (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+    const isMobile = isAndroid || isIos;
+    return (h("div", { class: "buttonContainer" }, isMobile && this.v === "3"
+      ? this.renderMobileButton(isAndroid, isIos)
+      : this.renderDesktopButton(), this.open && (!isMobile || this.v === "3") && this.renderModal()));
   }
   static get is() { return "gataca-ssibutton"; }
   static get encapsulation() { return "shadow"; }
@@ -91,6 +275,24 @@ export class GatacaSSIButton {
         "reflect": false,
         "defaultValue": "\"Easy login\""
       },
+      "autostart": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nSet to start polling when button or QR is displayed. By default it is true"
+        },
+        "attribute": "autostart",
+        "reflect": false,
+        "defaultValue": "true"
+      },
       "checkStatus": {
         "type": "unknown",
         "mutable": false,
@@ -171,6 +373,40 @@ export class GatacaSSIButton {
         },
         "defaultValue": "undefined"
       },
+      "handleCheckAppLoading": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "(isCheckingApp?: boolean) => void",
+          "resolved": "(isCheckingApp?: boolean) => void",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nFunction that runs every time the loading state changes while checking if the App is installed. Only on mobile with v3."
+        },
+        "defaultValue": "undefined"
+      },
+      "checkAppTimeout": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "_[Optional]_\nMaximum time window to check if the App is installed"
+        },
+        "attribute": "check-app-timeout",
+        "reflect": false,
+        "defaultValue": "6"
+      },
       "qrRole": {
         "type": "string",
         "mutable": false,
@@ -620,7 +856,11 @@ export class GatacaSSIButton {
   }
   static get states() {
     return {
-      "open": {}
+      "open": {},
+      "sessionId": {},
+      "authenticationRequest": {},
+      "sessionData": {},
+      "result": {}
     };
   }
   static get events() {
@@ -673,6 +913,42 @@ export class GatacaSSIButton {
           "text": "Retrieve manually the session data on a successful login",
           "tags": []
         }
+      },
+      "startMobilePolling": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "RESULT_STATUS": {
+              "location": "import",
+              "path": "../../utils/utils"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Force manually the start polling",
+          "tags": []
+        }
+      },
+      "stop": {
+        "complexType": {
+          "signature": "() => Promise<void>",
+          "parameters": [],
+          "references": {
+            "Promise": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "Stop manually an ongoing session",
+          "tags": []
+        }
       }
     };
   }

package/dist/components/gataca-ssibutton2.js

@@ -1,10 +1,14 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { d as defineCustomElement$1 } from './gataca-qrdisplay2.js';
+import { R as RESULT_STATUS } from './gat-icon-alert.js';
 import { d as defineCustomElement$2 } from './gataca-qr2.js';
 
 const gatacaSsibuttonCss = "@import url(\"https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400&display=swap\"); html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:\"\";content:none}table{border-collapse:collapse;border-spacing:0}.img-fluid{height:auto;max-width:50%}img{margin-left:auto;margin-right:auto}.buttonContainer{display:inline-block;text-align:right;padding:10px;position:relative}.gatacaButtonWrapper{margin:8px}.gatacaButtonWrapper .gatacaButton{display:flex;min-width:100px;padding:8px 8px;background-color:white;font-size:12px;font-family:\"Work Sans\", sans-serif;letter-spacing:1px;font-weight:2;justify-content:space-between;align-items:center;border-radius:6px;border:1px solid rgba(24, 27, 94, 0.5);color:rgba(24, 27, 94, 0.8);box-shadow:0px 1px 3px rgba(48, 48, 48, 0.15);cursor:pointer}.gatacaButtonWrapper .gatacaButton>span{margin-right:10px}.gatacaButtonWrapper .gatacaButton:hover{box-shadow:0px 2px 8px rgba(48, 48, 48, 0.1)}.gatacaButtonWrapper .buttonText{text-align:right;font-size:8px;color:rgba(24, 27, 94, 0.5);font-family:\"Helvetica Neue\", sans-serif;letter-spacing:1px;padding-right:8px;font-weight:1}.gatacaButtonWrapper .buttonImg{height:25px;width:25px;margin:0;margin-right:20px}";
 
 const PHONE_ICON = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABsAAAAbCAYAAACN1PRVAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAHvSURBVHgB3ZZPTttAFMbfe3YjL7qYLopcpZXSG7Q3CDfIsqrSJpyg5QQtJ2h7glgUdVs4AeEE5AYEQSDAgtnw357Hm0hAQDaeIRFCfFKyeKPxzzPzvc+DUKCZN80GEv1ABgWOQgSdGbOwv7u0nDueV4zjTzUIKhuAZna4vdQFR828azbI0K/TI/qodaLvjlP+tLDGDCs+IKv9Lbsi7kcv0w9541Q0EREPYcoieEQ9KiyECRXHzbpBUOcnYTfPFOOaaGVx9WsLiDrSIp0iU0wFNgIx/AQyc9I/OmOjy+Y8aBvHQcDUYebewc6/Xtk8J5htcg5efEPGhk0JtqkyBjo7DuZcnuO2sqCyKv8rUDmfTS9IBURqBAL+I6CkzBjOMOs22TLY21n8fl17KzXR3uDvb/CQk0GEdfvN07QvpnAOaGfYaRT25JzU6+rnG2tTpcWAy+Cp0m3U/URLms8HWfg/rn6RFaGSs9KQkZMpvGBWNs2Vandt46ac6YNBuc0fDLMaOU5DFybQ8039p/KJ4bq4rwPewtqoM/1gsCm/NfBXvWjgHhhuDAeLyd3qVSifHQULeZkou9EqemLhmUmav8qrZ4GEMGA7ivzjKvfeqGptFV2YdWPMPHHq0cCh3DdpVdLl/XCY9J1gVvbCiWa6N+JLocPFjCsx9cAAAAAASUVORK5CYII=";
+//Default values
+const DEFAULT_SESSION_TIMEOUT = 300; //5mins as in connect
+const DEFAULT_POLLING_FREQ = 3;
 const GatacaSSIButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
   constructor() {
     super();
@@ -13,10 +17,13 @@ const GatacaSSIButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.gatacaLoginCompleted = createEvent(this, "gatacaLoginCompleted", 7);
     this.gatacaLoginFailed = createEvent(this, "gatacaLoginFailed", 7);
     this.buttonText = "Easy login";
+    this.autostart = true;
     this.checkStatus = undefined;
     this.createSession = undefined;
     this.successCallback = undefined;
     this.errorCallback = undefined;
+    this.handleCheckAppLoading = undefined;
+    this.checkAppTimeout = 6;
     this.qrRole = undefined;
     this.callbackServer = undefined;
     this.sessionTimeout = undefined;
@@ -43,7 +50,11 @@ const GatacaSSIButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     this.waitingStartSessionLabel = "waiting to start a session";
     this.hideQrModalDescription = false;
     this.open = false;
-    this.qr = (h("gataca-qr", { checkStatus: this.checkStatus, createSession: this.createSession, successCallback: this.successCallback, errorCallback: this.errorCallback, qrRole: this.qrRole, callbackServer: this.callbackServer, sessionTimeout: this.sessionTimeout, pollingFrequency: this.pollingFrequency, autostart: true, autorefresh: this.autorefresh, v: this.v, qrModalTitle: this.qrModalTitle, qrModalDescription: this.qrModalDescription, hideBrandTitle: this.hideBrandTitle, dynamicLink: this.dynamicLink, logoSize: this.logoSize, logoSrc: this.logoSrc, modalTitleColor: this.modalTitleColor, qrCodeExpiredLabel: this.qrCodeExpiredLabel, credentialsNotValidatedLabel: this.credentialsNotValidatedLabel, clickInsideBoxLabel: this.clickInsideBoxLabel, refreshQrLabel: this.refreshQrLabel, scanQrLabel: this.scanQrLabel, userNotScanInTimeErrorLabel: this.userNotScanInTimeErrorLabel, credsNotValidatedErrorLabel: this.credsNotValidatedErrorLabel, failedLoginErrorLabel: this.failedLoginErrorLabel, successLoginLabel: this.successLoginLabel, byBrandLabel: this.byBrandLabel, waitingStartSessionLabel: this.waitingStartSessionLabel, hideQrModalDescription: this.hideQrModalDescription }));
+    this.sessionId = undefined;
+    this.authenticationRequest = undefined;
+    this.sessionData = undefined;
+    this.result = RESULT_STATUS.NOT_STARTED;
+    this.qr = (h("gataca-qr", { ref: (el) => (this.qrElement = el), checkStatus: this.checkStatus, createSession: this.createSession, successCallback: this.successCallback, errorCallback: this.errorCallback, qrRole: this.qrRole, callbackServer: this.callbackServer, sessionTimeout: this.sessionTimeout, pollingFrequency: this.pollingFrequency, autostart: this.autostart, autorefresh: this.autorefresh, v: this.v, qrModalTitle: this.qrModalTitle, qrModalDescription: this.qrModalDescription, hideBrandTitle: this.hideBrandTitle, dynamicLink: this.dynamicLink, logoSize: this.logoSize, logoSrc: this.logoSrc, modalTitleColor: this.modalTitleColor, qrCodeExpiredLabel: this.qrCodeExpiredLabel, credentialsNotValidatedLabel: this.credentialsNotValidatedLabel, clickInsideBoxLabel: this.clickInsideBoxLabel, refreshQrLabel: this.refreshQrLabel, scanQrLabel: this.scanQrLabel, userNotScanInTimeErrorLabel: this.userNotScanInTimeErrorLabel, credsNotValidatedErrorLabel: this.credsNotValidatedErrorLabel, failedLoginErrorLabel: this.failedLoginErrorLabel, successLoginLabel: this.successLoginLabel, byBrandLabel: this.byBrandLabel, waitingStartSessionLabel: this.waitingStartSessionLabel, hideQrModalDescription: this.hideQrModalDescription }));
   }
   /**
    * Retrieve manually the session data on a successful login
@@ -51,30 +62,206 @@ const GatacaSSIButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
   async getSessionData() {
     return this.qr.getSessionData();
   }
+  async getSessionId() {
+    if (this.sessionId) {
+      return this.sessionId;
+    }
+    let { sessionId, authenticationRequest } = await this.createSession();
+    this.sessionId = sessionId;
+    this.authenticationRequest = authenticationRequest;
+    return this.sessionId;
+  }
+  /**
+   * Force manually the start polling
+   */
+  async startMobilePolling() {
+    await this.getSessionId();
+    this.result = RESULT_STATUS.ONGOING;
+    this.poll()
+      .then((data) => {
+      this.result = RESULT_STATUS.SUCCESS;
+      this.sessionData = data;
+      this.gatacaLoginCompleted.emit(data);
+      this.successCallback(data);
+    })
+      .catch((err) => {
+      this.clean();
+      let expired = err === RESULT_STATUS.EXPIRED;
+      if (expired && this.autorefresh) {
+        this.startMobilePolling();
+      }
+      else {
+        if (err !== RESULT_STATUS.NOT_STARTED) {
+          let error = expired
+            ? new Error(this.userNotScanInTimeErrorLabel)
+            : new Error(this.credsNotValidatedErrorLabel);
+          this.result = err;
+          this.gatacaLoginFailed.emit(error);
+          this.errorCallback(error);
+        }
+      }
+    });
+  }
+  /**
+   * Stop manually an ongoing session
+   */
+  async stop() {
+    this.clean();
+    if (this.result === RESULT_STATUS.ONGOING || RESULT_STATUS.READ) {
+      this.result = RESULT_STATUS.NOT_STARTED;
+    }
+  }
+  clean() {
+    this.sessionData = undefined;
+    this.sessionId = undefined;
+  }
   renderModal() {
     return this.qr;
   }
-  renderButton() {
+  async poll() {
+    let endTime = new Date().getTime() +
+      (this.sessionTimeout || DEFAULT_SESSION_TIMEOUT) * 1000;
+    let interval = (this.pollingFrequency || DEFAULT_POLLING_FREQ) * 1000;
+    let checkFunc = async (component) => {
+      if (component.result === RESULT_STATUS.NOT_STARTED) {
+        return { result: RESULT_STATUS.NOT_STARTED };
+      }
+      let id = await component.getSessionId();
+      return component.checkStatus(id);
+    };
+    let component = this;
+    let checkCondition = async function (resolve, reject) {
+      // If the condition is met, we're done!
+      let { result, data } = await checkFunc(component);
+      switch (result) {
+        case RESULT_STATUS.SUCCESS:
+          resolve(data);
+          break;
+        case RESULT_STATUS.READ:
+          component.result = RESULT_STATUS.READ;
+        case RESULT_STATUS.ONGOING:
+          if (component.sessionTimeout > 0 && new Date().getTime() < endTime) {
+            setTimeout(checkCondition, interval, resolve, reject);
+          }
+          else {
+            reject(RESULT_STATUS.EXPIRED);
+          }
+          break;
+        default:
+          reject(result);
+          break;
+      }
+    };
+    return new Promise(checkCondition);
+  }
+  isAppInstalled(appScheme, callback) {
+    let timeout;
+    let detected = false;
+    if (appScheme === null || appScheme === void 0 ? void 0 : appScheme.length) {
+      window.location.href = appScheme;
+    }
+    const waitTimeToCheckApp = this.checkAppTimeout * 1000;
+    timeout = setTimeout(() => {
+      if (!detected) {
+        callback(false);
+      }
+      cleanup();
+    }, waitTimeToCheckApp);
+    const handleVisibilityChange = () => {
+      if (document.hidden) {
+        detected = true;
+        callback(true);
+        this.startMobilePolling();
+        cleanup();
+      }
+    };
+    document.addEventListener("visibilitychange", handleVisibilityChange);
+    function cleanup() {
+      clearTimeout(timeout);
+      document.removeEventListener("visibilitychange", handleVisibilityChange);
+    }
+  }
+  renderDesktopButton() {
     return (h("div", { class: "gatacaButtonWrapper" }, h("button", { class: "gatacaButton", onClick: () => {
         this.open = !this.open;
-        if (this.open) {
-          this.qr.display();
-        }
-        else {
-          this.qr.stop();
-        }
+        setTimeout(() => {
+          var _a, _b;
+          if (this.open) {
+            (_a = this.qrElement) === null || _a === void 0 ? void 0 : _a.display();
+          }
+          else {
+            (_b = this.qrElement) === null || _b === void 0 ? void 0 : _b.stop();
+          }
+        }, 0);
       } }, h("img", { src: PHONE_ICON, class: "buttonImg", alt: this.buttonText }), h("span", null, this.buttonText))));
   }
+  async getAuthRequest() {
+    let { authenticationRequest } = await this.createSession();
+    return authenticationRequest;
+  }
+  renderMobileButton(isAndroid, isIos) {
+    if (this.autostart) {
+      this.startMobilePolling();
+    }
+    let loading = false;
+    const handleLoading = (isLoading) => {
+      loading = isLoading;
+      if (this.handleCheckAppLoading) {
+        this.handleCheckAppLoading(isLoading);
+      }
+    };
+    const executeRedirection = async () => {
+      handleLoading(true);
+      const androidStoreLink = "https://play.google.com/store/apps/details?id=com.gataca.identity";
+      const iosStoreLink = "https://apps.apple.com/us/app/gataca/id1498607616";
+      try {
+        const appScheme = await this.getAuthRequest();
+        this.isAppInstalled(appScheme, (installed) => {
+          if (!installed) {
+            this.stop();
+            if (isAndroid) {
+              window.location.href = androidStoreLink;
+            }
+            else if (isIos) {
+              window.location.href = iosStoreLink;
+            }
+          }
+          handleLoading(false);
+        });
+      }
+      catch (error) {
+        this.stop();
+        handleLoading(false);
+      }
+    };
+    return (h("div", { class: "gatacaButtonWrapper" }, h("button", { class: "gatacaButton", onClick: () => {
+        executeRedirection();
+      }, disabled: loading }, h("img", { src: PHONE_ICON, class: "buttonImg", alt: this.buttonText }), h("span", null, this.buttonText))));
+  }
   render() {
-    return (h("div", { class: "buttonContainer" }, this.renderButton(), this.open && this.renderModal()));
+    const userAgent = 
+    // @ts-ignore
+    (navigator === null || navigator === void 0 ? void 0 : navigator.userAgent) || (navigator === null || navigator === void 0 ? void 0 : navigator.vendor) || (window === null || window === void 0 ? void 0 : window.opera);
+    const isAndroid = /android/i.test(userAgent);
+    const isIos = 
+    // @ts-ignore
+    (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) ||
+      (navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1);
+    const isMobile = isAndroid || isIos;
+    return (h("div", { class: "buttonContainer" }, isMobile && this.v === "3"
+      ? this.renderMobileButton(isAndroid, isIos)
+      : this.renderDesktopButton(), this.open && (!isMobile || this.v === "3") && this.renderModal()));
   }
   static get style() { return gatacaSsibuttonCss; }
 }, [1, "gataca-ssibutton", {
     "buttonText": [1, "button-text"],
+    "autostart": [4],
     "checkStatus": [16],
     "createSession": [16],
     "successCallback": [16],
     "errorCallback": [16],
+    "handleCheckAppLoading": [16],
+    "checkAppTimeout": [2, "check-app-timeout"],
     "qrRole": [1, "qr-role"],
     "callbackServer": [1, "callback-server"],
     "sessionTimeout": [2, "session-timeout"],
@@ -101,7 +288,13 @@ const GatacaSSIButton = /*@__PURE__*/ proxyCustomElement(class extends HTMLEleme
     "waitingStartSessionLabel": [1, "waiting-start-session-label"],
     "hideQrModalDescription": [4, "hide-qr-modal-description"],
     "open": [32],
-    "getSessionData": [64]
+    "sessionId": [32],
+    "authenticationRequest": [32],
+    "sessionData": [32],
+    "result": [32],
+    "getSessionData": [64],
+    "startMobilePolling": [64],
+    "stop": [64]
   }]);
 function defineCustomElement() {
   if (typeof customElements === "undefined") {