powr-sdk-web 4.4.0 → 4.4.2

package/dist/auth/index.js

@@ -116,6 +116,14 @@ var PowrLogin = function PowrLogin(_ref) {
     _useState28 = _slicedToArray(_useState27, 2),
     firebaseConfirm = _useState28[0],
     setFirebaseConfirm = _useState28[1];
+  var _useState29 = (0, _react.useState)(false),
+    _useState30 = _slicedToArray(_useState29, 2),
+    showOtpModal = _useState30[0],
+    setShowOtpModal = _useState30[1];
+  var _useState31 = (0, _react.useState)(false),
+    _useState32 = _slicedToArray(_useState31, 2),
+    isPhoneVerified = _useState32[0],
+    setIsPhoneVerified = _useState32[1];
   var shouldShowToggle = mode === 'toggle';
   var handleInputChange = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(e) {
@@ -144,39 +152,98 @@ var PowrLogin = function PowrLogin(_ref) {
   }();
   var sendFirebaseOtp = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(phone) {
-      var appVerifier, confirmationResult, _t;
+      var appVerifier, confirmationResult, _t, _t2;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
             setOtpLoading(true);
             setError('');
             _context2.p = 1;
-            if (!window.recaptchaVerifier) {
-              window.recaptchaVerifier = new _firebase.RecaptchaVerifier(_firebase.auth, 'recaptcha-container', {
-                size: 'invisible'
-              });
+            // Clear any existing reCAPTCHA
+            if (window.recaptchaVerifier) {
+              try {
+                window.recaptchaVerifier.clear();
+              } catch (e) {
+                console.log('Error clearing reCAPTCHA:', e);
+              }
+              window.recaptchaVerifier = null;
             }
+
+            // Create new reCAPTCHA verifier with proper configuration
+            window.recaptchaVerifier = new _firebase.RecaptchaVerifier(_firebase.auth, 'recaptcha-container', {
+              size: 'invisible',
+              callback: function callback(response) {
+                console.log('reCAPTCHA verified successfully');
+              },
+              'expired-callback': function expiredCallback() {
+                console.log('reCAPTCHA expired');
+                setError('reCAPTCHA expired. Please try again.');
+              },
+              'error-callback': function errorCallback(error) {
+                console.error('reCAPTCHA error:', error);
+                setError('reCAPTCHA verification failed. Please try again.');
+              }
+            });
+            _context2.p = 2;
+            _context2.n = 3;
+            return window.recaptchaVerifier.render();
+          case 3:
+            console.log('reCAPTCHA rendered successfully');
+            _context2.n = 5;
+            break;
+          case 4:
+            _context2.p = 4;
+            _t = _context2.v;
+            console.error('reCAPTCHA render error:', _t);
+          case 5:
             appVerifier = window.recaptchaVerifier;
-            _context2.n = 2;
+            _context2.n = 6;
             return (0, _firebase.signInWithPhoneNumber)(_firebase.auth, phone, appVerifier);
-          case 2:
+          case 6:
             confirmationResult = _context2.v;
             setFirebaseConfirm(confirmationResult);
             setFirebaseOtpSent(true);
+            setShowOtpModal(true);
             setSuccess('OTP sent to your phone!');
-            _context2.n = 4;
+            _context2.n = 8;
             break;
-          case 3:
-            _context2.p = 3;
-            _t = _context2.v;
-          case 4:
-            _context2.p = 4;
+          case 7:
+            _context2.p = 7;
+            _t2 = _context2.v;
+            console.error('Firebase OTP Error:', _t2);
+
+            // Handle specific Firebase errors
+            if (_t2.code === 'auth/invalid-app-credential') {
+              setError('Firebase configuration issue. Please check your Firebase setup.');
+            } else if (_t2.code === 'auth/captcha-check-failed') {
+              setError('Security verification failed. Please refresh and try again.');
+            } else if (_t2.code === 'auth/invalid-phone-number') {
+              setError('Invalid phone number format. Please enter a valid number.');
+            } else if (_t2.code === 'auth/too-many-requests') {
+              setError('Too many requests. Please try again after some time.');
+            } else if (_t2.code === 'auth/quota-exceeded') {
+              setError('Daily SMS quota exceeded. Please try again tomorrow.');
+            } else {
+              setError("Failed to send OTP: ".concat(_t2.message || 'Unknown error'));
+            }
+
+            // Clear reCAPTCHA on error
+            if (window.recaptchaVerifier) {
+              try {
+                window.recaptchaVerifier.clear();
+              } catch (e) {
+                console.log('Error clearing reCAPTCHA on error:', e);
+              }
+              window.recaptchaVerifier = null;
+            }
+          case 8:
+            _context2.p = 8;
             setOtpLoading(false);
-            return _context2.f(4);
-          case 5:
+            return _context2.f(8);
+          case 9:
             return _context2.a(2);
         }
-      }, _callee2, null, [[1, 3, 4, 5]]);
+      }, _callee2, null, [[2, 4], [1, 7, 8, 9]]);
     }));
     return function sendFirebaseOtp(_x2) {
       return _ref3.apply(this, arguments);
@@ -184,7 +251,7 @@ var PowrLogin = function PowrLogin(_ref) {
   }();
   var verifyFirebaseOtp = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
-      var result, _t2;
+      var result, _t3;
       return _regenerator().w(function (_context3) {
         while (1) switch (_context3.p = _context3.n) {
           case 0:
@@ -202,23 +269,24 @@ var PowrLogin = function PowrLogin(_ref) {
             return firebaseConfirm.confirm(otp);
           case 3:
             result = _context3.v;
-            _context3.n = 4;
-            return handleSubmit(null, true);
-          case 4:
-            _context3.n = 6;
+            setIsPhoneVerified(true);
+            setShowOtpModal(false);
+            setSuccess('Phone number verified successfully! Now you can sign up.');
+            setOtp('');
+            _context3.n = 5;
             break;
+          case 4:
+            _context3.p = 4;
+            _t3 = _context3.v;
+            setError('Invalid OTP. Please try again.');
           case 5:
             _context3.p = 5;
-            _t2 = _context3.v;
-            setError('Invalid OTP. Please try again.');
-          case 6:
-            _context3.p = 6;
             setLoading(false);
-            return _context3.f(6);
-          case 7:
+            return _context3.f(5);
+          case 6:
             return _context3.a(2);
         }
-      }, _callee3, null, [[1, 5, 6, 7]]);
+      }, _callee3, null, [[1, 4, 5, 6]]);
     }));
     return function verifyFirebaseOtp() {
       return _ref4.apply(this, arguments);
@@ -248,7 +316,6 @@ var PowrLogin = function PowrLogin(_ref) {
         data,
         ok,
         _args4 = arguments,
-        _t3,
         _t4;
       return _regenerator().w(function (_context4) {
         while (1) switch (_context4.p = _context4.n) {
@@ -290,8 +357,8 @@ var PowrLogin = function PowrLogin(_ref) {
             if (!isLogin && formData.password !== formData.confirmPassword) {
               errors.confirmPassword = 'Passwords do not match';
             }
-            if (!isLogin && (!otp || !firebaseConfirm)) {
-              errors.otp = 'Please verify OTP before signing up';
+            if (!isLogin && !isPhoneVerified) {
+              errors.phoneOrEmail = 'Please verify your phone number first';
             }
             if (!(Object.keys(errors).length > 0)) {
               _context4.n = 1;
@@ -301,35 +368,7 @@ var PowrLogin = function PowrLogin(_ref) {
             setLoading(false);
             return _context4.a(2);
           case 1:
-            if (isLogin) {
-              _context4.n = 7;
-              break;
-            }
-            _context4.p = 2;
-            if (!(firebaseConfirm && otp)) {
-              _context4.n = 4;
-              break;
-            }
-            _context4.n = 3;
-            return firebaseConfirm.confirm(otp);
-          case 3:
-            _context4.n = 5;
-            break;
-          case 4:
-            setError('Please verify OTP before signing up');
-            setLoading(false);
-            return _context4.a(2);
-          case 5:
-            _context4.n = 7;
-            break;
-          case 6:
-            _context4.p = 6;
-            _t3 = _context4.v;
-            setError('Invalid OTP. Please try again.');
-            setLoading(false);
-            return _context4.a(2);
-          case 7:
-            _context4.p = 7;
+            _context4.p = 1;
             endpoint = isLogin ? "/auth/login" : "/auth/register";
             payload = isLogin ? {
               phoneOrEmail: formData.phoneOrEmail,
@@ -339,12 +378,12 @@ var PowrLogin = function PowrLogin(_ref) {
               phoneOrEmail: formData.phoneOrEmail,
               password: formData.password
             };
-            _context4.n = 8;
+            _context4.n = 2;
             return (0, _auth.apiCall)(apiUrl, endpoint, projectId, {
               method: 'POST',
               body: payload
             });
-          case 8:
+          case 2:
             _yield$apiCall = _context4.v;
             data = _yield$apiCall.data;
             ok = _yield$apiCall.ok;
@@ -380,20 +419,20 @@ var PowrLogin = function PowrLogin(_ref) {
                 setError("".concat(isLogin ? 'Login' : 'Registration', " failed. Please try again."));
               }
             }
-            _context4.n = 10;
+            _context4.n = 4;
             break;
-          case 9:
-            _context4.p = 9;
+          case 3:
+            _context4.p = 3;
             _t4 = _context4.v;
             setError('Network error. Please try again.');
-          case 10:
-            _context4.p = 10;
+          case 4:
+            _context4.p = 4;
             setLoading(false);
-            return _context4.f(10);
-          case 11:
+            return _context4.f(4);
+          case 5:
             return _context4.a(2);
         }
-      }, _callee4, null, [[7, 9, 10, 11], [2, 6]]);
+      }, _callee4, null, [[1, 3, 4, 5]]);
     }));
     return function handleSubmit(_x3) {
       return _ref5.apply(this, arguments);
@@ -409,6 +448,8 @@ var PowrLogin = function PowrLogin(_ref) {
     setOtp('');
     setFirebaseOtpSent(false);
     setFirebaseConfirm(null);
+    setShowOtpModal(false);
+    setIsPhoneVerified(false);
     setFormData({
       phoneOrEmail: '',
       password: '',
@@ -537,35 +578,20 @@ var PowrLogin = function PowrLogin(_ref) {
     style: styles.fieldError
   }, fieldErrors.phoneOrEmail), !isLogin && /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.helpText
-  }, "Registration requires phone verification for security"), !isLogin && isValidPhone(formData.phoneOrEmail) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, !firebaseOtpSent ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("button", {
+  }, "Registration requires phone verification for security"), !isLogin && isValidPhone(formData.phoneOrEmail) && !isPhoneVerified && /*#__PURE__*/_react["default"].createElement("button", {
     type: "button",
     onClick: function onClick() {
       return sendFirebaseOtp(formatPhone(formData.phoneOrEmail));
     },
-    style: styles.otpButton,
+    style: _objectSpread(_objectSpread({}, styles.otpButton), {}, {
+      marginTop: '8px'
+    }),
     disabled: otpLoading
-  }, otpLoading ? 'Sending OTP...' : 'Send OTP to Phone'), /*#__PURE__*/_react["default"].createElement("div", {
+  }, otpLoading ? 'Sending OTP...' : 'Verify Phone Number'), !isLogin && isPhoneVerified && /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.successText
+  }, "\u2705 Phone number verified successfully!"), /*#__PURE__*/_react["default"].createElement("div", {
     id: "recaptcha-container"
-  })) : /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("label", {
-    htmlFor: "otp",
-    style: styles.label
-  }, "Enter OTP"), /*#__PURE__*/_react["default"].createElement("input", {
-    type: "text",
-    id: "otp",
-    name: "otp",
-    value: otp,
-    onChange: function onChange(e) {
-      return setOtp(e.target.value);
-    },
-    style: styles.input,
-    placeholder: "Enter OTP received",
-    required: true
-  }), /*#__PURE__*/_react["default"].createElement("button", {
-    type: "button",
-    onClick: verifyFirebaseOtp,
-    style: styles.otpButton,
-    disabled: loading || !otp
-  }, loading ? 'Verifying...' : 'Verify OTP & Sign Up')))), /*#__PURE__*/_react["default"].createElement("div", {
+  })), /*#__PURE__*/_react["default"].createElement("div", {
     style: styles.formGroup
   }, /*#__PURE__*/_react["default"].createElement("label", {
     htmlFor: "password",
@@ -679,7 +705,55 @@ var PowrLogin = function PowrLogin(_ref) {
   }, "Sign in here") : /*#__PURE__*/_react["default"].createElement("a", {
     href: "/login",
     style: styles.navigationLink
-  }, "Sign in here"))))));
+  }, "Sign in here"))))), showOtpModal && /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.modalOverlay
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.modalContent
+  }, /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.modalHeader
+  }, /*#__PURE__*/_react["default"].createElement("h2", {
+    style: styles.modalTitle
+  }, "Verify Phone Number"), /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: function onClick() {
+      setShowOtpModal(false);
+      setOtp('');
+      setError('');
+    },
+    style: styles.closeButton
+  }, "\xD7")), /*#__PURE__*/_react["default"].createElement("p", {
+    style: styles.modalText
+  }, "We've sent a verification code to ", /*#__PURE__*/_react["default"].createElement("strong", null, formData.phoneOrEmail)), /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.formGroup
+  }, /*#__PURE__*/_react["default"].createElement("label", {
+    htmlFor: "modalOtp",
+    style: styles.label
+  }, "Enter OTP"), /*#__PURE__*/_react["default"].createElement("input", {
+    type: "text",
+    id: "modalOtp",
+    value: otp,
+    onChange: function onChange(e) {
+      return setOtp(e.target.value);
+    },
+    style: styles.input,
+    placeholder: "Enter 6-digit OTP",
+    maxLength: "6",
+    autoFocus: true
+  })), error && /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.errorMessage
+  }, error), /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.modalButtons
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: function onClick() {
+      setShowOtpModal(false);
+      setOtp('');
+      setError('');
+    },
+    style: styles.cancelButton
+  }, "Cancel"), /*#__PURE__*/_react["default"].createElement("button", {
+    onClick: verifyFirebaseOtp,
+    disabled: loading || !otp || otp.length < 6,
+    style: _objectSpread(_objectSpread({}, styles.button), loading || !otp || otp.length < 6 ? styles.buttonDisabled : {})
+  }, loading ? 'Verifying...' : 'Verify')))));
 };
 var styles = {
   container: {
@@ -820,6 +894,17 @@ var styles = {
     fontSize: '14px',
     fontWeight: '500'
   },
+  successText: {
+    background: '#f0fdf4',
+    color: '#16a34a',
+    padding: '8px 12px',
+    borderRadius: '6px',
+    border: '1px solid #bbf7d0',
+    fontSize: '12px',
+    fontWeight: '500',
+    marginTop: '8px',
+    textAlign: 'center'
+  },
   toggleSection: {
     marginTop: '24px',
     textAlign: 'center',

package/dist/utils/auth.js

@@ -29,7 +29,7 @@ var getAuthToken = exports.getAuthToken = function getAuthToken() {
   return null;
 };
 
-// Create headers with authentication token
+// Create headers with authentication 
 var createAuthHeaders = exports.createAuthHeaders = function createAuthHeaders() {
   var additionalHeaders = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var token = getAuthToken();

package/package.json

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