@getpara/react-sdk 1.7.1 → 1.8.0

package/dist/modal/components/ModalContent/ModalContent.js

@@ -0,0 +1,324 @@
+"use client";
+import {
+  __async,
+  __spreadProps,
+  __spreadValues
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useMemo, useState } from "react";
+import {
+  entityToWallet,
+  OnRampProvider,
+  OnRampAsset,
+  Network,
+  EnabledFlow
+} from "@getpara/web-sdk";
+import { useModalStore, useUserInfoStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { Body } from "../Body/Body.js";
+import { Footer } from "../Footer/Footer.js";
+import { DEFAULTS } from "../../constants/defaults.js";
+import { useGoBack } from "../../hooks/useGoBack.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useEmbeddedExternalConnection } from "../../hooks/useEmbeddedExternalConnection.js";
+import { useCreateAccount } from "../../hooks/useCreateAccount.js";
+import { formatBiometricHints } from "@getpara/react-common";
+import { useExternalWallets } from "../../providers/ExternalWalletContext.js";
+function isRampConfig(config) {
+  return "hostApiKey" in config;
+}
+const AssetNetworks = {
+  [OnRampAsset.SOLANA]: Network.SOLANA,
+  [OnRampAsset.ATOM]: Network.COSMOS,
+  [OnRampAsset.CELO]: Network.CELO,
+  [OnRampAsset.POLYGON]: Network.POLYGON
+};
+const AssetMap = {
+  SOLANA: OnRampAsset.SOLANA,
+  SOL: OnRampAsset.SOLANA,
+  ATOM: OnRampAsset.ATOM,
+  CELO: OnRampAsset.CELO,
+  POLYGON: OnRampAsset.POLYGON,
+  MATIC: OnRampAsset.POLYGON,
+  USDC: OnRampAsset.USDC,
+  ETH: OnRampAsset.ETHEREUM,
+  ETHEREUM: OnRampAsset.ETHEREUM
+};
+const ModalContent = forwardRef(
+  ({
+    onRampConfig: propsOnRampConfig,
+    twoFactorAuthEnabled = false,
+    recoverySecretStepEnabled = false,
+    oAuthMethods,
+    disableEmailLogin,
+    disablePhoneLogin,
+    onClose,
+    onRampTestMode,
+    loginTransitionOverride,
+    createWalletOverride
+  }, ref) => {
+    var _a;
+    const para = useInternalClient();
+    const refs = useModalStore((state) => state.refs);
+    const currentStep = useModalStore((state) => state.step);
+    const webAuthURLForLogin = useModalStore((state) => state.webAuthURLForLogin);
+    const passwordUrlForLogin = useModalStore((state) => state.passwordUrlForLogin);
+    const isLogin = useModalStore((state) => state.isLogin());
+    const onRampConfig = useModalStore((state) => state.onRampConfig);
+    const setStep = useModalStore((state) => state.setStep);
+    const setBiometricLocationHints = useModalStore((state) => state.setBiometricLocationHints);
+    const setWebAuthURLForLogin = useModalStore((state) => state.setWebAuthURLForLogin);
+    const setPasswordUrlForLogin = useModalStore((state) => state.setPasswordUrlForLogin);
+    const setSupportedAuthMethods = useModalStore((state) => state.setSupportedAuthMethods);
+    const setOnRampConfig = useModalStore((state) => state.setOnRampConfig);
+    const accountAddFundTab = useModalStore((state) => state.accountAddFundTab);
+    const setAccountAddFundTab = useModalStore((state) => state.setAccountAddFundTab);
+    const setRecoveryShare = useUserInfoStore((state) => state.setRecoveryShare);
+    const authStepRoute = useModalStore((state) => state.authStepRoute);
+    const isIFrameReady = useModalStore((state) => state.isIFrameReady);
+    const goBack = useGoBack();
+    const createAccount = useCreateAccount();
+    const biometricLocationHints = useModalStore((state) => {
+      var _a2;
+      return (_a2 = state.biometricLocationHints) != null ? _a2 : [];
+    });
+    const formattedHints = useMemo(() => formatBiometricHints(biometricLocationHints), [biometricLocationHints]);
+    const passkeysSupported = useModalStore((state) => state.isPasskeySupported);
+    const [hasHints, isOnKnownDevice] = [(biometricLocationHints == null ? void 0 : biometricLocationHints.length) > 0, (_a = formattedHints == null ? void 0 : formattedHints.isOnKnownDevice) != null ? _a : false];
+    const { disconnectExternalWallet } = useExternalWallets();
+    const [walletCreationInProgress, setWalletCreationInProgress] = useState(false);
+    const connectEmbeddedToExternalConnectors = useEmbeddedExternalConnection();
+    useEffect(() => {
+      if (!!authStepRoute && isIFrameReady) {
+        setTimeout(() => {
+          setStep(authStepRoute);
+        }, 200);
+      }
+    }, [authStepRoute, isIFrameReady]);
+    useImperativeHandle(ref, () => {
+      return {
+        handleModalClose() {
+          handleClose();
+        }
+      };
+    }, []);
+    const is2FASetup = () => __async(void 0, null, function* () {
+      if (!twoFactorAuthEnabled) {
+        return true;
+      }
+      try {
+        const { isSetup } = yield para.check2FAStatus();
+        return isSetup;
+      } catch (error) {
+        console.error("An error occurred while checking 2FA:", error);
+        return false;
+      }
+    });
+    function awaitLoginTransition() {
+      return __async(this, null, function* () {
+        const { isComplete, isError, needsWallet } = yield para.waitForLoginAndSetup({
+          popupWindow: refs.popupWindow.current
+        });
+        if (isError) {
+          [ModalStep.AWAITING_BIOMETRIC_LOGIN, ModalStep.AWAITING_PASSWORD_LOGIN].includes(refs.currentStep.current) && goBack();
+          return;
+        }
+        if (isComplete) {
+          setWebAuthURLForLogin("");
+          setPasswordUrlForLogin("");
+          setSupportedAuthMethods(/* @__PURE__ */ new Set());
+          setBiometricLocationHints();
+          if (needsWallet) {
+            setStep(ModalStep.AWAITING_WALLET_CREATION);
+          } else {
+            yield connectEmbeddedToExternalConnectors();
+            if (yield is2FASetup()) {
+              setStep(ModalStep.LOGIN_DONE);
+            } else {
+              setStep(ModalStep.SETUP_2FA);
+            }
+          }
+        }
+      });
+    }
+    useEffect(() => {
+      if (currentStep !== ModalStep.AWAITING_WALLET_CREATION || walletCreationInProgress) {
+        return;
+      }
+      function genWallet() {
+        return __async(this, null, function* () {
+          setWalletCreationInProgress(true);
+          let recoverySecret, walletIds;
+          if (!createWalletOverride) {
+            const created = yield para.waitForPasskeyAndCreateWallet();
+            recoverySecret = created.recoverySecret;
+            walletIds = created.walletIds;
+          } else {
+            const created = yield createWalletOverride(para);
+            const fetchedWallets = (yield para.fetchWallets()).filter((wallet) => !!wallet.address);
+            const newWallets = {};
+            for (const wallet of fetchedWallets) {
+              newWallets[wallet.id] = __spreadProps(__spreadValues({}, entityToWallet(wallet)), {
+                signer: ""
+              });
+            }
+            para.setWallets(newWallets);
+            recoverySecret = created.recoverySecret;
+            walletIds = created.walletIds;
+          }
+          yield para.setCurrentWalletIds(walletIds);
+          yield connectEmbeddedToExternalConnectors();
+          if (recoverySecretStepEnabled) {
+            setRecoveryShare(recoverySecret);
+          }
+          setWalletCreationInProgress(false);
+          if (!recoverySecret || !recoverySecretStepEnabled) {
+            setStep(ModalStep.WALLET_CREATION_DONE);
+          } else {
+            setStep(ModalStep.SECRET);
+          }
+        });
+      }
+      genWallet();
+    }, [isLogin, currentStep]);
+    useEffect(() => {
+      const isAwaitingLogin = [
+        ModalStep.AWAITING_PASSWORD_LOGIN,
+        ModalStep.AWAITING_BIOMETRIC_LOGIN,
+        ModalStep.BIOMETRIC_LOGIN
+      ].includes(currentStep);
+      const isUnknownDeviceWithHints = hasHints && !isOnKnownDevice;
+      const isPasskeyUnsupported = !passkeysSupported;
+      const hasLoginURLs = !!webAuthURLForLogin || !!passwordUrlForLogin;
+      const userNeedsToLogin = isAwaitingLogin || isUnknownDeviceWithHints || isPasskeyUnsupported;
+      if (userNeedsToLogin && hasLoginURLs) {
+        if (loginTransitionOverride) {
+          function loginOverride() {
+            return __async(this, null, function* () {
+              yield loginTransitionOverride(para);
+              setWebAuthURLForLogin("");
+              setPasswordUrlForLogin("");
+              setBiometricLocationHints();
+              yield connectEmbeddedToExternalConnectors();
+              if (yield is2FASetup()) {
+                setStep(ModalStep.LOGIN_DONE);
+              } else {
+                setStep(ModalStep.SETUP_2FA);
+              }
+            });
+          }
+          loginOverride();
+          return;
+        }
+        if (typeof window !== "undefined") {
+          refs.poll.current = {
+            action: "login",
+            timeout: window.setTimeout(awaitLoginTransition, DEFAULTS.LOGGIN_POLLING_DELAY_MS)
+          };
+        }
+        return () => {
+          var _a2;
+          if (typeof window !== "undefined" && !!refs.poll.current) {
+            window.clearTimeout((_a2 = refs.poll.current) == null ? void 0 : _a2.timeout);
+          }
+          para.exitLogin();
+        };
+      }
+    }, [currentStep, webAuthURLForLogin, passwordUrlForLogin]);
+    const handleClose = () => {
+      onClose();
+      if (currentStep === ModalStep.EXTERNAL_WALLET_VERIFICATION && para.isExternalWalletAuth) {
+        disconnectExternalWallet();
+      }
+    };
+    useEffect(() => {
+      var _a2, _b, _c;
+      refs.currentStep.current = currentStep;
+      let resetPoll = false;
+      if (![ModalStep.AWAITING_BIOMETRIC_CREATION, ModalStep.PASSWORD_CREATION].includes(currentStep)) {
+        para.exitAccountCreation();
+        resetPoll = ["createPassword", "createPasskey"].includes((_a2 = refs.poll.current) == null ? void 0 : _a2.action);
+      }
+      if (![ModalStep.AWAITING_PASSWORD_LOGIN, ModalStep.AWAITING_BIOMETRIC_LOGIN, ModalStep.BIOMETRIC_LOGIN].includes(
+        currentStep
+      )) {
+        para.exitLogin();
+        resetPoll = ((_b = refs.poll.current) == null ? void 0 : _b.action) === "login";
+      }
+      if (![ModalStep.AWAITING_OAUTH, ModalStep.FARCASTER_OAUTH].includes(currentStep)) {
+        para.exitOAuth();
+      }
+      if (currentStep === ModalStep.PASSWORD_CREATION) {
+        createAccount.withPassword();
+      }
+      if (resetPoll && typeof window !== "undefined") {
+        window.clearTimeout((_c = refs.poll.current) == null ? void 0 : _c.timeout);
+        refs.poll.current = void 0;
+      }
+    }, [currentStep]);
+    useEffect(() => {
+      if (!onRampConfig) {
+        para.ctx.client.getOnRampConfig().then((res) => {
+          var _a2, _b;
+          let newOnRampConfig;
+          if (!!propsOnRampConfig) {
+            const { enabledFlows, network, asset, providers, testMode } = propsOnRampConfig;
+            const rampConfig = providers.find((config) => isRampConfig(config));
+            newOnRampConfig = {
+              isBuyEnabled: !enabledFlows || enabledFlows.some((str) => EnabledFlow[str] === EnabledFlow.BUY),
+              isReceiveEnabled: !enabledFlows || enabledFlows.some((str) => EnabledFlow[str] === EnabledFlow.RECEIVE),
+              isWithdrawEnabled: !enabledFlows || enabledFlows.some((str) => EnabledFlow[str] === EnabledFlow.WITHDRAW),
+              allowedAssets: network ? { [Network[network]]: asset ? [AssetMap[asset]] : true } : asset ? { [(_a2 = AssetNetworks[AssetMap[asset]]) != null ? _a2 : Network.ETHEREUM]: [AssetMap[asset]] } : res.allowedAssets,
+              assetInfo: res.assetInfo,
+              providers: providers.map(({ id }) => OnRampProvider[id]),
+              rampApiKey: (_b = rampConfig == null ? void 0 : rampConfig.hostApiKey) != null ? _b : res.rampApiKey,
+              testMode: testMode != null ? testMode : onRampTestMode
+            };
+          } else {
+            newOnRampConfig = __spreadProps(__spreadValues({}, res), { testMode: onRampTestMode });
+          }
+          setOnRampConfig(newOnRampConfig);
+          if (!accountAddFundTab) {
+            setAccountAddFundTab(
+              newOnRampConfig.isBuyEnabled ? EnabledFlow.BUY : newOnRampConfig.isReceiveEnabled ? EnabledFlow.RECEIVE : newOnRampConfig.isWithdrawEnabled ? EnabledFlow.WITHDRAW : void 0
+            );
+          }
+        }).catch();
+      }
+    }, []);
+    useEffect(() => {
+      if (!!onRampConfig) {
+        setOnRampConfig(__spreadProps(__spreadValues({}, onRampConfig), { testMode: onRampTestMode }));
+      }
+    }, [onRampTestMode]);
+    useEffect(() => {
+      const init = () => __async(void 0, null, function* () {
+        if (!(yield para.isFullyLoggedIn())) {
+          yield disconnectExternalWallet();
+        }
+      });
+      init();
+      return () => {
+        var _a2;
+        window.clearTimeout((_a2 = refs.poll.current) == null ? void 0 : _a2.timeout);
+        para.exitLoops();
+      };
+    }, []);
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        Body,
+        {
+          oAuthMethods,
+          twoFactorAuthEnabled,
+          disableEmailLogin,
+          disablePhoneLogin,
+          onClose: handleClose
+        }
+      ),
+      /* @__PURE__ */ jsx(Footer, {})
+    ] });
+  }
+);
+export {
+  ModalContent
+};

package/dist/modal/components/OAuth/FarcasterOAuthStep.js

@@ -0,0 +1,81 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
+import { CpslButton, CpslIcon, CpslQrCode, CpslSpinner, CpslText } from "@getpara/react-components";
+import { CenteredText, Heading, InnerStepContainer, QRContainer, StepContainer } from "../common.js";
+import { useModalStore, useThemeStore, useUserInfoStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { AuthMethod, isMobile } from "@getpara/web-sdk";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useSetLoginURLs } from "../../hooks/useSetLoginURLs.js";
+const FarcasterOAuthStep = () => {
+  const setAuthInfo = useUserInfoStore((state) => state.setAuthInfo);
+  const setStep = useModalStore((state) => state.setStep);
+  const setWebAuthURLForCreate = useModalStore((state) => state.setWebAuthURLForCreate);
+  const setIFrameUrl = useModalStore((state) => state.setIFrameUrl);
+  const setIsIFrameReady = useModalStore((state) => state.setIsIFrameReady);
+  const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
+  const setBiometricLocationHints = useModalStore((state) => state.setBiometricLocationHints);
+  const para = useInternalClient();
+  const setFlow = useModalStore((state) => state.setFlow);
+  const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
+  const setFarcasterConnectUri = useModalStore((state) => state.setFarcasterConnectUri);
+  const theme = useThemeStore((state) => state.theme);
+  const setLoginURLs = useSetLoginURLs();
+  useEffect(() => {
+    if (farcasterConnectUri) {
+      const pollStatus = () => __async(void 0, null, function* () {
+        const { userExists, username, pfpUrl } = yield para.waitForFarcasterStatus();
+        setAuthInfo({ farcasterUsername: username, pfpUrl });
+        if (userExists) {
+          const supportedAuthMethods = yield para.initiateUserLoginV2({ farcasterUsername: username });
+          if (supportedAuthMethods.size > 0) {
+            const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY) ? yield para.getUserBiometricLocationHints() : [];
+            yield setLoginURLs({ supportedAuthMethods, authType: "farcaster", displayName: username, pfpUrl });
+            setFlow("login");
+            setStep(ModalStep.BIOMETRIC_LOGIN);
+            setBiometricLocationHints(biometricLocationHints);
+            return;
+          }
+        }
+        const supportedCreateAuthMethods = yield para.getSupportedCreateAuthMethods();
+        setIsIFrameReady(false);
+        setFlow("signUp");
+        const supportsPasskey = supportedCreateAuthMethods.has(AuthMethod.PASSKEY);
+        if (supportsPasskey) {
+          setWebAuthURLForCreate(yield para.shortenLoginLink(yield para.getSetUpBiometricsURL({ authType: "farcaster" })));
+          setStep(ModalStep.BIOMETRIC_CREATION);
+        }
+        if (supportedCreateAuthMethods.has(AuthMethod.PASSWORD)) {
+          setIFrameUrl(yield para.shortenLoginLink(yield para.getSetupPasswordURL({ authType: "farcaster", theme })));
+          setAuthStepRoute(supportsPasskey ? ModalStep.BIOMETRIC_CREATION : ModalStep.PASSWORD_CREATION);
+        }
+        return;
+      });
+      pollStatus();
+      return () => {
+        setFarcasterConnectUri(void 0);
+      };
+    }
+  }, [farcasterConnectUri]);
+  return /* @__PURE__ */ jsx(StepContainer, { $wide: true, children: isMobile() ? /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+    /* @__PURE__ */ jsx(CpslText, { weight: "medium", color: "secondary", children: `Don\u2019t have Farcaster` }),
+    /* @__PURE__ */ jsxs(CpslButton, { as: "a", href: "https://link.warpcast.com/download-qr", target: "_blank", variant: "secondary", children: [
+      /* @__PURE__ */ jsx(CpslIcon, { slot: "start", icon: "linkExternal" }),
+      `Get Farcaster`
+    ] })
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Heading, { variant: "headingS", weight: "bold", children: "Sign in using Farcaster" }),
+    /* @__PURE__ */ jsxs(InnerStepContainer, { children: [
+      /* @__PURE__ */ jsx(CenteredText, { variant: "bodyS", color: "secondary", weight: "medium", children: "Scan the QR code with your phone's camera to proceed." }),
+      /* @__PURE__ */ jsx(QRContainer, { children: !farcasterConnectUri ? /* @__PURE__ */ jsx(CpslSpinner, { size: 100 }) : /* @__PURE__ */ jsx(CpslQrCode, { url: farcasterConnectUri }) })
+    ] })
+  ] }) });
+};
+var FarcasterOAuthStep_default = FarcasterOAuthStep;
+export {
+  FarcasterOAuthStep_default as default
+};

package/dist/modal/components/OAuth/OAuth.js

@@ -0,0 +1,153 @@
+"use client";
+import {
+  __async
+} from "../../../chunk-MMUBH76A.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { AuthMethod, OAuthMethod } from "@getpara/web-sdk";
+import { styled } from "styled-components";
+import { useModalStore, useUserInfoStore } from "../../stores/index.js";
+import { ModalStep } from "../../utils/steps.js";
+import { openPopup } from "../../utils/openPopup.js";
+import { useThemeStore } from "../../stores/theme/useThemeStore.js";
+import { getTileButtonFlex } from "../../utils/getTileButtonFlex.js";
+import { StyledCpslTileButton } from "../common.js";
+import { brandedOAuthLogos, oAuthLogos } from "../../constants/oAuthLogos.js";
+import { useEffect } from "react";
+import { routeMobileExternalWallet } from "../../utils/routeMobileExternalWallet.js";
+import { useGoBack } from "../../hooks/useGoBack.js";
+import { useInternalClient } from "../../../provider/hooks/utils/useInternalClient.js";
+import { useSetLoginURLs } from "../../hooks/useSetLoginURLs.js";
+const HAS_MORE_LENGTH = 3;
+const OAuth = ({ methods }) => {
+  const goBack = useGoBack();
+  const oAuthLogoVariant = useThemeStore((state) => state.oAuthLogoVariant);
+  const isDark = useThemeStore((state) => state.isDark);
+  const para = useInternalClient();
+  const refs = useModalStore((state) => state.refs);
+  const setFlow = useModalStore((state) => state.setFlow);
+  const setStep = useModalStore((state) => state.setStep);
+  const setAuthInfo = useUserInfoStore((state) => state.setAuthInfo);
+  const setBiometricLocationHints = useModalStore((state) => state.setBiometricLocationHints);
+  const setFarcasterConnectUri = useModalStore((state) => state.setFarcasterConnectUri);
+  const farcasterConnectUri = useModalStore((state) => state.farcasterConnectUri);
+  const showAll = useModalStore((state) => state.step === ModalStep.AUTH_MORE);
+  const setIFrameUrl = useModalStore((state) => state.setIFrameUrl);
+  const setIsIFrameReady = useModalStore((state) => state.setIsIFrameReady);
+  const setAuthStepRoute = useModalStore((state) => state.setAuthStepRoute);
+  const setWebAuthURLForCreate = useModalStore((state) => state.setWebAuthURLForCreate);
+  const theme = useThemeStore((state) => state.theme);
+  const setLoginURLs = useSetLoginURLs();
+  useEffect(() => {
+    const initializeFarcaster = () => __async(void 0, null, function* () {
+      if (!methods.includes(OAuthMethod.FARCASTER)) {
+        return;
+      }
+      const connectUri = yield para.getFarcasterConnectURL();
+      setFarcasterConnectUri(connectUri);
+    });
+    initializeFarcaster();
+  }, []);
+  const hasMore = methods.length > HAS_MORE_LENGTH;
+  const methodsToShow = showAll || !hasMore ? methods : methods.slice(0, HAS_MORE_LENGTH - 1);
+  const handleShowAll = () => {
+    setStep(ModalStep.AUTH_MORE);
+  };
+  const handleMethodClick = (method) => () => __async(void 0, null, function* () {
+    switch (method) {
+      case OAuthMethod.FARCASTER:
+        if (!farcasterConnectUri) {
+          return;
+        }
+        routeMobileExternalWallet(farcasterConnectUri);
+        setStep(ModalStep.FARCASTER_OAUTH);
+        break;
+      case OAuthMethod.TELEGRAM:
+        setStep(ModalStep.TELEGRAM_OAUTH);
+        break;
+      default:
+        setStep(ModalStep.AWAITING_OAUTH);
+        const oAuthURL = yield para.getOAuthURL({ method });
+        refs.popupWindow.current = openPopup({
+          url: oAuthURL,
+          target: `${method}AuthPopup`,
+          type: "OAUTH",
+          current: refs.popupWindow.current
+        });
+        const { email, isError, userExists } = yield para.waitForOAuth({ popupWindow: refs.popupWindow.current });
+        refs.popupWindow.current = void 0;
+        if ((isError || !email) && refs.currentStep.current === ModalStep.AWAITING_OAUTH) {
+          goBack();
+          return;
+        }
+        setAuthInfo({ email });
+        if (userExists) {
+          const supportedAuthMethods = yield para.initiateUserLoginV2({ email });
+          if (supportedAuthMethods.size > 0) {
+            const biometricLocationHints = supportedAuthMethods.has(AuthMethod.PASSKEY) ? yield para.getUserBiometricLocationHints() : [];
+            yield setLoginURLs({ supportedAuthMethods, authType: "email" });
+            setFlow("login");
+            setStep(ModalStep.BIOMETRIC_LOGIN);
+            setBiometricLocationHints(biometricLocationHints);
+            return;
+          }
+        }
+        const supportedCreateAuthMethods = yield para.getSupportedCreateAuthMethods();
+        setIsIFrameReady(false);
+        setFlow("signUp");
+        const supportsPasskey = supportedCreateAuthMethods.has(AuthMethod.PASSKEY);
+        const supportsPassword = supportedCreateAuthMethods.has(AuthMethod.PASSWORD);
+        if (supportsPasskey) {
+          setWebAuthURLForCreate(yield para.shortenLoginLink(yield para.getSetUpBiometricsURL({ authType: "email" })));
+          if (!supportsPassword) {
+            setStep(ModalStep.BIOMETRIC_CREATION);
+            return;
+          }
+        }
+        if (supportsPassword) {
+          setIFrameUrl(yield para.shortenLoginLink(yield para.getSetupPasswordURL({ authType: "email", theme })));
+        }
+        setAuthStepRoute(supportsPasskey ? ModalStep.BIOMETRIC_CREATION : ModalStep.PASSWORD_CREATION);
+        break;
+    }
+  });
+  const useBrandedLogos = oAuthLogoVariant === "default";
+  const useDarkLogos = useBrandedLogos ? isDark : oAuthLogoVariant !== "dark";
+  const showMoreButton = !showAll && hasMore;
+  return /* @__PURE__ */ jsxs(OAuthContainer, { children: [
+    methodsToShow.map((method, index) => /* @__PURE__ */ jsx(
+      OAuthButton,
+      {
+        $isDark: useDarkLogos,
+        icon: useBrandedLogos ? brandedOAuthLogos[method] : oAuthLogos[method],
+        onClick: handleMethodClick(method),
+        $index: index,
+        $totalItems: showMoreButton ? HAS_MORE_LENGTH : methodsToShow.length
+      },
+      method
+    )),
+    showMoreButton && /* @__PURE__ */ jsx(
+      OAuthButton,
+      {
+        $isDark: useDarkLogos,
+        icon: "moreLoginOptions",
+        onClick: handleShowAll,
+        $index: HAS_MORE_LENGTH - 1,
+        $totalItems: HAS_MORE_LENGTH
+      }
+    )
+  ] });
+};
+const OAuthContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  gap: 8px;
+  flex-wrap: wrap;
+`;
+const OAuthButton = styled(StyledCpslTileButton)`
+  flex: ${({ $index, $totalItems }) => getTileButtonFlex($index, $totalItems)};
+
+  --button-icon-color: ${({ $isDark }) => $isDark ? "white" : "black"};
+`;
+export {
+  OAuth
+};