powr-sdk-web 5.8.0 → 5.8.1

package/dist/auth/index.js

@@ -53,7 +53,8 @@ var PowrLogin = function PowrLogin(_ref) {
     _ref$international = _ref.international,
     international = _ref$international === void 0 ? false : _ref$international,
     _ref$allowedCountries = _ref.allowedCountries,
-    allowedCountries = _ref$allowedCountries === void 0 ? null : _ref$allowedCountries;
+    allowedCountries = _ref$allowedCountries === void 0 ? null : _ref$allowedCountries,
+    onSessionExpired = _ref.onSessionExpired;
   var resolvedDefaultCountry = (0, _phone.resolveCountry)(defaultCountry, defaultCountryCode);
   var _useState = (0, _react.useState)(function () {
       switch (mode) {
@@ -496,7 +497,15 @@ var PowrLogin = function PowrLogin(_ref) {
             }
             setPendingAuth({
               user: data.user,
-              token: data.token
+              token: data.token,
+              refreshToken: data.refreshToken,
+              onTokenRefreshed: function onTokenRefreshed(newToken) {
+                setPendingAuth(function (prev) {
+                  return prev ? _objectSpread(_objectSpread({}, prev), {}, {
+                    token: newToken
+                  }) : prev;
+                });
+              }
             });
             setAuthView('add-phone');
             setLoading(false);
@@ -583,12 +592,14 @@ var PowrLogin = function PowrLogin(_ref) {
       fullName: ''
     });
   };
-  var handleAddPhoneComplete = function handleAddPhoneComplete(updatedUser) {
+  var handleAddPhoneComplete = function handleAddPhoneComplete(updatedUser, sessionToken) {
     if (!pendingAuth) return;
+    var token = sessionToken || pendingAuth.token;
     var payload = {
       success: true,
       user: updatedUser,
-      token: pendingAuth.token
+      token: token,
+      refreshToken: pendingAuth.refreshToken
     };
     setAuthView('form');
     setPendingAuth(null);
@@ -602,6 +613,17 @@ var PowrLogin = function PowrLogin(_ref) {
     setError('');
     setSuccess('');
   };
+  var handleAddPhoneSessionExpired = function handleAddPhoneSessionExpired() {
+    setAuthView('form');
+    setPendingAuth(null);
+    setError('');
+    setSuccess('');
+    if (typeof onSessionExpired === 'function') {
+      onSessionExpired();
+      return;
+    }
+    setError('Your session timed out. Sign in again to add your phone number.');
+  };
   var handleGetOtp = /*#__PURE__*/function () {
     var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
       var _yield$apiCall2, data, ok, _t6;
@@ -693,6 +715,8 @@ var PowrLogin = function PowrLogin(_ref) {
     appName: appName,
     onComplete: handleAddPhoneComplete,
     onBack: handleAddPhoneBack,
+    onSessionExpired: handleAddPhoneSessionExpired,
+    refreshToken: pendingAuth.refreshToken,
     requirePhoneVerification: requirePhoneVerification,
     defaultCountry: resolvedDefaultCountry,
     defaultCountryCode: defaultCountryCode,

package/dist/index.js

@@ -165,6 +165,12 @@ Object.defineProperty(exports, "PowrTable", {
     return _table["default"];
   }
 });
+Object.defineProperty(exports, "SESSION_MESSAGES", {
+  enumerable: true,
+  get: function get() {
+    return _sessionMessages.SESSION_MESSAGES;
+  }
+});
 Object.defineProperty(exports, "addPhoneStep", {
   enumerable: true,
   get: function get() {
@@ -207,6 +213,12 @@ Object.defineProperty(exports, "getCountryOptions", {
     return _phone.getCountryOptions;
   }
 });
+Object.defineProperty(exports, "getFriendlyAuthError", {
+  enumerable: true,
+  get: function get() {
+    return _sessionMessages.getFriendlyAuthError;
+  }
+});
 Object.defineProperty(exports, "getLocalPhoneNumber", {
   enumerable: true,
   get: function get() {
@@ -231,6 +243,18 @@ Object.defineProperty(exports, "hasValidPhone", {
     return _onboarding.hasValidPhone;
   }
 });
+Object.defineProperty(exports, "isAuthSessionError", {
+  enumerable: true,
+  get: function get() {
+    return _jwt.isAuthSessionError;
+  }
+});
+Object.defineProperty(exports, "isJwtExpired", {
+  enumerable: true,
+  get: function get() {
+    return _jwt.isJwtExpired;
+  }
+});
 Object.defineProperty(exports, "isValidPhone", {
   enumerable: true,
   get: function get() {
@@ -302,4 +326,6 @@ var _powrVerify = _interopRequireDefault(require("./powrVerify"));
 var _PhoneInput = _interopRequireDefault(require("./components/PhoneInput"));
 var _onboarding = require("./onboarding");
 var _phone = require("./utils/phone");
+var _jwt = require("./utils/jwt");
+var _sessionMessages = require("./utils/sessionMessages");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }

package/dist/onboarding/AddPhonePanel.js

@@ -9,7 +9,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _firebase = require("../utils/firebase");
 var _utils = require("./utils");
 var _phone = require("../utils/phone");
+var _jwt = require("../utils/jwt");
+var _sessionMessages = require("../utils/sessionMessages");
 var _PhoneInput = _interopRequireDefault(require("../components/PhoneInput"));
+var _SessionExpiredPanel = _interopRequireDefault(require("./SessionExpiredPanel"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t6 in e) "default" !== _t6 && {}.hasOwnProperty.call(e, _t6) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t6)) && (i.get || i.set) ? o(f, _t6, i) : f[_t6] = e[_t6]); return f; })(e, t); }
 function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
@@ -35,6 +38,8 @@ var AddPhonePanel = function AddPhonePanel(_ref) {
     appName = _ref.appName,
     onComplete = _ref.onComplete,
     onBack = _ref.onBack,
+    onSessionExpired = _ref.onSessionExpired,
+    refreshToken = _ref.refreshToken,
     _ref$requirePhoneVeri = _ref.requirePhoneVerification,
     requirePhoneVerification = _ref$requirePhoneVeri === void 0 ? false : _ref$requirePhoneVeri,
     defaultCountry = _ref.defaultCountry,
@@ -88,6 +93,15 @@ var AddPhonePanel = function AddPhonePanel(_ref) {
     _useState20 = _slicedToArray(_useState19, 2),
     resendTimer = _useState20[0],
     setResendTimer = _useState20[1];
+  var _useState21 = (0, _react.useState)(false),
+    _useState22 = _slicedToArray(_useState21, 2),
+    sessionExpired = _useState22[0],
+    setSessionExpired = _useState22[1];
+  _react["default"].useEffect(function () {
+    if (pendingAuth !== null && pendingAuth !== void 0 && pendingAuth.token && (0, _jwt.isJwtExpired)(pendingAuth.token)) {
+      setSessionExpired(true);
+    }
+  }, [pendingAuth === null || pendingAuth === void 0 ? void 0 : pendingAuth.token]);
   _react["default"].useEffect(function () {
     if (resendTimer <= 0) return undefined;
     var id = setInterval(function () {
@@ -124,49 +138,86 @@ var AddPhonePanel = function AddPhonePanel(_ref) {
     setE164(formatted);
     setPhoneValid(isValid);
   };
+  var handleSignInAgain = function handleSignInAgain() {
+    if (typeof onSessionExpired === 'function') {
+      onSessionExpired();
+      return;
+    }
+    if (typeof onBack === 'function') {
+      onBack();
+    }
+  };
+  var markSessionExpired = function markSessionExpired() {
+    setSessionExpired(true);
+    setError('');
+    setSuccess('');
+  };
   var savePhone = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(formattedPhone) {
-      var userId, existing, email, _yield$updatePowrUser, ok, data;
+      var userId, sessionToken, sessionRefreshToken, existing, email, _yield$updatePowrUser, ok, data, activeToken;
       return _regenerator().w(function (_context) {
         while (1) switch (_context.n) {
           case 0:
             userId = (0, _utils.getUserId)(pendingAuth === null || pendingAuth === void 0 ? void 0 : pendingAuth.user);
-            if (!(!userId || !(pendingAuth !== null && pendingAuth !== void 0 && pendingAuth.token))) {
+            sessionToken = pendingAuth === null || pendingAuth === void 0 ? void 0 : pendingAuth.token;
+            sessionRefreshToken = refreshToken || (pendingAuth === null || pendingAuth === void 0 ? void 0 : pendingAuth.refreshToken);
+            if (!(!userId || !sessionToken)) {
               _context.n = 1;
               break;
             }
-            throw new Error('Missing user session. Please sign in again.');
+            markSessionExpired();
+            return _context.a(2, null);
           case 1:
+            if (!(0, _jwt.isJwtExpired)(sessionToken)) {
+              _context.n = 2;
+              break;
+            }
+            markSessionExpired();
+            return _context.a(2, null);
+          case 2:
             existing = pendingAuth.user || {};
             email = existing.email && existing.email.includes('@') && existing.email || existing.phoneNumber && existing.phoneNumber.includes('@') && existing.phoneNumber || existing.email || '';
-            _context.n = 2;
+            _context.n = 3;
             return (0, _utils.updatePowrUser)({
               apiUrl: apiUrl,
               projectId: projectId,
               userId: userId,
-              token: pendingAuth.token,
+              token: sessionToken,
+              refreshToken: sessionRefreshToken,
               body: {
                 phoneNumber: formattedPhone,
                 email: email,
                 fullName: existing.fullName
-              }
+              },
+              onTokenRefreshed: pendingAuth === null || pendingAuth === void 0 ? void 0 : pendingAuth.onTokenRefreshed
             });
-          case 2:
+          case 3:
             _yield$updatePowrUser = _context.v;
             ok = _yield$updatePowrUser.ok;
             data = _yield$updatePowrUser.data;
+            activeToken = _yield$updatePowrUser.token;
             if (ok) {
-              _context.n = 3;
+              _context.n = 5;
               break;
             }
-            throw new Error((data === null || data === void 0 ? void 0 : data.message) || 'Failed to save phone number');
-          case 3:
-            return _context.a(2, _objectSpread(_objectSpread({}, existing), {}, {
-              phoneNumber: formattedPhone,
-              email: email || existing.email,
-              powrId: existing.powrId || userId,
-              _id: existing._id || userId
-            }));
+            if (!(0, _jwt.isAuthSessionError)(data === null || data === void 0 ? void 0 : data.message)) {
+              _context.n = 4;
+              break;
+            }
+            markSessionExpired();
+            return _context.a(2, null);
+          case 4:
+            throw new Error((0, _sessionMessages.getFriendlyAuthError)(data === null || data === void 0 ? void 0 : data.message) || _sessionMessages.SESSION_MESSAGES.saveFailed);
+          case 5:
+            return _context.a(2, {
+              user: _objectSpread(_objectSpread({}, existing), {}, {
+                phoneNumber: formattedPhone,
+                email: email || existing.email,
+                powrId: existing.powrId || userId,
+                _id: existing._id || userId
+              }),
+              token: activeToken
+            });
         }
       }, _callee);
     }));
@@ -176,7 +227,7 @@ var AddPhonePanel = function AddPhonePanel(_ref) {
   }();
   var handleSaveWithoutOtp = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2() {
-      var formattedPhone, updatedUser, _t;
+      var formattedPhone, result, _t;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
@@ -189,31 +240,38 @@ var AddPhonePanel = function AddPhonePanel(_ref) {
               _context2.n = 2;
               break;
             }
-            setError('Please enter a valid phone number');
+            setError(_sessionMessages.SESSION_MESSAGES.invalidPhone);
             setLoading(false);
             return _context2.a(2);
           case 2:
             _context2.n = 3;
             return savePhone(formattedPhone);
           case 3:
-            updatedUser = _context2.v;
+            result = _context2.v;
+            if (result) {
+              _context2.n = 4;
+              break;
+            }
+            setLoading(false);
+            return _context2.a(2);
+          case 4:
             setSuccess('Phone number saved!');
-            onComplete(updatedUser);
-            _context2.n = 5;
+            onComplete(result.user, result.token);
+            _context2.n = 6;
             break;
-          case 4:
-            _context2.p = 4;
-            _t = _context2.v;
-            console.error('add-phone save error', _t);
-            setError((_t === null || _t === void 0 ? void 0 : _t.message) || 'Failed to save phone number');
           case 5:
             _context2.p = 5;
-            setLoading(false);
-            return _context2.f(5);
+            _t = _context2.v;
+            console.error('add-phone save error', _t);
+            setError((_t === null || _t === void 0 ? void 0 : _t.message) || _sessionMessages.SESSION_MESSAGES.saveFailed);
           case 6:
+            _context2.p = 6;
+            setLoading(false);
+            return _context2.f(6);
+          case 7:
             return _context2.a(2);
         }
-      }, _callee2, null, [[1, 4, 5, 6]]);
+      }, _callee2, null, [[1, 5, 6, 7]]);
     }));
     return function handleSaveWithoutOtp() {
       return _ref4.apply(this, arguments);
@@ -234,7 +292,7 @@ var AddPhonePanel = function AddPhonePanel(_ref) {
               _context3.n = 2;
               break;
             }
-            setError('Please enter a valid phone number');
+            setError(_sessionMessages.SESSION_MESSAGES.invalidPhone);
             setLoading(false);
             return _context3.a(2);
           case 2:
@@ -267,7 +325,7 @@ var AddPhonePanel = function AddPhonePanel(_ref) {
             _context3.p = 8;
             _t3 = _context3.v;
             console.error('add-phone sendOtp error', _t3);
-            setError((_t3 === null || _t3 === void 0 ? void 0 : _t3.message) || 'Failed to send OTP.');
+            setError((_t3 === null || _t3 === void 0 ? void 0 : _t3.message) || 'Failed to send OTP. Please try again.');
             clearRecaptcha();
           case 9:
             _context3.p = 9;
@@ -284,7 +342,7 @@ var AddPhonePanel = function AddPhonePanel(_ref) {
   }();
   var verifyOtp = /*#__PURE__*/function () {
     var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
-      var formattedPhone, updatedUser, _t4, _t5;
+      var formattedPhone, result, _t4, _t5;
       return _regenerator().w(function (_context4) {
         while (1) switch (_context4.p = _context4.n) {
           case 0:
@@ -317,30 +375,43 @@ var AddPhonePanel = function AddPhonePanel(_ref) {
             _context4.n = 7;
             return savePhone(formattedPhone);
           case 7:
-            updatedUser = _context4.v;
+            result = _context4.v;
+            if (result) {
+              _context4.n = 8;
+              break;
+            }
+            setLoading(false);
+            return _context4.a(2);
+          case 8:
             clearRecaptcha();
             setSuccess('Phone number saved!');
-            onComplete(updatedUser);
-            _context4.n = 9;
+            onComplete(result.user, result.token);
+            _context4.n = 10;
             break;
-          case 8:
-            _context4.p = 8;
+          case 9:
+            _context4.p = 9;
             _t5 = _context4.v;
             console.error('add-phone verifyOtp error', _t5);
             setError((_t5 === null || _t5 === void 0 ? void 0 : _t5.message) || 'Invalid OTP. Please try again.');
-          case 9:
-            _context4.p = 9;
-            setLoading(false);
-            return _context4.f(9);
           case 10:
+            _context4.p = 10;
+            setLoading(false);
+            return _context4.f(10);
+          case 11:
             return _context4.a(2);
         }
-      }, _callee4, null, [[3, 5], [1, 8, 9, 10]]);
+      }, _callee4, null, [[3, 5], [1, 9, 10, 11]]);
     }));
     return function verifyOtp() {
       return _ref6.apply(this, arguments);
     };
   }();
+  if (sessionExpired) {
+    return /*#__PURE__*/_react["default"].createElement(_SessionExpiredPanel["default"], {
+      onSignIn: handleSignInAgain,
+      loading: loading
+    });
+  }
   var subtitle = requirePhoneVerification ? "".concat(appName, " uses your phone for sign-in. Verify your number to continue.") : "".concat(appName, " uses your phone for sign-in. Add your number to continue.");
   return /*#__PURE__*/_react["default"].createElement("div", {
     style: panelStyles.wrapper

package/dist/onboarding/PowrOnboardingProvider.js

@@ -7,8 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _OnboardingShell = _interopRequireDefault(require("./OnboardingShell"));
+var _SessionExpiredPanel = _interopRequireDefault(require("./SessionExpiredPanel"));
 var _utils = require("./utils");
 var _phone = require("../utils/phone");
+var _jwt = require("../utils/jwt");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -55,7 +57,10 @@ var PowrOnboardingProvider = function PowrOnboardingProvider(_ref) {
     international = _ref$international === void 0 ? false : _ref$international,
     _ref$allowedCountries = _ref.allowedCountries,
     allowedCountries = _ref$allowedCountries === void 0 ? null : _ref$allowedCountries,
+    refreshToken = _ref.refreshToken,
     onUserUpdate = _ref.onUserUpdate,
+    onSessionExpired = _ref.onSessionExpired,
+    onTokenRefreshed = _ref.onTokenRefreshed,
     onAllComplete = _ref.onAllComplete,
     children = _ref.children;
   var resolvedDefaultCountry = (0, _phone.resolveCountry)(defaultCountry, defaultCountryCode);
@@ -89,9 +94,12 @@ var PowrOnboardingProvider = function PowrOnboardingProvider(_ref) {
       defaultCountry: resolvedDefaultCountry,
       defaultCountryCode: defaultCountryCode,
       international: international,
-      allowedCountries: allowedCountries
+      allowedCountries: allowedCountries,
+      refreshToken: refreshToken,
+      onSessionExpired: onSessionExpired,
+      onTokenRefreshed: onTokenRefreshed
     };
-  }, [localUser, token, apiUrl, projectId, appName, requirePhoneVerification, resolvedDefaultCountry, defaultCountryCode, international, allowedCountries]);
+  }, [localUser, token, apiUrl, projectId, appName, requirePhoneVerification, resolvedDefaultCountry, defaultCountryCode, international, allowedCountries, refreshToken, onSessionExpired, onTokenRefreshed]);
   var runEvaluation = (0, _react.useCallback)(/*#__PURE__*/_asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
     var pending;
     return _regenerator().w(function (_context) {
@@ -128,6 +136,7 @@ var PowrOnboardingProvider = function PowrOnboardingProvider(_ref) {
   (0, _react.useEffect)(function () {
     runEvaluation();
   }, [runEvaluation]);
+  var sessionTimedOut = !skip && isHydrated && !!localUser && !!token && (0, _jwt.isJwtExpired)(token);
   var handleStepComplete = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(patch) {
       var updatedUser, pending;
@@ -181,6 +190,17 @@ var PowrOnboardingProvider = function PowrOnboardingProvider(_ref) {
   if (skip || !isHydrated || !localUser || !token) {
     return children;
   }
+  if (sessionTimedOut) {
+    return /*#__PURE__*/_react["default"].createElement(_OnboardingShell["default"], {
+      appName: appName,
+      appLogo: appLogo,
+      currentStep: 1,
+      totalSteps: 1,
+      stepTitle: "Sign in"
+    }, /*#__PURE__*/_react["default"].createElement(_SessionExpiredPanel["default"], {
+      onSignIn: onSessionExpired
+    }));
+  }
   if (evaluating) {
     return /*#__PURE__*/_react["default"].createElement("div", {
       style: loadingStyles.page

package/dist/onboarding/SessionExpiredPanel.js

@@ -0,0 +1,71 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _sessionMessages = require("../utils/sessionMessages");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+var SessionExpiredPanel = function SessionExpiredPanel(_ref) {
+  var _ref$title = _ref.title,
+    title = _ref$title === void 0 ? _sessionMessages.SESSION_MESSAGES.expiredTitle : _ref$title,
+    _ref$body = _ref.body,
+    body = _ref$body === void 0 ? _sessionMessages.SESSION_MESSAGES.expiredBody : _ref$body,
+    _ref$actionLabel = _ref.actionLabel,
+    actionLabel = _ref$actionLabel === void 0 ? _sessionMessages.SESSION_MESSAGES.signInAgain : _ref$actionLabel,
+    onSignIn = _ref.onSignIn,
+    _ref$loading = _ref.loading,
+    loading = _ref$loading === void 0 ? false : _ref$loading;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.wrapper
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.icon,
+    "aria-hidden": "true"
+  }, "\u23F1"), /*#__PURE__*/_react["default"].createElement("h2", {
+    style: styles.title
+  }, title), /*#__PURE__*/_react["default"].createElement("p", {
+    style: styles.body
+  }, body), /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: onSignIn,
+    disabled: loading || typeof onSignIn !== 'function',
+    style: styles.primaryButton
+  }, loading ? 'Please wait...' : actionLabel));
+};
+var styles = {
+  wrapper: {
+    width: '100%',
+    textAlign: 'center',
+    padding: '8px 0 4px'
+  },
+  icon: {
+    fontSize: 32,
+    lineHeight: 1,
+    marginBottom: 12
+  },
+  title: {
+    margin: '0 0 10px',
+    fontSize: 22,
+    fontWeight: 700,
+    color: '#111827'
+  },
+  body: {
+    margin: '0 0 20px',
+    fontSize: 14,
+    color: '#6b7280',
+    lineHeight: 1.6
+  },
+  primaryButton: {
+    width: '100%',
+    padding: 12,
+    background: '#ff6b35',
+    color: 'white',
+    border: 'none',
+    borderRadius: 8,
+    cursor: 'pointer',
+    fontWeight: 700,
+    fontSize: 15
+  }
+};
+var _default = exports["default"] = SessionExpiredPanel;

package/dist/onboarding/steps/addPhoneStep.js

@@ -14,17 +14,24 @@ var AddPhoneStepView = function AddPhoneStepView(_ref) {
     onBack = _ref.onBack;
   var pendingAuth = {
     user: ctx.user,
-    token: ctx.token
+    token: ctx.token,
+    refreshToken: ctx.refreshToken,
+    onTokenRefreshed: ctx.onTokenRefreshed
   };
   return /*#__PURE__*/_react["default"].createElement(_AddPhonePanel["default"], {
     apiUrl: ctx.apiUrl,
     projectId: ctx.projectId,
     pendingAuth: pendingAuth,
+    refreshToken: ctx.refreshToken,
     appName: ctx.appName || 'App',
-    onComplete: function onComplete(updatedUser) {
-      return _onComplete(updatedUser);
+    onComplete: function onComplete(updatedUser, sessionToken) {
+      if (sessionToken && typeof ctx.onTokenRefreshed === 'function') {
+        ctx.onTokenRefreshed(sessionToken);
+      }
+      _onComplete(updatedUser);
     },
     onBack: onBack,
+    onSessionExpired: ctx.onSessionExpired,
     requirePhoneVerification: ctx.requirePhoneVerification === true,
     defaultCountry: ctx.defaultCountry,
     defaultCountryCode: ctx.defaultCountryCode,

package/dist/onboarding/utils.js

@@ -83,6 +83,7 @@ Object.defineProperty(exports, "parsePhone", {
     return _phone.parsePhone;
   }
 });
+exports.refreshAccessToken = refreshAccessToken;
 Object.defineProperty(exports, "resolveCountry", {
   enumerable: true,
   get: function get() {
@@ -245,41 +246,146 @@ function _needsOnboarding() {
   }));
   return _needsOnboarding.apply(this, arguments);
 }
-function updatePowrUser(_x4) {
-  return _updatePowrUser.apply(this, arguments);
+function refreshAccessToken(_x4) {
+  return _refreshAccessToken.apply(this, arguments);
 }
-function _updatePowrUser() {
-  _updatePowrUser = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(_ref) {
-    var apiUrl, projectId, userId, token, body, separator, url, response, data;
+function _refreshAccessToken() {
+  _refreshAccessToken = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3(_ref) {
+    var apiUrl, projectId, refreshToken, url, response, data;
     return _regenerator().w(function (_context3) {
       while (1) switch (_context3.n) {
         case 0:
-          apiUrl = _ref.apiUrl, projectId = _ref.projectId, userId = _ref.userId, token = _ref.token, body = _ref.body;
-          separator = '?';
-          url = "".concat(apiUrl, "/users/").concat(userId).concat(separator, "projectId=").concat(projectId);
-          _context3.n = 1;
+          apiUrl = _ref.apiUrl, projectId = _ref.projectId, refreshToken = _ref.refreshToken;
+          if (refreshToken) {
+            _context3.n = 1;
+            break;
+          }
+          return _context3.a(2, {
+            ok: false,
+            data: {
+              message: 'No refresh token'
+            }
+          });
+        case 1:
+          url = "".concat(apiUrl, "/auth/refresh-token?projectId=").concat(projectId);
+          _context3.n = 2;
           return fetch(url, {
-            method: 'PUT',
+            method: 'POST',
             headers: {
-              'Content-Type': 'application/json',
-              Authorization: "Bearer ".concat(token)
+              'Content-Type': 'application/json'
             },
-            body: JSON.stringify(body)
+            body: JSON.stringify({
+              refreshToken: refreshToken
+            })
           });
-        case 1:
+        case 2:
           response = _context3.v;
-          _context3.n = 2;
+          _context3.n = 3;
           return response.json()["catch"](function () {
             return {};
           });
-        case 2:
+        case 3:
           data = _context3.v;
+          if (response.ok) {
+            _context3.n = 4;
+            break;
+          }
           return _context3.a(2, {
-            ok: response.ok,
+            ok: false,
+            data: data
+          });
+        case 4:
+          return _context3.a(2, {
+            ok: true,
+            token: data.token,
             data: data
           });
       }
     }, _callee3);
   }));
+  return _refreshAccessToken.apply(this, arguments);
+}
+function updatePowrUser(_x5) {
+  return _updatePowrUser.apply(this, arguments);
+}
+function _updatePowrUser() {
+  _updatePowrUser = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5(_ref2) {
+    var apiUrl, projectId, userId, token, refreshToken, body, onTokenRefreshed, activeToken, putUser, response, data, refreshed;
+    return _regenerator().w(function (_context5) {
+      while (1) switch (_context5.n) {
+        case 0:
+          apiUrl = _ref2.apiUrl, projectId = _ref2.projectId, userId = _ref2.userId, token = _ref2.token, refreshToken = _ref2.refreshToken, body = _ref2.body, onTokenRefreshed = _ref2.onTokenRefreshed;
+          activeToken = token;
+          putUser = /*#__PURE__*/function () {
+            var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+              var url;
+              return _regenerator().w(function (_context4) {
+                while (1) switch (_context4.n) {
+                  case 0:
+                    url = "".concat(apiUrl, "/users/").concat(userId, "?projectId=").concat(projectId);
+                    return _context4.a(2, fetch(url, {
+                      method: 'PUT',
+                      headers: {
+                        'Content-Type': 'application/json',
+                        Authorization: "Bearer ".concat(activeToken)
+                      },
+                      body: JSON.stringify(body)
+                    }));
+                }
+              }, _callee4);
+            }));
+            return function putUser() {
+              return _ref3.apply(this, arguments);
+            };
+          }();
+          _context5.n = 1;
+          return putUser();
+        case 1:
+          response = _context5.v;
+          _context5.n = 2;
+          return response.json()["catch"](function () {
+            return {};
+          });
+        case 2:
+          data = _context5.v;
+          if (!(response.status === 401 && refreshToken)) {
+            _context5.n = 6;
+            break;
+          }
+          _context5.n = 3;
+          return refreshAccessToken({
+            apiUrl: apiUrl,
+            projectId: projectId,
+            refreshToken: refreshToken
+          });
+        case 3:
+          refreshed = _context5.v;
+          if (!(refreshed.ok && refreshed.token)) {
+            _context5.n = 6;
+            break;
+          }
+          activeToken = refreshed.token;
+          if (typeof onTokenRefreshed === 'function') {
+            onTokenRefreshed(activeToken);
+          }
+          _context5.n = 4;
+          return putUser();
+        case 4:
+          response = _context5.v;
+          _context5.n = 5;
+          return response.json()["catch"](function () {
+            return {};
+          });
+        case 5:
+          data = _context5.v;
+        case 6:
+          return _context5.a(2, {
+            ok: response.ok,
+            data: data,
+            token: activeToken
+          });
+      }
+    }, _callee5);
+  }));
   return _updatePowrUser.apply(this, arguments);
 }

package/dist/utils/jwt.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.decodeJwtPayload = decodeJwtPayload;
+exports.isAuthSessionError = isAuthSessionError;
+exports.isJwtExpired = isJwtExpired;
+function decodeJwtPayload(token) {
+  if (!token || typeof token !== 'string') return null;
+  try {
+    var parts = token.split('.');
+    if (parts.length < 2) return null;
+    var base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
+    var padded = base64.padEnd(base64.length + (4 - base64.length % 4) % 4, '=');
+    var json = atob(padded);
+    return JSON.parse(json);
+  } catch (_unused) {
+    return null;
+  }
+}
+function isJwtExpired(token) {
+  var leewaySeconds = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 30;
+  var payload = decodeJwtPayload(token);
+  if (!(payload !== null && payload !== void 0 && payload.exp)) return false;
+  var now = Math.floor(Date.now() / 1000);
+  return payload.exp <= now + leewaySeconds;
+}
+function isAuthSessionError(message) {
+  if (!message || typeof message !== 'string') return false;
+  var lower = message.toLowerCase();
+  return lower.includes('jwt expired') || lower.includes('invalid token') || lower.includes('no authorization token') || lower.includes('no token provided');
+}

package/dist/utils/sessionMessages.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SESSION_MESSAGES = void 0;
+exports.getFriendlyAuthError = getFriendlyAuthError;
+var SESSION_MESSAGES = exports.SESSION_MESSAGES = {
+  expiredTitle: 'Your session timed out',
+  expiredBody: 'For your security, sign-in sessions expire after a while. Sign in again to save your phone number and continue.',
+  signInAgain: 'Sign in again',
+  loginBannerTitle: 'Your session timed out',
+  loginBannerBody: 'Please sign in again to continue where you left off.',
+  saveFailed: 'We could not save your phone number. Please try again.',
+  invalidPhone: 'Please enter a valid phone number.'
+};
+function getFriendlyAuthError(message) {
+  if (!message || typeof message !== 'string') {
+    return SESSION_MESSAGES.saveFailed;
+  }
+  var lower = message.toLowerCase();
+  if (lower.includes('jwt expired') || lower.includes('invalid token') || lower.includes('no authorization token') || lower.includes('no token provided') || lower.includes('missing user session')) {
+    return null;
+  }
+  return message;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "powr-sdk-web",
-    "version": "5.8.0",
+    "version": "5.8.1",
     "main": "dist/index.js",
     "scripts": {
         "build": "babel src -d dist --copy-files",