@turnkey/react-wallet-kit 2.2.0 → 2.3.0

package/dist/components/auth/index.mjs

@@ -19,6 +19,7 @@ import { useTurnkey } from '../../providers/client/Hook.mjs';
 import { ClientState, WalletSelectorMode } from '../../types/base.mjs';
 import { WalletAuthButton } from './wallet/WalletAuthButton.mjs';
 import { ExternalWalletSelector } from './wallet/ExternalWalletSelector.mjs';
+import { useTurnstile } from './TurnstileWidget.mjs';
 
 function AuthComponent(_ref) {
   var _config$ui;
@@ -41,6 +42,10 @@ function AuthComponent(_ref) {
     pushPage = _useModal.pushPage,
     isMobile = _useModal.isMobile,
     openSheet = _useModal.openSheet;
+  var _useTurnstile = useTurnstile(),
+    turnstile = _useTurnstile.turnstile,
+    consumeToken = _useTurnstile.consumeToken,
+    authEnabled = _useTurnstile.authEnabled;
   if (!config || clientState === ClientState.Loading) {
     // Don't check ClientState.Error here. We already check in the modal root
     return jsx("div", {
@@ -60,17 +65,23 @@ function AuthComponent(_ref) {
     oauthOrder = _ref2$oauthOrder === void 0 ? [] : _ref2$oauthOrder;
   var handleEmailSubmit = /*#__PURE__*/function () {
     var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(email) {
-      var _config$auth, _config$auth2, _yield$initOtp, otpId, otpEncryptionTargetBundle, _t;
+      var _config$auth, _config$auth2, _yield$initOtp, otpId, otpEncryptionTargetBundle, _t, _t2, _t3, _t4;
       return _regenerator().w(function (_context) {
         while (1) switch (_context.p = _context.n) {
           case 0:
             _context.p = 0;
-            _context.n = 1;
-            return initOtp({
+            _t = initOtp;
+            _t2 = _objectSpread2;
+            _t3 = {
               otpType: OtpType.Email,
               contact: email
-            });
+            };
+            _context.n = 1;
+            return consumeToken();
           case 1:
+            _context.n = 2;
+            return _t(_t2(_t3, _context.v));
+          case 2:
             _yield$initOtp = _context.v;
             otpId = _yield$initOtp.otpId;
             otpEncryptionTargetBundle = _yield$initOtp.otpEncryptionTargetBundle;
@@ -88,16 +99,16 @@ function AuthComponent(_ref) {
               })),
               showTitle: false
             });
-            _context.n = 3;
+            _context.n = 4;
             break;
-          case 2:
-            _context.p = 2;
-            _t = _context.v;
-            throw new Error("Error initializing OTP: ".concat(_t));
           case 3:
+            _context.p = 3;
+            _t4 = _context.v;
+            throw new Error("Error initializing OTP: ".concat(_t4));
+          case 4:
             return _context.a(2);
         }
-      }, _callee, null, [[0, 2]]);
+      }, _callee, null, [[0, 3]]);
     }));
     return function handleEmailSubmit(_x) {
       return _ref3.apply(this, arguments);
@@ -105,17 +116,23 @@ function AuthComponent(_ref) {
   }();
   var handlePhoneSubmit = /*#__PURE__*/function () {
     var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(phone, formattedPhone) {
-      var _config$auth3, _config$auth4, _yield$initOtp2, otpId, otpEncryptionTargetBundle, _t2;
+      var _config$auth3, _config$auth4, _yield$initOtp2, otpId, otpEncryptionTargetBundle, _t5, _t6, _t7, _t8;
       return _regenerator().w(function (_context2) {
         while (1) switch (_context2.p = _context2.n) {
           case 0:
             _context2.p = 0;
-            _context2.n = 1;
-            return initOtp({
+            _t5 = initOtp;
+            _t6 = _objectSpread2;
+            _t7 = {
               otpType: OtpType.Sms,
               contact: phone
-            });
+            };
+            _context2.n = 1;
+            return consumeToken();
           case 1:
+            _context2.n = 2;
+            return _t5(_t6(_t7, _context2.v));
+          case 2:
             _yield$initOtp2 = _context2.v;
             otpId = _yield$initOtp2.otpId;
             otpEncryptionTargetBundle = _yield$initOtp2.otpEncryptionTargetBundle;
@@ -135,16 +152,16 @@ function AuthComponent(_ref) {
               })),
               showTitle: false
             });
-            _context2.n = 3;
+            _context2.n = 4;
             break;
-          case 2:
-            _context2.p = 2;
-            _t2 = _context2.v;
-            throw new Error("Error initializing OTP: ".concat(_t2));
           case 3:
+            _context2.p = 3;
+            _t8 = _context2.v;
+            throw new Error("Error initializing OTP: ".concat(_t8));
+          case 4:
             return _context2.a(2);
         }
-      }, _callee2, null, [[0, 2]]);
+      }, _callee2, null, [[0, 3]]);
     }));
     return function handlePhoneSubmit(_x2, _x3) {
       return _ref4.apply(this, arguments);
@@ -189,14 +206,21 @@ function AuthComponent(_ref) {
         title: "Creating account with passkey...",
         action: function () {
           var _action2 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee4() {
+            var _t9, _t0, _t1;
             return _regenerator().w(function (_context4) {
               while (1) switch (_context4.n) {
                 case 0:
-                  _context4.n = 1;
-                  return signUpWithPasskey(_objectSpread2({}, sessionKey && {
+                  _t9 = signUpWithPasskey;
+                  _t0 = _objectSpread2;
+                  _t1 = _objectSpread2({}, sessionKey && {
                     sessionKey: sessionKey
-                  }));
+                  });
+                  _context4.n = 1;
+                  return consumeToken();
                 case 1:
+                  _context4.n = 2;
+                  return _t9(_t0(_t1, _context4.v));
+                case 2:
                   return _context4.a(2);
               }
             }, _callee4);
@@ -215,23 +239,41 @@ function AuthComponent(_ref) {
     });
   };
   var handleGoogle = /*#__PURE__*/function () {
-    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
-      return _regenerator().w(function (_context5) {
-        while (1) switch (_context5.n) {
+    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
+      return _regenerator().w(function (_context6) {
+        while (1) switch (_context6.n) {
           case 0:
             pushPage({
               key: "Google OAuth",
               content: jsx(ActionPage, {
                 title: "Authenticating with Google...",
-                action: function action() {
-                  return handleGoogleOauth({
-                    additionalState: _objectSpread2({
-                      openModal: "true"
-                    }, sessionKey && {
-                      sessionKey: sessionKey
-                    }) // Tell the provider to reopen the auth modal and show the loading state
-                  });
-                },
+                action: function () {
+                  var _action3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
+                    var _t10, _t11, _t12;
+                    return _regenerator().w(function (_context5) {
+                      while (1) switch (_context5.n) {
+                        case 0:
+                          _t10 = handleGoogleOauth;
+                          _t11 = _objectSpread2;
+                          _t12 = {
+                            additionalState: _objectSpread2({
+                              openModal: "true"
+                            }, sessionKey && {
+                              sessionKey: sessionKey
+                            })
+                          };
+                          _context5.n = 1;
+                          return consumeToken();
+                        case 1:
+                          return _context5.a(2, _t10(_t11(_t12, _context5.v)));
+                      }
+                    }, _callee5);
+                  }));
+                  function action() {
+                    return _action3.apply(this, arguments);
+                  }
+                  return action;
+                }(),
                 icon: jsx(FontAwesomeIcon, {
                   size: "3x",
                   icon: faGoogle
@@ -240,32 +282,50 @@ function AuthComponent(_ref) {
               showTitle: false
             });
           case 1:
-            return _context5.a(2);
+            return _context6.a(2);
         }
-      }, _callee5);
+      }, _callee6);
     }));
     return function handleGoogle() {
       return _ref5.apply(this, arguments);
     };
   }();
   var handleApple = /*#__PURE__*/function () {
-    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee6() {
-      return _regenerator().w(function (_context6) {
-        while (1) switch (_context6.n) {
+    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
+      return _regenerator().w(function (_context8) {
+        while (1) switch (_context8.n) {
           case 0:
             pushPage({
               key: "Apple OAuth",
               content: jsx(ActionPage, {
                 title: "Authenticating with Apple...",
-                action: function action() {
-                  return handleAppleOauth({
-                    additionalState: _objectSpread2({
-                      openModal: "true"
-                    }, sessionKey && {
-                      sessionKey: sessionKey
-                    }) // Tell the provider to reopen the auth modal and show the loading state
-                  });
-                },
+                action: function () {
+                  var _action4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
+                    var _t13, _t14, _t15;
+                    return _regenerator().w(function (_context7) {
+                      while (1) switch (_context7.n) {
+                        case 0:
+                          _t13 = handleAppleOauth;
+                          _t14 = _objectSpread2;
+                          _t15 = {
+                            additionalState: _objectSpread2({
+                              openModal: "true"
+                            }, sessionKey && {
+                              sessionKey: sessionKey
+                            })
+                          };
+                          _context7.n = 1;
+                          return consumeToken();
+                        case 1:
+                          return _context7.a(2, _t13(_t14(_t15, _context7.v)));
+                      }
+                    }, _callee7);
+                  }));
+                  function action() {
+                    return _action4.apply(this, arguments);
+                  }
+                  return action;
+                }(),
                 icon: jsx(FontAwesomeIcon, {
                   size: "3x",
                   icon: faApple
@@ -274,32 +334,50 @@ function AuthComponent(_ref) {
               showTitle: false
             });
           case 1:
-            return _context6.a(2);
+            return _context8.a(2);
         }
-      }, _callee6);
+      }, _callee8);
     }));
     return function handleApple() {
       return _ref6.apply(this, arguments);
     };
   }();
   var handleFacebook = /*#__PURE__*/function () {
-    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee7() {
-      return _regenerator().w(function (_context7) {
-        while (1) switch (_context7.n) {
+    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
+      return _regenerator().w(function (_context0) {
+        while (1) switch (_context0.n) {
           case 0:
             pushPage({
               key: "Facebook OAuth",
               content: jsx(ActionPage, {
                 title: "Authenticating with Facebook...",
-                action: function action() {
-                  return handleFacebookOauth({
-                    additionalState: _objectSpread2({
-                      openModal: "true"
-                    }, sessionKey && {
-                      sessionKey: sessionKey
-                    }) // Tell the provider to reopen the auth modal and show the loading state
-                  });
-                },
+                action: function () {
+                  var _action5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
+                    var _t16, _t17, _t18;
+                    return _regenerator().w(function (_context9) {
+                      while (1) switch (_context9.n) {
+                        case 0:
+                          _t16 = handleFacebookOauth;
+                          _t17 = _objectSpread2;
+                          _t18 = {
+                            additionalState: _objectSpread2({
+                              openModal: "true"
+                            }, sessionKey && {
+                              sessionKey: sessionKey
+                            })
+                          };
+                          _context9.n = 1;
+                          return consumeToken();
+                        case 1:
+                          return _context9.a(2, _t16(_t17(_t18, _context9.v)));
+                      }
+                    }, _callee9);
+                  }));
+                  function action() {
+                    return _action5.apply(this, arguments);
+                  }
+                  return action;
+                }(),
                 icon: jsx(FontAwesomeIcon, {
                   size: "3x",
                   icon: faFacebook
@@ -308,32 +386,50 @@ function AuthComponent(_ref) {
               showTitle: false
             });
           case 1:
-            return _context7.a(2);
+            return _context0.a(2);
         }
-      }, _callee7);
+      }, _callee0);
     }));
     return function handleFacebook() {
       return _ref7.apply(this, arguments);
     };
   }();
   var handleX = /*#__PURE__*/function () {
-    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee8() {
-      return _regenerator().w(function (_context8) {
-        while (1) switch (_context8.n) {
+    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee10() {
+      return _regenerator().w(function (_context10) {
+        while (1) switch (_context10.n) {
           case 0:
             pushPage({
               key: "X OAuth",
               content: jsx(ActionPage, {
                 title: "Authenticating with X...",
-                action: function action() {
-                  return handleXOauth({
-                    additionalState: _objectSpread2({
-                      openModal: "true"
-                    }, sessionKey && {
-                      sessionKey: sessionKey
-                    }) // Tell the provider to reopen the auth modal and show the loading state
-                  });
-                },
+                action: function () {
+                  var _action6 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee1() {
+                    var _t19, _t20, _t21;
+                    return _regenerator().w(function (_context1) {
+                      while (1) switch (_context1.n) {
+                        case 0:
+                          _t19 = handleXOauth;
+                          _t20 = _objectSpread2;
+                          _t21 = {
+                            additionalState: _objectSpread2({
+                              openModal: "true"
+                            }, sessionKey && {
+                              sessionKey: sessionKey
+                            })
+                          };
+                          _context1.n = 1;
+                          return consumeToken();
+                        case 1:
+                          return _context1.a(2, _t19(_t20(_t21, _context1.v)));
+                      }
+                    }, _callee1);
+                  }));
+                  function action() {
+                    return _action6.apply(this, arguments);
+                  }
+                  return action;
+                }(),
                 icon: jsx(FontAwesomeIcon, {
                   size: "3x",
                   icon: faXTwitter
@@ -342,32 +438,50 @@ function AuthComponent(_ref) {
               showTitle: false
             });
           case 1:
-            return _context8.a(2);
+            return _context10.a(2);
         }
-      }, _callee8);
+      }, _callee10);
     }));
     return function handleX() {
       return _ref8.apply(this, arguments);
     };
   }();
   var handleDiscord = /*#__PURE__*/function () {
-    var _ref9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee9() {
-      return _regenerator().w(function (_context9) {
-        while (1) switch (_context9.n) {
+    var _ref9 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee12() {
+      return _regenerator().w(function (_context12) {
+        while (1) switch (_context12.n) {
           case 0:
             pushPage({
               key: "Discord OAuth",
               content: jsx(ActionPage, {
                 title: "Authenticating with Discord...",
-                action: function action() {
-                  return handleDiscordOauth({
-                    additionalState: _objectSpread2({
-                      openModal: "true"
-                    }, sessionKey && {
-                      sessionKey: sessionKey
-                    }) // Tell the provider to reopen the auth modal and show the loading state
-                  });
-                },
+                action: function () {
+                  var _action7 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee11() {
+                    var _t22, _t23, _t24;
+                    return _regenerator().w(function (_context11) {
+                      while (1) switch (_context11.n) {
+                        case 0:
+                          _t22 = handleDiscordOauth;
+                          _t23 = _objectSpread2;
+                          _t24 = {
+                            additionalState: _objectSpread2({
+                              openModal: "true"
+                            }, sessionKey && {
+                              sessionKey: sessionKey
+                            })
+                          };
+                          _context11.n = 1;
+                          return consumeToken();
+                        case 1:
+                          return _context11.a(2, _t22(_t23(_t24, _context11.v)));
+                      }
+                    }, _callee11);
+                  }));
+                  function action() {
+                    return _action7.apply(this, arguments);
+                  }
+                  return action;
+                }(),
                 icon: jsx(FontAwesomeIcon, {
                   size: "3x",
                   icon: faDiscord
@@ -376,21 +490,21 @@ function AuthComponent(_ref) {
               showTitle: false
             });
           case 1:
-            return _context9.a(2);
+            return _context12.a(2);
         }
-      }, _callee9);
+      }, _callee12);
     }));
     return function handleDiscord() {
       return _ref9.apply(this, arguments);
     };
   }();
   var handleShowWalletSelector = /*#__PURE__*/function () {
-    var _ref0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee0() {
-      var _t3;
-      return _regenerator().w(function (_context0) {
-        while (1) switch (_context0.p = _context0.n) {
+    var _ref0 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee13() {
+      var _t25;
+      return _regenerator().w(function (_context13) {
+        while (1) switch (_context13.p = _context13.n) {
           case 0:
-            _context0.p = 0;
+            _context13.p = 0;
             pushPage({
               key: "Select wallet provider",
               content: jsx(ExternalWalletSelector, {
@@ -398,16 +512,16 @@ function AuthComponent(_ref) {
                 sessionKey: sessionKey
               })
             });
-            _context0.n = 2;
+            _context13.n = 2;
             break;
           case 1:
-            _context0.p = 1;
-            _t3 = _context0.v;
-            throw new Error("Error fetching wallet providers: ".concat(_t3));
+            _context13.p = 1;
+            _t25 = _context13.v;
+            throw new Error("Error fetching wallet providers: ".concat(_t25));
           case 2:
-            return _context0.a(2);
+            return _context13.a(2);
         }
-      }, _callee0, null, [[0, 1]]);
+      }, _callee13, null, [[0, 1]]);
     }));
     return function handleShowWalletSelector() {
       return _ref0.apply(this, arguments);
@@ -419,35 +533,40 @@ function AuthComponent(_ref) {
       icon: jsx(FontAwesomeIcon, {
         icon: faGoogle
       }),
-      onClick: handleGoogle
+      onClick: handleGoogle,
+      disabled: !authEnabled
     }, "google") : null,
     apple: methods.appleOauthEnabled ? jsx(OAuthButton, {
       name: "Apple",
       icon: jsx(FontAwesomeIcon, {
         icon: faApple
       }),
-      onClick: handleApple
+      onClick: handleApple,
+      disabled: !authEnabled
     }, "apple") : null,
     facebook: methods.facebookOauthEnabled ? jsx(OAuthButton, {
       name: "Facebook",
       icon: jsx(FontAwesomeIcon, {
         icon: faFacebook
       }),
-      onClick: handleFacebook
+      onClick: handleFacebook,
+      disabled: !authEnabled
     }, "facebook") : null,
     x: methods.xOauthEnabled ? jsx(OAuthButton, {
       name: "X",
       icon: jsx(FontAwesomeIcon, {
         icon: faXTwitter
       }),
-      onClick: handleX
+      onClick: handleX,
+      disabled: !authEnabled
     }, "x") : null,
     discord: methods.discordOauthEnabled ? jsx(OAuthButton, {
       name: "Discord",
       icon: jsx(FontAwesomeIcon, {
         icon: faDiscord
       }),
-      onClick: handleDiscord
+      onClick: handleDiscord,
+      disabled: !authEnabled
     }, "discord") : null
   };
   var oauthButtons = oauthOrder.map(function (provider) {
@@ -463,6 +582,7 @@ function AuthComponent(_ref) {
       icon: jsx(FontAwesomeIcon, {
         icon: faEllipsisH
       }),
+      disabled: !authEnabled,
       onClick: function onClick() {
         return openSheet({
           key: "Select a social method",
@@ -483,17 +603,21 @@ function AuthComponent(_ref) {
   var methodComponents = {
     socials: oauthBlock,
     email: methods.emailOtpAuthEnabled ? jsx(EmailInput, {
-      onContinue: handleEmailSubmit
+      onContinue: handleEmailSubmit,
+      disabled: !authEnabled
     }) : null,
     sms: methods.smsOtpAuthEnabled ? jsx(PhoneNumberInput, {
-      onContinue: handlePhoneSubmit
+      onContinue: handlePhoneSubmit,
+      disabled: !authEnabled
     }) : null,
     passkey: methods.passkeyAuthEnabled ? jsx(PasskeyButtons, {
       onLogin: handlePasskeyLogin,
-      onSignUp: handlePasskeySignUp
+      onSignUp: handlePasskeySignUp,
+      disabled: !authEnabled
     }) : null,
     wallet: methods.walletAuthEnabled ? jsx(WalletAuthButton, {
-      onContinue: handleShowWalletSelector
+      onContinue: handleShowWalletSelector,
+      disabled: !authEnabled
     }) : null
   };
   // -- Final Rendering Order --
@@ -529,7 +653,7 @@ function AuthComponent(_ref) {
       developerMessages: ["You have not passed in authProxyConfigId into the TurnkeyProvider.", "To use this modal, you must be using Turnkey's Auth Proxy.", "Please enable it in the Turnkey dashboard and pass in the authProxyConfigId into the TurnkeyProvider."],
       // Users should never see this message ever. We should give a reward for anyone who does see this.
       userMessages: ["You touched fuzzy.... and got dizzy."]
-    }), jsx("div", {
+    }), turnstile, jsx("div", {
       className: "text-icon-text-light/70 dark:text-icon-text-dark/70 text-xs mt-4 text-center",
       children: jsxs("span", {
         children: ["By continuing, you agree to our", " ", jsx("a", {