@turnkey/react-wallet-kit/dist/components/auth/index.mjs

The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.

import { asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faFacebook, faApple, faGoogle } from '@fortawesome/free-brands-svg-icons';
import { OtpType } from '@turnkey/core';
import { faFingerprint } from '@fortawesome/free-solid-svg-icons';
import clsx from 'clsx';
import { OAuthButton } from './OAuth.mjs';
import { EmailInput } from './Email.mjs';
import { OrSeparator } from './OrSeparator.mjs';
import { OtpVerification } from './OTP.mjs';
import { PhoneNumberInput } from './Phone.mjs';
import { ActionPage } from './Action.mjs';
import { PasskeyButtons } from './Passkey.mjs';
import { Spinner } from '../design/Spinners.mjs';
import { WalletAuthButton, ExternalWalletSelector, WalletConnectScreen } from './Wallet.mjs';
import { DeveloperError } from '../design/Failure.mjs';
import { useModal } from '../../providers/modal/Hook.mjs';
import { useTurnkey } from '../../providers/client/Hook.mjs';
import { ClientState } from '../../types/base.mjs';
import { isWalletConnect } from '../../utils.mjs';

function AuthComponent() {
  var _useTurnkey = useTurnkey(),
    config = _useTurnkey.config,
    clientState = _useTurnkey.clientState,
    handleGoogleOauth = _useTurnkey.handleGoogleOauth,
    handleAppleOauth = _useTurnkey.handleAppleOauth,
    handleFacebookOauth = _useTurnkey.handleFacebookOauth,
    initOtp = _useTurnkey.initOtp,
    loginWithPasskey = _useTurnkey.loginWithPasskey,
    signUpWithPasskey = _useTurnkey.signUpWithPasskey,
    getWalletProviders = _useTurnkey.getWalletProviders,
    loginOrSignupWithWallet = _useTurnkey.loginOrSignupWithWallet,
    disconnectWalletAccount = _useTurnkey.disconnectWalletAccount;
  var _useModal = useModal(),
    pushPage = _useModal.pushPage,
    isMobile = _useModal.isMobile;
  if (!config || clientState === ClientState.Loading) {
    // Don't check ClientState.Error here. We already check in the modal root
    return jsx("div", {
      className: "flex flex-col items-center w-96 py-5",
      children: jsx(Spinner, {
        strokeWidth: 2,
        className: "w-48 h-48"
      })
    });
  }
  var _ref = config.auth || {},
    _ref$methods = _ref.methods,
    methods = _ref$methods === void 0 ? {} : _ref$methods,
    _ref$methodOrder = _ref.methodOrder,
    methodOrder = _ref$methodOrder === void 0 ? [] : _ref$methodOrder,
    _ref$oauthOrder = _ref.oauthOrder,
    oauthOrder = _ref$oauthOrder === void 0 ? [] : _ref$oauthOrder;
  var handleEmailSubmit = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(email) {
      var otpId;
      return _regeneratorRuntime().wrap(function _callee$(_context) {
        while (1) switch (_context.prev = _context.next) {
          case 0:
            _context.prev = 0;
            _context.next = 3;
            return initOtp({
              otpType: OtpType.Email,
              contact: email
            });
          case 3:
            otpId = _context.sent;
            pushPage({
              key: "Verify OTP",
              content: jsx(OtpVerification, {
                contact: email,
                otpId: otpId,
                otpType: OtpType.Email
              }),
              showTitle: false
            });
            _context.next = 10;
            break;
          case 7:
            _context.prev = 7;
            _context.t0 = _context["catch"](0);
            throw new Error("Error initializing OTP: ".concat(_context.t0));
          case 10:
          case "end":
            return _context.stop();
        }
      }, _callee, null, [[0, 7]]);
    }));
    return function handleEmailSubmit(_x) {
      return _ref2.apply(this, arguments);
    };
  }();
  var handlePhoneSubmit = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(phone, formattedPhone) {
      var otpId;
      return _regeneratorRuntime().wrap(function _callee2$(_context2) {
        while (1) switch (_context2.prev = _context2.next) {
          case 0:
            _context2.prev = 0;
            _context2.next = 3;
            return initOtp({
              otpType: OtpType.Sms,
              contact: phone
            });
          case 3:
            otpId = _context2.sent;
            pushPage({
              key: "Verify OTP",
              content: jsx(OtpVerification, {
                contact: phone,
                // Pass in the formatted phone number seperately. In the case that some weird formatting occurs, we don't want to send it into the initOtp request
                formattedContact: formattedPhone,
                otpId: otpId,
                otpType: OtpType.Sms
              }),
              showTitle: false
            });
            _context2.next = 10;
            break;
          case 7:
            _context2.prev = 7;
            _context2.t0 = _context2["catch"](0);
            throw new Error("Error initializing OTP: ".concat(_context2.t0));
          case 10:
          case "end":
            return _context2.stop();
        }
      }, _callee2, null, [[0, 7]]);
    }));
    return function handlePhoneSubmit(_x2, _x3) {
      return _ref3.apply(this, arguments);
    };
  }();
  var handlePasskeyLogin = function handlePasskeyLogin() {
    pushPage({
      key: "Passkey Login",
      content: jsx(ActionPage, {
        title: "Authenticating with passkey...",
        action: function () {
          var _action = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
            return _regeneratorRuntime().wrap(function _callee3$(_context3) {
              while (1) switch (_context3.prev = _context3.next) {
                case 0:
                  _context3.next = 2;
                  return loginWithPasskey({});
                case 2:
                case "end":
                  return _context3.stop();
              }
            }, _callee3);
          }));
          function action() {
            return _action.apply(this, arguments);
          }
          return action;
        }(),
        icon: jsx(FontAwesomeIcon, {
          size: "3x",
          icon: faFingerprint
        })
      }),
      showTitle: false
    });
  };
  var handlePasskeySignUp = function handlePasskeySignUp() {
    pushPage({
      key: "Passkey Sign Up",
      content: jsx(ActionPage, {
        title: "Creating account with passkey...",
        action: function () {
          var _action2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
            return _regeneratorRuntime().wrap(function _callee4$(_context4) {
              while (1) switch (_context4.prev = _context4.next) {
                case 0:
                  _context4.next = 2;
                  return signUpWithPasskey({});
                case 2:
                case "end":
                  return _context4.stop();
              }
            }, _callee4);
          }));
          function action() {
            return _action2.apply(this, arguments);
          }
          return action;
        }(),
        icon: jsx(FontAwesomeIcon, {
          size: "3x",
          icon: faFingerprint
        })
      }),
      showTitle: false
    });
  };
  var handleGoogle = /*#__PURE__*/function () {
    var _ref4 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
      return _regeneratorRuntime().wrap(function _callee5$(_context5) {
        while (1) switch (_context5.prev = _context5.next) {
          case 0:
            pushPage({
              key: "Google OAuth",
              content: jsx(ActionPage, {
                title: "Authenticating with Google...",
                action: function action() {
                  return handleGoogleOauth({
                    additionalState: {
                      openModal: "true"
                    } // Tell the provider to reopen the auth modal and show the loading state
                  });
                },
                icon: jsx(FontAwesomeIcon, {
                  size: "3x",
                  icon: faGoogle
                })
              }),
              showTitle: false
            });
          case 1:
          case "end":
            return _context5.stop();
        }
      }, _callee5);
    }));
    return function handleGoogle() {
      return _ref4.apply(this, arguments);
    };
  }();
  var handleApple = /*#__PURE__*/function () {
    var _ref5 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee6() {
      return _regeneratorRuntime().wrap(function _callee6$(_context6) {
        while (1) switch (_context6.prev = _context6.next) {
          case 0:
            pushPage({
              key: "Apple OAuth",
              content: jsx(ActionPage, {
                title: "Authenticating with Apple...",
                action: function action() {
                  return handleAppleOauth({
                    additionalState: {
                      openModal: "true"
                    } // Tell the provider to reopen the auth modal and show the loading state
                  });
                },
                icon: jsx(FontAwesomeIcon, {
                  size: "3x",
                  icon: faApple
                })
              }),
              showTitle: false
            });
          case 1:
          case "end":
            return _context6.stop();
        }
      }, _callee6);
    }));
    return function handleApple() {
      return _ref5.apply(this, arguments);
    };
  }();
  var handleFacebook = /*#__PURE__*/function () {
    var _ref6 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee7() {
      return _regeneratorRuntime().wrap(function _callee7$(_context7) {
        while (1) switch (_context7.prev = _context7.next) {
          case 0:
            pushPage({
              key: "Facebook OAuth",
              content: jsx(ActionPage, {
                title: "Authenticating with Facebook...",
                action: function action() {
                  return handleFacebookOauth({
                    additionalState: {
                      openModal: "true"
                    } // Tell the provider to reopen the auth modal and show the loading state
                  });
                },
                icon: jsx(FontAwesomeIcon, {
                  size: "3x",
                  icon: faFacebook
                })
              }),
              showTitle: false
            });
          case 1:
          case "end":
            return _context7.stop();
        }
      }, _callee7);
    }));
    return function handleFacebook() {
      return _ref6.apply(this, arguments);
    };
  }();
  var handleWalletLoginOrSignup = /*#__PURE__*/function () {
    var _ref7 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee9(provider) {
      return _regeneratorRuntime().wrap(function _callee9$(_context9) {
        while (1) switch (_context9.prev = _context9.next) {
          case 0:
            pushPage({
              key: "Wallet Login/Signup",
              content: jsx(ActionPage, {
                title: "Authenticating with ".concat(provider.info.name, "..."),
                action: function () {
                  var _action3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee8() {
                    return _regeneratorRuntime().wrap(function _callee8$(_context8) {
                      while (1) switch (_context8.prev = _context8.next) {
                        case 0:
                          _context8.next = 2;
                          return loginOrSignupWithWallet({
                            walletProvider: provider
                          });
                        case 2:
                        case "end":
                          return _context8.stop();
                      }
                    }, _callee8);
                  }));
                  function action() {
                    return _action3.apply(this, arguments);
                  }
                  return action;
                }(),
                icon: jsx("img", {
                  className: "size-11 rounded-full",
                  src: provider.info.icon || ""
                })
              }),
              showTitle: false
            });
          case 1:
          case "end":
            return _context9.stop();
        }
      }, _callee9);
    }));
    return function handleWalletLoginOrSignup(_x4) {
      return _ref7.apply(this, arguments);
    };
  }();
  var handleSelect = /*#__PURE__*/function () {
    var _ref8 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee10(provider) {
      return _regeneratorRuntime().wrap(function _callee10$(_context10) {
        while (1) switch (_context10.prev = _context10.next) {
          case 0:
            if (!isWalletConnect(provider)) {
              _context10.next = 3;
              break;
            }
            // for WalletConnect we route to a dedicated screen
            // to handle the connection process, as it requires a different flow (pairing via QR code or deep link)
            pushPage({
              key: "Link WalletConnect",
              content: jsx(WalletConnectScreen, {
                provider: provider,
                onAction: function () {
                  var _onAction = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee0(provider) {
                    return _regeneratorRuntime().wrap(function _callee0$(_context0) {
                      while (1) switch (_context0.prev = _context0.next) {
                        case 0:
                          _context0.next = 2;
                          return loginOrSignupWithWallet({
                            walletProvider: provider
                          });
                        case 2:
                        case "end":
                          return _context0.stop();
                      }
                    }, _callee0);
                  }));
                  function onAction(_x6) {
                    return _onAction.apply(this, arguments);
                  }
                  return onAction;
                }(),
                onDisconnect: function () {
                  var _onDisconnect = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee1(provider) {
                    return _regeneratorRuntime().wrap(function _callee1$(_context1) {
                      while (1) switch (_context1.prev = _context1.next) {
                        case 0:
                          _context1.next = 2;
                          return disconnectWalletAccount(provider);
                        case 2:
                        case "end":
                          return _context1.stop();
                      }
                    }, _callee1);
                  }));
                  function onDisconnect(_x7) {
                    return _onDisconnect.apply(this, arguments);
                  }
                  return onDisconnect;
                }(),
                successPageDuration: undefined
              })
            });
            return _context10.abrupt("return");
          case 3:
            _context10.next = 5;
            return handleWalletLoginOrSignup(provider);
          case 5:
          case "end":
            return _context10.stop();
        }
      }, _callee10);
    }));
    return function handleSelect(_x5) {
      return _ref8.apply(this, arguments);
    };
  }();
  var handleShowWalletSelector = /*#__PURE__*/function () {
    var _ref9 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee11() {
      var walletProviders;
      return _regeneratorRuntime().wrap(function _callee11$(_context11) {
        while (1) switch (_context11.prev = _context11.next) {
          case 0:
            _context11.prev = 0;
            _context11.next = 3;
            return getWalletProviders();
          case 3:
            walletProviders = _context11.sent;
            pushPage({
              key: "Select wallet provider",
              content: jsx(ExternalWalletSelector, {
                providers: walletProviders,
                onSelect: handleSelect
              })
            });
            _context11.next = 10;
            break;
          case 7:
            _context11.prev = 7;
            _context11.t0 = _context11["catch"](0);
            throw new Error("Error fetching wallet providers: ".concat(_context11.t0));
          case 10:
          case "end":
            return _context11.stop();
        }
      }, _callee11, null, [[0, 7]]);
    }));
    return function handleShowWalletSelector() {
      return _ref9.apply(this, arguments);
    };
  }();
  var oauthButtonMap = {
    google: methods.googleOauthEnabled ? jsx(OAuthButton, {
      name: "Google",
      icon: jsx(FontAwesomeIcon, {
        icon: faGoogle
      }),
      onClick: handleGoogle
    }, "google") : null,
    apple: methods.appleOauthEnabled ? jsx(OAuthButton, {
      name: "Apple",
      icon: jsx(FontAwesomeIcon, {
        icon: faApple
      }),
      onClick: handleApple
    }, "apple") : null,
    facebook: methods.facebookOauthEnabled ? jsx(OAuthButton, {
      name: "Facebook",
      icon: jsx(FontAwesomeIcon, {
        icon: faFacebook
      }),
      onClick: handleFacebook
    }, "facebook") : null
  };
  var oauthButtons = oauthOrder.map(function (provider) {
    return oauthButtonMap[provider];
  }).filter(Boolean);
  var oauthBlock = oauthButtons.length > 0 ? jsx("div", {
    className: "w-full h-11 flex flex-row justify-center items-center gap-2",
    children: oauthButtons
  }, "socials") : null;
  // -- Individual Auth Method Components --
  var methodComponents = {
    socials: oauthBlock,
    email: methods.emailOtpAuthEnabled ? jsx(EmailInput, {
      onContinue: handleEmailSubmit
    }) : null,
    sms: methods.smsOtpAuthEnabled ? jsx(PhoneNumberInput, {
      onContinue: handlePhoneSubmit
    }) : null,
    passkey: methods.passkeyAuthEnabled ? jsx(PasskeyButtons, {
      onLogin: handlePasskeyLogin,
      onSignUp: handlePasskeySignUp
    }) : null,
    wallet: methods.walletAuthEnabled ? jsx(WalletAuthButton, {
      onContinue: handleShowWalletSelector
    }) : null
  };
  // -- Final Rendering Order --
  var rendered = methodOrder.map(function (key) {
    return methodComponents[key];
  }).filter(Boolean);
  return jsxs("div", {
    className: clsx("flex flex-col items-center ", isMobile ? "w-full" : "w-96"),
    children: [config.authProxyConfigId ? rendered.length > 0 ? jsxs(Fragment, {
      children: [jsx("div", {
        className: "mt-12"
      }), rendered.map(function (component, index) {
        return jsxs("div", {
          className: "w-full",
          children: [index > 0 && jsx(OrSeparator, {}), component]
        }, index);
      })]
    }) : jsx(DeveloperError, {
      developerTitle: "No Auth Methods Enabled",
      developerMessages: ["You are using Turnkey's Auth Proxy, but no auth methods are enabled.", "To use this modal, you must enable auth methods within the Turnkey dashboard.", "If you disabled all auth methods within the TurnkeyProvider config, you will also see this error."],
      userMessages: ["No authentication methods are available."]
    }) : jsx(DeveloperError, {
      developerTitle: "Proxy not Enabled",
      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", {
      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", {
          href: "https://www.turnkey.com/legal/terms",
          target: "_blank",
          rel: "noopener noreferrer",
          className: "font-bold no-underline text-icon-text-light/80 dark:text-icon-text-dark/80",
          children: "Terms of Service"
        }), " ", "&", " ", jsx("a", {
          href: "https://www.turnkey.com/legal/privacy",
          target: "_blank",
          rel: "noopener noreferrer",
          className: "font-bold no-underline text-icon-text-light/80 dark:text-icon-text-dark/80",
          children: "Privacy Policy"
        }), "."]
      })
    })]
  });
}

export { AuthComponent };
//# sourceMappingURL=index.mjs.map