@stytch/vanilla-js 5.6.1 → 5.6.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @stytch/vanilla-js
 
+## 5.6.2
+
+### Patch Changes
+
+- 37b3dcd7: Improved error message for ad_blocker_detected
+- fd5c8b0e: Remove workaround for setting cookies in older versions of Firefox
+- a8572550: Error messages in the StytchLogin component no longer overflows the container
+
 ## 5.6.1
 
 ### Patch Changes

package/dist/b2b/index.esm.js

@@ -458,6 +458,7 @@ var ErrorType;
   ErrorType[ErrorType["EmailMagicLink"] = 1] = "EmailMagicLink";
   ErrorType[ErrorType["Organization"] = 2] = "Organization";
   ErrorType[ErrorType["CannotJoinOrgDueToAuthPolicy"] = 3] = "CannotJoinOrgDueToAuthPolicy";
+  ErrorType[ErrorType["AdBlockerDetected"] = 4] = "AdBlockerDetected";
 })(ErrorType || (ErrorType = {}));
 var DEFAULT_STATE = {
   screen: AppScreens$1.Main,
@@ -1500,7 +1501,7 @@ var ErrorScreen = function ErrorScreen() {
     _useGlobalReducer2 = _slicedToArray(_useGlobalReducer, 1),
     state = _useGlobalReducer2[0];
   var currentErrorType = state.errorType;
-  var ErrorTypeMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ErrorType.Default, 'Something went wrong. Try again later or contact your admin for help.'), ErrorType.EmailMagicLink, 'Something went wrong. Your login link may have expired, been revoked, or been used more than once. Request a new login link to try again, or contact your admin for help.'), ErrorType.Organization, 'The organization you are looking for could not be found. If you think this is a mistake, contact your admin.'), ErrorType.CannotJoinOrgDueToAuthPolicy, "Unable to join due to ".concat((_b = (_a = state.flowState.organization) === null || _a === void 0 ? void 0 : _a.organization_name) !== null && _b !== void 0 ? _b : 'the organization', "'s authentication policy. Please contact your admin for more information."));
+  var ErrorTypeMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ErrorType.Default, 'Something went wrong. Try again later or contact your admin for help.'), ErrorType.EmailMagicLink, 'Something went wrong. Your login link may have expired, been revoked, or been used more than once. Request a new login link to try again, or contact your admin for help.'), ErrorType.Organization, 'The organization you are looking for could not be found. If you think this is a mistake, contact your admin.'), ErrorType.CannotJoinOrgDueToAuthPolicy, "Unable to join due to ".concat((_b = (_a = state.flowState.organization) === null || _a === void 0 ? void 0 : _a.organization_name) !== null && _b !== void 0 ? _b : 'the organization', "'s authentication policy. Please contact your admin for more information.")), ErrorType.AdBlockerDetected, 'The request was blocked by an Ad Blocker. Please disable your ad blocker, refresh the page, and try again.');
   return /*#__PURE__*/wn.createElement(Flex, {
     direction: "column",
     gap: 24,
@@ -5827,81 +5828,75 @@ var AppContainer$1 = function AppContainer$1() {
       intermediateSessionToken: data.intermediate_session_token
     });
   };
-  var onError = function onError(_ref123) {
-    var errorType = _ref123.errorType;
-    return function () {
+  var handleStytchAPIError = function handleStytchAPIError(defaultErrorType) {
+    return function (error) {
+      var error_type = extractErrorType(error);
+      var errorTypeMap = {
+        ad_blocker_detected: ErrorType.AdBlockerDetected
+      };
+      var errorType = error_type && errorTypeMap[error_type] ? errorTypeMap[error_type] : defaultErrorType !== null && defaultErrorType !== void 0 ? defaultErrorType : ErrorType.Default;
       clearStytchSearchParams();
       dispatch({
         type: 'set_error_message_and_transition',
-        errorType: errorType !== null && errorType !== void 0 ? errorType : ErrorType.Default
+        errorType: errorType
       });
     };
   };
-  var _useMutate13 = useMutate("stytch.magicLinks.authenticate", function (_, _ref124) {
-      var token = _ref124.arg.token;
+  var _useMutate13 = useMutate("stytch.magicLinks.authenticate", function (_, _ref123) {
+      var token = _ref123.arg.token;
       return stytchClient.magicLinks.authenticate({
         magic_links_token: token,
         session_duration_minutes: config.sessionOptions.sessionDurationMinutes
       });
     }, {
       onSuccess: onSuccess,
-      onError: onError({
-        errorType: ErrorType.EmailMagicLink
-      })
+      onError: handleStytchAPIError(ErrorType.EmailMagicLink)
     }),
     stytchMagicLinkAuthenticate = _useMutate13.trigger,
     isMagicLinkLoading = _useMutate13.isMutating;
-  var _useMutate14 = useMutate("stytch.oauth.authenticate", function (_, _ref125) {
-      var token = _ref125.arg.token;
+  var _useMutate14 = useMutate("stytch.oauth.authenticate", function (_, _ref124) {
+      var token = _ref124.arg.token;
       return stytchClient.oauth.authenticate({
         oauth_token: token,
         session_duration_minutes: config.sessionOptions.sessionDurationMinutes
       });
     }, {
       onSuccess: onSuccess,
-      onError: onError({
-        errorType: null
-      })
+      onError: handleStytchAPIError()
     }),
     stytchOAuthAuthenticate = _useMutate14.trigger,
     isOAuthLoading = _useMutate14.isMutating;
-  var _useMutate15 = useMutate("stytch.oauth.discovery.authenticate", function (_, _ref126) {
-      var token = _ref126.arg.token;
+  var _useMutate15 = useMutate("stytch.oauth.discovery.authenticate", function (_, _ref125) {
+      var token = _ref125.arg.token;
       return stytchClient.oauth.discovery.authenticate({
         discovery_oauth_token: token
       });
     }, {
       onSuccess: onDiscoverySuccess,
-      onError: onError({
-        errorType: null
-      })
+      onError: handleStytchAPIError()
     }),
     stytchOAuthDiscoveryAuthenticate = _useMutate15.trigger,
     isDiscoveryOAuthLoading = _useMutate15.isMutating;
-  var _useMutate16 = useMutate("stytch.sso.authenticate", function (_, _ref127) {
-      var token = _ref127.arg.token;
+  var _useMutate16 = useMutate("stytch.sso.authenticate", function (_, _ref126) {
+      var token = _ref126.arg.token;
       return stytchClient.sso.authenticate({
         sso_token: token,
         session_duration_minutes: config.sessionOptions.sessionDurationMinutes
       });
     }, {
       onSuccess: onSuccess,
-      onError: onError({
-        errorType: null
-      })
+      onError: handleStytchAPIError()
     }),
     stytchSSOAuthenticate = _useMutate16.trigger,
     isSSOLoading = _useMutate16.isMutating;
-  var _useMutate17 = useMutate("stytch.magicLinks.discovery.authenticate", function (_, _ref128) {
-      var token = _ref128.arg.token;
+  var _useMutate17 = useMutate("stytch.magicLinks.discovery.authenticate", function (_, _ref127) {
+      var token = _ref127.arg.token;
       return stytchClient.magicLinks.discovery.authenticate({
         discovery_magic_links_token: token
       });
     }, {
       onSuccess: onDiscoverySuccess,
-      onError: onError({
-        errorType: ErrorType.Default
-      })
+      onError: handleStytchAPIError()
     }),
     stytchDiscoveryAuthenticate = _useMutate17.trigger,
     isDiscoveryLoading = _useMutate17.isMutating;
@@ -6004,11 +5999,11 @@ var AppContainer$1 = function AppContainer$1() {
     src: POWERED_BY_STYTCH_IMG_URL
   }))))));
 };
-var AppContainer = function AppContainer(_ref129) {
-  var client = _ref129.client,
-    styles = _ref129.styles,
-    callbacks = _ref129.callbacks,
-    config = _ref129.config;
+var AppContainer = function AppContainer(_ref128) {
+  var client = _ref128.client,
+    styles = _ref128.styles,
+    callbacks = _ref128.callbacks,
+    config = _ref128.config;
   var _h$59 = h$2(function () {
       var _readB2BInternals$boo3 = readB2BInternals(client).bootstrap.getSync(),
         displayWatermark = _readB2BInternals$boo3.displayWatermark;
@@ -6024,8 +6019,8 @@ var AppContainer = function AppContainer(_ref129) {
         options: config
       }
     });
-    readB2BInternals(client).bootstrap.getAsync().then(function (_ref130) {
-      var displayWatermark = _ref130.displayWatermark;
+    readB2BInternals(client).bootstrap.getAsync().then(function (_ref129) {
+      var displayWatermark = _ref129.displayWatermark;
       setDisplayWatermark(displayWatermark);
     });
   }, [client]);
@@ -6062,11 +6057,11 @@ var StytchB2BUIClient = /*#__PURE__*/function (_StytchB2BHeadlessCli) {
   }
   _createClass(StytchB2BUIClient, [{
     key: "mount",
-    value: function mount(_ref131) {
-      var elementId = _ref131.elementId,
-        styles = _ref131.styles,
-        callbacks = _ref131.callbacks,
-        config = _ref131.config;
+    value: function mount(_ref130) {
+      var elementId = _ref130.elementId,
+        styles = _ref130.styles,
+        callbacks = _ref130.callbacks,
+        config = _ref130.config;
       var _a;
       var targetParentDomNode = document.querySelector(elementId);
       if (!targetParentDomNode) {

package/dist/b2b/index.headless.esm.js

@@ -611,21 +611,6 @@ function init(converter, defaultAttributes) {
 var api = init(defaultConverter, {
   path: '/'
 });
-var cookieVerificationTimeouts = new Map();
-var cancelCookieRestoration = function cancelCookieRestoration(name) {
-  clearTimeout(cookieVerificationTimeouts.get(name));
-};
-var setCookiePersistently = function setCookiePersistently(name, value, options) {
-  var COOKIE_VERIFY_DELAY_MS = 10;
-  cancelCookieRestoration(name);
-  var timeoutId = setTimeout(function () {
-    if (api.get(name) === undefined) {
-      api.set(name, value, options);
-    }
-  }, COOKIE_VERIFY_DELAY_MS);
-  cookieVerificationTimeouts.set(name, timeoutId);
-  return api.set(name, value, options);
-};
 var STYTCH_SESSION_COOKIE = 'stytch_session';
 var STYTCH_SESSION_JWT_COOKIE = 'stytch_session_jwt';
 var STYTCH_INTERMEDIATE_SESSION_TOKEN_COOKIE = 'stytch_intermediate_session_token';
@@ -760,8 +745,8 @@ var SubscriptionDataLayer = /*#__PURE__*/function () {
         path: this._cookiePath,
         domain: this._domain
       });
-      setCookiePersistently(this.opaqueTokenCookieName, session_token, cookieOpts);
-      setCookiePersistently(this.jwtCookieName, session_jwt, cookieOpts);
+      api.set(this.opaqueTokenCookieName, session_token, cookieOpts);
+      api.set(this.jwtCookieName, session_jwt, cookieOpts);
       var alternateCookieOptions = SubscriptionDataLayer.generateCookieOpts({
         expiresAt: (_d = (_c = state === null || state === void 0 ? void 0 : state.session) === null || _c === void 0 ? void 0 : _c.expires_at) !== null && _d !== void 0 ? _d : '',
         availableToSubdomains: !this._cookieAvailableToSubdomains,
@@ -791,7 +776,7 @@ var SubscriptionDataLayer = /*#__PURE__*/function () {
         path: this._cookiePath,
         domain: this._domain
       });
-      setCookiePersistently(this.istCookieName, IST, cookieOpts);
+      api.set(this.istCookieName, IST, cookieOpts);
     }
   }, {
     key: "removeSessionCookie",
@@ -822,7 +807,6 @@ var SubscriptionDataLayer = /*#__PURE__*/function () {
           });
         });
       });
-      cookiesToRemove.forEach(cancelCookieRestoration);
     }
   }, {
     key: "syncToLocalStorage",
@@ -1482,7 +1466,7 @@ var B2BOneTapProvider = /*#__PURE__*/function () {
   }]);
   return B2BOneTapProvider;
 }();
-var version = "5.6.1";
+var version = "5.6.2";
 var NetworkClient = /*#__PURE__*/function () {
   function NetworkClient(_publicToken, _subscriptionDataLayer, _liveAPIURL, _testAPIURL, additionalTelemetryDataFn) {
     _classCallCheck(this, NetworkClient);

package/dist/b2b/index.headless.js

@@ -612,21 +612,6 @@ function init(converter, defaultAttributes) {
 var api = init(defaultConverter, {
   path: '/'
 });
-var cookieVerificationTimeouts = new Map();
-var cancelCookieRestoration = function cancelCookieRestoration(name) {
-  clearTimeout(cookieVerificationTimeouts.get(name));
-};
-var setCookiePersistently = function setCookiePersistently(name, value, options) {
-  var COOKIE_VERIFY_DELAY_MS = 10;
-  cancelCookieRestoration(name);
-  var timeoutId = setTimeout(function () {
-    if (api.get(name) === undefined) {
-      api.set(name, value, options);
-    }
-  }, COOKIE_VERIFY_DELAY_MS);
-  cookieVerificationTimeouts.set(name, timeoutId);
-  return api.set(name, value, options);
-};
 var STYTCH_SESSION_COOKIE = 'stytch_session';
 var STYTCH_SESSION_JWT_COOKIE = 'stytch_session_jwt';
 var STYTCH_INTERMEDIATE_SESSION_TOKEN_COOKIE = 'stytch_intermediate_session_token';
@@ -761,8 +746,8 @@ var SubscriptionDataLayer = /*#__PURE__*/function () {
         path: this._cookiePath,
         domain: this._domain
       });
-      setCookiePersistently(this.opaqueTokenCookieName, session_token, cookieOpts);
-      setCookiePersistently(this.jwtCookieName, session_jwt, cookieOpts);
+      api.set(this.opaqueTokenCookieName, session_token, cookieOpts);
+      api.set(this.jwtCookieName, session_jwt, cookieOpts);
       var alternateCookieOptions = SubscriptionDataLayer.generateCookieOpts({
         expiresAt: (_d = (_c = state === null || state === void 0 ? void 0 : state.session) === null || _c === void 0 ? void 0 : _c.expires_at) !== null && _d !== void 0 ? _d : '',
         availableToSubdomains: !this._cookieAvailableToSubdomains,
@@ -792,7 +777,7 @@ var SubscriptionDataLayer = /*#__PURE__*/function () {
         path: this._cookiePath,
         domain: this._domain
       });
-      setCookiePersistently(this.istCookieName, IST, cookieOpts);
+      api.set(this.istCookieName, IST, cookieOpts);
     }
   }, {
     key: "removeSessionCookie",
@@ -823,7 +808,6 @@ var SubscriptionDataLayer = /*#__PURE__*/function () {
           });
         });
       });
-      cookiesToRemove.forEach(cancelCookieRestoration);
     }
   }, {
     key: "syncToLocalStorage",
@@ -1483,7 +1467,7 @@ var B2BOneTapProvider = /*#__PURE__*/function () {
   }]);
   return B2BOneTapProvider;
 }();
-var version = "5.6.1";
+var version = "5.6.2";
 var NetworkClient = /*#__PURE__*/function () {
   function NetworkClient(_publicToken, _subscriptionDataLayer, _liveAPIURL, _testAPIURL, additionalTelemetryDataFn) {
     _classCallCheck(this, NetworkClient);

package/dist/b2b/index.js

@@ -459,6 +459,7 @@ var ErrorType;
   ErrorType[ErrorType["EmailMagicLink"] = 1] = "EmailMagicLink";
   ErrorType[ErrorType["Organization"] = 2] = "Organization";
   ErrorType[ErrorType["CannotJoinOrgDueToAuthPolicy"] = 3] = "CannotJoinOrgDueToAuthPolicy";
+  ErrorType[ErrorType["AdBlockerDetected"] = 4] = "AdBlockerDetected";
 })(ErrorType || (ErrorType = {}));
 var DEFAULT_STATE = {
   screen: AppScreens$1.Main,
@@ -1501,7 +1502,7 @@ var ErrorScreen = function ErrorScreen() {
     _useGlobalReducer2 = _slicedToArray(_useGlobalReducer, 1),
     state = _useGlobalReducer2[0];
   var currentErrorType = state.errorType;
-  var ErrorTypeMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ErrorType.Default, 'Something went wrong. Try again later or contact your admin for help.'), ErrorType.EmailMagicLink, 'Something went wrong. Your login link may have expired, been revoked, or been used more than once. Request a new login link to try again, or contact your admin for help.'), ErrorType.Organization, 'The organization you are looking for could not be found. If you think this is a mistake, contact your admin.'), ErrorType.CannotJoinOrgDueToAuthPolicy, "Unable to join due to ".concat((_b = (_a = state.flowState.organization) === null || _a === void 0 ? void 0 : _a.organization_name) !== null && _b !== void 0 ? _b : 'the organization', "'s authentication policy. Please contact your admin for more information."));
+  var ErrorTypeMap = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, ErrorType.Default, 'Something went wrong. Try again later or contact your admin for help.'), ErrorType.EmailMagicLink, 'Something went wrong. Your login link may have expired, been revoked, or been used more than once. Request a new login link to try again, or contact your admin for help.'), ErrorType.Organization, 'The organization you are looking for could not be found. If you think this is a mistake, contact your admin.'), ErrorType.CannotJoinOrgDueToAuthPolicy, "Unable to join due to ".concat((_b = (_a = state.flowState.organization) === null || _a === void 0 ? void 0 : _a.organization_name) !== null && _b !== void 0 ? _b : 'the organization', "'s authentication policy. Please contact your admin for more information.")), ErrorType.AdBlockerDetected, 'The request was blocked by an Ad Blocker. Please disable your ad blocker, refresh the page, and try again.');
   return /*#__PURE__*/extractErrorMessage.wn.createElement(Flex, {
     direction: "column",
     gap: 24,
@@ -5828,81 +5829,75 @@ var AppContainer$1 = function AppContainer$1() {
       intermediateSessionToken: data.intermediate_session_token
     });
   };
-  var onError = function onError(_ref123) {
-    var errorType = _ref123.errorType;
-    return function () {
+  var handleStytchAPIError = function handleStytchAPIError(defaultErrorType) {
+    return function (error) {
+      var error_type = extractErrorType(error);
+      var errorTypeMap = {
+        ad_blocker_detected: ErrorType.AdBlockerDetected
+      };
+      var errorType = error_type && errorTypeMap[error_type] ? errorTypeMap[error_type] : defaultErrorType !== null && defaultErrorType !== void 0 ? defaultErrorType : ErrorType.Default;
       clearStytchSearchParams();
       dispatch({
         type: 'set_error_message_and_transition',
-        errorType: errorType !== null && errorType !== void 0 ? errorType : ErrorType.Default
+        errorType: errorType
       });
     };
   };
-  var _useMutate13 = useMutate("stytch.magicLinks.authenticate", function (_, _ref124) {
-      var token = _ref124.arg.token;
+  var _useMutate13 = useMutate("stytch.magicLinks.authenticate", function (_, _ref123) {
+      var token = _ref123.arg.token;
       return stytchClient.magicLinks.authenticate({
         magic_links_token: token,
         session_duration_minutes: config.sessionOptions.sessionDurationMinutes
       });
     }, {
       onSuccess: onSuccess,
-      onError: onError({
-        errorType: ErrorType.EmailMagicLink
-      })
+      onError: handleStytchAPIError(ErrorType.EmailMagicLink)
     }),
     stytchMagicLinkAuthenticate = _useMutate13.trigger,
     isMagicLinkLoading = _useMutate13.isMutating;
-  var _useMutate14 = useMutate("stytch.oauth.authenticate", function (_, _ref125) {
-      var token = _ref125.arg.token;
+  var _useMutate14 = useMutate("stytch.oauth.authenticate", function (_, _ref124) {
+      var token = _ref124.arg.token;
       return stytchClient.oauth.authenticate({
         oauth_token: token,
         session_duration_minutes: config.sessionOptions.sessionDurationMinutes
       });
     }, {
       onSuccess: onSuccess,
-      onError: onError({
-        errorType: null
-      })
+      onError: handleStytchAPIError()
     }),
     stytchOAuthAuthenticate = _useMutate14.trigger,
     isOAuthLoading = _useMutate14.isMutating;
-  var _useMutate15 = useMutate("stytch.oauth.discovery.authenticate", function (_, _ref126) {
-      var token = _ref126.arg.token;
+  var _useMutate15 = useMutate("stytch.oauth.discovery.authenticate", function (_, _ref125) {
+      var token = _ref125.arg.token;
       return stytchClient.oauth.discovery.authenticate({
         discovery_oauth_token: token
       });
     }, {
       onSuccess: onDiscoverySuccess,
-      onError: onError({
-        errorType: null
-      })
+      onError: handleStytchAPIError()
     }),
     stytchOAuthDiscoveryAuthenticate = _useMutate15.trigger,
     isDiscoveryOAuthLoading = _useMutate15.isMutating;
-  var _useMutate16 = useMutate("stytch.sso.authenticate", function (_, _ref127) {
-      var token = _ref127.arg.token;
+  var _useMutate16 = useMutate("stytch.sso.authenticate", function (_, _ref126) {
+      var token = _ref126.arg.token;
       return stytchClient.sso.authenticate({
         sso_token: token,
         session_duration_minutes: config.sessionOptions.sessionDurationMinutes
       });
     }, {
       onSuccess: onSuccess,
-      onError: onError({
-        errorType: null
-      })
+      onError: handleStytchAPIError()
     }),
     stytchSSOAuthenticate = _useMutate16.trigger,
     isSSOLoading = _useMutate16.isMutating;
-  var _useMutate17 = useMutate("stytch.magicLinks.discovery.authenticate", function (_, _ref128) {
-      var token = _ref128.arg.token;
+  var _useMutate17 = useMutate("stytch.magicLinks.discovery.authenticate", function (_, _ref127) {
+      var token = _ref127.arg.token;
       return stytchClient.magicLinks.discovery.authenticate({
         discovery_magic_links_token: token
       });
     }, {
       onSuccess: onDiscoverySuccess,
-      onError: onError({
-        errorType: ErrorType.Default
-      })
+      onError: handleStytchAPIError()
     }),
     stytchDiscoveryAuthenticate = _useMutate17.trigger,
     isDiscoveryLoading = _useMutate17.isMutating;
@@ -6005,11 +6000,11 @@ var AppContainer$1 = function AppContainer$1() {
     src: POWERED_BY_STYTCH_IMG_URL
   }))))));
 };
-var AppContainer = function AppContainer(_ref129) {
-  var client = _ref129.client,
-    styles = _ref129.styles,
-    callbacks = _ref129.callbacks,
-    config = _ref129.config;
+var AppContainer = function AppContainer(_ref128) {
+  var client = _ref128.client,
+    styles = _ref128.styles,
+    callbacks = _ref128.callbacks,
+    config = _ref128.config;
   var _extractErrorMessage$70 = extractErrorMessage.h(function () {
       var _internal$readB2BInte5 = internal.readB2BInternals(client).bootstrap.getSync(),
         displayWatermark = _internal$readB2BInte5.displayWatermark;
@@ -6025,8 +6020,8 @@ var AppContainer = function AppContainer(_ref129) {
         options: config
       }
     });
-    internal.readB2BInternals(client).bootstrap.getAsync().then(function (_ref130) {
-      var displayWatermark = _ref130.displayWatermark;
+    internal.readB2BInternals(client).bootstrap.getAsync().then(function (_ref129) {
+      var displayWatermark = _ref129.displayWatermark;
       setDisplayWatermark(displayWatermark);
     });
   }, [client]);
@@ -6063,11 +6058,11 @@ var StytchB2BUIClient = /*#__PURE__*/function (_b2b_index_headless$S) {
   }
   _createClass(StytchB2BUIClient, [{
     key: "mount",
-    value: function mount(_ref131) {
-      var elementId = _ref131.elementId,
-        styles = _ref131.styles,
-        callbacks = _ref131.callbacks,
-        config = _ref131.config;
+    value: function mount(_ref130) {
+      var elementId = _ref130.elementId,
+        styles = _ref130.styles,
+        callbacks = _ref130.callbacks,
+        config = _ref130.config;
       var _a;
       var targetParentDomNode = document.querySelector(elementId);
       if (!targetParentDomNode) {