@openfort/react 1.0.4 → 1.0.6

package/build/components/ConnectModal/ConnectWithOAuth.js

@@ -73,9 +73,12 @@ const ConnectWithOAuth = () => {
                 case states.REDIRECT: {
                     if (hasProvider)
                         return;
-                    const cleanURL = win.location.origin + win.location.pathname;
+                    const baseURL = win.location.origin + win.location.pathname;
+                    const hash = win.location.hash;
                     const queryParams = Object.fromEntries([...url.searchParams.entries()].filter(([key]) => ['openfortAuthProviderUI', 'refresh_token', 'access_token', 'player_id'].includes(key)));
                     queryParams.openfortAuthProviderUI = provider;
+                    // Query params must come before the hash fragment in a valid URL
+                    const redirectTo = `${baseURL}?${new URLSearchParams(queryParams).toString()}${hash}`;
                     try {
                         if (user) {
                             const authToken = await client.getAccessToken();
@@ -86,7 +89,7 @@ const ConnectWithOAuth = () => {
                             }
                             const linkResponse = await client.auth.initLinkOAuth({
                                 provider,
-                                redirectTo: `${cleanURL}?${new URLSearchParams(queryParams).toString()}`,
+                                redirectTo,
                             });
                             logger.log(linkResponse);
                             win.location.href = linkResponse;
@@ -94,7 +97,7 @@ const ConnectWithOAuth = () => {
                         else {
                             const r = await client.auth.initOAuth({
                                 provider,
-                                redirectTo: `${cleanURL}?${new URLSearchParams(queryParams).toString()}`,
+                                redirectTo,
                             });
                             logger.log(r);
                             win.location.href = r;

package/build/components/ConnectModal/ConnectWithOAuth.js.map

@@ -1 +1 @@
-{"version":3,"file":"ConnectWithOAuth.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"ConnectWithOAuth.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/BuyProcessing/index.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ChainTypeEnum } from '@openfort/openfort-js';
-import { useState, useMemo, useEffect } from 'react';
+import { useState, useMemo, useRef, useEffect } from 'react';
 import Logos from '../../../assets/logos.js';
 import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useEthereumWalletAssets } from '../../../ethereum/hooks/useEthereumWalletAssets.js';
@@ -44,10 +44,16 @@ const BuyProcessing = () => {
             return null;
         return numeric;
     }, [buyForm.amount]);
-    // Create session and open popup on mount
+    // Create session and open popup once wallet is ready
+    const sessionStartedRef = useRef(false);
     useEffect(() => {
+        if (!address || !chainId)
+            return;
+        if (sessionStartedRef.current)
+            return;
+        sessionStartedRef.current = true;
         const createSessionAndOpenPopup = async () => {
-            if (!address || !chainId || !fiatAmount || fiatAmount <= 0) {
+            if (!fiatAmount || fiatAmount <= 0) {
                 setRoute(routes.BUY_SELECT_PROVIDER);
                 return;
             }
@@ -123,7 +129,7 @@ const BuyProcessing = () => {
             }
         };
         createSessionAndOpenPopup();
-    }, []); // Only run once on mount
+    }, [address, chainId]); // Run when wallet becomes ready
     // Trigger resize on mount and when state changes
     useEffect(() => {
         triggerResize();

package/build/components/Pages/BuyProcessing/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/BuySelectProvider/index.js

@@ -132,8 +132,6 @@ const BuySelectProvider = () => {
         }));
     };
     const handleContinue = () => {
-        // Just navigate to the processing screen
-        // The processing screen will handle session creation and popup
         setRoute(routes.BUY_PROCESSING);
     };
     const handleBack = () => {

package/build/components/Pages/BuySelectProvider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/CreateWallet/index.js

@@ -63,13 +63,14 @@ const OtherMethod = ({ currentMethod, onChangeMethod, }) => {
 };
 const CreateWalletAutomaticRecovery = ({ onBack, logoutOnBack, }) => {
     var _a;
-    const { embeddedState } = useOpenfortCore();
+    const { embeddedState, isLoadingAccounts } = useOpenfortCore();
     const { setRoute, triggerResize, walletConfig } = useOpenfort();
     const [recoveryError, setRecoveryError] = useState(null);
     const { create } = useEthereumEmbeddedWallet();
     const { isEnabled: isWalletRecoveryOTPEnabled, requestOTP } = useRecoveryOTP();
     const [shouldCreateWallet, setShouldCreateWallet] = useState(false);
     const isCreatingRef = useRef(false);
+    const hasAttemptedCreationRef = useRef(false);
     const [needsOTP, setNeedsOTP] = useState(false);
     const [otpResponse, setOtpResponse] = useState(null);
     const [otpStatus, setOtpStatus] = useState('idle');
@@ -100,6 +101,10 @@ const CreateWalletAutomaticRecovery = ({ onBack, logoutOnBack, }) => {
             return;
         if (isCreatingRef.current)
             return;
+        // Wait for the state machine's fetchEmbeddedAccounts to finish before
+        // calling create() — concurrent SDK operations corrupt shared state.
+        if (isLoadingAccounts)
+            return;
         isCreatingRef.current = true;
         (async () => {
             logger.log('Creating wallet Automatic recover');
@@ -132,12 +137,18 @@ const CreateWalletAutomaticRecovery = ({ onBack, logoutOnBack, }) => {
             }
             triggerResize();
         })();
-    }, [shouldCreateWallet, create, isWalletRecoveryOTPEnabled, requestOTP, triggerResize]);
+    }, [shouldCreateWallet, create, isWalletRecoveryOTPEnabled, requestOTP, triggerResize, isLoadingAccounts]);
     useEffect(() => {
         if (embeddedState !== EmbeddedState.EMBEDDED_SIGNER_NOT_CONFIGURED)
             return;
         if ((walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.connectOnLogin) === false)
             return;
+        // Guard against retry loop: when create() fails the SDK cycles the
+        // embeddedState back to EMBEDDED_SIGNER_NOT_CONFIGURED which re-triggers
+        // this effect.  Only attempt creation once — the user can retry manually.
+        if (hasAttemptedCreationRef.current)
+            return;
+        hasAttemptedCreationRef.current = true;
         setShouldCreateWallet(true);
     }, [embeddedState, walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.connectOnLogin]);
     const handleResendClick = useCallback(() => {
@@ -160,13 +171,28 @@ const CreateWalletAutomaticRecovery = ({ onBack, logoutOnBack, }) => {
                         logo: (otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.sentTo) === 'phone' ? jsx(PhoneIcon, {}) : jsx(EmailIcon, {}),
                     } }), jsxs(ModalBody, { children: [jsxs(Body, { children: ["Please check ", jsx("b", { children: (otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.sentTo) === 'phone' ? otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.phone : otpResponse === null || otpResponse === void 0 ? void 0 : otpResponse.email }), " and enter your code below."] }), jsx(OtpInputStandalone, { length: 9, scale: "80%", onComplete: handleCompleteOtp, isLoading: otpStatus === 'loading', isError: otpStatus === 'error', isSuccess: otpStatus === 'success' }), jsxs(ResultContainer, { children: [otpStatus === 'success' && jsx(ModalBody, { "$valid": true, children: "Code verified successfully!" }), otpStatus === 'error' && jsx(ModalBody, { "$error": true, children: error || 'Invalid code. Please try again.' })] }), jsxs(FooterTextButton, { children: ["Didn't receive the code?", ' ', jsx(FooterButtonText, { type: "button", onClick: handleResendClick, disabled: isResendDisabled, children: sendButtonText })] })] })] }));
     }
-    return (jsx(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: jsx(Loader, { isError: !!recoveryError, header: recoveryError ? 'Error creating wallet.' : `Creating wallet...`, description: recoveryError ? recoveryError.message : undefined }) }));
+    // When connectOnLogin is false, auto-creation is skipped — show a manual
+    // trigger instead of an infinite spinner.
+    if (!shouldCreateWallet && !isCreatingRef.current && !recoveryError) {
+        return (jsxs(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: [jsx(ModalHeading, { children: "Create wallet" }), jsx(ModalBody, { style: { textAlign: 'center' }, children: "Create an embedded wallet to get started." }), jsx(Button, { onClick: () => {
+                        hasAttemptedCreationRef.current = false;
+                        setShouldCreateWallet(true);
+                    }, children: "Create wallet" })] }));
+    }
+    return (jsx(PageContent, { onBack: onBack, logoutOnBack: logoutOnBack, children: jsx(Loader, { isError: !!recoveryError, header: recoveryError ? 'Error creating wallet.' : `Creating wallet...`, description: recoveryError ? recoveryError.message : undefined, onRetry: recoveryError
+                ? () => {
+                    hasAttemptedCreationRef.current = false;
+                    setRecoveryError(null);
+                    setShouldCreateWallet(true);
+                }
+                : undefined }) }));
 };
 const CreateWalletPasskeyRecovery = ({ onChangeMethod, onBack, logoutOnBack, }) => {
     const { triggerResize, setRoute, walletConfig } = useOpenfort();
     const { create } = useEthereumEmbeddedWallet();
     const [shouldCreateWallet, setShouldCreateWallet] = useState(false);
     const isCreatingRef = useRef(false);
+    const hasAttemptedCreationRef = useRef(false);
     const [recoveryError, setRecoveryError] = useState(null);
     const { embeddedState } = useOpenfortCore();
     useEffect(() => {
@@ -197,6 +223,9 @@ const CreateWalletPasskeyRecovery = ({ onChangeMethod, onBack, logoutOnBack, })
             return;
         if ((walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.connectOnLogin) === false)
             return;
+        if (hasAttemptedCreationRef.current)
+            return;
+        hasAttemptedCreationRef.current = true;
         setShouldCreateWallet(true);
     }, [embeddedState, walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.connectOnLogin]);
     useEffect(() => {

package/build/components/Pages/CreateWallet/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/LoadWallets/index.js

@@ -64,10 +64,11 @@ const LoadWallets = () => {
         }
         logger.log('User wallets loaded:', wallets.length);
         if (wallets.length === 0) {
-            if ((walletConfig === null || walletConfig === void 0 ? void 0 : walletConfig.connectOnLogin) === false) {
-                setRoute(routes.CONNECTED);
-                return;
-            }
+            // Always show the create wallet page when no wallets exist.
+            // connectOnLogin only controls whether creation starts automatically
+            // (handled inside CreateWalletAutomaticRecovery), not whether the
+            // page is shown — routing to CONNECTED with 0 wallets would show a
+            // broken "Connect wallet" button aimed at external wagmi wallets.
             setRoute(createRoute(chainType));
             return;
         }

package/build/components/Pages/LoadWallets/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/components/Pages/Loading/index.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { ChainTypeEnum } from '@openfort/openfort-js';
+import { ChainTypeEnum, EmbeddedState } from '@openfort/openfort-js';
 import React, { useEffect } from 'react';
 import { useEthereumEmbeddedWallet } from '../../../ethereum/hooks/useEthereumEmbeddedWallet.js';
 import { useOpenfortCore } from '../../../openfort/useOpenfort.js';
@@ -11,7 +11,7 @@ import { PageContent } from '../../PageContent/index.js';
 
 const Loading = () => {
     const { setRoute, walletConfig } = useOpenfort();
-    const { user, isLoadingAccounts, needsRecovery } = useOpenfortCore();
+    const { user, isLoadingAccounts, isLoading, needsRecovery, embeddedState } = useOpenfortCore();
     const { chainType } = useOpenfortCore();
     // Use chain-specific hooks
     const ethereumWallet = useEthereumEmbeddedWallet();
@@ -24,7 +24,13 @@ const Loading = () => {
     useEffect(() => {
         if (isFirstFrame)
             return;
-        if (isLoadingAccounts)
+        // Wait for the SDK to settle. After storeCredentials the embedded state
+        // briefly stays UNAUTHENTICATED/NONE while the SDK processes the token.
+        // Routing to PROVIDERS here would abort the auth flow.
+        if (embeddedState === EmbeddedState.NONE || embeddedState === EmbeddedState.UNAUTHENTICATED)
+            return;
+        // Also wait while accounts or user are still loading.
+        if (isLoadingAccounts || isLoading)
             return;
         else if (!user)
             setRoute(routes.PROVIDERS);
@@ -42,7 +48,7 @@ const Loading = () => {
         }
         else
             setRoute(routes.CONNECTED);
-    }, [isLoadingAccounts, user, address, needsRecovery, isFirstFrame, retryCount]);
+    }, [embeddedState, isLoadingAccounts, isLoading, user, address, needsRecovery, isFirstFrame, retryCount]);
     // Retry every 250ms
     useEffect(() => {
         const interval = setInterval(() => {

package/build/components/Pages/Loading/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/openfort/hooks/useEmbeddedStateMachine.js

@@ -35,8 +35,11 @@ function useEmbeddedStateMachine({ openfort, storeEmbeddedState, storeUser, stor
                 setIsConnectedWithEmbeddedSigner(false);
                 // Validate token and fetch accounts. Auto-recovery is handled by the
                 // dedicated useAutoRecovery hook (keyed on storeActiveEmbeddedAddress).
+                // Never auto-logout here: during first OAuth sign-in the user isn't in
+                // the store yet and user.get() may briefly 401/404 before the token
+                // propagates — logging out would abort the entire auth flow.
                 const doFetch = async () => {
-                    updateUserRef.current(undefined, !userRef.current);
+                    updateUserRef.current(undefined, false);
                     await fetchEmbeddedAccountsRef.current();
                 };
                 doFetch().catch((err) => {

package/build/openfort/hooks/useEmbeddedStateMachine.js.map

@@ -1 +1 @@
-{"version":3,"file":"useEmbeddedStateMachine.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"useEmbeddedStateMachine.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/build/version.d.ts

@@ -1 +1 @@
-export declare const OPENFORT_VERSION = "1.0.4";
+export declare const OPENFORT_VERSION = "1.0.6";

package/build/version.js

@@ -1,4 +1,4 @@
-const OPENFORT_VERSION = '1.0.4';
+const OPENFORT_VERSION = '1.0.6';
 
 export { OPENFORT_VERSION };
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openfort/react",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "author": "Openfort (https://www.openfort.io)",
   "license": "BSD-2-Clause license",
   "description": "The easiest way to integrate Openfort to your project.",