@yourself_id/siwys-react-js 0.33.2-sapp-761-missing-extension-detection-handler.66.0 → 0.33.2-sapp-761-missing-extension-detection-handler.69.0

package/README.md

@@ -6,9 +6,11 @@ React components for Sign in with your SELF.
 
 `SignInWithYourSelf` and `ConnectYourSelf` use the browser-extension flow on
 desktop Chrome, Edge, Firefox, and Safari. If the extension is missing, the
-active window goes to that browser's store listing. iPhone and iPad go to the
-SELF App Store listing. Android goes to the Play Store listing. Set
-`extensionConfig` to `false` to skip the extension check on desktop.
+active window goes to that browser's store listing. On iPhone, iPad, and
+Android, the sign-in button opens the challenge link so the installed SELF app
+can handle it. If the app does not open, the active window goes to the App
+Store or Play Store. Set `extensionConfig` to `false` to skip the extension
+check on desktop.
 
 ```tsx
 <SignInWithYourSelf

package/dist/index.js

@@ -1197,6 +1197,7 @@ var MOBILE_APP_STORE_URLS = {
     ios: "https://apps.apple.com/us/app/self-id/id1663745416",
     android: "https://play.google.com/store/apps/details?id=id.selfid"
 };
+var MOBILE_APP_OPEN_FALLBACK_MS = 1500;
 var resolveDesktopExtensionBrowser = function resolveDesktopExtensionBrowser() {
     if (typeof navigator === "undefined") return null;
     var userAgent = navigator.userAgent;
@@ -1220,6 +1221,36 @@ var resolveMobileAppStoreUrl = function resolveMobileAppStoreUrl() {
 var assignActiveWindow = function assignActiveWindow(url) {
     window.location.assign(url);
 };
+var openInstalledMobileApp = function openInstalledMobileApp(challengeUrl, storeUrl) {
+    var assign = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : assignActiveWindow, fallbackMs = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : MOBILE_APP_OPEN_FALLBACK_MS;
+    var settled = false;
+    var timer = 0;
+    var cancel = function cancel() {
+        if (settled) return;
+        settled = true;
+        window.clearTimeout(timer);
+        document.removeEventListener("visibilitychange", onVisibilityChange);
+        window.removeEventListener("pagehide", onPageHide);
+    };
+    var onPageHide = function onPageHide() {
+        cancel();
+    };
+    var onVisibilityChange = function onVisibilityChange() {
+        if (document.visibilityState === "hidden") {
+            cancel();
+        }
+    };
+    document.addEventListener("visibilitychange", onVisibilityChange);
+    window.addEventListener("pagehide", onPageHide);
+    timer = window.setTimeout(function() {
+        if (document.visibilityState === "visible") {
+            assign(storeUrl);
+        }
+        cancel();
+    }, fallbackMs);
+    assign(challengeUrl);
+    return cancel;
+};
 var detectExtension = function detectExtension() {
     var detectionTimeoutMs = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : DEFAULT_DETECTION_TIMEOUT_MS;
     if (typeof window === "undefined") return Promise.resolve(false);
@@ -1392,6 +1423,7 @@ var SignInWithYourSelf = function SignInWithYourSelf(param) {
     var _ref5 = _sliced_to_array((0, import_react4.useState)(""), 2), extensionError = _ref5[0], setExtensionError = _ref5[1];
     var _ref6 = _sliced_to_array((0, import_react4.useState)(false), 2), isReplacingChallenge = _ref6[0], setIsReplacingChallenge = _ref6[1];
     var removeStatusListener = (0, import_react4.useRef)();
+    var cancelMobileOpen = (0, import_react4.useRef)();
     var isMounted = (0, import_react4.useRef)(true);
     var replacingRef = (0, import_react4.useRef)(false);
     var challengeRequestRef = (0, import_react4.useRef)(0);
@@ -1406,8 +1438,9 @@ var SignInWithYourSelf = function SignInWithYourSelf(param) {
     (0, import_react4.useEffect)(function() {
         isMounted.current = true;
         return function() {
-            var _removeStatusListener_current;
+            var _cancelMobileOpen_current, _removeStatusListener_current;
             isMounted.current = false;
+            (_cancelMobileOpen_current = cancelMobileOpen.current) === null || _cancelMobileOpen_current === void 0 ? void 0 : _cancelMobileOpen_current.call(cancelMobileOpen);
             (_removeStatusListener_current = removeStatusListener.current) === null || _removeStatusListener_current === void 0 ? void 0 : _removeStatusListener_current.call(removeStatusListener);
         };
     }, []);
@@ -1624,7 +1657,9 @@ var SignInWithYourSelf = function SignInWithYourSelf(param) {
         }
         var mobileStoreUrl = resolveMobileAppStoreUrl();
         if (mobileStoreUrl) {
-            assignActiveWindow(mobileStoreUrl);
+            var _cancelMobileOpen_current;
+            (_cancelMobileOpen_current = cancelMobileOpen.current) === null || _cancelMobileOpen_current === void 0 ? void 0 : _cancelMobileOpen_current.call(cancelMobileOpen);
+            cancelMobileOpen.current = openInstalledMobileApp(challengeUrl, mobileStoreUrl, assignActiveWindow);
             return;
         }
         window.open(challengeUrl, "_blank");