@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
555 lines (552 loc) • 21.4 kB
JavaScript
import { asyncToGenerator as _asyncToGenerator, regenerator as _regenerator, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.mjs';
import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faDiscord, faXTwitter, faFacebook, faApple, faGoogle } from '@fortawesome/free-brands-svg-icons';
import { OtpType } from '@turnkey/core';
import { faEllipsisH, 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 { DeveloperError } from '../design/Failure.mjs';
import { useModal } from '../../providers/modal/Hook.mjs';
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';
function AuthComponent(_ref) {
var _config$ui;
var sessionKey = _ref.sessionKey,
logo = _ref.logo,
logoClassName = _ref.logoClassName,
title = _ref.title;
var _useTurnkey = useTurnkey(),
config = _useTurnkey.config,
clientState = _useTurnkey.clientState,
handleGoogleOauth = _useTurnkey.handleGoogleOauth,
handleAppleOauth = _useTurnkey.handleAppleOauth,
handleFacebookOauth = _useTurnkey.handleFacebookOauth,
handleXOauth = _useTurnkey.handleXOauth,
handleDiscordOauth = _useTurnkey.handleDiscordOauth,
initOtp = _useTurnkey.initOtp,
loginWithPasskey = _useTurnkey.loginWithPasskey,
signUpWithPasskey = _useTurnkey.signUpWithPasskey;
var _useModal = useModal(),
pushPage = _useModal.pushPage,
isMobile = _useModal.isMobile,
openSheet = _useModal.openSheet;
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 _ref2 = ((_config$ui = config.ui) === null || _config$ui === void 0 ? void 0 : _config$ui.authModal) || {},
_ref2$methods = _ref2.methods,
methods = _ref2$methods === void 0 ? {} : _ref2$methods,
_ref2$methodOrder = _ref2.methodOrder,
methodOrder = _ref2$methodOrder === void 0 ? [] : _ref2$methodOrder,
_ref2$oauthOrder = _ref2.oauthOrder,
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;
return _regenerator().w(function (_context) {
while (1) switch (_context.p = _context.n) {
case 0:
_context.p = 0;
_context.n = 1;
return initOtp({
otpType: OtpType.Email,
contact: email
});
case 1:
_yield$initOtp = _context.v;
otpId = _yield$initOtp.otpId;
otpEncryptionTargetBundle = _yield$initOtp.otpEncryptionTargetBundle;
pushPage({
key: "Verify OTP",
content: jsx(OtpVerification, _objectSpread2({
contact: email,
otpId: otpId,
otpEncryptionTargetBundle: otpEncryptionTargetBundle,
otpType: OtpType.Email,
otpLength: ((_config$auth = config.auth) === null || _config$auth === void 0 ? void 0 : _config$auth.otpLength) !== undefined ? Number(config.auth.otpLength) : undefined,
alphanumeric: (_config$auth2 = config.auth) === null || _config$auth2 === void 0 ? void 0 : _config$auth2.otpAlphanumeric
}, sessionKey && {
sessionKey: sessionKey
})),
showTitle: false
});
_context.n = 3;
break;
case 2:
_context.p = 2;
_t = _context.v;
throw new Error("Error initializing OTP: ".concat(_t));
case 3:
return _context.a(2);
}
}, _callee, null, [[0, 2]]);
}));
return function handleEmailSubmit(_x) {
return _ref3.apply(this, arguments);
};
}();
var handlePhoneSubmit = /*#__PURE__*/function () {
var _ref4 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee2(phone, formattedPhone) {
var _config$auth3, _config$auth4, _yield$initOtp2, otpId, otpEncryptionTargetBundle, _t2;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.p = _context2.n) {
case 0:
_context2.p = 0;
_context2.n = 1;
return initOtp({
otpType: OtpType.Sms,
contact: phone
});
case 1:
_yield$initOtp2 = _context2.v;
otpId = _yield$initOtp2.otpId;
otpEncryptionTargetBundle = _yield$initOtp2.otpEncryptionTargetBundle;
pushPage({
key: "Verify OTP",
content: jsx(OtpVerification, _objectSpread2({
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,
otpEncryptionTargetBundle: otpEncryptionTargetBundle,
otpType: OtpType.Sms,
otpLength: ((_config$auth3 = config.auth) === null || _config$auth3 === void 0 ? void 0 : _config$auth3.otpLength) !== undefined ? Number(config.auth.otpLength) : undefined,
alphanumeric: (_config$auth4 = config.auth) === null || _config$auth4 === void 0 ? void 0 : _config$auth4.otpAlphanumeric
}, sessionKey && {
sessionKey: sessionKey
})),
showTitle: false
});
_context2.n = 3;
break;
case 2:
_context2.p = 2;
_t2 = _context2.v;
throw new Error("Error initializing OTP: ".concat(_t2));
case 3:
return _context2.a(2);
}
}, _callee2, null, [[0, 2]]);
}));
return function handlePhoneSubmit(_x2, _x3) {
return _ref4.apply(this, arguments);
};
}();
var handlePasskeyLogin = function handlePasskeyLogin() {
pushPage({
key: "Passkey Login",
content: jsx(ActionPage, {
title: "Authenticating with passkey...",
action: function () {
var _action = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee3() {
return _regenerator().w(function (_context3) {
while (1) switch (_context3.n) {
case 0:
_context3.n = 1;
return loginWithPasskey(_objectSpread2({}, sessionKey && {
sessionKey: sessionKey
}));
case 1:
return _context3.a(2);
}
}, _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__*/_regenerator().m(function _callee4() {
return _regenerator().w(function (_context4) {
while (1) switch (_context4.n) {
case 0:
_context4.n = 1;
return signUpWithPasskey(_objectSpread2({}, sessionKey && {
sessionKey: sessionKey
}));
case 1:
return _context4.a(2);
}
}, _callee4);
}));
function action() {
return _action2.apply(this, arguments);
}
return action;
}(),
icon: jsx(FontAwesomeIcon, {
size: "3x",
icon: faFingerprint
})
}),
showTitle: false
});
};
var handleGoogle = /*#__PURE__*/function () {
var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee5() {
return _regenerator().w(function (_context5) {
while (1) switch (_context5.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
});
},
icon: jsx(FontAwesomeIcon, {
size: "3x",
icon: faGoogle
})
}),
showTitle: false
});
case 1:
return _context5.a(2);
}
}, _callee5);
}));
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) {
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
});
},
icon: jsx(FontAwesomeIcon, {
size: "3x",
icon: faApple
})
}),
showTitle: false
});
case 1:
return _context6.a(2);
}
}, _callee6);
}));
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) {
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
});
},
icon: jsx(FontAwesomeIcon, {
size: "3x",
icon: faFacebook
})
}),
showTitle: false
});
case 1:
return _context7.a(2);
}
}, _callee7);
}));
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) {
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
});
},
icon: jsx(FontAwesomeIcon, {
size: "3x",
icon: faXTwitter
})
}),
showTitle: false
});
case 1:
return _context8.a(2);
}
}, _callee8);
}));
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) {
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
});
},
icon: jsx(FontAwesomeIcon, {
size: "3x",
icon: faDiscord
})
}),
showTitle: false
});
case 1:
return _context9.a(2);
}
}, _callee9);
}));
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) {
case 0:
_context0.p = 0;
pushPage({
key: "Select wallet provider",
content: jsx(ExternalWalletSelector, {
mode: WalletSelectorMode.Auth,
sessionKey: sessionKey
})
});
_context0.n = 2;
break;
case 1:
_context0.p = 1;
_t3 = _context0.v;
throw new Error("Error fetching wallet providers: ".concat(_t3));
case 2:
return _context0.a(2);
}
}, _callee0, null, [[0, 1]]);
}));
return function handleShowWalletSelector() {
return _ref0.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,
x: methods.xOauthEnabled ? jsx(OAuthButton, {
name: "X",
icon: jsx(FontAwesomeIcon, {
icon: faXTwitter
}),
onClick: handleX
}, "x") : null,
discord: methods.discordOauthEnabled ? jsx(OAuthButton, {
name: "Discord",
icon: jsx(FontAwesomeIcon, {
icon: faDiscord
}),
onClick: handleDiscord
}, "discord") : null
};
var oauthButtons = oauthOrder.map(function (provider) {
return oauthButtonMap[provider];
}).filter(Boolean);
var oauthBlock = oauthButtons.length > 0 && oauthButtons.length <= 5 ? jsx("div", {
className: "w-full h-11 flex flex-row justify-center items-center gap-2",
children: oauthButtons
}, "socials") : oauthButtons.length > 0 ? jsxs("div", {
className: "w-full h-11 flex flex-row justify-center items-center gap-2",
children: [oauthButtons.slice(0, 4), jsx(OAuthButton, {
name: "More",
icon: jsx(FontAwesomeIcon, {
icon: faEllipsisH
}),
onClick: function onClick() {
return openSheet({
key: "Select a social method",
content: jsx("div", {
className: "w-full h-full flex flex-wrap justify-center items-center gap-2",
children: oauthButtons.map(function (button) {
return jsx("div", {
className: "w-16 h-11",
children: button
}, button === null || button === void 0 ? void 0 : button.key);
})
})
});
}
}, "more")]
}, "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: [logo ? jsxs("div", {
className: "mt-3 mb-4 flex flex-col items-center",
children: [jsx("img", {
src: logo,
className: "max-w-32 mt-3 w-fit max-h-16 h-fit object-contain ".concat(logoClassName)
}), jsx("h2", {
className: "text-lg font-medium mb-4 text-center",
children: title !== null && title !== void 0 ? title : "Log in or sign up"
})]
}) : 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 autoFetchWalletKitConfig in the TurnkeyProvider, please ensure that you are passing in the correct auth methods in the TurnkeyProvider's auth config."],
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