@openfort/react 0.1.14 → 0.2.1

package/build/index.es.js

@@ -1,16 +1,16 @@
-import { Openfort as Openfort$1, EmbeddedState, AccountTypeEnum, SDKConfiguration, RecoveryMethod, MissingRecoveryPasswordError, ChainTypeEnum, OAuthProvider, OpenfortError as OpenfortError$1, OpenfortErrorType as OpenfortErrorType$1 } from '@openfort/openfort-js';
+import { Openfort as Openfort$1, EmbeddedState, AccountTypeEnum, SDKConfiguration, RecoveryMethod, MissingRecoveryPasswordError, ChainTypeEnum, OAuthProvider, OpenfortError as OpenfortError$1 } from '@openfort/openfort-js';
 export { AccountTypeEnum, OAuthProvider, OpenfortEvents, RecoveryMethod, ThirdPartyOAuthProvider, openfortEvents } from '@openfort/openfort-js';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import React, { useState, useEffect, createContext, useRef, useId, useMemo, useCallback, createElement, useLayoutEffect } from 'react';
 import { normalize } from 'viem/ens';
-import { useEnsAddress, useEnsName, useEnsAvatar, useConfig, useAccount, useBlockNumber, useBalance, useConnectors as useConnectors$1, useConnect as useConnect$1, useDisconnect, useChainId, http, useSwitchChain, useWalletClient, useEstimateGas, useEstimateFeesPerGas, useReadContract, useSendTransaction, useWriteContract, useWaitForTransactionReceipt, usePublicClient, WagmiContext } from 'wagmi';
+import { useEnsAddress, useEnsName, useEnsAvatar, useConfig, useAccount, useBlockNumber, useBalance, useConnectors as useConnectors$1, useConnect as useConnect$1, useDisconnect, useChainId, http, useSwitchChain, useWalletClient, useEstimateGas, useEstimateFeesPerGas, useReadContract, useSendTransaction, useWriteContract, useWaitForTransactionReceipt, usePublicClient, useSignMessage, WagmiContext } from 'wagmi';
 import { motion, AnimatePresence, MotionConfig } from 'framer-motion';
-import styled$1, { css, keyframes } from 'styled-components';
+import styled$1, { css, keyframes, createGlobalStyle } from 'styled-components';
 import { detect } from 'detect-browser';
 import { useQueryClient, useQuery } from '@tanstack/react-query';
 import useMeasure from 'react-use-measure';
 import { Buffer } from 'buffer';
-import { mainnet, polygon, optimism, arbitrum, sepolia } from 'wagmi/chains';
+import { mainnet, polygon, optimism, arbitrum } from 'wagmi/chains';
 import { safe, injected, coinbaseWallet, walletConnect } from '@wagmi/connectors';
 import { useTransition } from 'react-transition-state';
 import ResizeObserver from 'resize-observer-polyfill';
@@ -19,7 +19,8 @@ import { numberToHex, formatUnits, parseUnits, isAddress, parseAbi, encodeFuncti
 import { erc7811Actions, erc7715Actions } from 'viem/experimental';
 import calculateEntropy from 'fast-password-entropy';
 import QRCodeUtil from 'qrcode';
-import { switchChain, signMessage } from '@wagmi/core';
+import { PhoneInput } from 'react-international-phone';
+import { switchChain } from '@wagmi/core';
 import { AxiosError } from 'axios';
 import { createSiweMessage } from 'viem/siwe';
 import { hashAuthorization } from 'viem/utils';
@@ -1912,6 +1913,8 @@ const routes = {
     CONNECTED_SUCCESS: 'connectedSuccess',
     CREATE_GUEST_USER: 'createGuestUser',
     EMAIL_LOGIN: 'emailLogin',
+    EMAIL_OTP: 'emailOtp',
+    PHONE_OTP: 'phoneOtp',
     FORGOT_PASSWORD: 'forgotPassword',
     EMAIL_VERIFICATION: 'emailVerification',
     LINK_EMAIL: 'linkEmail',
@@ -1925,7 +1928,9 @@ const routes = {
     CONNECTED: 'connected',
     PROFILE: 'profile',
     SWITCHNETWORKS: 'switchNetworks',
+    LINKED_PROVIDER: 'linkedProvider',
     LINKED_PROVIDERS: 'linkedProviders',
+    REMOVE_LINKED_PROVIDER: 'removeLinkedProvider',
     EXPORT_KEY: 'exportKey',
     NO_ASSETS_AVAILABLE: 'noAssetsAvailable',
     ASSET_INVENTORY: 'assetInventory',
@@ -1952,6 +1957,7 @@ var UIAuthProvider;
 (function (UIAuthProvider) {
     UIAuthProvider["GOOGLE"] = "google";
     UIAuthProvider["TWITTER"] = "twitter";
+    UIAuthProvider["X"] = "twitter";
     UIAuthProvider["FACEBOOK"] = "facebook";
     UIAuthProvider["DISCORD"] = "discord";
     // EPIC_GAMES = "epic_games",
@@ -1959,7 +1965,13 @@ var UIAuthProvider;
     // TELEGRAM = "telegram", // Telegram is not working yet
     UIAuthProvider["APPLE"] = "apple";
     // Extended Providers
-    UIAuthProvider["EMAIL"] = "email";
+    /**
+     * @deprecated Use `UIAuthProvider.EMAIL_PASSWORD` or `UIAuthProvider.EMAIL_OTP` instead.
+     */
+    UIAuthProvider["EMAIL"] = "emailPassword";
+    UIAuthProvider["EMAIL_PASSWORD"] = "emailPassword";
+    UIAuthProvider["EMAIL_OTP"] = "emailOtp";
+    UIAuthProvider["PHONE"] = "phone";
     UIAuthProvider["WALLET"] = "wallet";
     UIAuthProvider["GUEST"] = "guest";
 })(UIAuthProvider || (UIAuthProvider = {}));
@@ -4544,6 +4556,7 @@ const CoreOpenfortProvider = ({ children, onConnect, onDisconnect, openfortConfi
     const { connectors, connect, reset } = useConnect();
     const { address } = useAccount();
     const [user, setUser] = useState(null);
+    const [linkedAccounts, setLinkedAccounts] = useState([]);
     const [walletStatus, setWalletStatus] = useState({ status: 'idle' });
     const { disconnectAsync } = useDisconnect();
     const { walletConfig } = useOpenfort();
@@ -4619,7 +4632,9 @@ const CoreOpenfortProvider = ({ children, onConnect, onDisconnect, openfortConfi
         }
         try {
             const user = await openfort.user.get();
+            const linkedAccounts = await openfort.user.list();
             logger.log('Getting user');
+            setLinkedAccounts(linkedAccounts);
             setUser(user);
             return user;
         }
@@ -4803,6 +4818,7 @@ const CoreOpenfortProvider = ({ children, onConnect, onDisconnect, openfortConfi
         isLoading: isLoading(),
         needsRecovery,
         user,
+        linkedAccounts,
         updateUser,
         updateEmbeddedAccounts: fetchEmbeddedAccounts,
         embeddedAccounts,
@@ -4878,7 +4894,7 @@ const SendIcon = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width:
 const ReceiveIcon = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("path", { d: "M19 5L5 19", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M15 19H5V9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 const BuyIcon = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("rect", { x: "3", y: "6", width: "18", height: "12", rx: "2", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M3 10H21", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M7 14H9", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 const DollarIcon = (props) => (jsxs("svg", { width: "800px", height: "800px", viewBox: "0 0 24 24", role: "img", xmlns: "http://www.w3.org/2000/svg", "aria-labelledby": "dolarIconTitle", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", fill: "none", color: "currentColor", ...props, children: [jsx("title", { id: "dolarIconTitle", children: "Dolar" }), jsx("path", { d: "M12 4L12 6M12 18L12 20M15.5 8C15.1666667 6.66666667 14 6 12 6 9 6 8.5 7.95652174 8.5 9 8.5 13.140327 15.5 10.9649412 15.5 15 15.5 16.0434783 15 18 12 18 10 18 8.83333333 17.3333333 8.5 16" })] }));
-const WalletIcon$2 = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("rect", { x: "3", y: "6", width: "18", height: "14", rx: "2.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M21 10H17C15.8954 10 15 10.8954 15 12C15 13.1046 15.8954 14 17 14H21V10Z", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("circle", { cx: "17", cy: "12", r: "1", fill: "currentColor" })] }));
+const WalletIcon$1 = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("rect", { x: "3", y: "6", width: "18", height: "14", rx: "2.5", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("path", { d: "M21 10H17C15.8954 10 15 10.8954 15 12C15 13.1046 15.8954 14 17 14H21V10Z", stroke: "currentColor", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" }), jsx("circle", { cx: "17", cy: "12", r: "1", fill: "currentColor" })] }));
 const ExternalLinkIcon = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: {
         left: 0,
         top: 0,
@@ -4933,6 +4949,7 @@ const RetryIconCircle = ({ ...props }) => {
 };
 const CopyToClipboardIcon = ({ ...props }) => (jsxs("svg", { "aria-hidden": "true", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("path", { d: "M14 9.5V7C14 5.89543 13.1046 5 12 5H7C5.89543 5 5 5.89543 5 7V12C5 13.1046 5.89543 14 7 14H9.5", stroke: "var(--ck-body-color-muted)", strokeWidth: "2" }), jsx("rect", { x: "10", y: "10", width: "9", height: "9", rx: "2", stroke: "var(--ck-body-color-muted)", strokeWidth: "2" }), jsx("path", { d: "M1 3L3 5L7 1", stroke: "var(--ck-body-color)", strokeWidth: "1.75", strokeLinecap: "round", strokeLinejoin: "round" })] }));
 const EmailIcon = ({ ...props }) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", width: "256", height: "256", children: [jsx("rect", { width: "256", height: "256", fill: "none" }), jsx("path", { d: "M32,96V200a8,8,0,0,0,8,8H216a8,8,0,0,0,8-8V96L128,32Z", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }), jsx("polyline", { points: "224 96 145.46 152 110.55 152 32 96", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" })] }));
+const PhoneIcon = ({ ...props }) => (jsx("svg", { id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", viewBox: "0 0 32 32", enableBackground: "new 0 0 32 32", xmlSpace: "preserve", ...props, children: jsx("path", { fill: "none", stroke: "currentColor", strokeWidth: 2, strokeMiterlimit: 10, d: "M13.6,8.5L9.5,4.3C9,3.9,8.3,3.9,7.8,4.3L4.7,7.5 C4,8.1,3.8,9.1,4.1,9.9c0.8,2.3,2.9,6.9,7,11s8.7,6.1,11,7c0.9,0.3,1.8,0.1,2.5-0.5l3.1-3.1c0.5-0.5,0.5-1.2,0-1.7l-4.1-4.1 c-0.5-0.5-1.2-0.5-1.7,0l-2.5,2.5c0,0-2.8-1.2-5-3.3s-3.3-5-3.3-5l2.5-2.5C14.1,9.7,14.1,8.9,13.6,8.5z" }) }));
 const GuestIcon = ({ ...props }) => (jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 256 256", width: "256", height: "256", children: [jsx("rect", { width: "256", height: "256", fill: "none" }), jsx("circle", { cx: "128", cy: "96", r: "64", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" }), jsx("path", { d: "M32,216c19.37-33.47,54.55-56,96-56s76.63,22.53,96,56", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "16" })] }));
 const EyeIcon = ({ ...props }) => (jsxs("svg", { width: "800", height: "800", fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: [jsx("path", { d: "m15.001 12c0 1.6569-1.3431 3-3 3-1.6568 0-3-1.3431-3-3s1.3432-3 3-3c1.6569 0 3 1.3431 3 3z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 }), jsx("path", { d: "m12.001 5c-4.4777 0-8.2679 2.9429-9.5422 7 1.2743 4.0571 5.0646 7 9.5422 7 4.4776 0 8.2679-2.9429 9.5422-7-1.2743-4.0571-5.0646-7-9.5422-7z", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 })] }));
 const EyeOffIcon = ({ ...props }) => (jsx("svg", { width: "800", height: "800", fill: "none", viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg", ...props, children: jsx("path", { d: "m2.999 3 18 18m-11.156-11.086c-0.52264 0.53996-0.84428 1.2756-0.84428 2.0864 0 1.6569 1.3432 3 3 3 0.8225 0 1.5677-0.331 2.1096-0.867m-7.6096-7.4858c-1.8993 1.2532-3.346 3.1368-4.042 5.3528 1.2742 4.0571 5.0646 7 9.5422 7 1.9889 0 3.8422-0.5806 5.3996-1.5816m-6.3998-12.369c0.329-0.03266 0.6627-0.04939 1.0002-0.04939 4.4777 0 8.268 2.9429 9.5422 7-0.2807 0.894-0.6837 1.7338-1.1892 2.5", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 }) }));
@@ -5631,7 +5648,7 @@ const FitText = ({ children, maxFontSize = 100, minFontSize = 70, justifyContent
 };
 FitText.displayName = 'FitText';
 
-const OPENFORT_VERSION = '0.1.14';
+const OPENFORT_VERSION = '0.2.1';
 
 const Portal = (props) => {
     props = {
@@ -5668,7 +5685,7 @@ const PageContentStyle = styled(motion.div) `
   padding-top: 48px;
 `;
 
-const ErrorMessage$1 = styled(motion.div) `
+const ErrorMessage$2 = styled(motion.div) `
   z-index: -1;
   pointer-events: auto;
   position: absolute;
@@ -5829,6 +5846,8 @@ const ModalBody = styled.div `
   color: ${(props) => {
     if (props.$error)
         return 'var(--ck-body-color-danger)';
+    if (props.$valid)
+        return 'var(--ck-body-color-valid)';
     return 'var(--ck-body-color-muted)';
 }};
   strong {
@@ -6461,8 +6480,6 @@ onInfo, }) => {
                 return 'Reset your password'; // TODO: Localize
             case routes.EMAIL_VERIFICATION:
                 return 'Email Verification'; // TODO: Localize
-            case routes.SOCIAL_PROVIDERS:
-                return 'Other socials'; // TODO: Localize
             case routes.CONNECT:
                 if (shouldUseQrcode()) {
                     return isWalletConnectConnector((_a = wallet === null || wallet === void 0 ? void 0 : wallet.connector) === null || _a === void 0 ? void 0 : _a.id)
@@ -6501,7 +6518,7 @@ onInfo, }) => {
                                 width: 'var(--width)',
                                 zIndex: 9,
                                 transition: 'width 200ms ease',
-                            } }), jsxs(BoxContainer, { className: `${rendered && 'active'}`, children: [jsx(AnimatePresence, { initial: false, children: context.errorMessage && (jsxs(ErrorMessage$1, { initial: { y: '10%', x: '-50%' }, animate: { y: '-100%' }, exit: { y: '100%' }, transition: { duration: 0.2, ease: 'easeInOut' }, children: [jsx("span", { children: context.errorMessage }), jsx("button", { type: "button", "aria-label": flattenChildren(locales.close).toString(), style: {
+                            } }), jsxs(BoxContainer, { className: `${rendered && 'active'}`, children: [jsx(AnimatePresence, { initial: false, children: context.errorMessage && (jsxs(ErrorMessage$2, { initial: { y: '10%', x: '-50%' }, animate: { y: '-100%' }, exit: { y: '100%' }, transition: { duration: 0.2, ease: 'easeInOut' }, children: [jsx("span", { children: context.errorMessage }), jsx("button", { type: "button", "aria-label": flattenChildren(locales.close).toString(), style: {
                                                     position: 'absolute',
                                                     right: 24,
                                                     top: 24,
@@ -6909,7 +6926,7 @@ const transition = {
     ease: [0.175, 0.885, 0.32, 0.98],
 };
 const Button = ({ className, children, variant = 'secondary', // unique aspect to how we're handling buttons
-disabled, icon, iconPosition = 'left', roundedIcon, waiting, arrow, download, href, style, onClick, textAlign, title, }) => {
+disabled, icon, iconPosition = 'left', roundedIcon, waiting, arrow, download, href, style, onClick, textAlign, title, fitText = true, }) => {
     const key = typeof children === 'string' ? children : flattenChildren(children).join(''); // Need to generate a string for the key so we can automatically animate between content
     const hrefUrl = href && (typeof href === 'string' ? href : flattenChildren(href).join('')); // Need to have a flat string for the href
     return (jsx(ButtonContainer, { className: className, as: href ? 'a' : undefined, onClick: (event) => {
@@ -6928,17 +6945,17 @@ disabled, icon, iconPosition = 'left', roundedIcon, waiting, arrow, download, hr
                     }, transition: {
                         ...transition,
                         delay: 0.2,
-                    }, children: [icon && iconPosition === 'left' && jsx(IconContainer$2, { "$rounded": roundedIcon, children: icon }), download && (jsx(DownloadArrow, { children: jsx(DownloadArrowInner, { children: jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" })] }) }) })), jsx(InnerContainer, { style: { paddingLeft: arrow ? 6 : 0 }, children: jsx(FitText, { justifyContent: textAlign, children: children }) }), icon && iconPosition === 'right' && jsx(IconContainer$2, { "$rounded": roundedIcon, children: icon }), arrow && (jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "2", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" })] }))] }, key), waiting && (jsx(SpinnerContainer$2, { children: jsx(Spinner$3, {}) }))] }) }));
+                    }, children: [icon && iconPosition === 'left' && jsx(IconContainer$2, { "$rounded": roundedIcon, children: icon }), download && (jsx(DownloadArrow, { children: jsx(DownloadArrowInner, { children: jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "var(--stroke-width)", strokeLinecap: "round" })] }) }) })), jsx(InnerContainer, { style: { paddingLeft: arrow ? 6 : 0 }, children: fitText ? jsx(FitText, { justifyContent: textAlign, children: children }) : children }), icon && iconPosition === 'right' && jsx(IconContainer$2, { "$rounded": roundedIcon, children: icon }), arrow && (jsxs(Arrow, { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx(ArrowLine, { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "2", strokeLinecap: "round" }), jsx(ArrowChevron, { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "2", strokeLinecap: "round" })] }))] }, key), waiting && (jsx(SpinnerContainer$2, { children: jsx(Spinner$3, {}) }))] }) }));
 };
 
-var OpenfortErrorType;
-(function (OpenfortErrorType) {
-    OpenfortErrorType["AUTHENTICATION_ERROR"] = "AUTHENTICATION_ERROR";
-    OpenfortErrorType["WALLET_ERROR"] = "WALLET_ERROR";
-    OpenfortErrorType["CONFIGURATION_ERROR"] = "CONFIGURATION_ERROR";
-    OpenfortErrorType["VALIDATION_ERROR"] = "VALIDATION_ERROR";
-    OpenfortErrorType["UNEXPECTED_ERROR"] = "UNEXPECTED_ERROR";
-})(OpenfortErrorType || (OpenfortErrorType = {}));
+var OpenfortReactErrorType;
+(function (OpenfortReactErrorType) {
+    OpenfortReactErrorType["AUTHENTICATION_ERROR"] = "AUTHENTICATION_ERROR";
+    OpenfortReactErrorType["WALLET_ERROR"] = "WALLET_ERROR";
+    OpenfortReactErrorType["CONFIGURATION_ERROR"] = "CONFIGURATION_ERROR";
+    OpenfortReactErrorType["VALIDATION_ERROR"] = "VALIDATION_ERROR";
+    OpenfortReactErrorType["UNEXPECTED_ERROR"] = "UNEXPECTED_ERROR";
+})(OpenfortReactErrorType || (OpenfortReactErrorType = {}));
 class OpenfortError extends Error {
     constructor(message, type, data) {
         if ((data === null || data === void 0 ? void 0 : data.error) instanceof OpenfortError) {
@@ -6984,7 +7001,7 @@ const mapStatus = (status) => {
         isLoading: status.status === 'loading',
         isError: status.status === 'error',
         isSuccess: status.status === 'success',
-        error: status.error,
+        error: 'error' in status ? status.error : undefined,
     };
 };
 
@@ -7066,7 +7083,7 @@ function useSignOut(hookOptions = {}) {
             });
         }
         catch (e) {
-            const error = new OpenfortError('Failed to sign out', OpenfortErrorType.AUTHENTICATION_ERROR, { error: e });
+            const error = new OpenfortError('Failed to sign out', OpenfortReactErrorType.AUTHENTICATION_ERROR, { error: e });
             setStatus({
                 status: 'error',
                 error,
@@ -7592,7 +7609,7 @@ const useWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000 } = {}) =
         queryKey: ['wallet-assets', chainId, customAssetsToFetch, address],
         queryFn: async () => {
             if (!walletClient) {
-                throw new OpenfortError('No wallet client available', OpenfortErrorType.UNEXPECTED_ERROR, {
+                throw new OpenfortError('No wallet client available', OpenfortReactErrorType.UNEXPECTED_ERROR, {
                     error: new Error('Wallet client not initialized'),
                 });
             }
@@ -7649,7 +7666,7 @@ const useWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000 } = {}) =
                     };
                 }
                 else {
-                    throw new OpenfortError('Unsupported asset type', OpenfortErrorType.UNEXPECTED_ERROR, { asset: a });
+                    throw new OpenfortError('Unsupported asset type', OpenfortReactErrorType.UNEXPECTED_ERROR, { asset: a });
                 }
                 return asset;
             });
@@ -7692,7 +7709,7 @@ const useWalletAssets = ({ assets: hookCustomAssets, staleTime = 30000 } = {}) =
         if (error instanceof OpenfortError) {
             return error;
         }
-        return new OpenfortError('Failed to fetch wallet assets', OpenfortErrorType.UNEXPECTED_ERROR, { error });
+        return new OpenfortError('Failed to fetch wallet assets', OpenfortReactErrorType.UNEXPECTED_ERROR, { error });
     }, [error]);
     return {
         data: data !== null && data !== void 0 ? data : null,
@@ -10363,12 +10380,12 @@ const Content = styled(motion.div) `
     gap: 12px;
   }
 `;
-const dist$1 = 2;
-const shakeKeyframes$1 = keyframes `
+const dist$2 = 2;
+const shakeKeyframes$2 = keyframes `
   0%{ transform:none; }
-  25%{ transform:translateX(${dist$1}px); }
-  50%{ transform:translateX(-${dist$1}px); }
-  75%{ transform:translateX(${dist$1}px); }
+  25%{ transform:translateX(${dist$2}px); }
+  50%{ transform:translateX(-${dist$2}px); }
+  75%{ transform:translateX(${dist$2}px); }
   100%{ transform:none; }
 `;
 const outlineKeyframes$1 = keyframes `
@@ -10410,7 +10427,7 @@ const ConnectingAnimation$1 = styled(motion.div) `
   }
   ${(props) => props.$shake &&
     css `
-      animation: ${shakeKeyframes$1} 220ms ease-out both;
+      animation: ${shakeKeyframes$2} 220ms ease-out both;
       &:before {
         animation: ${outlineKeyframes$1} 220ms ease-out 750ms both;
       }
@@ -10493,12 +10510,12 @@ justify-content: center;
 margin: 10px auto 16px;
 height: 120px;
 `;
-const dist = 2;
-const shakeKeyframes = keyframes `
+const dist$1 = 2;
+const shakeKeyframes$1 = keyframes `
   0%{ transform:none; }
-  25%{ transform:translateX(${dist}px); }
-  50%{ transform:translateX(-${dist}px); }
-  75%{ transform:translateX(${dist}px); }
+  25%{ transform:translateX(${dist$1}px); }
+  50%{ transform:translateX(-${dist$1}px); }
+  75%{ transform:translateX(${dist$1}px); }
   100%{ transform:none; }
 `;
 const outlineKeyframes = keyframes `
@@ -10525,7 +10542,7 @@ const ConnectingAnimation = styled(motion.div) `
   `}
   ${(props) => props.$shake &&
     css `
-      animation: ${shakeKeyframes} 220ms ease-out both;
+      animation: ${shakeKeyframes$1} 220ms ease-out both;
       &:before {
         animation: ${outlineKeyframes} 220ms ease-out both;
       }
@@ -11278,7 +11295,7 @@ const Connectors = ({ logoutOnBack }) => {
  *   console.log('User is authenticated:', userHook.user);
  *   console.log('User ID:', userHook.user.id);
  *   console.log('User email:', userHook.user.email);
- *   console.log('Linked accounts:', userHook.user.linkedAccounts);
+ *   console.log('Linked accounts:', userHook.linkedAccounts);
  * } else {
  *   console.log('User is not authenticated');
  * }
@@ -11305,7 +11322,7 @@ const Connectors = ({ logoutOnBack }) => {
  * ```
  */
 function useUser() {
-    const { user, client, embeddedState } = useOpenfortCore();
+    const { user, client, embeddedState, linkedAccounts } = useOpenfortCore();
     const getAccessTokenAndUpdate = useCallback(async () => {
         try {
             await client.validateAndRefreshToken();
@@ -11328,6 +11345,7 @@ function useUser() {
     }, [client]);
     return {
         user,
+        linkedAccounts,
         isAuthenticated: embeddedState !== EmbeddedState.NONE && embeddedState !== EmbeddedState.UNAUTHENTICATED,
         getAccessToken: getAccessTokenAndUpdate,
         validateAndRefreshToken: validateAndRefresh,
@@ -11423,7 +11441,7 @@ const mapWalletStatus = (status) => {
  */
 function useWallets(hookOptions = {}) {
     const { client, embeddedAccounts, isLoadingAccounts: isLoadingWallets, updateEmbeddedAccounts } = useOpenfortCore();
-    const { user } = useUser();
+    const { linkedAccounts } = useUser();
     const { walletConfig, setOpen, setRoute, setConnector, uiConfig } = useOpenfort();
     const { connector, isConnected, address } = useAccount();
     const chainId = useChainId();
@@ -11435,7 +11453,7 @@ function useWallets(hookOptions = {}) {
     const { connect } = useConnect({
         mutation: {
             onError: (e) => {
-                const error = new OpenfortError('Failed to connect with wallet: ', OpenfortErrorType.AUTHENTICATION_ERROR, e);
+                const error = new OpenfortError('Failed to connect with wallet: ', OpenfortReactErrorType.AUTHENTICATION_ERROR, e);
                 setStatus({
                     status: 'error',
                     error,
@@ -11452,7 +11470,7 @@ function useWallets(hookOptions = {}) {
                     !data.accounts.some((a) => { var _a; return a.toLowerCase() === ((_a = connectToConnector.address) === null || _a === void 0 ? void 0 : _a.toLowerCase()); })) {
                     setStatus({
                         status: 'error',
-                        error: new OpenfortError('Failed to connect with wallet: Address mismatch', OpenfortErrorType.AUTHENTICATION_ERROR),
+                        error: new OpenfortError('Failed to connect with wallet: Address mismatch', OpenfortReactErrorType.AUTHENTICATION_ERROR),
                     });
                     disconnect();
                     return;
@@ -11487,7 +11505,7 @@ function useWallets(hookOptions = {}) {
             case RecoveryMethod.AUTOMATIC: {
                 const accessToken = await client.getAccessToken();
                 if (!accessToken) {
-                    throw new OpenfortError('Openfort access token not found', OpenfortErrorType.AUTHENTICATION_ERROR);
+                    throw new OpenfortError('Openfort access token not found', OpenfortReactErrorType.AUTHENTICATION_ERROR);
                 }
                 return {
                     recoveryMethod: RecoveryMethod.AUTOMATIC,
@@ -11498,7 +11516,7 @@ function useWallets(hookOptions = {}) {
             }
             case RecoveryMethod.PASSWORD:
                 if (!recovery.password) {
-                    throw new OpenfortError('Please enter your password', OpenfortErrorType.VALIDATION_ERROR);
+                    throw new OpenfortError('Please enter your password', OpenfortReactErrorType.VALIDATION_ERROR);
                 }
                 return {
                     recoveryMethod: RecoveryMethod.PASSWORD,
@@ -11513,13 +11531,13 @@ function useWallets(hookOptions = {}) {
                 if (!walletAddress) {
                     walletAddress = (_a = embeddedAccounts.find((w) => w.recoveryMethod === RecoveryMethod.PASSKEY)) === null || _a === void 0 ? void 0 : _a.address;
                     if (!walletAddress) {
-                        throw new OpenfortError('No wallet address provided and no embedded wallet with passkey recovery found', OpenfortErrorType.VALIDATION_ERROR);
+                        throw new OpenfortError('No wallet address provided and no embedded wallet with passkey recovery found', OpenfortReactErrorType.VALIDATION_ERROR);
                     }
                 }
                 const details = (_b = embeddedAccounts.find((w) => w.address.toLowerCase() === (walletAddress === null || walletAddress === void 0 ? void 0 : walletAddress.toLowerCase()) && w.recoveryMethod === RecoveryMethod.PASSKEY)) === null || _b === void 0 ? void 0 : _b.recoveryMethodDetails;
                 const passkeyId = details === null || details === void 0 ? void 0 : details.passkeyId;
                 if (!passkeyId) {
-                    throw new OpenfortError('No passkey details found for the wallet', OpenfortErrorType.VALIDATION_ERROR);
+                    throw new OpenfortError('No passkey details found for the wallet', OpenfortReactErrorType.VALIDATION_ERROR);
                 }
                 return {
                     recoveryMethod: RecoveryMethod.PASSKEY,
@@ -11529,19 +11547,19 @@ function useWallets(hookOptions = {}) {
                 };
             }
             default:
-                throw new OpenfortError('Invalid recovery method', OpenfortErrorType.VALIDATION_ERROR);
+                throw new OpenfortError('Invalid recovery method', OpenfortReactErrorType.VALIDATION_ERROR);
         }
     }, [walletConfig, getEncryptionSession]);
     const userLinkedWalletConnectors = useMemo(() => {
-        const userWallets = user
-            ? user.linkedAccounts
+        const userWallets = linkedAccounts
+            ? linkedAccounts
                 .filter((linkedAccount) => linkedAccount.provider === UIAuthProvider.WALLET)
                 .map((linkedAccount) => {
                 // For connector wallets (e.g. Metamask, Rabby, etc.)
                 const wallet = availableWallets.find((c) => c.connector.id === linkedAccount.walletClientType);
                 return {
                     accounts: [],
-                    address: linkedAccount.address,
+                    address: linkedAccount.accountId,
                     connectorType: linkedAccount.connectorType,
                     walletClientType: linkedAccount.walletClientType,
                     id: (wallet === null || wallet === void 0 ? void 0 : wallet.id) || linkedAccount.walletClientType || 'unknown',
@@ -11551,7 +11569,7 @@ function useWallets(hookOptions = {}) {
             })
             : [];
         return userWallets;
-    }, [user === null || user === void 0 ? void 0 : user.linkedAccounts, embeddedAccounts]);
+    }, [linkedAccounts, embeddedAccounts]);
     const userEmbeddedWallets = useMemo(() => {
         const newRawWallets = [];
         embeddedAccounts === null || embeddedAccounts === void 0 ? void 0 : embeddedAccounts.forEach((embeddedAccount) => {
@@ -11599,7 +11617,7 @@ function useWallets(hookOptions = {}) {
             const wallet = availableWallets.find((c) => c.id === optionsObject.walletId);
             if (!wallet) {
                 logger.log('Connector not found', connector);
-                return { error: new OpenfortError('Connector not found', OpenfortErrorType.WALLET_ERROR) };
+                return { error: new OpenfortError('Connector not found', OpenfortReactErrorType.WALLET_ERROR) };
             }
             logger.log('Connecting to', wallet.connector);
             connector = wallet.connector;
@@ -11609,7 +11627,7 @@ function useWallets(hookOptions = {}) {
         }
         if (!connector) {
             logger.log('Connector not found', availableWallets, optionsObject.walletId);
-            return { error: new OpenfortError('Connector not found', OpenfortErrorType.WALLET_ERROR) };
+            return { error: new OpenfortError('Connector not found', OpenfortReactErrorType.WALLET_ERROR) };
         }
         if ((activeWallet === null || activeWallet === void 0 ? void 0 : activeWallet.id) === connector.id && (address === null || address === void 0 ? void 0 : address.toLowerCase()) === ((_a = optionsObject.address) === null || _a === void 0 ? void 0 : _a.toLowerCase())) {
             logger.log(`Already connected to ${connector.id} with address ${address}, skipping connection`);
@@ -11621,7 +11639,7 @@ function useWallets(hookOptions = {}) {
             if (!walletToConnect) {
                 logger.log('Wallet not found', connector);
                 return onError({
-                    error: new OpenfortError('Wallet not found', OpenfortErrorType.AUTHENTICATION_ERROR),
+                    error: new OpenfortError('Wallet not found', OpenfortReactErrorType.AUTHENTICATION_ERROR),
                     options: optionsObject,
                     hookOptions,
                 });
@@ -11651,7 +11669,7 @@ function useWallets(hookOptions = {}) {
             });
             if (!walletConfig) {
                 return onError({
-                    error: new OpenfortError('Embedded signer not enabled', OpenfortErrorType.WALLET_ERROR),
+                    error: new OpenfortError('Embedded signer not enabled', OpenfortReactErrorType.WALLET_ERROR),
                     options: optionsObject,
                     hookOptions,
                 });
@@ -11686,7 +11704,7 @@ function useWallets(hookOptions = {}) {
                             return w.address.toLowerCase() === addressToMatch && !!w.chainId;
                         });
                         if (!accountToRecoverInDifferentChain || !accountToRecoverInDifferentChain.chainId) {
-                            throw new OpenfortError(`Embedded wallet not found for address ${walletAddress}`, OpenfortErrorType.WALLET_ERROR);
+                            throw new OpenfortError(`Embedded wallet not found for address ${walletAddress}`, OpenfortReactErrorType.WALLET_ERROR);
                         }
                         logger.log(`Found embedded wallet for address ${walletAddress} in different chain ${accountToRecoverInDifferentChain.chainId}.`);
                         hasToSwitchChain = true;
@@ -11697,7 +11715,7 @@ function useWallets(hookOptions = {}) {
                         accountToRecover.recoveryMethod &&
                         optionsObject.recovery.recoveryMethod !== accountToRecover.recoveryMethod) {
                         logger.log('Recovery method does not match', optionsObject.recovery.recoveryMethod, accountToRecover.recoveryMethod);
-                        throw new OpenfortError("The recovery method you entered is incorrect and does not match the wallet's recovery method", OpenfortErrorType.WALLET_ERROR);
+                        throw new OpenfortError("The recovery method you entered is incorrect and does not match the wallet's recovery method", OpenfortReactErrorType.WALLET_ERROR);
                     }
                     const recovery = {
                         recoveryMethod: (_c = accountToRecover.recoveryMethod) !== null && _c !== void 0 ? _c : RecoveryMethod.AUTOMATIC,
@@ -11715,7 +11733,7 @@ function useWallets(hookOptions = {}) {
                     if ((walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.accountType) === AccountTypeEnum.EOA) {
                         accountToRecover = embeddedAccounts.find((w) => w.accountType === AccountTypeEnum.EOA);
                         if (!accountToRecover) {
-                            throw new OpenfortError('No embedded wallet found with type EOA', OpenfortErrorType.WALLET_ERROR);
+                            throw new OpenfortError('No embedded wallet found with type EOA', OpenfortReactErrorType.WALLET_ERROR);
                         }
                     }
                     else {
@@ -11723,7 +11741,7 @@ function useWallets(hookOptions = {}) {
                         if (!accountToRecover) {
                             // Here it should check if there is a wallet that can recover in another chain and recover it in the current chain (its a different account so its not supported yet)
                             // TODO: Connect to wallet in the other chain and then switch chain
-                            throw new OpenfortError('No embedded wallet found for the current chain', OpenfortErrorType.WALLET_ERROR);
+                            throw new OpenfortError('No embedded wallet found for the current chain', OpenfortReactErrorType.WALLET_ERROR);
                         }
                     }
                     logger.log('Found embedded wallet to recover (without walletAddress)', accountToRecover);
@@ -11739,7 +11757,7 @@ function useWallets(hookOptions = {}) {
                     walletAddress = accountToRecover.address;
                 }
                 if (!embeddedAccount) {
-                    throw new OpenfortError('Failed to recover embedded wallet', OpenfortErrorType.WALLET_ERROR);
+                    throw new OpenfortError('Failed to recover embedded wallet', OpenfortReactErrorType.WALLET_ERROR);
                 }
                 setStatus({
                     status: 'success',
@@ -11763,16 +11781,16 @@ function useWallets(hookOptions = {}) {
             catch (err) {
                 let error;
                 if (err instanceof MissingRecoveryPasswordError) {
-                    error = new OpenfortError('Missing recovery password', OpenfortErrorType.WALLET_ERROR);
+                    error = new OpenfortError('Missing recovery password', OpenfortReactErrorType.WALLET_ERROR);
                 }
                 else if (err instanceof OpenfortError) {
                     error = err;
                 }
                 else if (typeof err === 'string') {
-                    error = new OpenfortError(err, OpenfortErrorType.WALLET_ERROR);
+                    error = new OpenfortError(err, OpenfortReactErrorType.WALLET_ERROR);
                 }
                 else {
-                    error = new OpenfortError('Failed to recover embedded wallet', OpenfortErrorType.WALLET_ERROR, {
+                    error = new OpenfortError('Failed to recover embedded wallet', OpenfortReactErrorType.WALLET_ERROR, {
                         error: err,
                     });
                     if (error.message === 'Wrong recovery password for this embedded signer') {
@@ -11830,10 +11848,10 @@ function useWallets(hookOptions = {}) {
         try {
             const accessToken = await client.getAccessToken();
             if (!accessToken) {
-                throw new OpenfortError('Openfort access token not found', OpenfortErrorType.WALLET_ERROR);
+                throw new OpenfortError('Openfort access token not found', OpenfortReactErrorType.WALLET_ERROR);
             }
             if (!walletConfig) {
-                throw new OpenfortError('Embedded signer not enabled', OpenfortErrorType.WALLET_ERROR);
+                throw new OpenfortError('Embedded signer not enabled', OpenfortReactErrorType.WALLET_ERROR);
             }
             const recoveryParams = await parseWalletRecovery(recovery);
             const accountType = (options === null || options === void 0 ? void 0 : options.accountType) || (walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.accountType) || AccountTypeEnum.SMART_ACCOUNT;
@@ -11867,7 +11885,7 @@ function useWallets(hookOptions = {}) {
             const errorObj = e instanceof Error ? e : new Error('Failed to create wallet');
             const error = e instanceof OpenfortError
                 ? e
-                : new OpenfortError('Failed to create wallet', OpenfortErrorType.WALLET_ERROR, { error: errorObj });
+                : new OpenfortError('Failed to create wallet', OpenfortReactErrorType.WALLET_ERROR, { error: errorObj });
             setStatus({
                 status: 'error',
                 error,
@@ -11910,7 +11928,7 @@ function useWallets(hookOptions = {}) {
             return onError({
                 hookOptions,
                 options: params,
-                error: new OpenfortError('Failed to set wallet recovery', OpenfortErrorType.WALLET_ERROR, {
+                error: new OpenfortError('Failed to set wallet recovery', OpenfortReactErrorType.WALLET_ERROR, {
                     error: errorObj,
                 }),
             });
@@ -12067,7 +12085,7 @@ const useGuestAuth = (hookOptions = {}) => {
                 status: 'loading',
             });
             const result = await client.auth.signUpGuest();
-            const user = result.player;
+            const user = result.user;
             await updateUser(user);
             const { wallet } = await tryUseWallet({
                 logoutOnError: (_a = options.logoutOnError) !== null && _a !== void 0 ? _a : hookOptions.logoutOnError,
@@ -12083,7 +12101,7 @@ const useGuestAuth = (hookOptions = {}) => {
             });
         }
         catch (error) {
-            const openfortError = new OpenfortError('Failed to signup guest', OpenfortErrorType.AUTHENTICATION_ERROR, {
+            const openfortError = new OpenfortError('Failed to signup guest', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
                 error,
             });
             setStatus({
@@ -12212,7 +12230,10 @@ var wave = (jsxs("svg", { "aria-hidden": "true", width: "298", height: "188", vi
 
 const Graphic = styled(motion.div) `
   position: relative;
-  margin: 16px auto 20px;
+  margin-top: ${({ $marginTop }) => $marginTop !== null && $marginTop !== void 0 ? $marginTop : '16px'};
+  margin-bottom: ${({ $marginBottom }) => $marginBottom !== null && $marginBottom !== void 0 ? $marginBottom : '20px'};
+  margin-left: auto;
+  margin-right: auto;
   height: ${({ $height }) => $height !== null && $height !== void 0 ? $height : '190px'};
   max-width: 295px;
   pointer-events: none;
@@ -12378,8 +12399,8 @@ const Logo$1 = styled(motion.div) `
 const LogoGraphic = ({ size = '100%', logo }) => {
     return (jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { style: { transform: `scale(${size})` }, children: logo }) }) }) }) }) }));
 };
-const FloatingGraphic = ({ height = '130px', logoCenter, logoTopRight, logoTopLeft, logoBottomRight, logoBottomLeft, }) => {
-    return (jsxs(Graphic, { "$height": height, children: [jsxs(LogoGroup, { children: [jsx(LogoGraphic, { ...logoCenter }), logoTopLeft ? jsx(LogoGraphic, { ...logoTopLeft }) : jsx("div", {}), logoTopRight ? jsx(LogoGraphic, { ...logoTopRight }) : jsx("div", {}), logoBottomLeft ? jsx(LogoGraphic, { ...logoBottomLeft }) : jsx("div", {}), logoBottomRight ? jsx(LogoGraphic, { ...logoBottomRight }) : jsx("div", {})] }), jsx(GraphicBackground, { children: wave })] }));
+const FloatingGraphic = ({ height = '130px', marginBottom, marginTop, logoCenter, logoTopRight, logoTopLeft, logoBottomRight, logoBottomLeft, }) => {
+    return (jsxs(Graphic, { "$height": height, "$marginBottom": marginBottom, "$marginTop": marginTop, children: [jsxs(LogoGroup, { children: [jsx(LogoGraphic, { ...logoCenter }), logoTopLeft ? jsx(LogoGraphic, { ...logoTopLeft }) : jsx("div", {}), logoTopRight ? jsx(LogoGraphic, { ...logoTopRight }) : jsx("div", {}), logoBottomLeft ? jsx(LogoGraphic, { ...logoBottomLeft }) : jsx("div", {}), logoBottomRight ? jsx(LogoGraphic, { ...logoBottomRight }) : jsx("div", {})] }), jsx(GraphicBackground, { children: wave })] }));
 };
 
 /**
@@ -12563,6 +12584,10 @@ const PasswordStrengthIndicator = ({ password, showPasswordIsTooWeakError, }) =>
                         }, transition: { duration: 0.3 }, style: { color: '#ef4444', fontSize: '0.875rem', fontWeight: 500, position: 'absolute', top: '0' }, children: "Password is too weak" })] })] }));
 };
 
+const PhoneGlobalStyles = createGlobalStyle `
+  // Styles from react-international-phone (imported here to avoid importing the whole CSS file for nextjs compatibility)
+  .react-international-phone-country-selector{position:relative}.react-international-phone-country-selector-button{display:flex;height:var(--react-international-phone-height, 36px);box-sizing:border-box;align-items:center;justify-content:center;padding:0;border:1px solid var(--react-international-phone-country-selector-border-color, var(--react-international-phone-border-color, gainsboro));margin:0;appearance:button;-webkit-appearance:button;background-color:var(--react-international-phone-country-selector-background-color, var(--react-international-phone-background-color, white));cursor:pointer;text-transform:none;user-select:none}.react-international-phone-country-selector-button:hover{background-color:var(--react-international-phone-country-selector-background-color-hover, whitesmoke)}.react-international-phone-country-selector-button--hide-dropdown{cursor:auto}.react-international-phone-country-selector-button--hide-dropdown:hover{background-color:transparent}.react-international-phone-country-selector-button__button-content{display:flex;align-items:center;justify-content:center}.react-international-phone-country-selector-button__flag-emoji{margin:0 4px}.react-international-phone-country-selector-button__flag-emoji--disabled{opacity:.75}.react-international-phone-country-selector-button__dropdown-arrow{border-top:var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777);border-right:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;border-left:var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent;margin-right:4px;transition:all .1s ease-out}.react-international-phone-country-selector-button__dropdown-arrow--active{transform:rotateX(180deg)}.react-international-phone-country-selector-button__dropdown-arrow--disabled{border-top-color:var(--react-international-phone-disabled-country-selector-arrow-color, #999)}.react-international-phone-country-selector-button--disabled,.react-international-phone-country-selector-button--disabled:hover{background-color:var(--react-international-phone-disabled-country-selector-background-color, var(--react-international-phone-disabled-background-color, whitesmoke))}.react-international-phone-country-selector-button--disabled{cursor:auto}.react-international-phone-flag-emoji{width:var(--react-international-phone-flag-width, 24px);height:var(--react-international-phone-flag-height, 24px);box-sizing:border-box}.react-international-phone-country-selector-dropdown{position:absolute;z-index:1;top:var(--react-international-phone-dropdown-top, 44px);left:var(--react-international-phone-dropdown-left, 0);display:flex;width:300px;max-height:200px;flex-direction:column;padding:4px 0;margin:0;background-color:var(--react-international-phone-dropdown-item-background-color, var(--react-international-phone-background-color, white));box-shadow:var(--react-international-phone-dropdown-shadow, 2px 2px 16px rgba(0, 0, 0, .25));color:var(--react-international-phone-dropdown-item-text-color, var(--react-international-phone-text-color, #222));list-style:none;overflow-y:scroll}.react-international-phone-country-selector-dropdown__preferred-list-divider{height:1px;border:none;margin:var(--react-international-phone-dropdown-preferred-list-divider-margin, 0);background:var(--react-international-phone-dropdown-preferred-list-divider-color, var(--react-international-phone-border-color, gainsboro))}.react-international-phone-country-selector-dropdown__list-item{display:flex;min-height:var(--react-international-phone-dropdown-item-height, 28px);box-sizing:border-box;align-items:center;padding:2px 8px}.react-international-phone-country-selector-dropdown__list-item-flag-emoji{margin-right:8px}.react-international-phone-country-selector-dropdown__list-item-country-name{overflow:hidden;margin-right:8px;font-size:var(--react-international-phone-dropdown-item-font-size, 14px);text-overflow:ellipsis;white-space:nowrap}.react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-dropdown-item-dial-code-color, gray);font-size:var(--react-international-phone-dropdown-item-font-size, 14px)}.react-international-phone-country-selector-dropdown__list-item:hover{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke));cursor:pointer}.react-international-phone-country-selector-dropdown__list-item--selected,.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke);color:var(--react-international-phone-selected-dropdown-item-text-color, var(--react-international-phone-text-color, #222))}.react-international-phone-country-selector-dropdown__list-item--selected .react-international-phone-country-selector-dropdown__list-item-dial-code,.react-international-phone-country-selector-dropdown__list-item--focused .react-international-phone-country-selector-dropdown__list-item-dial-code{color:var(--react-international-phone-selected-dropdown-item-dial-code-color, var(--react-international-phone-dropdown-item-dial-code-color, gray))}.react-international-phone-country-selector-dropdown__list-item--focused{background-color:var(--react-international-phone-selected-dropdown-item-background-color, var(--react-international-phone-selected-dropdown-item-background-color, whitesmoke))}.react-international-phone-dial-code-preview{display:flex;align-items:center;justify-content:center;padding:0 8px;border:1px solid var(--react-international-phone-dial-code-preview-border-color, var(--react-international-phone-border-color, gainsboro));margin-right:-1px;background-color:var(--react-international-phone-dial-code-preview-background-color, var(--react-international-phone-background-color, white));color:var(--react-international-phone-dial-code-preview-text-color, var(--react-international-phone-text-color, #222));font-size:var(--react-international-phone-dial-code-preview-font-size, var(--react-international-phone-font-size, 13px))}.react-international-phone-dial-code-preview--disabled{background-color:var(--react-international-phone-dial-code-preview-disabled-background-color, var(--react-international-phone-disabled-background-color, whitesmoke));color:var(--react-international-phone-dial-code-preview-disabled-text-color, var(--react-international-phone-disabled-text-color, #666))}.react-international-phone-input-container{display:flex}.react-international-phone-input-container .react-international-phone-country-selector-button{border-radius:var(--react-international-phone-border-radius, 4px);margin-right:-1px;border-bottom-right-radius:0;border-top-right-radius:0}.react-international-phone-input-container .react-international-phone-input{overflow:visible;height:var(--react-international-phone-height, 36px);box-sizing:border-box;padding:0 8px;border:1px solid var(--react-international-phone-border-color, gainsboro);border-radius:var(--react-international-phone-border-radius, 4px);margin:0;background-color:var(--react-international-phone-background-color, white);border-bottom-left-radius:0;border-top-left-radius:0;color:var(--react-international-phone-text-color, #222);font-family:inherit;font-size:var(--react-international-phone-font-size, 13px)}.react-international-phone-input-container .react-international-phone-input:focus{outline:none}.react-international-phone-input-container .react-international-phone-input--disabled{background-color:var(--react-international-phone-disabled-background-color, whitesmoke);color:var(--react-international-phone-disabled-text-color, #666)}
+`;
 const ProviderInputInner = styled.div `
   border-radius: var(--ck-secondary-button-border-radius);
   font-size: 1rem;
@@ -12600,10 +12625,33 @@ const ProviderInputInner = styled.div `
     width: 100%;
     height: 100%;
   }
+
+  .react-international-phone-country-selector-button {
+    padding-left: 20px;
+    padding-right: 10px;
+    --react-international-phone-border-color: none;
+    --react-international-phone-border-radius: var(--ck-secondary-button-border-radius);
+    --react-international-phone-background-color: var(--ck-secondary-button-background);
+    --react-international-phone-text-color: var(--ck-body-color);
+    border-radius: var(--ck-secondary-button-border-radius) 0px 0px var(--ck-secondary-button-border-radius);
+    transition: all .2s ease-out;
+  }
+
+  .react-international-phone-country-selector-dropdown {
+    box-shadow: var(--ck-secondary-button-hover-box-shadow);
+  }
+    
+  .react-international-phone-country-selector-button__dropdown-arrow {
+    border-top: var(--react-international-phone-country-selector-arrow-size, 4px) solid var(--react-international-phone-country-selector-arrow-color, #777) !important;
+    border-right: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent !important;
+    border-left: var(--react-international-phone-country-selector-arrow-size, 4px) solid transparent !important;
+    margin-right: 4px;
+    transition: all .1s ease-out;
+  }
 `;
 const EmailInnerButton = styled(motion.button) `
   color: var(--ck-body-action-color);
-  transition: background-color 200ms ease, transform 100ms ease, color 200ms ease, transition 200ms ease;
+  transition: background-color 200ms ease, transform 100ms ease, color 200ms ease, transition 200ms ease, opacity 200ms ease;
   border-radius: 16px;
   
   svg {
@@ -13146,6 +13194,11 @@ const DownloadApp = () => {
     return (jsx(PageContent, { children: jsxs(ModalContent, { style: { paddingBottom: 4, gap: 14 }, children: [downloads.redirect && jsx(CustomQRCode, { value: downloads.redirect }), !downloads.redirect && jsx(Fragment, { children: "No download link available" }), jsx(ModalBody, { style: { fontSize: 15, lineHeight: '20px', padding: '0 12px' }, children: bodycopy })] }) }));
 };
 
+const isValidEmail = (email) => {
+    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+    return emailRegex.test(email);
+};
+
 const buildCallbackUrl = ({ email, callbackUrl, provider, isOpen, }) => {
     if (callbackUrl && !callbackUrl.startsWith('http')) {
         callbackUrl = `${window.location.origin}${callbackUrl.startsWith('/') ? '' : '/'}${callbackUrl}`;
@@ -13161,10 +13214,6 @@ const buildCallbackUrl = ({ email, callbackUrl, provider, isOpen, }) => {
     return redirectUrl.toString();
 };
 
-const isValidEmail = (email) => {
-    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
-    return emailRegex.test(email);
-};
 /**
  * Hook for email-based authentication operations
  *
@@ -13258,7 +13307,7 @@ const useEmailAuth = (hookOptions = {}) => {
             });
             setRequiresEmailVerification(false);
             if (!options.email || !options.password) {
-                const error = new OpenfortError('Email and password are required', OpenfortErrorType.VALIDATION_ERROR);
+                const error = new OpenfortError('Email and password are required', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13270,7 +13319,7 @@ const useEmailAuth = (hookOptions = {}) => {
                 });
             }
             if (!isValidEmail(options.email)) {
-                const error = new OpenfortError('Invalid email', OpenfortErrorType.VALIDATION_ERROR);
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13313,7 +13362,7 @@ const useEmailAuth = (hookOptions = {}) => {
                 setStatus({
                     status: 'success',
                 });
-                const user = result.player;
+                const user = result.user;
                 await updateUser();
                 return onSuccess({
                     data: { user, wallet },
@@ -13323,7 +13372,7 @@ const useEmailAuth = (hookOptions = {}) => {
             }
         }
         catch (e) {
-            const error = new OpenfortError('Failed to login with email and password', OpenfortErrorType.AUTHENTICATION_ERROR, { error: e });
+            const error = new OpenfortError('Failed to login with email and password', OpenfortReactErrorType.AUTHENTICATION_ERROR, { error: e });
             setStatus({
                 status: 'error',
                 error: error,
@@ -13339,7 +13388,7 @@ const useEmailAuth = (hookOptions = {}) => {
         var _a;
         try {
             if (!isValidEmail(options.email)) {
-                const error = new OpenfortError('Invalid email', OpenfortErrorType.VALIDATION_ERROR);
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13374,7 +13423,7 @@ const useEmailAuth = (hookOptions = {}) => {
             });
         }
         catch (e) {
-            const error = new OpenfortError('Failed to reset password', OpenfortErrorType.AUTHENTICATION_ERROR, {
+            const error = new OpenfortError('Failed to reset password', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
                 error: e,
             });
             setStatus({
@@ -13391,7 +13440,7 @@ const useEmailAuth = (hookOptions = {}) => {
     const resetPassword = useCallback(async (options) => {
         try {
             if (!isValidEmail(options.email)) {
-                const error = new OpenfortError('Invalid email', OpenfortErrorType.VALIDATION_ERROR);
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13407,9 +13456,8 @@ const useEmailAuth = (hookOptions = {}) => {
             });
             setRequiresEmailVerification(false);
             await client.auth.resetPassword({
-                email: options.email,
                 password: options.password,
-                state: options.state,
+                token: options.state,
             });
             setStatus({
                 status: 'success',
@@ -13422,7 +13470,7 @@ const useEmailAuth = (hookOptions = {}) => {
             });
         }
         catch (e) {
-            const error = new OpenfortError('Failed to reset password', OpenfortErrorType.AUTHENTICATION_ERROR, {
+            const error = new OpenfortError('Failed to reset password', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
                 error: e,
             });
             setStatus({
@@ -13440,7 +13488,7 @@ const useEmailAuth = (hookOptions = {}) => {
         var _a, _b, _c;
         try {
             if (!options.email || !options.password) {
-                const error = new OpenfortError('Email and password are required', OpenfortErrorType.VALIDATION_ERROR);
+                const error = new OpenfortError('Email and password are required', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13452,7 +13500,7 @@ const useEmailAuth = (hookOptions = {}) => {
                 });
             }
             if (!isValidEmail(options.email)) {
-                const error = new OpenfortError('Invalid email', OpenfortErrorType.VALIDATION_ERROR);
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13470,47 +13518,45 @@ const useEmailAuth = (hookOptions = {}) => {
             const result = await client.auth.signUpWithEmailPassword({
                 email: options.email,
                 password: options.password,
+                callbackURL: buildCallbackUrl({
+                    email: options.email,
+                    callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
+                    provider: 'email',
+                    isOpen,
+                }),
                 ...(options.name && { name: options.name }),
             });
-            if ('action' in result) {
-                setStatus({
-                    status: 'awaiting-input',
+            // TODO: TMP FIX
+            if ('token' in result && result.token !== null) {
+                const { wallet } = await tryUseWallet({
+                    logoutOnError: (_b = options.logoutOnError) !== null && _b !== void 0 ? _b : hookOptions.logoutOnError,
+                    recoverWalletAutomatically: (_c = options.recoverWalletAutomatically) !== null && _c !== void 0 ? _c : hookOptions.recoverWalletAutomatically,
                 });
-                client.auth.requestEmailVerification({
-                    email: options.email,
-                    redirectUrl: buildCallbackUrl({
-                        email: options.email,
-                        callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
-                        provider: 'email',
-                        isOpen,
-                    }),
+                setStatus({
+                    status: 'success',
                 });
-                setRequiresEmailVerification(true);
+                const user = result.user;
+                await updateUser(user);
                 return onSuccess({
-                    data: { requiresEmailVerification: true },
+                    data: { user, wallet },
                     hookOptions,
                     options,
                 });
             }
             else {
-                const { wallet } = await tryUseWallet({
-                    logoutOnError: (_b = options.logoutOnError) !== null && _b !== void 0 ? _b : hookOptions.logoutOnError,
-                    recoverWalletAutomatically: (_c = options.recoverWalletAutomatically) !== null && _c !== void 0 ? _c : hookOptions.recoverWalletAutomatically,
-                });
                 setStatus({
-                    status: 'success',
+                    status: 'awaiting-input',
                 });
-                const user = result.player;
-                await updateUser(user);
+                setRequiresEmailVerification(true);
                 return onSuccess({
-                    data: { user, wallet },
+                    data: { requiresEmailVerification: true },
                     hookOptions,
                     options,
                 });
             }
         }
         catch (e) {
-            const error = new OpenfortError('Failed to login with email and password', OpenfortErrorType.AUTHENTICATION_ERROR, { error: e });
+            const error = new OpenfortError('Failed to login with email and password', OpenfortReactErrorType.AUTHENTICATION_ERROR, { error: e });
             setStatus({
                 status: 'error',
                 error,
@@ -13526,7 +13572,7 @@ const useEmailAuth = (hookOptions = {}) => {
         var _a;
         try {
             if (!isValidEmail(options.email)) {
-                const error = new OpenfortError('Invalid email', OpenfortErrorType.VALIDATION_ERROR);
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13541,7 +13587,7 @@ const useEmailAuth = (hookOptions = {}) => {
             const authToken = await client.getAccessToken();
             if (!authToken) {
                 logger.log('No token found');
-                const error = new OpenfortError('No token found', OpenfortErrorType.AUTHENTICATION_ERROR);
+                const error = new OpenfortError('No token found', OpenfortReactErrorType.AUTHENTICATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13552,43 +13598,29 @@ const useEmailAuth = (hookOptions = {}) => {
                     error,
                 });
             }
-            const result = await client.auth.linkEmailPassword({
+            await client.auth.addEmail({
+                // name: options.name || '',
                 email: options.email,
-                password: options.password,
-                authToken,
+                // password: options.password,
+                // method: 'password',
+                callbackURL: buildCallbackUrl({
+                    callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
+                    email: options.email,
+                    provider: 'email',
+                    isOpen,
+                }),
             });
             logger.log('Email linked successfully');
-            if ('action' in result) {
-                setStatus({
-                    status: 'awaiting-input',
-                });
-                client.auth.requestEmailVerification({
-                    email: options.email,
-                    redirectUrl: buildCallbackUrl({
-                        email: options.email,
-                        callbackUrl: (_a = options.emailVerificationRedirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.emailVerificationRedirectTo,
-                        provider: 'email',
-                        isOpen,
-                    }),
-                });
-                updateUser();
-                setRequiresEmailVerification(true);
-                return onSuccess({
-                    data: { requiresEmailVerification: true },
-                    hookOptions,
-                    options,
-                });
-            }
-            else {
-                return onSuccess({
-                    data: {},
-                    hookOptions,
-                    options,
-                });
-            }
+            return onSuccess({
+                data: {},
+                hookOptions,
+                options,
+            });
         }
         catch (e) {
-            const error = new OpenfortError('Failed to link email', OpenfortErrorType.AUTHENTICATION_ERROR, { error: e });
+            const error = new OpenfortError('Failed to link email', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+                error: e,
+            });
             setStatus({
                 status: 'error',
                 error: error,
@@ -13606,7 +13638,7 @@ const useEmailAuth = (hookOptions = {}) => {
         });
         try {
             if (!isValidEmail(options.email)) {
-                const error = new OpenfortError('Invalid email', OpenfortErrorType.VALIDATION_ERROR);
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
                 setStatus({
                     status: 'error',
                     error,
@@ -13618,8 +13650,7 @@ const useEmailAuth = (hookOptions = {}) => {
                 });
             }
             await client.auth.verifyEmail({
-                email: options.email,
-                state: options.state,
+                token: options.state,
             });
             setStatus({
                 status: 'success',
@@ -13633,7 +13664,9 @@ const useEmailAuth = (hookOptions = {}) => {
             });
         }
         catch (e) {
-            const error = new OpenfortError('Failed to verify email', OpenfortErrorType.AUTHENTICATION_ERROR, { error: e });
+            const error = new OpenfortError('Failed to verify email', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+                error: e,
+            });
             setStatus({
                 status: 'error',
                 error,
@@ -13749,6 +13782,7 @@ const EmailLogin = () => {
                 setRoute(routes.EMAIL_VERIFICATION);
             }
             else {
+                setEmail('');
                 setRoute(routes.LOAD_WALLETS);
             }
         }
@@ -13779,91 +13813,603 @@ const EmailLogin = () => {
                                             }, children: "Forgot password?" }) })] }, loginError ? 'error' : 'no-error') }) }), jsx(Button, { onClick: handleSubmit, disabled: loginLoading, waiting: loginLoading, children: jsx(AnimatePresence, { initial: false, children: loginLoading ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$1, children: isRegister ? 'Signing up...' : 'Logging in...' }, "connectedText")) : isRegister ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$1, children: "Sign up" }, "connectedText")) : (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants$1, children: "Sign in" }, "connectedText")) }) })] }), jsxs(FooterContainer, { children: ["or", jsx("button", { type: "button", onClick: handleToggle, disabled: loginLoading, children: isRegister ? 'Sign in' : 'Sign up' })] })] }));
 };
 
-const EmailVerification = () => {
-    const { client } = useOpenfortCore();
-    const { setRoute, emailInput: emailInStorage } = useOpenfort();
-    const [loading, setLoading] = useState(true);
-    const [verificationResponse, setVerificationResponse] = useState(null);
-    useEffect(() => {
-        const fixedUrl = window.location.href.replace('?state=', '&state='); // redirectUrl is not working with query params
-        const url = new URL(fixedUrl);
-        const openfortEmailVerificationUI = url.searchParams.get('openfortEmailVerificationUI');
-        if (!openfortEmailVerificationUI) {
-            // Send email verification flow
-            if (!emailInStorage) {
-                setRoute(routes.EMAIL_LOGIN);
-                return;
+const useEmailOtpAuth = (hookOptions = {}) => {
+    const { client, updateUser } = useOpenfortCore();
+    const [status, setStatus] = useState({
+        status: 'idle',
+    });
+    const reset = useCallback(() => {
+        setStatus({
+            status: 'idle',
+        });
+    }, []);
+    const { tryUseWallet } = useConnectToWalletPostAuth();
+    const signInEmailOtp = useCallback(async (options) => {
+        var _a, _b;
+        try {
+            setStatus({
+                status: 'loading',
+            });
+            if (!options.email || !options.otp) {
+                const error = new OpenfortError('Email and OTP are required', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
             }
-            setLoading(false);
-            return;
-        }
-        // Verify email flow
-        const state = url.searchParams.get('state');
-        const email = url.searchParams.get('email');
-        if (!state) {
-            logger.error('No state found in URL');
-            return;
+            if (!isValidEmail(options.email)) {
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
+            }
+            const result = await client.auth.logInWithEmailOtp({
+                email: options.email,
+                otp: options.otp,
+            });
+            const { wallet } = await tryUseWallet({
+                logoutOnError: (_a = options.logoutOnError) !== null && _a !== void 0 ? _a : hookOptions.logoutOnError,
+                recoverWalletAutomatically: (_b = options.recoverWalletAutomatically) !== null && _b !== void 0 ? _b : hookOptions.recoverWalletAutomatically,
+            });
+            setStatus({
+                status: 'success',
+            });
+            const user = result.user;
+            await updateUser();
+            return onSuccess({
+                data: { user, wallet },
+                hookOptions,
+                options,
+            });
         }
-        const removeParams = () => {
-            ['state', 'openfortEmailVerificationUI', 'email', 'openfortAuthProvider'].forEach((key) => {
-                url.searchParams.delete(key);
+        catch (e) {
+            const error = new OpenfortError('Failed to login with email OTP', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+                error: e,
+            });
+            setStatus({
+                status: 'error',
+                error: error,
+            });
+            return onError({
+                hookOptions,
+                options,
+                error: error,
             });
-            window.history.replaceState({}, document.title, url.toString());
-        };
-        if (!email) {
-            setRoute(routes.EMAIL_LOGIN);
-            return;
         }
-        logger.log('EmailVerification', state, email);
-        (async () => {
-            try {
-                await client.auth.verifyEmail({
-                    email,
-                    state,
+    }, [client, setStatus, updateUser, hookOptions]);
+    const requestEmailOtp = useCallback(async (options) => {
+        try {
+            setStatus({
+                status: 'requesting',
+            });
+            if (!options.email) {
+                const error = new OpenfortError('Email is required', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
                 });
-                setVerificationResponse({
-                    success: true,
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
                 });
             }
-            catch (e) {
-                setVerificationResponse({
-                    success: false,
-                    error: 'There was an error verifying your email. Please try again.',
+            if (!isValidEmail(options.email)) {
+                const error = new OpenfortError('Invalid email', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
                 });
-                logger.log('Error verifying email', e);
-            }
-            finally {
-                removeParams();
-                setLoading(false);
             }
-        })();
-    }, []);
-    if (loading) {
-        return (jsx(PageContent, { children: jsx(Loader, { header: "Checking if account is verified" }) }));
-    }
-    return (jsxs(PageContent, { children: [jsx(FloatingGraphic, { height: "190px", logoCenter: {
-                    logo: jsx(EmailIcon, {}),
-                }, logoTopLeft: {
-                    logo: jsx(EmailIcon, {}),
-                }, logoBottomRight: {
-                    logo: jsx(EmailIcon, {}),
-                }, logoTopRight: {
-                    logo: jsx(EmailIcon, {}),
-                }, logoBottomLeft: {
-                    logo: jsx(EmailIcon, {}),
-                } }), jsx(ModalContent, { children: verificationResponse ? (jsxs(Fragment, { children: [jsx(ModalH1, { "$small": true, children: verificationResponse.success ? 'Email verified' : 'Email verification failed' }), jsxs(ModalBody, { children: [verificationResponse.error ? verificationResponse.error : 'Your email has been verified.', jsx(Button, { onClick: () => {
-                                        setRoute(routes.EMAIL_LOGIN);
-                                    }, style: { marginTop: 12 }, children: "Continue" })] })] })) : (jsxs(Fragment, { children: [jsx(ModalH1, { "$small": true, children: "Email sent" }), jsxs(ModalBody, { style: { height: 40 }, children: ["Please check your email.", jsx("br", {}), emailInStorage] }), jsx(TextLinkButton, { style: { textDecoration: 'underline' }, onClick: () => {
-                                setRoute(routes.EMAIL_LOGIN);
-                            }, children: "Go back to login" })] })) })] }));
-};
-
-// TODO: Localize
-const ExportKey = () => {
-    const { exportPrivateKey } = useWallets();
-    const [exportedKey, setExportedKey] = useState(null);
-    const [exportError, setExportError] = useState(null);
-    const [showExportedKey, setShowExportedKey] = useState(false);
+            await client.auth.requestEmailOtp({
+                email: options.email,
+            });
+            setStatus({
+                status: 'success',
+            });
+            return onSuccess({
+                data: {},
+                hookOptions,
+                options,
+            });
+        }
+        catch (e) {
+            const error = new OpenfortError('Failed to request email OTP', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+                error: e,
+            });
+            setStatus({
+                status: 'error',
+                error: error,
+            });
+            return onError({
+                hookOptions,
+                options,
+                error: error,
+            });
+        }
+    }, [client, setStatus, updateUser, hookOptions]);
+    return {
+        signInEmailOtp,
+        requestEmailOtp,
+        reset,
+        isRequesting: status.status === 'requesting',
+        ...mapStatus(status),
+        isAwaitingInput: status.status === 'awaiting-input',
+    };
+};
+
+const caretBlink = keyframes `
+  0%, 70%, 100% { opacity: 1; }
+  20%, 50% { opacity: 0; }
+`;
+const OtpContainer = styled$1.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  --border: ${({ showBorder }) => (showBorder ? 'var(--ck-body-color-muted)' : 'transparent')};
+`;
+const pulse = keyframes `
+  0% {
+    opacity: 100%;
+  }
+  50% {
+    opacity: 40%;
+  }
+  100% {
+    opacity: 100%;
+  }
+`;
+const dist = 2;
+const shakeKeyframes = keyframes `
+  0%{ transform:none; }
+  25%{ transform:translateX(${dist}px); }
+  50%{ transform:translateX(-${dist}px); }
+  75%{ transform:translateX(${dist}px); }
+  100%{ transform:none; }
+`;
+const keyframeSuccess = keyframes `
+  0% { transform: scale(1); }
+  50% { transform: scale(1.1); }
+  100% { transform: scale(1); }
+`;
+const OTPGroup = styled$1.div `
+  display: flex;
+
+  outline-width: 3px;
+  outline-style: solid;
+  border-radius: 0.375rem;
+  transition: outline-color 0.3s, border-radius .5s;
+
+  outline-color: ${({ isError, isSuccess }) => {
+    if (isError)
+        return 'var(--ck-body-color-danger)';
+    if (isSuccess)
+        return 'var(--ck-body-color-valid)';
+    return 'transparent';
+}};
+
+  ${({ isLoading }) => isLoading &&
+    css `
+      animation: ${pulse} 1s ease-in-out infinite;
+    `}
+
+  ${({ isError }) => isError &&
+    css `
+      animation: ${shakeKeyframes} 220ms ease-out both;
+    `}
+
+  ${({ isSuccess }) => isSuccess &&
+    css `
+      border-radius: 3rem;
+      min-width: 3.5rem;
+      ${OTPSlotWrapper} {
+        width: 0;
+        border: 0;
+        transition: width .5s, border .5s;
+      }
+      animation: ${keyframeSuccess} 220ms ease-out both;
+      animation-delay: 250ms;
+    `}
+`;
+const OTPSlotWrapper = styled$1.div `
+  position: relative;
+  width: 2.5rem;
+  height: 3.5rem;     
+  font-size: 2rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  transition: all 0.3s;
+
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+  border-right: 0.5px solid var(--border);
+  border-left: 0.5px solid var(--border);
+
+  &:first-child {
+    border-left: 1px solid var(--border);
+    border-radius: 0.375rem 0 0 0.375rem;
+  }
+
+  &:last-child {
+    border-radius: 0 0.375rem 0.375rem 0;
+  }
+
+  outline: ${({ isActive }) => (isActive ? '2px solid var(--ck-connectbutton-color)' : '0')};
+  z-index: ${({ isActive }) => (isActive ? 1 : 0)};
+  outline-offset: 0;
+
+  cursor: text;
+  color: var(--ck-body-color);
+`;
+const OTPNumberValue = styled$1.div `
+  opacity: ${({ $hide }) => ($hide ? 0 : 1)};
+  transition: opacity 0.3s;
+`;
+const OTPHiddenInput = styled$1.input `
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: text;
+  caret-color: transparent; /* Hide native caret */
+`;
+const FakeCaretWrapper = styled$1.div `
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  animation: ${caretBlink} 1.2s ease-out infinite;
+`;
+const CaretBar = styled$1.div `
+  width: 1px;
+  height: 2rem;
+  background: var(--ck-body-color);
+`;
+const keyframeWrapper = keyframes `
+  0% { transform: scale(0); }
+  100% { transform: scale(1); }
+`;
+const SuccessTickWrapper = styled$1.div `
+  position: absolute;
+  inset: 5px;
+  display: flex;
+  animation: ${keyframeWrapper} 200ms ease-out both;
+  animation-delay: 200ms;
+  color: var(--ck-body-color-valid);
+`;
+
+function FakeCaret() {
+    return (jsx(FakeCaretWrapper, { children: jsx(CaretBar, {}) }));
+}
+function OtpInputStandalone({ length = 6, onChange, onComplete, isLoading, isError, isSuccess, }) {
+    const [values, setValues] = useState(Array(length).fill(''));
+    const [activeIndex, setActiveIndex] = useState(0);
+    const canEdit = !isLoading && !isError && !isSuccess;
+    const inputsRef = useRef([]);
+    const handleInput = (index, char) => {
+        var _a;
+        if (!char.match(/^[0-9]$/))
+            return;
+        if (!canEdit)
+            return;
+        const newValues = [...values];
+        newValues[index] = char;
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
+        // Move cursor to next box
+        if (index < length - 1) {
+            setActiveIndex(index + 1);
+            (_a = inputsRef.current[index + 1]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    useEffect(() => {
+        if (values.every((v) => v !== '')) {
+            onComplete === null || onComplete === void 0 ? void 0 : onComplete(values.join(''));
+        }
+    }, [values]);
+    const handleBackspace = (index) => {
+        var _a;
+        const newValues = [...values];
+        if (newValues[index] === '') {
+            if (index > 0) {
+                // Move back
+                setActiveIndex(index - 1);
+                (_a = inputsRef.current[index - 1]) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+            newValues[index - 1] = '';
+        }
+        else {
+            newValues[index] = '';
+        }
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
+    };
+    const handlePaste = (e) => {
+        var _a;
+        const pasted = e.clipboardData.getData('text').replace(/\D/g, '');
+        if (!pasted)
+            return;
+        const arr = pasted.substring(0, length).split('');
+        const newValues = [...values];
+        arr.forEach((char, i) => {
+            newValues[i] = char;
+        });
+        setValues(newValues);
+        onChange === null || onChange === void 0 ? void 0 : onChange(newValues.join(''));
+        const finalIndex = Math.min(arr.length - 1, length - 1);
+        setActiveIndex(finalIndex);
+        (_a = inputsRef.current[finalIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+    };
+    const handleFocus = (i) => {
+        var _a, _b;
+        if (activeIndex !== -1) {
+            setActiveIndex(i);
+            return;
+        }
+        const firstEmptyIndex = values.indexOf('');
+        if (firstEmptyIndex !== -1) {
+            setActiveIndex(firstEmptyIndex);
+            (_a = inputsRef.current[firstEmptyIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        else {
+            setActiveIndex(length - 1);
+            (_b = inputsRef.current[length - 1]) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    useEffect(() => {
+        var _a;
+        if (!isError) {
+            setValues(Array(length).fill(''));
+            setActiveIndex(0);
+            (_a = inputsRef.current[0]) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [isError]);
+    return (jsx(OtpContainer, { showBorder: !isSuccess, children: jsxs(OTPGroup, { isError: isError, isSuccess: isSuccess, isLoading: isLoading, children: [values.slice(0, 6).map((value, idx) => {
+                    const index = idx;
+                    return (jsxs(OTPSlotWrapper, { isActive: canEdit && activeIndex === index, children: [jsx(OTPHiddenInput, { ref: (el) => {
+                                    inputsRef.current[index] = el;
+                                }, value: "", inputMode: "numeric", onBlur: () => setActiveIndex(-1), autoComplete: "one-time-code", autoFocus: index === 0, onFocus: () => handleFocus(index), onPaste: handlePaste, onKeyDown: (e) => {
+                                    if (!canEdit)
+                                        return;
+                                    if (e.key === 'Backspace') {
+                                        e.preventDefault();
+                                        handleBackspace(index);
+                                    }
+                                }, onChange: (e) => handleInput(index, e.target.value) }), value && jsx(OTPNumberValue, { "$hide": isSuccess, children: value }), !value && activeIndex === index && jsx(FakeCaret, {})] }, index));
+                }), isSuccess && (jsx(SuccessTickWrapper, { children: jsx(TickIcon, { width: '100%', height: '100%' }) }))] }) }));
+}
+
+const Body$1 = styled.p `
+  color: var(--ck-body-color);
+  text-align: center;
+  margin-bottom: 16px;
+`;
+const ResultContainer$1 = styled.div `
+  margin-top: 16px;
+  height: 24px;
+  text-align: center;
+`;
+const FooterButtonText$1 = styled.button `
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--ck-body-color-muted);
+  transition: color 0.3s;
+
+  &:disabled {
+    color: var(--ck-body-color-muted) !important;
+    cursor: not-allowed;
+  }
+`;
+const FooterTextButton$1 = styled.p `
+  color: var(--ck-body-color-muted);
+  text-align: center;
+  margin-top: 16px;
+  &:hover {
+    ${FooterButtonText$1} {
+      color: var(--ck-body-color);
+    }
+  }
+`;
+
+const RESEND_COOLDOWN_MS$1 = 10000;
+const SUCCESS_REDIRECT_DELAY_MS$1 = 2000;
+const ERROR_DISPLAY_DURATION_MS$1 = 2000;
+const EmailOTP = () => {
+    const { emailInput: email, previousRoute, setRoute, setEmailInput } = useOpenfort();
+    const { isLoading, requestEmailOtp, signInEmailOtp } = useEmailOtpAuth({
+        recoverWalletAutomatically: false,
+    });
+    const onBack = useMemo(() => {
+        if ((previousRoute === null || previousRoute === void 0 ? void 0 : previousRoute.route) === routes.EMAIL_VERIFICATION)
+            return routes.PROVIDERS;
+        return 'back';
+    }, [previousRoute]);
+    const [canSendOtp, setCanSendOtp] = useState(true);
+    const [status, setStatus] = useState('idle');
+    // Single ref to track if initial OTP request has been made
+    const hasRequestedInitialOtpRef = useRef(false);
+    // Memoize the OTP request function to prevent unnecessary recreations
+    const sendOtpRequest = useCallback(async () => {
+        const { error } = await requestEmailOtp({ email });
+        if (error) {
+            logger.error('Error requesting email OTP:', error);
+            setStatus('error');
+        }
+        else {
+            setStatus('idle');
+        }
+    }, [email, requestEmailOtp]);
+    // Initial OTP request on mount
+    useEffect(() => {
+        if (hasRequestedInitialOtpRef.current)
+            return;
+        hasRequestedInitialOtpRef.current = true;
+        sendOtpRequest();
+    }, [sendOtpRequest]);
+    // Handle OTP completion
+    const handleComplete = useCallback(async (otp) => {
+        logger.log('OTP entered:', otp);
+        setStatus('loading');
+        const { error } = await signInEmailOtp({ email, otp });
+        if (error) {
+            logger.error('Error logging in with email OTP:', error);
+            setStatus('error');
+        }
+        else {
+            setStatus('success');
+        }
+    }, [email, signInEmailOtp]);
+    // Handle status changes and side effects
+    useEffect(() => {
+        let timeoutId;
+        switch (status) {
+            case 'send-otp':
+                setStatus('sending-otp');
+                sendOtpRequest();
+                break;
+            case 'success':
+                timeoutId = setTimeout(() => {
+                    setEmailInput('');
+                    setRoute(routes.LOAD_WALLETS);
+                }, SUCCESS_REDIRECT_DELAY_MS$1);
+                break;
+            case 'error':
+                timeoutId = setTimeout(() => {
+                    setStatus('idle');
+                }, ERROR_DISPLAY_DURATION_MS$1);
+                break;
+        }
+        return () => {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+        };
+    }, [status, sendOtpRequest, setEmailInput, setRoute]);
+    // Handle resend cooldown
+    useEffect(() => {
+        if (canSendOtp)
+            return;
+        const timerId = setTimeout(() => {
+            setCanSendOtp(true);
+        }, RESEND_COOLDOWN_MS$1);
+        return () => clearTimeout(timerId);
+    }, [canSendOtp]);
+    // Memoize button text to avoid recalculation
+    const sendButtonText = useMemo(() => {
+        if (!canSendOtp)
+            return 'Code Sent!';
+        if (status === 'sending-otp')
+            return 'Sending...';
+        return 'Resend Code';
+    }, [canSendOtp, status]);
+    const handleResendClick = useCallback(() => {
+        setStatus('send-otp');
+        setCanSendOtp(false);
+    }, []);
+    const isResendDisabled = !canSendOtp || status === 'sending-otp' || status === 'send-otp';
+    return (jsxs(PageContent, { onBack: onBack, children: [jsx(ModalHeading, { children: "Enter your code" }), jsx(FloatingGraphic, { height: "100px", marginTop: "8px", marginBottom: "10px", logoCenter: {
+                    logo: jsx(EmailIcon, {}),
+                } }), jsxs(ModalBody, { children: [jsxs(Body$1, { children: ["Please check ", jsx("b", { children: email }), " for an email from openfort.io and enter your code below."] }), jsx(OtpInputStandalone, { onComplete: handleComplete, isLoading: status === 'loading' || isLoading, isError: status === 'error', isSuccess: status === 'success' }), jsxs(ResultContainer$1, { children: [status === 'success' && jsx(ModalBody, { "$valid": true, children: "Code verified successfully!" }), status === 'error' && jsx(ModalBody, { "$error": true, children: "Invalid code. Please try again." })] }), jsxs(FooterTextButton$1, { children: ["Didn't receive the code?", ' ', jsx(FooterButtonText$1, { type: "button", onClick: handleResendClick, disabled: isResendDisabled, children: sendButtonText })] })] }), jsx(PoweredByFooter, {})] }));
+};
+
+const EmailVerification = () => {
+    const { setRoute, emailInput, setEmailInput } = useOpenfort();
+    const [loading, setLoading] = useState(true);
+    const [verificationResponse, setVerificationResponse] = useState(null);
+    const isVerifying = useRef(false);
+    useEffect(() => {
+        if (isVerifying.current)
+            return;
+        isVerifying.current = true;
+        const url = new URL(window.location.href);
+        if (emailInput) {
+            // Not callback flow
+            setLoading(false);
+            return;
+        }
+        // Verify email flow
+        const email = url.searchParams.get('email');
+        const removeParams = () => {
+            ['state', 'openfortEmailVerificationUI', 'email', 'openfortAuthProvider'].forEach((key) => {
+                url.searchParams.delete(key);
+            });
+            window.history.replaceState({}, document.title, url.toString());
+        };
+        logger.log('Email verification', email);
+        if (!email) {
+            setRoute(routes.EMAIL_LOGIN);
+            return;
+        }
+        try {
+            // ASSUMING IT WORKS
+            // TODO: TMP FIX
+            setEmailInput(email);
+            setVerificationResponse({
+                success: true,
+            });
+        }
+        catch (e) {
+            setVerificationResponse({
+                success: false,
+                error: 'There was an error verifying your email. Please try again.',
+            });
+            logger.log('Error verifying email', e);
+        }
+        finally {
+            removeParams();
+            setLoading(false);
+        }
+    }, []);
+    if (loading) {
+        return (jsx(PageContent, { children: jsx(Loader, { header: "Checking if account is verified" }) }));
+    }
+    return (jsxs(PageContent, { children: [jsx(FloatingGraphic, { height: "190px", logoCenter: {
+                    logo: jsx(EmailIcon, {}),
+                }, logoTopLeft: {
+                    logo: jsx(EmailIcon, {}),
+                }, logoBottomRight: {
+                    logo: jsx(EmailIcon, {}),
+                }, logoTopRight: {
+                    logo: jsx(EmailIcon, {}),
+                }, logoBottomLeft: {
+                    logo: jsx(EmailIcon, {}),
+                } }), jsx(ModalContent, { children: verificationResponse ? (jsxs(Fragment, { children: [jsx(ModalH1, { "$small": true, children: verificationResponse.success ? 'Email verified' : 'Email verification failed' }), jsxs(ModalBody, { children: [verificationResponse.error ? verificationResponse.error : 'Your email has been verified.', jsx(Button, { onClick: () => {
+                                        setRoute(routes.EMAIL_LOGIN);
+                                    }, style: { marginTop: 12 }, children: "Continue" })] })] })) : (jsxs(Fragment, { children: [jsx(ModalH1, { "$small": true, children: "Email sent" }), jsxs(ModalBody, { style: { height: 40 }, children: ["Please check your email.", jsx("br", {}), emailInput] }), jsx(TextLinkButton, { style: { textDecoration: 'underline' }, onClick: () => {
+                                setRoute(routes.EMAIL_LOGIN);
+                            }, children: "Go back to login" })] })) })] }));
+};
+
+// TODO: Localize
+const ExportKey = () => {
+    const { exportPrivateKey } = useWallets();
+    const [exportedKey, setExportedKey] = useState(null);
+    const [exportError, setExportError] = useState(null);
+    const [showExportedKey, setShowExportedKey] = useState(false);
     useEffect(() => {
         const asyncExportKey = async () => {
             try {
@@ -13955,42 +14501,41 @@ const ResetPassword = () => {
     const fixedUrl = window.location.href.replace('?state=', '&state='); // redirectUrl is not working with query params
     const url = new URL(fixedUrl);
     const [password, setPassword] = React.useState('');
-    const { setRoute, triggerResize } = useOpenfort();
-    const { client, updateUser } = useOpenfortCore();
-    const [loading, setLoading] = React.useState(false);
+    // const { setRoute, triggerResize } = useOpenfort()
+    // const { client, updateUser } = useOpenfortCore()
+    const [loading, _setLoading] = React.useState(false);
     const email = url.searchParams.get('email');
+    // OTP_TODO: Reset password
     const handleSubmit = async () => {
-        setLoading(true);
-        const state = url.searchParams.get('state');
-        if (!email || !state) {
-            logger.log('No email or state found');
-            setLoading(false);
-            return;
-        }
-        try {
-            await client.auth.resetPassword({
-                password: password,
-                email,
-                state,
-            });
-            await client.auth.logInWithEmailPassword({
-                email,
-                password,
-            });
-            const user = await updateUser();
-            if (!user)
-                throw new Error('No user found');
-            ['openfortForgotPasswordUI', 'state', 'email'].forEach((param) => {
-                url.searchParams.delete(param);
-            });
-            window.history.replaceState({}, document.title, url.toString());
-            setRoute(routes.LOAD_WALLETS);
-        }
-        catch (e) {
-            logger.log('Reset password error', e);
-            setLoading(false);
-            triggerResize();
-        }
+        // setLoading(true)
+        // const state = url.searchParams.get('state')
+        // if (!email || !state) {
+        //   logger.log('No email or state found')
+        //   setLoading(false)
+        //   return
+        // }
+        // try {
+        //   await client.auth.resetPassword({
+        //     password: password,
+        //     email,
+        //     state,
+        //   })
+        //   await client.auth.logInWithEmailPassword({
+        //     email,
+        //     password,
+        //   })
+        //   const user = await updateUser()
+        //   if (!user) throw new Error('No user found')
+        //   ;['openfortForgotPasswordUI', 'state', 'email'].forEach((param) => {
+        //     url.searchParams.delete(param)
+        //   })
+        //   window.history.replaceState({}, document.title, url.toString())
+        //   setRoute(routes.LOAD_WALLETS)
+        // } catch (e) {
+        //   logger.log('Reset password error', e)
+        //   setLoading(false)
+        //   triggerResize()
+        // }
     };
     return (jsx(PageContent, { children: jsxs("form", { onSubmit: (e) => {
                 e.preventDefault();
@@ -14028,27 +14573,19 @@ const textVariants = {
     },
 };
 const LinkEmail = () => {
-    const [password, setPassword] = React.useState('');
+    // const [password, setPassword] = React.useState('')
     const { setRoute, triggerResize, emailInput: email, setEmailInput: setEmail } = useOpenfort();
     const { client, updateUser } = useOpenfortCore();
     const [loginLoading, setLoginLoading] = React.useState(false);
     const [loginError, setLoginError] = React.useState(false);
+    const { linkEmail } = useEmailAuth();
     const handleSubmit = async () => {
         setLoginLoading(true);
         await client.validateAndRefreshToken();
-        const authToken = await client.getAccessToken();
-        if (!authToken) {
-            logger.log('No token found');
-            setLoginLoading(false);
-            setLoginError('No token found.');
-            triggerResize();
-            return;
-        }
         try {
-            await client.auth.linkEmailPassword({
+            await linkEmail({
                 email,
-                password,
-                authToken,
+                // emailVerificationRedirectTo: window.location.origin,
             });
             await updateUser();
             setEmail('');
@@ -14069,27 +14606,221 @@ const LinkEmail = () => {
     return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Link your email" }), jsxs("form", { onSubmit: (e) => {
                     e.preventDefault();
                     handleSubmit();
-                }, children: [jsx(Input, { style: { marginTop: 0 }, value: email, onChange: (e) => setEmail(e.target.value), type: "email", placeholder: "Enter your email", disabled: loginLoading }), jsx(Input, { value: password, onChange: (e) => setPassword(e.target.value), type: "password", placeholder: "Enter your password", disabled: loginLoading }), loginError && (jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: loginError }) })), jsx(Button, { onClick: handleSubmit, disabled: loginLoading, waiting: loginLoading, children: jsx(AnimatePresence, { initial: false, children: loginLoading ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Linking email..." }, "connectedText")) : (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Link email" }, "connectedText")) }) })] })] }));
+                }, children: [jsx(Input, { style: { marginTop: 0 }, value: email, onChange: (e) => setEmail(e.target.value), type: "email", placeholder: "Enter your email", disabled: loginLoading }), loginError && (jsx(ModalBody, { style: { height: 24, marginTop: 12 }, "$error": true, children: jsx(FitText, { children: loginError }) })), jsx(Button, { onClick: handleSubmit, disabled: loginLoading, waiting: loginLoading, children: jsx(AnimatePresence, { initial: false, children: loginLoading ? (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Linking email..." }, "connectedText")) : (jsx(TextContainer, { initial: 'initial', animate: 'animate', exit: 'exit', variants: textVariants, children: "Link email" }, "connectedText")) }) })] })] }));
+};
+
+const getProviderName = (provider) => {
+    switch (provider) {
+        case 'wallet':
+        case 'siwe':
+            return 'Wallet';
+        case 'email':
+        case 'credential':
+            return 'Email';
+        default:
+            return provider.charAt(0).toUpperCase() + provider.slice(1);
+    }
+};
+
+const ProviderIconWrapper$2 = styled.div `
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const LinkedProviderButtonContainer = styled.div `
+  ${ButtonContainer} {
+    font-weight: var(--ck-primary-button-font-weight, 500);
+  }
+
+  &:first-of-type {
+    ${ButtonContainer}, ${ProviderInputInner} {
+      margin-top: 0;
+    }
+  }
+
+  ${ButtonContainerInner} {
+    padding: 0 20px;
+  }
+
+  ${InnerContainer} {
+    width: 100%;
+    max-width: 100%;
+  }
+`;
+const LinkedProviderButtonWrapper = styled.div `
+  display: flex;
+  align-items: center;
+  gap: 12px;
+`;
+const LinkedProvidersGroupWrapper = styled.div `
+`;
+const LinkedProviderText = styled.div `
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--ck-body-color-muted);
+  text-align: start;
+  max-width: 210px;
+`;
+
+const WalletDisplay = ({ walletAddress }) => {
+    var _a, _b;
+    const ensFallbackConfig = useEnsFallbackConfig();
+    const { data: ensName } = useEnsName({
+        chainId: 1,
+        address: walletAddress,
+        config: ensFallbackConfig,
+    });
+    const context = useOpenfort();
+    const themeContext = useThemeContext();
+    const separator = ['web95', 'rounded', 'minimal'].includes((_b = (_a = themeContext.theme) !== null && _a !== void 0 ? _a : context.uiConfig.theme) !== null && _b !== void 0 ? _b : '')
+        ? '....'
+        : undefined;
+    return ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(walletAddress, separator);
+};
+const ProviderHeader = ({ provider }) => {
+    var _a;
+    const { user } = useUser();
+    switch (provider.provider) {
+        case 'wallet':
+        case 'siwe':
+            return (jsx(LinkedProviderText, { children: jsx(WalletDisplay, { walletAddress: provider.accountId }) }));
+        case 'phone':
+            return jsx(LinkedProviderText, { children: provider.accountId });
+        default:
+            return (jsx(LinkedProviderText, { style: { textTransform: (user === null || user === void 0 ? void 0 : user.email) ? 'none' : 'capitalize' }, children: (_a = user === null || user === void 0 ? void 0 : user.email) !== null && _a !== void 0 ? _a : provider.provider }));
+    }
+};
+
+const WalletIconWrapper = ({ provider }) => {
+    var _a;
+    const wallets = useWagmiWallets();
+    const wallet = useMemo(() => {
+        return wallets.find((w) => { var _a; return ((_a = w.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === provider.walletClientType; });
+    }, [provider]);
+    if (provider.walletClientType === 'walletconnect')
+        return jsx(Logos.WalletConnect, {});
+    if (wallet)
+        return jsx(Fragment, { children: (_a = wallet.iconConnector) !== null && _a !== void 0 ? _a : wallet.icon });
+    return jsx(WalletIcon$1, {});
+};
+const ProviderIcon = ({ provider }) => {
+    switch (provider.provider) {
+        case 'email':
+        case 'credential':
+            return jsx(EmailIcon, {});
+        // OTP_TODO: Wallet icon
+        case 'wallet':
+        case 'siwe':
+            return jsx(WalletIconWrapper, { provider: provider });
+        case 'phone':
+            return jsx(PhoneIcon, {});
+        case 'google':
+        case 'twitter':
+        case 'facebook':
+            return providersLogos[provider.provider];
+        default:
+            return jsx(FitText, { children: provider.provider.substring(0, 4).toUpperCase() });
+    }
+};
+
+const ProviderIconContainer$1 = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ProviderIconWrapper$1 = styled.div `
+  width: 54px;
+  height: 54px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ck-body-background-secondary);
+  border-radius: 28px;
+`;
+const ProviderIconInner$1 = styled.div `
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const SiweContent = ({ provider }) => {
+    var _a, _b;
+    const address = provider.accountId;
+    const ensFallbackConfig = useEnsFallbackConfig();
+    const { data: ensName } = useEnsName({
+        chainId: 1,
+        address,
+        config: ensFallbackConfig,
+    });
+    const context = useOpenfort();
+    const themeContext = useThemeContext();
+    const separator = ['web95', 'rounded', 'minimal'].includes((_b = (_a = themeContext.theme) !== null && _a !== void 0 ? _a : context.uiConfig.theme) !== null && _b !== void 0 ? _b : '')
+        ? '....'
+        : undefined;
+    return (jsxs(Fragment, { children: [jsx(ModalH1, { children: jsx(CopyText, { value: address, children: ensName !== null && ensName !== void 0 ? ensName : truncateEthAddress(address, separator) }) }), jsxs("div", { style: { marginTop: '16px' }, children: ["Linked via Sign-In with Ethereum (SIWE)", jsx(Button, { onClick: () => context.setRoute({ route: 'removeLinkedProvider', provider }), children: "Remove this wallet" })] })] }));
+};
+const OAuthContent = ({ provider }) => {
+    const { user } = useUser();
+    const { setRoute } = useOpenfort();
+    return (jsxs(Fragment, { children: [jsx(ModalH1, { children: provider.provider.charAt(0).toUpperCase() + provider.provider.slice(1) }), jsxs("div", { style: { marginTop: '16px' }, children: [user === null || user === void 0 ? void 0 : user.email, jsxs(Button, { onClick: () => setRoute({ route: 'removeLinkedProvider', provider }), children: ["Remove ", provider.provider] })] })] }));
+};
+const LinkedProvider$1 = () => {
+    const { route } = useOpenfort();
+    const provider = useMemo(() => {
+        if (route.route === 'linkedProvider') {
+            return route.provider;
+        }
+        throw new Error('No provider found in route');
+    }, []);
+    const getProviderDetails = (provider) => {
+        switch (provider.provider) {
+            case 'siwe':
+                return jsx(SiweContent, { provider: provider });
+            case 'google':
+            case 'facebook':
+            case 'twitter':
+                return jsx(OAuthContent, { provider: provider });
+            default:
+                return (jsxs("div", { style: { marginTop: '16px', display: 'flex', alignItems: 'center', gap: '8px', flexDirection: 'column' }, children: [jsxs("div", { children: ["Authentication method: ", jsx("b", { children: getProviderName(provider.provider) })] }), jsx(FitText, { children: jsx(ProviderHeader, { provider: provider }) })] }));
+        }
+    };
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: getProviderName(provider.provider) }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ProviderIconContainer$1, { children: jsx(ProviderIconWrapper$1, { children: jsx(ProviderIconInner$1, { children: jsx(ProviderIcon, { provider: provider }) }) }) }), jsx(ModalBody, { children: getProviderDetails(provider) })] })] }));
 };
 
 function useProviders() {
-    const { user } = useOpenfortCore();
+    const { user, linkedAccounts } = useOpenfortCore();
     const { uiConfig: options, thirdPartyAuth, setOpen } = useOpenfort();
     const allProviders = (options === null || options === void 0 ? void 0 : options.authProviders) || [];
     const providers = allProviders.filter((p) => p !== UIAuthProvider.GUEST) || [];
-    const linkedProviders = user ? providers.filter((p) => { var _a; return (_a = user.linkedAccounts) === null || _a === void 0 ? void 0 : _a.find((a) => a.provider === p); }) : [];
+    const linkedProviders = user ? providers.filter((p) => linkedAccounts === null || linkedAccounts === void 0 ? void 0 : linkedAccounts.find((a) => a.provider === p)) : [];
     const availableProviders = user
         ? providers.filter((provider) => {
-            var _a;
             if (provider === UIAuthProvider.WALLET)
                 return true; // Wallet is always available
-            return !((_a = user.linkedAccounts) === null || _a === void 0 ? void 0 : _a.find((a) => a.provider === provider));
+            if (user.email && (provider === UIAuthProvider.EMAIL_PASSWORD || provider === UIAuthProvider.EMAIL_OTP)) {
+                return false; // If user has email, don't show email password or otp
+            }
+            if (provider === UIAuthProvider.EMAIL_PASSWORD)
+                return false; // Disable email password linking for now
+            if (user.phoneNumber && provider === UIAuthProvider.PHONE) {
+                return false; // If user has phone number, don't show phone otp
+            }
+            return !(linkedAccounts === null || linkedAccounts === void 0 ? void 0 : linkedAccounts.find((a) => a.provider === provider));
         })
         : providers;
     useEffect(() => {
         if (thirdPartyAuth) {
             setOpen(false);
-            logger.error(new OpenfortError('When using external third party auth providers, openfort Auth providers are not available. Either remove the `thirdPartyAuth` or authenticate your users using Auth hooks.', OpenfortErrorType.CONFIGURATION_ERROR));
+            logger.error(new OpenfortError('When using external third party auth providers, openfort Auth providers are not available. Either remove the `thirdPartyAuth` or authenticate your users using Auth hooks.', OpenfortReactErrorType.CONFIGURATION_ERROR));
         }
     }, [thirdPartyAuth, setOpen]);
     const maxProviders = (options === null || options === void 0 ? void 0 : options.authProvidersLength) || 4;
@@ -14099,10 +14830,17 @@ function useProviders() {
             return { mainProviders: activeProviders, hasExcessProviders: false, remainingSocialProviders: [] };
         }
         // Separate social and non-social providers
-        const nonSocial = activeProviders.filter((p) => !socialProviders.includes(p));
+        const nonSocial = activeProviders.filter((p, _, array) => {
+            if (p === UIAuthProvider.EMAIL_OTP && array.includes(UIAuthProvider.EMAIL_PASSWORD)) {
+                // If both email otp and email password are present, treat email otp as social to avoid showing both
+                return false;
+            }
+            return !socialProviders.includes(p);
+        });
         const social = activeProviders.filter((p) => socialProviders.includes(p));
         // Allow as many non-socials as possible, then fill the rest with socials
         const remainingSlots = maxProviders - nonSocial.length;
+        const remainingSocialProviders = social.slice(Math.max(0, remainingSlots - 1));
         return {
             mainProviders: [...nonSocial, ...social.slice(0, Math.max(0, remainingSlots - 1))].sort((a, b) => {
                 // sort them in the original order
@@ -14111,7 +14849,7 @@ function useProviders() {
                 return indexA - indexB;
             }),
             hasExcessProviders: social.length > remainingSlots - 1,
-            remainingSocialProviders: social.slice(remainingSlots - 1),
+            remainingSocialProviders,
         };
     }, [user, availableProviders, allProviders, maxProviders]);
     return {
@@ -14124,66 +14862,9 @@ function useProviders() {
     };
 }
 
-const ProviderIconWrapper = styled.div `
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-`;
-const LinkedProviderContainer = styled.div `
-  background-color: var(--ck-body-background-secondary);
-  border: var(--ck-body-divider) 1px solid;
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 12px 16px;
-  border-radius: var(--ck-primary-button-border-radius);
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-const LinkedProvidersGroupWrapper = styled.div `
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-`;
-const LinkedProviderText = styled.div `
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--ck-body-color-muted);
-`;
-
-const WalletIcon$1 = ({ provider }) => {
-    var _a;
-    const wallets = useWagmiWallets();
-    const wallet = useMemo(() => {
-        return wallets.find((w) => { var _a; return ((_a = w.id) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === provider.walletClientType; });
-    }, [provider]);
-    if (provider.walletClientType === 'walletconnect')
-        return jsx(Logos.WalletConnect, {});
-    if (wallet)
-        return jsx(Fragment, { children: (_a = wallet.iconConnector) !== null && _a !== void 0 ? _a : wallet.icon });
-    return jsx(WalletIcon$2, {});
-};
-const ProviderIcon = ({ provider }) => {
-    switch (provider.provider) {
-        case 'email':
-            return jsx(EmailIcon, {});
-        case 'wallet':
-            return jsx(WalletIcon$1, { provider: provider });
-        case 'google':
-        case 'twitter':
-        case 'facebook':
-            return providersLogos[provider.provider];
-        default:
-            return jsx(FitText, { children: provider.provider.substring(0, 4).toUpperCase() });
-    }
-};
 const LinkedProvider = ({ provider }) => {
-    return (jsxs(LinkedProviderContainer, { children: [jsx(ProviderIconWrapper, { children: jsx(ProviderIcon, { provider: provider }) }), jsx(LinkedProviderText, { children: provider.address || provider.email || 'unknown' })] }));
+    const { setRoute } = useOpenfort();
+    return (jsx(LinkedProviderButtonContainer, { children: jsx(Button, { onClick: () => setRoute({ route: routes.LINKED_PROVIDER, provider }), fitText: false, children: jsxs(LinkedProviderButtonWrapper, { children: [jsx(ProviderIconWrapper$2, { children: jsx(ProviderIcon, { provider: provider }) }), jsx(ProviderHeader, { provider: provider })] }) }) }));
 };
 const AddLinkedProviderButton = () => {
     const { setRoute } = useOpenfort();
@@ -14191,7 +14872,12 @@ const AddLinkedProviderButton = () => {
     return (jsx(Button, { disabled: unlinkedProviders.length === 0, onClick: () => setRoute(routes.PROVIDERS), children: "+" }));
 };
 const LinkedProvidersGroup = () => {
-    const { user, isLoading } = useOpenfortCore();
+    const { linkedAccounts, user, isLoading } = useOpenfortCore();
+    const { triggerResize } = useOpenfort();
+    useEffect(() => {
+        if (!isLoading)
+            triggerResize();
+    }, [isLoading]);
     // TODO: Show loading
     if (isLoading) {
         return (jsx("div", { children: jsx(AddLinkedProviderButton, {}) }));
@@ -14200,13 +14886,13 @@ const LinkedProvidersGroup = () => {
     if (!user) {
         return (jsx("div", { children: jsx(AddLinkedProviderButton, {}) }));
     }
-    if (user.linkedAccounts.length === 0) {
-        return (jsx("div", { children: jsx(AddLinkedProviderButton, {}) }));
-    }
-    return (jsxs(Fragment, { children: [jsx(LinkedProvidersGroupWrapper, { children: user.linkedAccounts.map((provider) => (jsx(LinkedProvider, { provider: provider }, `${provider.provider}-${provider.address || provider.email || 'unknown'}`))) }), jsx(AddLinkedProviderButton, {})] }));
+    return (jsxs(Fragment, { children: [jsxs(LinkedProvidersGroupWrapper, { children: [linkedAccounts.length === 0 && !user.email && !user.phoneNumber && (jsxs(ModalContent, { children: ["You are logged in as a guest.", jsx(ModalBody, { children: "Add authentication methods to avoid losing access to your account." })] })), !linkedAccounts.find((a) => a.provider === 'credential') && user.email && (jsx(LinkedProvider, { provider: { provider: 'credential', accountId: user.email } }, `credential-${user.email}`)), linkedAccounts.map((provider) => (jsx(LinkedProvider, { provider: provider }, `${provider.provider}-${provider.accountId}`))), user.phoneNumber && (jsx(LinkedProvider, { provider: {
+                            provider: 'phone',
+                            accountId: user.phoneNumber,
+                        } }, `phone-${user.phoneNumber}`))] }), jsx(AddLinkedProviderButton, {})] }));
 };
 const LinkedProviders = () => {
-    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Linked accounts" }), jsx(ModalContent, { children: jsx(ModalBody, { children: "Configure the linked accounts of your profile." }) }), jsx(LinkedProvidersGroup, {})] }));
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Authentication methods" }), jsx(LinkedProvidersGroup, {})] }));
 };
 
 const Loading = () => {
@@ -14382,76 +15068,386 @@ const MobileConnectors = () => {
         context.setRoute(routes.CONNECT_WITH_MOBILE);
         context.setConnector({ id: walletId });
     };
-    return (jsx(PageContent, { width: 312, onBack: routes.PROVIDERS, children: jsxs(Container, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { children: [walletsIdsToDisplay
-                                    .sort(
-                                // sort by name
-                                (a, b) => {
-                                    var _a, _b, _c, _d;
-                                    const walletA = walletConfigs[a];
-                                    const walletB = walletConfigs[b];
-                                    const nameA = (_b = (_a = walletA.name) !== null && _a !== void 0 ? _a : walletA.shortName) !== null && _b !== void 0 ? _b : a;
-                                    const nameB = (_d = (_c = walletB.name) !== null && _c !== void 0 ? _c : walletB.shortName) !== null && _d !== void 0 ? _d : b;
-                                    return nameA.localeCompare(nameB);
-                                })
-                                    .filter((walletId) => !(walletId === 'coinbaseWallet' || walletId === 'com.coinbase.wallet'))
-                                    .map((walletId, i) => {
-                                    const wallet = walletConfigs[walletId];
-                                    const { name, shortName, iconConnector, icon } = wallet;
-                                    return (jsxs(WalletItem, { onClick: () => connectWallet(walletId), style: {
-                                            animationDelay: `${i * 50}ms`,
-                                        }, children: [jsx(WalletIcon, { "$outline": true, children: iconConnector !== null && iconConnector !== void 0 ? iconConnector : icon }), jsx(WalletLabel, { children: shortName !== null && shortName !== void 0 ? shortName : name })] }, walletId));
-                                }), jsxs(WalletItem, { onClick: openW3M, "$waiting": isOpenW3M, children: [jsx(WalletIcon, { style: { background: 'var(--ck-body-background-secondary)' }, children: isOpenW3M ? (jsx("div", { style: {
-                                                    position: 'absolute',
-                                                    inset: 0,
-                                                    display: 'flex',
-                                                    alignItems: 'center',
-                                                    justifyContent: 'center',
-                                                }, children: jsx("div", { style: {
-                                                        width: '50%',
-                                                    }, children: jsx(Spinner$3, {}) }) })) : (MoreIcon) }), jsx(WalletLabel, { children: locales.more })] })] }) }) }), context.uiConfig.walletConnectCTA !== 'modal' && (jsx("div", { style: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        gap: 14,
-                        paddingTop: 8,
-                    }, children: jsx(CopyButton, { value: "", children: locales.copyToClipboard }) }))] }) }));
+    return (jsx(PageContent, { width: 312, onBack: routes.PROVIDERS, children: jsxs(Container, { children: [jsx(ModalContent, { style: { paddingBottom: 0 }, children: jsx(ScrollArea, { height: 340, children: jsxs(WalletList, { children: [walletsIdsToDisplay
+                                    .sort(
+                                // sort by name
+                                (a, b) => {
+                                    var _a, _b, _c, _d;
+                                    const walletA = walletConfigs[a];
+                                    const walletB = walletConfigs[b];
+                                    const nameA = (_b = (_a = walletA.name) !== null && _a !== void 0 ? _a : walletA.shortName) !== null && _b !== void 0 ? _b : a;
+                                    const nameB = (_d = (_c = walletB.name) !== null && _c !== void 0 ? _c : walletB.shortName) !== null && _d !== void 0 ? _d : b;
+                                    return nameA.localeCompare(nameB);
+                                })
+                                    .filter((walletId) => !(walletId === 'coinbaseWallet' || walletId === 'com.coinbase.wallet'))
+                                    .map((walletId, i) => {
+                                    const wallet = walletConfigs[walletId];
+                                    const { name, shortName, iconConnector, icon } = wallet;
+                                    return (jsxs(WalletItem, { onClick: () => connectWallet(walletId), style: {
+                                            animationDelay: `${i * 50}ms`,
+                                        }, children: [jsx(WalletIcon, { "$outline": true, children: iconConnector !== null && iconConnector !== void 0 ? iconConnector : icon }), jsx(WalletLabel, { children: shortName !== null && shortName !== void 0 ? shortName : name })] }, walletId));
+                                }), jsxs(WalletItem, { onClick: openW3M, "$waiting": isOpenW3M, children: [jsx(WalletIcon, { style: { background: 'var(--ck-body-background-secondary)' }, children: isOpenW3M ? (jsx("div", { style: {
+                                                    position: 'absolute',
+                                                    inset: 0,
+                                                    display: 'flex',
+                                                    alignItems: 'center',
+                                                    justifyContent: 'center',
+                                                }, children: jsx("div", { style: {
+                                                        width: '50%',
+                                                    }, children: jsx(Spinner$3, {}) }) })) : (MoreIcon) }), jsx(WalletLabel, { children: locales.more })] })] }) }) }), context.uiConfig.walletConnectCTA !== 'modal' && (jsx("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        gap: 14,
+                        paddingTop: 8,
+                    }, children: jsx(CopyButton, { value: "", children: locales.copyToClipboard }) }))] }) }));
+};
+
+const ButtonsContainer = styled.div `
+  display: flex;
+  gap: 12px;
+  margin-top: 12px;
+`;
+
+const NoAssetsAvailable = () => {
+    const { setRoute } = useOpenfort();
+    const chainId = useChainId();
+    const chains = useChains();
+    const chain = chains.find((c) => c.id === chainId);
+    const showBuyOption = chain && !chain.testnet;
+    return (jsxs(PageContent, { children: [jsx(FloatingGraphic, { height: "190px", logoCenter: {
+                    logo: jsx(BuyIcon, {}),
+                }, logoTopLeft: {
+                    logo: jsx(BuyIcon, {}),
+                }, logoBottomRight: {
+                    logo: jsx(BuyIcon, {}),
+                }, logoTopRight: {
+                    logo: jsx(DollarIcon, {}),
+                }, logoBottomLeft: {
+                    logo: jsx(DollarIcon, {}),
+                } }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ModalH1, { "$small": true, children: "No assets available" }), jsxs(ModalBody, { children: [jsx("div", { style: { paddingRight: 12, paddingLeft: 12 }, children: "You currently have no assets available in your wallet." }), jsxs(ButtonsContainer, { children: [jsx(Button, { onClick: () => {
+                                            setRoute(routes.RECEIVE);
+                                        }, icon: jsx(ReceiveIcon, {}), children: "Get assets" }), showBuyOption && (jsx(Button, { onClick: () => {
+                                            setRoute(routes.BUY);
+                                        }, icon: jsx(BuyIcon, {}), children: "Buy assets" }))] })] })] })] }));
+};
+
+const Introduction = () => {
+    var _a;
+    const context = useOpenfort();
+    const locales = useLocales({});
+    const ctaUrl = (_a = context.uiConfig.walletOnboardingUrl) !== null && _a !== void 0 ? _a : locales.onboardingScreen_ctaUrl;
+    return (jsxs(PageContent, { children: [jsxs(Graphic, { children: [jsxs(LogoGroup, { children: [jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Coinbase, { background: true }) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.MetaMask, { background: true }) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Trust, {}) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Argent, {}) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.ImToken, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), jsx(ModalBody, { children: locales.onboardingScreen_p })] }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
+};
+
+const usePhoneOtpAuth = (hookOptions = {}) => {
+    const { client, updateUser } = useOpenfortCore();
+    const [status, setStatus] = useState({
+        status: 'idle',
+    });
+    const reset = useCallback(() => {
+        setStatus({
+            status: 'idle',
+        });
+    }, []);
+    const { tryUseWallet } = useConnectToWalletPostAuth();
+    const logInWithPhoneOtp = useCallback(async (options) => {
+        var _a, _b;
+        try {
+            setStatus({
+                status: 'loading',
+            });
+            if (!options.phoneNumber || !options.otp) {
+                const error = new OpenfortError('Phone and OTP are required', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
+            }
+            const result = await client.auth.logInWithPhoneOtp({
+                phoneNumber: options.phoneNumber,
+                otp: options.otp,
+            });
+            const { wallet } = await tryUseWallet({
+                logoutOnError: (_a = options.logoutOnError) !== null && _a !== void 0 ? _a : hookOptions.logoutOnError,
+                recoverWalletAutomatically: (_b = options.recoverWalletAutomatically) !== null && _b !== void 0 ? _b : hookOptions.recoverWalletAutomatically,
+            });
+            setStatus({
+                status: 'success',
+            });
+            const user = result.user;
+            await updateUser();
+            return onSuccess({
+                data: { user, wallet },
+                hookOptions,
+                options,
+            });
+        }
+        catch (e) {
+            const error = new OpenfortError('Failed to login with phone OTP', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+                error: e,
+            });
+            setStatus({
+                status: 'error',
+                error: error,
+            });
+            return onError({
+                hookOptions,
+                options,
+                error: error,
+            });
+        }
+    }, [client, setStatus, updateUser, hookOptions]);
+    const requestPhoneOtp = useCallback(async (options) => {
+        try {
+            setStatus({
+                status: 'requesting',
+            });
+            if (!options.phoneNumber) {
+                const error = new OpenfortError('Phone number is required', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
+            }
+            await client.auth.requestPhoneOtp({
+                phoneNumber: options.phoneNumber,
+            });
+            setStatus({
+                status: 'idle',
+            });
+            return onSuccess({
+                data: {},
+                hookOptions,
+                options,
+            });
+        }
+        catch (e) {
+            const error = new OpenfortError('Failed to request phone OTP', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+                error: e,
+            });
+            setStatus({
+                status: 'error',
+                error: error,
+            });
+            return onError({
+                hookOptions,
+                options,
+                error: error,
+            });
+        }
+    }, [client, setStatus, updateUser, hookOptions]);
+    const linkPhoneOtp = useCallback(async (options) => {
+        try {
+            setStatus({
+                status: 'loading',
+            });
+            if (!options.phoneNumber || !options.otp) {
+                const error = new OpenfortError('Phone and OTP are required', OpenfortReactErrorType.VALIDATION_ERROR);
+                setStatus({
+                    status: 'error',
+                    error,
+                });
+                return onError({
+                    hookOptions,
+                    options,
+                    error,
+                });
+            }
+            const result = await client.auth.linkPhoneOtp({
+                phoneNumber: options.phoneNumber,
+                otp: options.otp,
+            });
+            setStatus({
+                status: 'success',
+            });
+            const user = result.user;
+            await updateUser();
+            return onSuccess({
+                data: { user },
+                hookOptions,
+                options,
+            });
+        }
+        catch (e) {
+            const error = new OpenfortError('Failed to link phone OTP', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+                error: e,
+            });
+            setStatus({
+                status: 'error',
+                error: error,
+            });
+            return onError({
+                hookOptions,
+                options,
+                error: error,
+            });
+        }
+    }, [client, setStatus, updateUser, hookOptions]);
+    return {
+        logInWithPhoneOtp,
+        requestPhoneOtp,
+        linkPhoneOtp,
+        reset,
+        isRequesting: status.status === 'requesting',
+        ...mapStatus(status),
+        isAwaitingInput: status.status === 'awaiting-input',
+    };
 };
 
-const ButtonsContainer = styled.div `
-  display: flex;
-  gap: 12px;
-  margin-top: 12px;
+const Body = styled.p `
+  color: var(--ck-body-color);
+  text-align: center;
+  margin-bottom: 16px;
 `;
+const ResultContainer = styled.div `
+  margin-top: 16px;
+  height: 24px;
+  text-align: center;
+`;
+const FooterButtonText = styled.button `
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 0;
+  color: var(--ck-body-color-muted);
+  transition: color 0.3s;
 
-const NoAssetsAvailable = () => {
-    const { setRoute } = useOpenfort();
-    const chainId = useChainId();
-    const chains = useChains();
-    const chain = chains.find((c) => c.id === chainId);
-    const showBuyOption = chain && !chain.testnet;
-    return (jsxs(PageContent, { children: [jsx(FloatingGraphic, { height: "190px", logoCenter: {
-                    logo: jsx(BuyIcon, {}),
-                }, logoTopLeft: {
-                    logo: jsx(BuyIcon, {}),
-                }, logoBottomRight: {
-                    logo: jsx(BuyIcon, {}),
-                }, logoTopRight: {
-                    logo: jsx(DollarIcon, {}),
-                }, logoBottomLeft: {
-                    logo: jsx(DollarIcon, {}),
-                } }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ModalH1, { "$small": true, children: "No assets available" }), jsxs(ModalBody, { children: [jsx("div", { style: { paddingRight: 12, paddingLeft: 12 }, children: "You currently have no assets available in your wallet." }), jsxs(ButtonsContainer, { children: [jsx(Button, { onClick: () => {
-                                            setRoute(routes.RECEIVE);
-                                        }, icon: jsx(ReceiveIcon, {}), children: "Get assets" }), showBuyOption && (jsx(Button, { onClick: () => {
-                                            setRoute(routes.BUY);
-                                        }, icon: jsx(BuyIcon, {}), children: "Buy assets" }))] })] })] })] }));
-};
+  &:disabled {
+    color: var(--ck-body-color-muted) !important;
+    cursor: not-allowed;
+  }
+`;
+const FooterTextButton = styled.p `
+  color: var(--ck-body-color-muted);
+  text-align: center;
+  margin-top: 16px;
+  &:hover {
+    ${FooterButtonText} {
+      color: var(--ck-body-color);
+    }
+  }
+`;
 
-const Introduction = () => {
-    var _a;
-    const context = useOpenfort();
-    const locales = useLocales({});
-    const ctaUrl = (_a = context.uiConfig.walletOnboardingUrl) !== null && _a !== void 0 ? _a : locales.onboardingScreen_ctaUrl;
-    return (jsxs(PageContent, { children: [jsxs(Graphic, { children: [jsxs(LogoGroup, { children: [jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Coinbase, { background: true }) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.MetaMask, { background: true }) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Trust, {}) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.Argent, {}) }) }) }) }) }) }), jsx(Logo$1, { children: jsx(LogoPosition, { children: jsx(LogoInner, { children: jsx(FloatWrapper, { children: jsx(RotateWrapper, { children: jsx(LogoGraphic$1, { children: jsx(Logos.ImToken, {}) }) }) }) }) }) })] }), jsx(GraphicBackground, { children: wave })] }), jsxs(ModalContent, { style: { paddingBottom: 18 }, children: [jsx(ModalH1, { "$small": true, children: locales.onboardingScreen_h1 }), jsx(ModalBody, { children: locales.onboardingScreen_p })] }), jsx(Button, { href: ctaUrl, arrow: true, children: locales.onboardingScreen_ctaText })] }));
+const RESEND_COOLDOWN_MS = 10000;
+const SUCCESS_REDIRECT_DELAY_MS = 2000;
+const ERROR_DISPLAY_DURATION_MS = 2000;
+const PhoneOTP = () => {
+    const { phoneInput: phone, setPhoneInput, setRoute } = useOpenfort();
+    const { isLoading, requestPhoneOtp, logInWithPhoneOtp, linkPhoneOtp } = usePhoneOtpAuth({
+        recoverWalletAutomatically: false,
+    });
+    const { user } = useUser();
+    const [canSendOtp, setCanSendOtp] = useState(true);
+    const [status, setStatus] = useState('idle');
+    const [errorMessage, setErrorMessage] = useState(null);
+    // Single ref to track if initial OTP request has been made
+    const hasRequestedInitialOtpRef = useRef(false);
+    // Memoize the OTP request function to prevent unnecessary recreations
+    const sendOtpRequest = useCallback(async () => {
+        const { error } = await requestPhoneOtp({ phoneNumber: phone });
+        if (error) {
+            logger.error('Error requesting phone OTP:', error);
+            setStatus('error');
+        }
+        else {
+            setStatus('idle');
+        }
+    }, [phone, requestPhoneOtp]);
+    // Initial OTP request on mount
+    useEffect(() => {
+        if (hasRequestedInitialOtpRef.current)
+            return;
+        hasRequestedInitialOtpRef.current = true;
+        sendOtpRequest();
+    }, [sendOtpRequest]);
+    // Handle OTP completion
+    const handleComplete = useCallback(async (otp) => {
+        logger.log('OTP entered:', otp);
+        setStatus('loading');
+        let error = null;
+        if (user) {
+            const { error: linkError } = await linkPhoneOtp({ phoneNumber: phone, otp });
+            error = linkError;
+        }
+        else {
+            const { error: loginError } = await logInWithPhoneOtp({ phoneNumber: phone, otp });
+            error = loginError;
+        }
+        if (error) {
+            logger.error('Error verifying phone OTP:', error);
+            setStatus('error');
+            if (error.message === 'Invalid OTP') {
+                setErrorMessage('Invalid code. Please try again.');
+            }
+            else {
+                setErrorMessage(error.message);
+            }
+        }
+        else {
+            setStatus('success');
+        }
+    }, [phone, logInWithPhoneOtp]);
+    // Handle status changes and side effects
+    useEffect(() => {
+        let timeoutId;
+        switch (status) {
+            case 'send-otp':
+                setStatus('sending-otp');
+                sendOtpRequest();
+                break;
+            case 'success':
+                timeoutId = setTimeout(() => {
+                    setPhoneInput('');
+                    setRoute(routes.LOAD_WALLETS);
+                }, SUCCESS_REDIRECT_DELAY_MS);
+                break;
+            case 'error':
+                timeoutId = setTimeout(() => {
+                    setStatus('idle');
+                }, ERROR_DISPLAY_DURATION_MS);
+                break;
+        }
+        return () => {
+            if (timeoutId)
+                clearTimeout(timeoutId);
+        };
+    }, [status, sendOtpRequest, setPhoneInput, setRoute]);
+    // Handle resend cooldown
+    useEffect(() => {
+        if (canSendOtp)
+            return;
+        const timerId = setTimeout(() => {
+            setCanSendOtp(true);
+        }, RESEND_COOLDOWN_MS);
+        return () => clearTimeout(timerId);
+    }, [canSendOtp]);
+    // Memoize button text to avoid recalculation
+    const sendButtonText = useMemo(() => {
+        if (!canSendOtp)
+            return 'Code Sent!';
+        if (status === 'sending-otp')
+            return 'Sending...';
+        return 'Resend Code';
+    }, [canSendOtp, status]);
+    const handleResendClick = useCallback(() => {
+        setStatus('send-otp');
+        setCanSendOtp(false);
+    }, []);
+    const isResendDisabled = !canSendOtp || status === 'sending-otp' || status === 'send-otp';
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Enter your code" }), jsx(FloatingGraphic, { height: "100px", marginTop: "8px", marginBottom: "10px", logoCenter: {
+                    logo: jsx(PhoneIcon, {}),
+                } }), jsxs(ModalBody, { children: [jsxs(Body, { children: ["Please check ", jsx("b", { children: phone }), " for an SMS and enter your code below."] }), jsx(OtpInputStandalone, { onComplete: handleComplete, isLoading: status === 'loading' || isLoading, isError: status === 'error', isSuccess: status === 'success' }), jsxs(ResultContainer, { children: [status === 'success' && jsx(ModalBody, { "$valid": true, children: "Code verified successfully!" }), status === 'error' && jsx(ModalBody, { "$error": true, children: errorMessage || 'Invalid code. Please try again.' })] }), jsxs(FooterTextButton, { children: ["Didn't receive the code?", ' ', jsx(FooterButtonText, { type: "button", onClick: handleResendClick, disabled: isResendDisabled, children: sendButtonText })] })] }), jsx(PoweredByFooter, {})] }));
 };
 
 const LargeButtonStyle = styled.div `
@@ -14538,12 +15534,12 @@ const Profile = () => {
     }, [shouldDisconnect]);
     return (jsxs(PageContent, { onBack: routes.CONNECTED, children: [jsxs(ModalContent, { children: [jsx(ModalHeading, { children: "Profile" }), jsxs("div", { children: [jsx(LargeButton, { onClick: () => {
                                     setRoute(routes.LINKED_PROVIDERS);
-                                }, icon: jsx(GuestIcon, {}), children: "Linked accounts" }), jsx(LargeButton, { onClick: () => {
+                                }, icon: jsx(GuestIcon, {}), children: "Authentication methods" }), jsx(LargeButton, { onClick: () => {
                                     setRoute(routes.EXPORT_KEY);
                                 }, icon: jsx(KeyIcon, {}), children: "Export key" })] })] }), !isSafeConnector(connector === null || connector === void 0 ? void 0 : connector.id) && (jsx(DisconnectButton, { onClick: () => setShouldDisconnect(true), icon: jsx(DisconnectIcon, {}), children: locales.disconnect }))] }));
 };
 
-const ProviderButton = ({ children, icon, onClick }) => {
+const ProviderButtonBase = ({ children, icon, onClick }) => {
     return (jsx(ProvidersButton, { children: jsxs(Button, { onClick: onClick, children: [jsx(ProviderLabel, { children: children }), jsx(ProviderIcon$1, { children: icon })] }) }));
 };
 const GuestButton = () => {
@@ -14551,22 +15547,57 @@ const GuestButton = () => {
     const handleClick = () => {
         setRoute(routes.CREATE_GUEST_USER);
     };
-    return (jsx(ProviderButton, { onClick: handleClick, icon: jsx(GuestIcon, {}), children: "Guest" }));
+    return (jsx(ProviderButtonBase, { onClick: handleClick, icon: jsx(GuestIcon, {}), children: "Guest" }));
 };
 const WalletButton = () => {
     const { setRoute } = useOpenfort();
     const { user } = useOpenfortCore();
-    return (jsx(ProviderButton, { onClick: () => setRoute({ route: routes.CONNECTORS, connectType: user ? 'link' : 'connect' }), icon: jsx(Logos.OtherWallets, {}), children: "Wallet" }));
+    return (jsx(ProviderButtonBase, { onClick: () => setRoute({ route: routes.CONNECTORS, connectType: user ? 'link' : 'connect' }), icon: jsx(Logos.OtherWallets, {}), children: "Wallet" }));
+};
+const EmailButton = ({ handleSubmit }) => {
+    const { emailInput, setEmailInput } = useOpenfort();
+    const isValidEmail$1 = useMemo(() => {
+        return isValidEmail(emailInput);
+    }, [emailInput]);
+    return (jsx(ProvidersButton, { children: jsx("form", { onSubmit: (e) => {
+                e.preventDefault();
+                if (isValidEmail$1)
+                    handleSubmit();
+            }, noValidate: true, children: jsxs(ProviderInputInner, { children: [jsx("input", { value: emailInput, onChange: (e) => setEmailInput(e.target.value), type: "email", placeholder: "Enter your email", formNoValidate: true }), jsx("div", { style: { position: 'relative' }, children: jsx(AnimatePresence, { initial: false, children: isValidEmail$1 ? (jsx(motion.div, { initial: { x: -5, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: -5, opacity: 0, position: 'absolute' }, transition: { duration: 0.2, ease: [0.25, 1, 0.5, 1] }, children: jsx(EmailInnerButton, { type: "submit", "aria-label": "Submit email", children: jsx(ProviderIcon$1, { children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Submit email" }), jsx("line", { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "1", strokeLinecap: "round" }), jsx("path", { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "1", strokeLinecap: "round" })] }) }) }) }, emailInput ? 'enabled' : 'disabled')) : (jsx(motion.div, { initial: { x: 5, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: 5, opacity: 0, position: 'absolute' }, transition: { duration: 0.2, ease: [0.25, 1, 0.5, 1] }, children: jsx(ProviderIcon$1, { children: jsx(EmailIcon, {}) }) })) }) })] }) }) }));
 };
-const EmailButton = () => {
+const EmailPasswordButton = () => {
     const { setRoute } = useOpenfort();
     const { user } = useOpenfortCore();
-    const { emailInput, setEmailInput } = useOpenfort();
+    const handleSubmit = () => {
+        setRoute(user ? routes.LINK_EMAIL : routes.EMAIL_LOGIN);
+    };
+    return jsx(EmailButton, { handleSubmit: handleSubmit });
+};
+const EmailOTPButton = () => {
+    const { setRoute } = useOpenfort();
+    const handleSubmit = () => {
+        setRoute(routes.EMAIL_OTP);
+    };
+    return jsx(EmailButton, { handleSubmit: handleSubmit });
+};
+const PhoneButton = () => {
+    const { uiConfig, phoneInput, setPhoneInput, setRoute } = useOpenfort();
     const handleSubmit = (e) => {
         e.preventDefault();
-        setRoute(user ? routes.LINK_EMAIL : routes.EMAIL_LOGIN);
+        setRoute(routes.PHONE_OTP);
     };
-    return (jsx(ProvidersButton, { children: jsx("form", { onSubmit: handleSubmit, noValidate: true, children: jsxs(ProviderInputInner, { children: [jsx("input", { value: emailInput, onChange: (e) => setEmailInput(e.target.value), type: "email", placeholder: "Enter your email", formNoValidate: true }), jsx("div", { style: { position: 'relative' }, children: jsx(AnimatePresence, { initial: false, children: emailInput ? (jsx(EmailInnerButton, { initial: { x: -5, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: -5, opacity: 0, position: 'absolute' }, transition: { duration: 0.2, ease: [0.25, 1, 0.5, 1] }, type: "submit", "aria-label": "Submit email", children: jsx(ProviderIcon$1, { children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Submit email" }), jsx("line", { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "1", strokeLinecap: "round" }), jsx("path", { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "1", strokeLinecap: "round" })] }) }) }, emailInput ? 'enabled' : 'disabled')) : (jsx(motion.div, { initial: { x: 5, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: 5, opacity: 0, position: 'absolute' }, transition: { duration: 0.2, ease: [0.25, 1, 0.5, 1] }, children: jsx(ProviderIcon$1, { children: jsx(EmailIcon, {}) }) })) }) })] }) }) }));
+    const hasValue = phoneInput.length > 5;
+    // && !defaultCountries.some((country: CountryData) => phoneInput.replace('+', '') === country[2])
+    return (jsx(ProvidersButton, { children: jsx("form", { onSubmit: handleSubmit, noValidate: true, children: jsxs(ProviderInputInner, { children: [jsx("div", { style: { width: '100%' }, children: jsx(PhoneInput, { value: phoneInput, onChange: (phone) => setPhoneInput(phone), hideDropdown: false, placeholder: "Enter your phone", style: {
+                                '--react-international-phone-height': '56px',
+                                '--react-international-phone-text-color': 'var(--ck-body-color)',
+                                '--react-international-phone-background-color': 'var(--ck-secondary-button-background)',
+                                '--react-international-phone-country-selector-background-color': 'var(--ck-secondary-button-background)',
+                                '--react-international-phone-selected-dropdown-item-background-color': 'var(--ck-secondary-button-hover-background)',
+                                '--react-international-phone-country-selector-background-color-hover': 'var(--ck-secondary-button-hover-background)',
+                                '--react-international-phone-font-size': '16px',
+                                paddingLeft: '4px',
+                            }, ...uiConfig.phoneConfig }) }), jsx("div", { style: { position: 'relative' }, children: jsx(AnimatePresence, { initial: false, children: hasValue ? (jsx(EmailInnerButton, { initial: { x: -5, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: -5, opacity: 0, position: 'absolute' }, transition: { duration: 0.2, ease: [0.25, 1, 0.5, 1] }, type: "submit", "aria-label": "Submit email", children: jsx(ProviderIcon$1, { children: jsxs("svg", { width: "13", height: "12", viewBox: "0 0 13 12", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [jsx("title", { children: "Submit email" }), jsx("line", { stroke: "currentColor", x1: "1", y1: "6", x2: "12", y2: "6", strokeWidth: "1", strokeLinecap: "round" }), jsx("path", { stroke: "currentColor", d: "M7.51431 1.5L11.757 5.74264M7.5 10.4858L11.7426 6.24314", strokeWidth: "1", strokeLinecap: "round" })] }) }) }, phoneInput ? 'enabled' : 'disabled')) : (jsx(motion.div, { initial: { x: 5, opacity: 0 }, animate: { x: 0, opacity: 1 }, exit: { x: 5, opacity: 0, position: 'absolute' }, transition: { duration: 0.2, ease: [0.25, 1, 0.5, 1] }, children: jsx(ProviderIcon$1, { children: jsx(PhoneIcon, {}) }) })) }) })] }) }) }));
 };
 const AuthProviderButton = ({ provider, title = `${provider} login`, icon, }) => {
     const { setRoute, setConnector } = useOpenfort();
@@ -14574,29 +15605,26 @@ const AuthProviderButton = ({ provider, title = `${provider} login`, icon, }) =>
         setRoute({ route: routes.CONNECT, connectType: 'linkIfUserConnectIfNoUser' });
         setConnector({ id: provider, type: 'oauth' });
     };
-    return (jsx(ProviderButton, { onClick: handleClick, icon: icon, children: title }));
+    return (jsx(ProviderButtonBase, { onClick: handleClick, icon: icon, children: title }));
 };
-const ProviderButtonSwitch = ({ provider }) => {
-    switch (provider) {
-        case UIAuthProvider.GUEST:
-            return jsx(GuestButton, {});
-        case UIAuthProvider.WALLET:
-            return jsx(WalletButton, {});
-        case UIAuthProvider.EMAIL:
-            return jsx(EmailButton, {});
-        case UIAuthProvider.GOOGLE:
-            return jsx(AuthProviderButton, { provider: OAuthProvider.GOOGLE, title: "Google", icon: providersLogos[provider] });
-        case UIAuthProvider.TWITTER:
-            return jsx(AuthProviderButton, { provider: OAuthProvider.TWITTER, title: "X", icon: providersLogos[provider] });
-        case UIAuthProvider.FACEBOOK:
-            return jsx(AuthProviderButton, { provider: OAuthProvider.FACEBOOK, title: "Facebook", icon: providersLogos[provider] });
-        case UIAuthProvider.DISCORD:
-            return jsx(AuthProviderButton, { provider: OAuthProvider.DISCORD, title: "Discord", icon: providersLogos[provider] });
-        case UIAuthProvider.APPLE:
-            return jsx(AuthProviderButton, { provider: OAuthProvider.APPLE, title: "Apple", icon: providersLogos[provider] });
-        default:
-            throw new Error(`NOT IMPLEMENTED: ${provider}`);
+const authProviderToOAuthProviderMap = {
+    guest: jsx(GuestButton, {}),
+    wallet: jsx(WalletButton, {}),
+    emailPassword: jsx(EmailPasswordButton, {}),
+    emailOtp: jsx(EmailOTPButton, {}),
+    phone: jsx(PhoneButton, {}),
+    google: (jsx(AuthProviderButton, { provider: OAuthProvider.GOOGLE, title: "Google", icon: providersLogos[UIAuthProvider.GOOGLE] })),
+    twitter: (jsx(AuthProviderButton, { provider: OAuthProvider.TWITTER, title: "X", icon: providersLogos[UIAuthProvider.TWITTER] })),
+    facebook: (jsx(AuthProviderButton, { provider: OAuthProvider.FACEBOOK, title: "Facebook", icon: providersLogos[UIAuthProvider.FACEBOOK] })),
+    discord: (jsx(AuthProviderButton, { provider: OAuthProvider.DISCORD, title: "Discord", icon: providersLogos[UIAuthProvider.DISCORD] })),
+    apple: (jsx(AuthProviderButton, { provider: OAuthProvider.APPLE, title: "Apple", icon: providersLogos[UIAuthProvider.APPLE] })),
+};
+const ProviderButton = ({ provider }) => {
+    const { user } = useOpenfortCore();
+    if (user && (provider === UIAuthProvider.EMAIL_OTP || provider === UIAuthProvider.EMAIL_PASSWORD)) {
+        return jsx(EmailPasswordButton, {});
     }
+    return authProviderToOAuthProviderMap[provider] || null;
 };
 // This accounts for the case where the user has an address but no user, which can happen if the user has not signed up yet, but logged in with a wallet
 const AddressButNoUserCase = () => {
@@ -14616,7 +15644,7 @@ const AddressButNoUserCase = () => {
 };
 const SocialProvidersButton = ({ thereAreSocialsAlready }) => {
     const { setRoute } = useOpenfort();
-    return (jsx(ProviderButton, { onClick: () => setRoute(routes.SOCIAL_PROVIDERS), icon: jsx(OtherSocials, {}), children: thereAreSocialsAlready ? 'Other socials' : 'Social providers' }));
+    return (jsx(ProviderButtonBase, { onClick: () => setRoute(routes.SOCIAL_PROVIDERS), icon: jsx(OtherSocials, {}), children: thereAreSocialsAlready ? 'Other socials' : 'Social providers' }));
 };
 const Providers = () => {
     const { user } = useOpenfortCore();
@@ -14632,7 +15660,7 @@ const Providers = () => {
     if (address && !user) {
         return jsx(AddressButNoUserCase, {});
     }
-    return (jsxs(PageContent, { onBack: onBack, children: [jsx(ModalHeading, { children: user ? 'Link auth' : 'Connect' }), mainProviders.map((auth) => (jsx(ProviderButtonSwitch, { provider: auth }, auth))), hasExcessProviders && (jsx(SocialProvidersButton, { thereAreSocialsAlready: !!mainProviders.find((p) => socialProviders.includes(p)) })), jsx(PoweredByFooter, { showDisclaimer: true })] }));
+    return (jsxs(PageContent, { onBack: onBack, children: [jsx(ModalHeading, { children: user ? 'Link auth' : 'Connect' }), mainProviders.map((auth) => (jsx(ProviderButton, { provider: auth }, auth))), hasExcessProviders && (jsx(SocialProvidersButton, { thereAreSocialsAlready: !!mainProviders.find((p) => socialProviders.includes(p)) })), jsx(PoweredByFooter, { showDisclaimer: true })] }));
 };
 
 const StyledButton = styled.button `
@@ -14897,6 +15925,125 @@ const RecoverPage = () => {
     return jsx(RecoverWallet, { wallet: wallet, onBack: onBack, logoutOnBack: logoutOnBack });
 };
 
+const ProviderIconContainer = styled.div `
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ProviderIconWrapper = styled.div `
+  width: 54px;
+  height: 54px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--ck-body-background-secondary);
+  border-radius: 28px;
+`;
+const ProviderIconInner = styled.div `
+  width: 32px;
+  height: 32px;
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const ButtonWrapper = styled.div `
+  display: flex;
+  gap: 12px;
+  margin-top: 24px;
+`;
+const ErrorMessage$1 = styled.div `
+  color: var(--ck-body-color-danger, #ff4d4f);
+  margin-top: 16px;
+`;
+const RemoveLinkedProvider = () => {
+    const { route, triggerResize, onBack, setOnBack, setRouteHistory, setRoute } = useOpenfort();
+    const { client, updateUser } = useOpenfortCore();
+    const [error, setError] = useState(null);
+    const [isSuccess, setIsSuccess] = useState(false);
+    const provider = useMemo(() => {
+        if (route.route === 'removeLinkedProvider') {
+            return route.provider;
+        }
+        throw new Error('No provider found in route');
+    }, []);
+    useEffect(() => {
+        if (error)
+            triggerResize();
+    }, [error]);
+    useEffect(() => {
+        if (isSuccess) {
+            updateUser();
+            triggerResize();
+            setOnBack(() => () => {
+                setRouteHistory((prev) => {
+                    const newHistory = [...prev];
+                    newHistory.pop();
+                    newHistory.pop();
+                    if (newHistory.length > 0) {
+                        setRoute(newHistory[newHistory.length - 1]);
+                    }
+                    else {
+                        setRoute({ route: routes.CONNECTED });
+                    }
+                    return newHistory;
+                });
+            });
+        }
+    }, [isSuccess]);
+    const handleRemove = async () => {
+        if (provider.provider === 'siwe' || provider.provider === 'wallet')
+            try {
+                const result = await client.auth.unlinkWallet({
+                    address: provider.accountId,
+                    chainId: provider.chainId,
+                });
+                if (!result.success) {
+                    setError('Failed to remove linked provider. Please try again.');
+                    return;
+                }
+                else {
+                    setIsSuccess(true);
+                }
+            }
+            catch (e) {
+                if (e instanceof Error)
+                    setError(e.message);
+                else {
+                    logger.error('Unexpected error removing linked provider:', e);
+                    setError('Failed to remove linked provider. Please try again.');
+                }
+                return;
+            }
+        else {
+            try {
+                const result = await client.auth.unlinkOAuth({
+                    provider: provider.provider,
+                });
+                if (!result.status) {
+                    setError('Failed to remove linked provider. Please try again.');
+                    return;
+                }
+                else {
+                    setIsSuccess(true);
+                }
+            }
+            catch (e) {
+                if (e instanceof Error)
+                    setError(e.message);
+                else {
+                    logger.error('Unexpected error removing linked provider:', e);
+                    setError('Failed to remove linked provider. Please try again.');
+                }
+                return;
+            }
+        }
+    };
+    return (jsxs(PageContent, { children: [jsxs(ModalHeading, { children: ["Remove ", getProviderName(provider.provider)] }), jsxs(ModalContent, { style: { paddingBottom: 0 }, children: [jsx(ProviderIconContainer, { style: { marginBottom: '16px' }, children: jsx(ProviderIconWrapper, { children: jsx(ProviderIconInner, { children: jsx(ProviderIcon, { provider: provider }) }) }) }), isSuccess ? (jsxs(Fragment, { children: [jsx(ModalH1, { "$valid": true, children: "Success" }), jsxs(ModalBody, { children: ["Successfully removed", ' ', provider.provider === 'siwe' ? (jsxs("span", { children: [jsx("b", { children: jsx(WalletDisplay, { walletAddress: provider.accountId }) }), "."] })) : (jsxs(Fragment, { children: [jsx("b", { children: getProviderName(provider.provider) }), " as an authentication method."] }))] }), jsx(ButtonWrapper, { style: { marginTop: 0 }, children: jsx(Button, { onClick: () => onBack === null || onBack === void 0 ? void 0 : onBack(), children: "Back" }) })] })) : (jsxs(Fragment, { children: [jsxs("p", { children: ["Are you sure you want to remove", ' ', provider.provider === 'siwe' ? (jsxs(CopyText, { value: provider.accountId, children: [jsx("b", { children: jsx(WalletDisplay, { walletAddress: provider.accountId }) }), "?"] })) : (jsxs(Fragment, { children: [jsx("b", { children: getProviderName(provider.provider) }), "as an authentication method?"] }))] }), error && jsx(ErrorMessage$1, { children: error }), jsxs(ButtonWrapper, { style: { marginTop: 0 }, children: [jsx(Button, { onClick: () => onBack === null || onBack === void 0 ? void 0 : onBack(), children: "Cancel" }), jsx(Button, { onClick: handleRemove, children: "Remove" })] })] }))] })] }));
+};
+
 const ZERO = BigInt(0);
 const usdFormatter$1 = new Intl.NumberFormat('en-US', {
     style: 'currency',
@@ -15942,7 +17089,7 @@ const SendConfirmation = () => {
 
 const SocialProviders = () => {
     const { remainingSocialProviders } = useProviders();
-    return (jsxs(PageContent, { children: [jsx(ScrollArea, { mobileDirection: 'horizontal', children: remainingSocialProviders.map((auth) => (jsx(ProviderButtonSwitch, { provider: auth }, auth))) }), jsx(PoweredByFooter, { showDisclaimer: true })] }));
+    return (jsxs(PageContent, { children: [jsx(ModalHeading, { children: "Other socials" }), jsx(ScrollArea, { mobileDirection: 'horizontal', children: remainingSocialProviders.map((auth) => (jsx(ProviderButton, { provider: auth }, auth))) }), jsx(PoweredByFooter, { showDisclaimer: true })] }));
 };
 
 const SwitchNetworks = () => {
@@ -15964,7 +17111,7 @@ const createSIWEMessage = (address, nonce, chainId) => createSiweMessage({
     statement: 'By signing, you are proving you own this wallet and logging in. This does not initiate a transaction or cost any fees.',
     uri: window.location.origin,
     version: '1',
-    chainId: chainId !== null && chainId !== void 0 ? chainId : sepolia.id,
+    chainId: chainId,
     nonce,
 });
 
@@ -15977,7 +17124,8 @@ function useConnectWithSiwe() {
     const chainId = useChainId();
     const config = useConfig();
     const publicClient = usePublicClient();
-    const connectWithSiwe = useCallback(async ({ onError, onConnect, connectorType: propsConnectorType, walletClientType: propsWalletClientType, } = {}) => {
+    const { signMessageAsync } = useSignMessage();
+    const connectWithSiwe = useCallback(async ({ onError, onConnect, connectorType: propsConnectorType, walletClientType: propsWalletClientType, link = !!user, } = {}) => {
         var _a, _b;
         const connectorType = propsConnectorType !== null && propsConnectorType !== void 0 ? propsConnectorType : connector === null || connector === void 0 ? void 0 : connector.type;
         const walletClientType = propsWalletClientType !== null && propsWalletClientType !== void 0 ? propsWalletClientType : connector === null || connector === void 0 ? void 0 : connector.id;
@@ -15992,30 +17140,36 @@ function useConnectWithSiwe() {
                     chainId,
                 });
             }
-            const { nonce } = await client.auth.initSIWE({ address });
+            let nonce;
+            if (link) {
+                const resp = await client.auth.linkSIWE({ address });
+                nonce = resp.nonce;
+            }
+            else {
+                const resp = await client.auth.initSIWE({ address });
+                nonce = resp.nonce;
+            }
             const SIWEMessage = createSIWEMessage(address, nonce, chainId);
-            const signature = await signMessage(config, { message: SIWEMessage });
-            // if has user, we link the wallet
-            if (user) {
-                logger.log('User found, trying to lint wallet to user');
-                const authToken = await client.getAccessToken();
-                if (!authToken)
-                    throw new Error('No access token found');
-                logger.log('Linking wallet', { signature, message: SIWEMessage, connectorType, walletClientType, authToken });
+            const signature = await signMessageAsync({ message: SIWEMessage });
+            if (link) {
+                logger.log('Linking wallet to user');
                 await client.auth.linkWallet({
                     signature,
                     message: SIWEMessage,
                     connectorType,
                     walletClientType,
-                    authToken,
+                    address,
+                    chainId,
                 });
             }
             else {
+                logger.log('Authenticating with SIWE');
                 await client.auth.authenticateWithSIWE({
                     signature,
                     message: SIWEMessage,
                     connectorType,
                     walletClientType,
+                    address,
                 });
             }
             await updateUser();
@@ -16041,7 +17195,7 @@ function useConnectWithSiwe() {
             else {
                 message = 'Failed to connect with SIWE.';
             }
-            onError(message, err instanceof OpenfortError$1 ? err.type : undefined);
+            onError(message, err instanceof OpenfortError$1 ? err : undefined);
         }
     }, [client, user, updateUser, address, chainId, config, connector, accountChainId, publicClient]);
     return connectWithSiwe;
@@ -16260,7 +17414,7 @@ const ConnectWithInjector = ({ forceState }) => {
     const { disconnect } = useDisconnect();
     const connectWithSiwe = useConnectWithSiwe();
     const props = useRouteProps(routes.CONNECT);
-    const { user } = useUser();
+    const { linkedAccounts } = useUser();
     const onConnect = useCallback(() => {
         setStatus(states$3.CONNECTED);
         setTimeout(() => {
@@ -16335,7 +17489,7 @@ const ConnectWithInjector = ({ forceState }) => {
                         });
                         return;
                     }
-                    const userWallets = user === null || user === void 0 ? void 0 : user.linkedAccounts.filter((acc) => {
+                    const userWallets = linkedAccounts === null || linkedAccounts === void 0 ? void 0 : linkedAccounts.filter((acc) => {
                         var _a, _b;
                         return acc.walletClientType === ((_a = wallet.connector) === null || _a === void 0 ? void 0 : _a.name.toLowerCase()) ||
                             acc.walletClientType === ((_b = wallet.connector) === null || _b === void 0 ? void 0 : _b.id);
@@ -16343,7 +17497,7 @@ const ConnectWithInjector = ({ forceState }) => {
                     // If already has linked account, don't link again
                     if (userWallets && userWallets.length > 0) {
                         wallet.connector.getAccounts().then((acc) => {
-                            if (acc.some((v) => userWallets.some((w) => w.address === v))) {
+                            if (acc.some((v) => userWallets.some((w) => w.accountId === v))) {
                                 onConnect();
                                 return;
                             }
@@ -16353,15 +17507,15 @@ const ConnectWithInjector = ({ forceState }) => {
                     connectWithSiwe({
                         // connectorType: wallet.connector.id,
                         // walletClientType: wallet.connector.name.toLowerCase(),
-                        onError: (error, errorType) => {
+                        onError: (error, _errorType) => {
                             logger.error(error);
                             disconnect();
-                            if (errorType === OpenfortErrorType$1.AUTHENTICATION_ERROR) {
-                                setStatus(states$3.DUPLICATED);
-                            }
-                            else {
-                                setStatus(states$3.FAILED);
-                            }
+                            // TODO: TMP FIX: Handle siwe error properly
+                            // if (errorType) {
+                            //   setStatus(states.DUPLICATED)
+                            // } else {
+                            setStatus(states$3.FAILED);
+                            // }
                         },
                         onConnect: () => {
                             onConnect();
@@ -16492,7 +17646,7 @@ const ConnectWithOAuth = () => {
         (async () => {
             if (connector.type !== 'oauth')
                 throw new Error('Invalid connector type');
-            const url = new URL(window.location.href);
+            const url = new URL(window.location.href.replace('?access_token=', '&access_token=')); // handle both ? and & cases
             const hasProvider = !!url.searchParams.get('openfortAuthProviderUI');
             const provider = connector.id;
             switch (status) {
@@ -16503,21 +17657,34 @@ const ConnectWithOAuth = () => {
                         setTimeout(() => setStatus(states$2.REDIRECT), 150); // UX: wait a bit before redirecting
                     break;
                 case states$2.CONNECTING: {
-                    const player = url.searchParams.get('player_id');
-                    const accessToken = url.searchParams.get('access_token');
-                    const refreshToken = url.searchParams.get('refresh_token');
-                    ['openfortAuthProviderUI', 'refresh_token', 'access_token', 'player_id'].forEach((key) => {
+                    const userId = url.searchParams.get('user_id');
+                    const token = url.searchParams.get('access_token');
+                    const error = url.searchParams.get('error');
+                    ['openfortAuthProviderUI', 'access_token', 'user_id', 'error'].forEach((key) => {
                         url.searchParams.delete(key);
                     });
                     window.history.replaceState({}, document.title, url.toString());
-                    if (!player || !accessToken || !refreshToken) {
-                        logger.error(`Missing player id or access token or refresh token: player=${player}, accessToken=${accessToken ? `${accessToken.substring(0, 10)}...` : accessToken}, refreshToken=${refreshToken}`);
+                    if (!userId || !token || error) {
+                        logger.error(`Missing user id or access token: userId=${userId}, accessToken=${token ? `${token.substring(0, 10)}...` : token}`);
+                        setStatus(states$2.ERROR);
+                        if (error) {
+                            switch (error) {
+                                case "email_doesn't_match":
+                                    setDescription('The email associated with this OAuth provider does not match your account email.');
+                                    break;
+                                default:
+                                    setDescription('There was an error during authentication. Please try again.');
+                            }
+                        }
+                        else {
+                            setDescription('There was an error during authentication. Please try again.');
+                        }
+                        triggerResize();
                         return;
                     }
                     client.auth.storeCredentials({
-                        player,
-                        accessToken,
-                        refreshToken,
+                        token,
+                        userId,
                     });
                     setRoute(routes.LOADING);
                     break;
@@ -16537,26 +17704,19 @@ const ConnectWithOAuth = () => {
                                 return;
                             }
                             const linkResponse = await client.auth.initLinkOAuth({
-                                authToken,
                                 provider,
-                                options: {
-                                    redirectTo: cleanURL,
-                                    queryParams,
-                                },
+                                redirectTo: `${cleanURL}?${new URLSearchParams(queryParams).toString()}`,
                             });
                             logger.log(linkResponse);
-                            window.location.href = linkResponse.url;
+                            window.location.href = linkResponse;
                         }
                         else {
                             const r = await client.auth.initOAuth({
                                 provider,
-                                options: {
-                                    redirectTo: cleanURL,
-                                    queryParams,
-                                },
+                                redirectTo: `${cleanURL}?${new URLSearchParams(queryParams).toString()}`,
                             });
                             logger.log(r);
-                            window.location.href = r.url;
+                            window.location.href = r;
                         }
                     }
                     catch (e) {
@@ -16835,6 +17995,8 @@ const ConnectModal = ({ mode = 'auto', theme = 'auto', customTheme = customTheme
         createGuestUser: jsx(CreateGuestUserPage, {}),
         socialProviders: jsx(SocialProviders, {}),
         emailLogin: jsx(EmailLogin, {}),
+        emailOtp: jsx(EmailOTP, {}),
+        phoneOtp: jsx(PhoneOTP, {}),
         forgotPassword: jsx(ForgotPassword, {}),
         emailVerification: jsx(EmailVerification, {}),
         linkEmail: jsx(LinkEmail, {}),
@@ -16850,6 +18012,8 @@ const ConnectModal = ({ mode = 'auto', theme = 'auto', customTheme = customTheme
         profile: jsx(Profile, {}),
         switchNetworks: jsx(SwitchNetworks, {}),
         linkedProviders: jsx(LinkedProviders, {}),
+        linkedProvider: jsx(LinkedProvider$1, {}),
+        removeLinkedProvider: jsx(RemoveLinkedProvider, {}),
         connectWithMobile: jsx(ConnectWithMobile, {}),
         noAssetsAvailable: jsx(NoAssetsAvailable, {}),
         assetInventory: jsx(AssetInventory, {}),
@@ -16870,11 +18034,11 @@ const ConnectModal = ({ mode = 'auto', theme = 'auto', customTheme = customTheme
     }
     // if auth redirect
     useEffect(() => {
-        const url = new URL(window.location.href);
+        const url = new URL(window.location.href.replace('?access_token=', '&access_token=')); // handle both ? and & cases
         const provider = url.searchParams.get('openfortAuthProviderUI');
         const emailVerification = url.searchParams.get('openfortEmailVerificationUI');
         const forgotPassword = url.searchParams.get('openfortForgotPasswordUI');
-        logger.log('Checking for search parameters', url);
+        logger.log('Checking for search parameters', { url, provider, emailVerification, forgotPassword });
         if (emailVerification) {
             context.setOpen(true);
             context.setRoute(routes.EMAIL_VERIFICATION);
@@ -16996,12 +18160,13 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
     }
     const debugModeOptions = useMemo(() => {
         const getDebugMode = () => {
-            var _a, _b, _c;
+            var _a, _b, _c, _d;
             if (typeof debugMode === 'undefined') {
                 return {
                     shieldDebugMode: false,
                     openfortCoreDebugMode: false,
                     openfortReactDebugMode: false,
+                    debugRoutes: false,
                 };
             }
             else if (typeof debugMode === 'boolean') {
@@ -17009,6 +18174,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
                     shieldDebugMode: debugMode,
                     openfortCoreDebugMode: debugMode,
                     openfortReactDebugMode: debugMode,
+                    debugRoutes: false,
                 };
             }
             else {
@@ -17016,6 +18182,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
                     shieldDebugMode: (_a = debugMode.shieldDebugMode) !== null && _a !== void 0 ? _a : false,
                     openfortCoreDebugMode: (_b = debugMode.openfortCoreDebugMode) !== null && _b !== void 0 ? _b : false,
                     openfortReactDebugMode: (_c = debugMode.openfortReactDebugMode) !== null && _c !== void 0 ? _c : false,
+                    debugRoutes: (_d = debugMode.debugRoutes) !== null && _d !== void 0 ? _d : false,
                 };
             }
         };
@@ -17092,6 +18259,7 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
     const [errorMessage, setErrorMessage] = useState('');
     const [resize, onResize] = useState(0);
     const [emailInput, setEmailInput] = useState('');
+    const [phoneInput, setPhoneInput] = useState('');
     const [sendForm, setSendForm] = useState(defaultSendFormState);
     const [buyForm, setBuyForm] = useState(defaultBuyFormState);
     const [headerLeftSlot, setHeaderLeftSlot] = useState(null);
@@ -17185,6 +18353,8 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
         debugMode: debugModeOptions,
         emailInput,
         setEmailInput,
+        phoneInput,
+        setPhoneInput,
         resize,
         triggerResize,
         publishableKey,
@@ -17198,20 +18368,32 @@ const OpenfortProvider = ({ children, uiConfig, onConnect, onDisconnect, debugMo
         headerLeftSlot,
         setHeaderLeftSlot,
     };
-    return createElement(Openfortcontext.Provider, { value }, jsx(Web3ContextProvider, { children: jsxs(CoreOpenfortProvider, { openfortConfig: {
-                baseConfiguration: {
-                    publishableKey,
-                },
-                shieldConfiguration: walletConfig
-                    ? {
-                        shieldPublishableKey: walletConfig.shieldPublishableKey,
-                        debug: debugModeOptions.shieldDebugMode,
-                    }
-                    : undefined,
-                debug: debugModeOptions.openfortCoreDebugMode,
-                overrides,
-                thirdPartyAuth,
-            }, onConnect: onConnect, onDisconnect: onDisconnect, children: [children, jsx(ConnectModal, { lang: ckLang, theme: ckTheme, mode: (_e = safeUiConfig.mode) !== null && _e !== void 0 ? _e : ckMode, customTheme: ckCustomTheme })] }) }));
+    return createElement(Openfortcontext.Provider, { value }, jsxs(Web3ContextProvider, { children: [jsx(PhoneGlobalStyles, {}), jsxs(CoreOpenfortProvider, { openfortConfig: {
+                    baseConfiguration: {
+                        publishableKey,
+                    },
+                    shieldConfiguration: walletConfig
+                        ? {
+                            shieldPublishableKey: walletConfig.shieldPublishableKey,
+                            debug: debugModeOptions.shieldDebugMode,
+                        }
+                        : undefined,
+                    debug: debugModeOptions.openfortCoreDebugMode,
+                    overrides,
+                    thirdPartyAuth,
+                }, onConnect: onConnect, onDisconnect: onDisconnect, children: [debugModeOptions.debugRoutes && (jsx("pre", { style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            fontSize: '14px',
+                            color: 'gray',
+                            background: 'white',
+                            zIndex: 9999,
+                        }, children: JSON.stringify(routeHistory.map((item) => Object.fromEntries(Object.entries(item).map(([key, value]) => [
+                            key,
+                            typeof value === 'object' && value !== null ? '[object]' : value,
+                        ]))), null, 2) // For debugging purposes
+                     })), children, jsx(ConnectModal, { lang: ckLang, theme: ckTheme, mode: (_e = safeUiConfig.mode) !== null && _e !== void 0 ? _e : ckMode, customTheme: ckCustomTheme })] })] }));
 };
 
 /**
@@ -17295,16 +18477,15 @@ const useOAuth = (hookOptions = {}) => {
     });
     const { isOpen } = useUI();
     const { tryUseWallet } = useConnectToWalletPostAuth();
-    const storeCredentials = useCallback(async ({ player, accessToken, refreshToken, ...options }) => {
+    const storeCredentials = useCallback(async ({ userId, token, ...options }) => {
         var _a, _b;
         setStatus({
             status: 'loading',
         });
         try {
             await client.auth.storeCredentials({
-                player,
-                accessToken,
-                refreshToken,
+                userId,
+                token,
             });
             setStatus({
                 status: 'success',
@@ -17321,7 +18502,7 @@ const useOAuth = (hookOptions = {}) => {
             });
         }
         catch (e) {
-            const error = new OpenfortError('Failed to store credentials', OpenfortErrorType.AUTHENTICATION_ERROR, {
+            const error = new OpenfortError('Failed to store credentials', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
                 error: e,
             });
             setStatus({
@@ -17344,13 +18525,11 @@ const useOAuth = (hookOptions = {}) => {
             });
             await client.auth.initOAuth({
                 provider: authProvider,
-                options: {
-                    redirectTo: buildCallbackUrl({
-                        provider: authProvider,
-                        callbackUrl: (_a = hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.redirectTo) !== null && _a !== void 0 ? _a : options === null || options === void 0 ? void 0 : options.redirectTo,
-                        isOpen,
-                    }),
-                },
+                redirectTo: buildCallbackUrl({
+                    provider: authProvider,
+                    callbackUrl: (_a = hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.redirectTo) !== null && _a !== void 0 ? _a : options === null || options === void 0 ? void 0 : options.redirectTo,
+                    isOpen,
+                }),
             });
             return onSuccess({
                 data: {},
@@ -17359,7 +18538,7 @@ const useOAuth = (hookOptions = {}) => {
             });
         }
         catch (e) {
-            const error = new OpenfortError('Failed to login with OAuth', OpenfortErrorType.AUTHENTICATION_ERROR, {
+            const error = new OpenfortError('Failed to login with OAuth', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
                 error: e,
             });
             setStatus({
@@ -17382,18 +18561,15 @@ const useOAuth = (hookOptions = {}) => {
             });
             const authToken = await client.getAccessToken();
             if (!authToken) {
-                throw new OpenfortError('No auth token found', OpenfortErrorType.AUTHENTICATION_ERROR);
+                throw new OpenfortError('No auth token found', OpenfortReactErrorType.AUTHENTICATION_ERROR);
             }
             await client.auth.initLinkOAuth({
-                authToken,
                 provider: authProvider,
-                options: {
-                    redirectTo: buildCallbackUrl({
-                        provider: authProvider,
-                        callbackUrl: (_a = options === null || options === void 0 ? void 0 : options.redirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.redirectTo,
-                        isOpen,
-                    }),
-                },
+                redirectTo: buildCallbackUrl({
+                    provider: authProvider,
+                    callbackUrl: (_a = options === null || options === void 0 ? void 0 : options.redirectTo) !== null && _a !== void 0 ? _a : hookOptions === null || hookOptions === void 0 ? void 0 : hookOptions.redirectTo,
+                    isOpen,
+                }),
             });
             return onSuccess({
                 data: {},
@@ -17402,7 +18578,9 @@ const useOAuth = (hookOptions = {}) => {
             });
         }
         catch (e) {
-            const error = new OpenfortError('Failed to link OAuth', OpenfortErrorType.AUTHENTICATION_ERROR, { error: e });
+            const error = new OpenfortError('Failed to link OAuth', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
+                error: e,
+            });
             setStatus({
                 status: 'error',
                 error,
@@ -17474,13 +18652,11 @@ const useOAuth = (hookOptions = {}) => {
  *     state: 'verification-token',
  *   });
  * };
- *
- * // Manually store credentials (if needed)
- * const handleManualStore = async () => {
+ * // Manually trigger storing credentials (if needed)
+ * const handleManualStoreCredentials = async () => {
  *   await authCallback.storeCredentials({
- *     player: 'player-id',
- *     accessToken: 'access-token',
- *     refreshToken: 'refresh-token',
+ *     userId: 'player-id',
+ *     token: 'access-token',
  *   });
  * };
  * ```
@@ -17513,7 +18689,7 @@ const useAuthCallback = ({ enabled = true, // Automatically handle OAuth and ema
                     onError({
                         hookOptions,
                         options: {},
-                        error: new OpenfortError('No state or email found in URL', OpenfortErrorType.AUTHENTICATION_ERROR),
+                        error: new OpenfortError('No state or email found in URL', OpenfortReactErrorType.AUTHENTICATION_ERROR),
                     });
                     return;
                 }
@@ -17547,30 +18723,28 @@ const useAuthCallback = ({ enabled = true, // Automatically handle OAuth and ema
                 removeParams();
             }
             else {
-                const player = url.searchParams.get('player_id');
-                const accessToken = url.searchParams.get('access_token');
-                const refreshToken = url.searchParams.get('refresh_token');
-                if (!player || !accessToken || !refreshToken) {
-                    logger.error(`Missing player id or access token or refresh token`, {
-                        player,
-                        accessToken: accessToken ? `${accessToken.substring(0, 10)}...` : accessToken,
-                        refreshToken,
+                const userId = url.searchParams.get('user_id');
+                const token = url.searchParams.get('access_token');
+                if (!userId || !token) {
+                    logger.error(`Missing user id or access token`, {
+                        userId,
+                        token: token ? `${token.substring(0, 10)}...` : token,
                         fixedUrl,
                     });
                     onError({
                         hookOptions,
                         options: {},
-                        error: new OpenfortError('Missing player id or access token or refresh token', OpenfortErrorType.AUTHENTICATION_ERROR),
+                        error: new OpenfortError('Missing player id or access token or refresh token', OpenfortReactErrorType.AUTHENTICATION_ERROR),
                     });
                     return;
                 }
                 const removeParams = () => {
-                    ['openfortAuthProvider', 'refresh_token', 'access_token', 'player_id'].forEach((key) => {
+                    ['openfortAuthProvider', 'access_token', 'user_id'].forEach((key) => {
                         url.searchParams.delete(key);
                     });
                     window.history.replaceState({}, document.title, url.toString());
                 };
-                logger.log('callback', { player, accessToken, refreshToken });
+                logger.log('callback', { userId });
                 const options = {
                     onSuccess: (data) => {
                         var _a;
@@ -17589,7 +18763,7 @@ const useAuthCallback = ({ enabled = true, // Automatically handle OAuth and ema
                     onError: hookOptions.onError,
                     throwOnError: hookOptions.throwOnError,
                 };
-                await storeCredentials({ player, accessToken, refreshToken, ...options });
+                await storeCredentials({ userId, token, ...options });
                 removeParams();
             }
         })();
@@ -17630,7 +18804,7 @@ const useWalletAuth = (hookOptions = {}) => {
     const { connectAsync } = useConnect({
         mutation: {
             onError: (e) => {
-                const error = new OpenfortError('Failed to connect with wallet', OpenfortErrorType.AUTHENTICATION_ERROR, {
+                const error = new OpenfortError('Failed to connect with wallet', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
                     error: e,
                 });
                 handleError(error);
@@ -17649,7 +18823,7 @@ const useWalletAuth = (hookOptions = {}) => {
             onError: (e) => {
                 logger.log('Error connecting with SIWE', e);
                 disconnect();
-                const error = new OpenfortError('Failed to connect with siwe', OpenfortErrorType.AUTHENTICATION_ERROR, {
+                const error = new OpenfortError('Failed to connect with siwe', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
                     error: e,
                 });
                 handleError(error);
@@ -17752,7 +18926,7 @@ const useWalletAuth = (hookOptions = {}) => {
         }
         if (!connector) {
             logger.log('Connector not found', connector);
-            return handleError(new OpenfortError('Connector not found', OpenfortErrorType.AUTHENTICATION_ERROR));
+            return handleError(new OpenfortError('Connector not found', OpenfortReactErrorType.AUTHENTICATION_ERROR));
         }
         setWalletConnectingTo(connector.id);
         const hasDisconnected = new Promise((resolve) => {
@@ -17762,7 +18936,7 @@ const useWalletAuth = (hookOptions = {}) => {
                 },
                 onError: (e) => {
                     logger.error('Error disconnecting', e);
-                    const error = new OpenfortError('Failed to disconnect', OpenfortErrorType.AUTHENTICATION_ERROR, {
+                    const error = new OpenfortError('Failed to disconnect', OpenfortReactErrorType.AUTHENTICATION_ERROR, {
                         error: e,
                     });
                     handleError(error);
@@ -17779,7 +18953,7 @@ const useWalletAuth = (hookOptions = {}) => {
         }
         catch (error) {
             logger.error('Error connecting', error);
-            handleError(new OpenfortError('Failed to connect', OpenfortErrorType.AUTHENTICATION_ERROR, { error }));
+            handleError(new OpenfortError('Failed to connect', OpenfortReactErrorType.AUTHENTICATION_ERROR, { error }));
         }
     }, [siwe, disconnect, updateUser, availableWallets, setStatus, hookOptions]);
     return {
@@ -17826,11 +19000,11 @@ function use7702Authorization() {
         arrayifyMessage: false,
     }) => {
         if (!client) {
-            throw new OpenfortError('Openfort client is not initialized.', OpenfortErrorType.CONFIGURATION_ERROR);
+            throw new OpenfortError('Openfort client is not initialized.', OpenfortReactErrorType.CONFIGURATION_ERROR);
         }
         const authorization = parameters;
         if (!authorization.contractAddress) {
-            throw new OpenfortError('Authorization is missing the contract address to sign.', OpenfortErrorType.VALIDATION_ERROR);
+            throw new OpenfortError('Authorization is missing the contract address to sign.', OpenfortReactErrorType.VALIDATION_ERROR);
         }
         const hash = hashAuthorization(authorization);
         try {
@@ -17850,7 +19024,7 @@ function use7702Authorization() {
             };
         }
         catch (error) {
-            throw new OpenfortError('Failed to sign authorization.', OpenfortErrorType.WALLET_ERROR, { error });
+            throw new OpenfortError('Failed to sign authorization.', OpenfortReactErrorType.WALLET_ERROR, { error });
         }
     }, [client]);
     return { signAuthorization };
@@ -17950,7 +19124,7 @@ const useGrantPermissions = (hookOptions = {}) => {
         try {
             logger.log('Granting permissions with request:', request);
             if (!walletClient) {
-                throw new OpenfortError('Wallet client not available', OpenfortErrorType.WALLET_ERROR);
+                throw new OpenfortError('Wallet client not available', OpenfortReactErrorType.WALLET_ERROR);
             }
             setStatus({
                 status: 'loading',
@@ -17958,7 +19132,7 @@ const useGrantPermissions = (hookOptions = {}) => {
             // Get the current chain configuration
             const chain = chains.find((c) => c.id === chainId);
             if (!chain) {
-                throw new OpenfortError('No chain configured', OpenfortErrorType.CONFIGURATION_ERROR);
+                throw new OpenfortError('No chain configured', OpenfortReactErrorType.CONFIGURATION_ERROR);
             }
             // Get the account address
             const [account] = await walletClient.getAddresses();
@@ -17980,7 +19154,7 @@ const useGrantPermissions = (hookOptions = {}) => {
             });
         }
         catch (error) {
-            const openfortError = new OpenfortError('Failed to grant permissions', OpenfortErrorType.WALLET_ERROR, {
+            const openfortError = new OpenfortError('Failed to grant permissions', OpenfortReactErrorType.WALLET_ERROR, {
                 error,
             });
             setStatus({
@@ -18053,7 +19227,7 @@ const useRevokePermissions = (hookOptions = {}) => {
     const revokePermissions = useCallback(async ({ sessionKey }, options = {}) => {
         try {
             if (!walletClient) {
-                throw new OpenfortError('Wallet client not available', OpenfortErrorType.WALLET_ERROR);
+                throw new OpenfortError('Wallet client not available', OpenfortReactErrorType.WALLET_ERROR);
             }
             logger.log('Revoking permissions for session key:', sessionKey);
             setStatus({
@@ -18062,7 +19236,7 @@ const useRevokePermissions = (hookOptions = {}) => {
             // Get the current chain configuration
             const chain = chains.find((c) => c.id === chainId);
             if (!chain) {
-                throw new OpenfortError('No chain configured', OpenfortErrorType.CONFIGURATION_ERROR);
+                throw new OpenfortError('No chain configured', OpenfortReactErrorType.CONFIGURATION_ERROR);
             }
             // Get the account address
             const revokePermissionsResult = await walletClient.request({
@@ -18086,7 +19260,7 @@ const useRevokePermissions = (hookOptions = {}) => {
             });
         }
         catch (error) {
-            const openfortError = new OpenfortError('Failed to revoke permissions', OpenfortErrorType.WALLET_ERROR, {
+            const openfortError = new OpenfortError('Failed to revoke permissions', OpenfortReactErrorType.WALLET_ERROR, {
                 error,
             });
             setStatus({
@@ -18137,5 +19311,5 @@ const wallets = Object.keys(walletConfigs).reduce((acc, key) => {
     return acc;
 }, {});
 
-export { UIAuthProvider as AuthProvider, Avatar, Chain as ChainIcon, LinkWalletOnSignUpOption, OPENFORT_VERSION, OpenfortButton, OpenfortError, OpenfortErrorType, OpenfortProvider, embeddedWalletId, defaultConfig as getDefaultConfig, defaultConnectors as getDefaultConnectors, use7702Authorization, useAuthCallback, useChainIsSupported, useChains, useConnectWithSiwe, useEmailAuth, useGrantPermissions, useGuestAuth, useOAuth, useOpenfortCore as useOpenfort, useRevokePermissions, useSignOut, useUI, useUser, useWalletAssets, useWalletAuth, useWallets, wallets };
+export { UIAuthProvider as AuthProvider, Avatar, Chain as ChainIcon, LinkWalletOnSignUpOption, OPENFORT_VERSION, OpenfortButton, OpenfortError, OpenfortReactErrorType as OpenfortErrorType, OpenfortProvider, embeddedWalletId, defaultConfig as getDefaultConfig, defaultConnectors as getDefaultConnectors, use7702Authorization, useAuthCallback, useChainIsSupported, useChains, useConnectWithSiwe, useEmailAuth, useGrantPermissions, useGuestAuth, useOAuth, useOpenfortCore as useOpenfort, useRevokePermissions, useSignOut, useUI, useUser, useWalletAssets, useWalletAuth, useWallets, wallets };
 //# sourceMappingURL=index.es.js.map