@turnkey/react-wallet-kit
Version:
The easiest and most powerful way to integrate Turnkey's Embedded Wallets into your React applications.
328 lines (324 loc) • 11.7 kB
JavaScript
;
var jsxRuntime = require('react/jsx-runtime');
var reactFontawesome = require('@fortawesome/react-fontawesome');
var freeBrandsSvgIcons = require('@fortawesome/free-brands-svg-icons');
var core = require('@turnkey/core');
var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
var clsx = require('clsx');
var OAuth = require('./OAuth.js');
var Email = require('./Email.js');
var OrSeparator = require('./OrSeparator.js');
var OTP = require('./OTP.js');
var Phone = require('./Phone.js');
var Action = require('./Action.js');
var Passkey = require('./Passkey.js');
var Spinners = require('../design/Spinners.js');
var Wallet = require('./Wallet.js');
var Failure = require('../design/Failure.js');
var Hook$1 = require('../../providers/modal/Hook.js');
var Hook = require('../../providers/client/Hook.js');
var base = require('../../types/base.js');
var utils = require('../../utils.js');
function AuthComponent() {
const {
config,
clientState,
handleGoogleOauth,
handleAppleOauth,
handleFacebookOauth,
initOtp,
loginWithPasskey,
signUpWithPasskey,
getWalletProviders,
loginOrSignupWithWallet,
disconnectWalletAccount
} = Hook.useTurnkey();
const {
pushPage,
isMobile
} = Hook$1.useModal();
if (!config || clientState === base.ClientState.Loading) {
// Don't check ClientState.Error here. We already check in the modal root
return jsxRuntime.jsx("div", {
className: "flex flex-col items-center w-96 py-5",
children: jsxRuntime.jsx(Spinners.Spinner, {
strokeWidth: 2,
className: "w-48 h-48"
})
});
}
const {
methods = {},
methodOrder = [],
oauthOrder = []
} = config.auth || {};
const handleEmailSubmit = async email => {
try {
const otpId = await initOtp({
otpType: core.OtpType.Email,
contact: email
});
pushPage({
key: "Verify OTP",
content: jsxRuntime.jsx(OTP.OtpVerification, {
contact: email,
otpId: otpId,
otpType: core.OtpType.Email
}),
showTitle: false
});
} catch (error) {
throw new Error(`Error initializing OTP: ${error}`);
}
};
const handlePhoneSubmit = async (phone, formattedPhone) => {
try {
const otpId = await initOtp({
otpType: core.OtpType.Sms,
contact: phone
});
pushPage({
key: "Verify OTP",
content: jsxRuntime.jsx(OTP.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: core.OtpType.Sms
}),
showTitle: false
});
} catch (error) {
throw new Error(`Error initializing OTP: ${error}`);
}
};
const handlePasskeyLogin = () => {
pushPage({
key: "Passkey Login",
content: jsxRuntime.jsx(Action.ActionPage, {
title: "Authenticating with passkey...",
action: async () => {
await loginWithPasskey({});
},
icon: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
size: "3x",
icon: freeSolidSvgIcons.faFingerprint
})
}),
showTitle: false
});
};
const handlePasskeySignUp = () => {
pushPage({
key: "Passkey Sign Up",
content: jsxRuntime.jsx(Action.ActionPage, {
title: "Creating account with passkey...",
action: async () => {
await signUpWithPasskey({});
},
icon: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
size: "3x",
icon: freeSolidSvgIcons.faFingerprint
})
}),
showTitle: false
});
};
const handleGoogle = async () => {
pushPage({
key: "Google OAuth",
content: jsxRuntime.jsx(Action.ActionPage, {
title: "Authenticating with Google...",
action: () => handleGoogleOauth({
additionalState: {
openModal: "true"
} // Tell the provider to reopen the auth modal and show the loading state
}),
icon: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
size: "3x",
icon: freeBrandsSvgIcons.faGoogle
})
}),
showTitle: false
});
};
const handleApple = async () => {
pushPage({
key: "Apple OAuth",
content: jsxRuntime.jsx(Action.ActionPage, {
title: "Authenticating with Apple...",
action: () => handleAppleOauth({
additionalState: {
openModal: "true"
} // Tell the provider to reopen the auth modal and show the loading state
}),
icon: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
size: "3x",
icon: freeBrandsSvgIcons.faApple
})
}),
showTitle: false
});
};
const handleFacebook = async () => {
pushPage({
key: "Facebook OAuth",
content: jsxRuntime.jsx(Action.ActionPage, {
title: "Authenticating with Facebook...",
action: () => handleFacebookOauth({
additionalState: {
openModal: "true"
} // Tell the provider to reopen the auth modal and show the loading state
}),
icon: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
size: "3x",
icon: freeBrandsSvgIcons.faFacebook
})
}),
showTitle: false
});
};
const handleWalletLoginOrSignup = async provider => {
pushPage({
key: "Wallet Login/Signup",
content: jsxRuntime.jsx(Action.ActionPage, {
title: `Authenticating with ${provider.info.name}...`,
action: async () => {
await loginOrSignupWithWallet({
walletProvider: provider
});
},
icon: jsxRuntime.jsx("img", {
className: "size-11 rounded-full",
src: provider.info.icon || ""
})
}),
showTitle: false
});
};
const handleSelect = async provider => {
// this is a wallet connect provider, so we need to show the WalletConnect screen
if (utils.isWalletConnect(provider)) {
// 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: jsxRuntime.jsx(Wallet.WalletConnectScreen, {
provider: provider,
onAction: async provider => {
await loginOrSignupWithWallet({
walletProvider: provider
});
},
onDisconnect: async provider => {
await disconnectWalletAccount(provider);
},
successPageDuration: undefined
})
});
return;
}
// this is a regular wallet provider, so we can just select it
await handleWalletLoginOrSignup(provider);
};
const handleShowWalletSelector = async () => {
try {
const walletProviders = await getWalletProviders();
pushPage({
key: "Select wallet provider",
content: jsxRuntime.jsx(Wallet.ExternalWalletSelector, {
providers: walletProviders,
onSelect: handleSelect
})
});
} catch (error) {
throw new Error(`Error fetching wallet providers: ${error}`);
}
};
const oauthButtonMap = {
google: methods.googleOauthEnabled ? jsxRuntime.jsx(OAuth.OAuthButton, {
name: "Google",
icon: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
icon: freeBrandsSvgIcons.faGoogle
}),
onClick: handleGoogle
}, "google") : null,
apple: methods.appleOauthEnabled ? jsxRuntime.jsx(OAuth.OAuthButton, {
name: "Apple",
icon: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
icon: freeBrandsSvgIcons.faApple
}),
onClick: handleApple
}, "apple") : null,
facebook: methods.facebookOauthEnabled ? jsxRuntime.jsx(OAuth.OAuthButton, {
name: "Facebook",
icon: jsxRuntime.jsx(reactFontawesome.FontAwesomeIcon, {
icon: freeBrandsSvgIcons.faFacebook
}),
onClick: handleFacebook
}, "facebook") : null
};
const oauthButtons = oauthOrder.map(provider => oauthButtonMap[provider]).filter(Boolean);
const oauthBlock = oauthButtons.length > 0 ? jsxRuntime.jsx("div", {
className: "w-full h-11 flex flex-row justify-center items-center gap-2",
children: oauthButtons
}, "socials") : null;
// -- Individual Auth Method Components --
const methodComponents = {
socials: oauthBlock,
email: methods.emailOtpAuthEnabled ? jsxRuntime.jsx(Email.EmailInput, {
onContinue: handleEmailSubmit
}) : null,
sms: methods.smsOtpAuthEnabled ? jsxRuntime.jsx(Phone.PhoneNumberInput, {
onContinue: handlePhoneSubmit
}) : null,
passkey: methods.passkeyAuthEnabled ? jsxRuntime.jsx(Passkey.PasskeyButtons, {
onLogin: handlePasskeyLogin,
onSignUp: handlePasskeySignUp
}) : null,
wallet: methods.walletAuthEnabled ? jsxRuntime.jsx(Wallet.WalletAuthButton, {
onContinue: handleShowWalletSelector
}) : null
};
// -- Final Rendering Order --
const rendered = methodOrder.map(key => methodComponents[key]).filter(Boolean);
return jsxRuntime.jsxs("div", {
className: clsx("flex flex-col items-center ", isMobile ? "w-full" : "w-96"),
children: [config.authProxyConfigId ? rendered.length > 0 ? jsxRuntime.jsxs(jsxRuntime.Fragment, {
children: [jsxRuntime.jsx("div", {
className: "mt-12"
}), rendered.map((component, index) => jsxRuntime.jsxs("div", {
className: "w-full",
children: [index > 0 && jsxRuntime.jsx(OrSeparator.OrSeparator, {}), component]
}, index))]
}) : jsxRuntime.jsx(Failure.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."]
}) : jsxRuntime.jsx(Failure.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."]
}), jsxRuntime.jsx("div", {
className: "text-icon-text-light/70 dark:text-icon-text-dark/70 text-xs mt-4 text-center",
children: jsxRuntime.jsxs("span", {
children: ["By continuing, you agree to our", " ", jsxRuntime.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"
}), " ", "&", " ", jsxRuntime.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"
}), "."]
})
})]
});
}
exports.AuthComponent = AuthComponent;
//# sourceMappingURL=index.js.map