Unable to connect web3auth in iphone after migration

Embedded Wallets (Web3Auth)
,
1

  • Describe your issue or question:

    • Which platform or framework are you using (e.g., React, Vue, Android, iOS, Unity, Node, etc.)? Vue2

    • Which Web3Auth/ Embedded Wallet SDK (SDK Name and version) are you using?@web3auth/modal to version 10.8.

    • What is not working as expected? After migration to v10.5.4, connection in mobiles, both android and iphones, was not working . After making some changes: upgrading to v 10.8 and changing logic to avoid asyncronous initialization, connection in androids is now working but problems with ios persists.

  • Code snippets: Include the portion of your code that is causing problems.

    web3Auth.js:

    import { WEB3AUTH_NETWORK, Web3Auth } from '@web3auth/modal';




let instance = null;

function setWeb3AuthInstance(newInstance) {

instance = newInstance;

return instance;

}

export function getWeb3AuthInstance() {

return instance;

}




export async function web3AuthInit() {

const clientId = process.env.VUE_APP_CLIENT_ID;

const rawChainId = process.env.VUE_APP_DEFAULT_CHAIN_ID;

const chainId = Number(rawChainId);




if (!rawChainId || Number.isNaN(chainId)) {

throw new Error('VUE_APP_DEFAULT_CHAIN_ID must be a valid number (e.g. "30" or "31")');

  }




const network = chainId === 30 ? WEB3AUTH_NETWORK.MAINNET : WEB3AUTH_NETWORK.TESTNET;




const web3AuthOptions = {

clientId,

web3AuthNetwork: network,

whiteLabel: {

name: 'Tropykus',

url: 'https://tropykus.finance',

logoLight: '
',

logoDark: '
',

defaultLanguage: 'es',

dark: false,

theme: {

primary: '#00D1B2',

      },

    },

  };




const web3AuthInstance = new Web3Auth(web3AuthOptions);

await web3AuthInstance.init();

setWeb3AuthInstance(web3AuthInstance);

return web3AuthInstance;

}

    IThe initialization is done in a different view than the login view so that the instance is ready when the user logs in:

    Web3AuthLOginView:

    … async created() {

   this.setSessionProperty({ showDialogConnect: false });

const web3AuthInstance = await web3AuthInit();

const interval = setInterval(() => {

if (web3AuthInstance.status === 'ready' || web3AuthInstance.status === 'connecting') {

this.instanceReady = true;

clearInterval(interval);

    }

   }, 1000);

  },

    And when user chooses the login provider method this function is executed:

    [constants.SESSION_CONNECT_WEB3AUTH]: async (

    { commit, dispatch, state },

    { loginProvider, login_hint }

  ) => {

commit(constants.SESSION_SET_PROPERTY, { connectingWeb3Auth: true });

setWalletConnectionEventMP(EVENT_NAME.WCS, 'WEB3AUTH');

commit(constants.SESSION_SET_PROPERTY, { showDialogConnect: false });

const { chainId } = state;

try {

const web3AuthInstance = getWeb3AuthInstance();

if (web3AuthInstance && (web3AuthInstance.connected === true

|| web3AuthInstance.status === 'connected'

|| (web3AuthInstance.state && web3AuthInstance.state.cachedConnector))) {

try { await web3AuthInstance.logout(); } catch (e) {}

       }

const localProvider = await web3AuthInstance.connectTo(WALLET_CONNECTORS.AUTH, {

authConnection: loginProvider, 

loginHint: login_hint

        }) 

commit(constants.SESSION_SET_PROPERTY, { connectingWeb3Auth: false });

....

return localProvider;

    } catch (error) {

commit(constants.SESSION_SET_PROPERTY, { connectingWeb3Auth: false });

const dataError = {

message: error?.message,

error,

      }

const info = (typeof mappedClientInformation !== 'undefined' && mappedClientInformation) ? mappedClientInformation : getInfoNavigation();

postLogs({

type: 'error',

description: 'error session connect web3auth',

wallet_type: 'WEB3AUTH',

address: typeof walletAddress !== 'undefined' ? walletAddress : constants.ADDRESS_ZERO,

data: dataError,

client_information: info,

      });

setWalletConnectionEventMP(EVENT_NAME.WCE, 'WEB3AUTH', dataError);

    }

  },

  • Exact error and logs: This is the error i get trying to connect web3Auth with iphones:

    ...
message: "log created"

meta: {

address: "0x0000000000000000000000000000000000000000"

client_information: {

browser: "Safari"

isMobile: true

os: "iOS"

os_version: "iOS 18.7"

}

created_at: "2025-12-02T21:07:33.302Z"

data: {

error: {

code: 5114

message: "Wallet popup has been closed by the user. "

  • Package details: the only package related to web3 auth in my project is “@web3auth/modal”: “10.8.0”,

2

Hi Natalia — thanks for the clear report, and sorry you’re blocked on iPhone. I pulled out the important details below and added a short diagnosis plus targeted next steps/support items so the team can reproduce and help quickly.

Captured details

  • SDK: MetaMask Embedded Wallets (Web3Auth)
  • Package / version: @web3auth/modal v10.8.0
  • Platform / framework: Vue 2, iPhone (Safari mobile). Android connections now work; iOS fails.
  • Error seen on iOS: code 5114 — “Wallet popup has been closed by the user.”
  • Code provided: web3AuthInit() (Web3Auth init in a different view), interval waiting for status, then Vuex action that calls web3AuthInstance.connectTo(WALLET_CONNECTORS.AUTH, { authConnection: …, loginHint: … }).
  • You already confirmed you moved away from async init and upgraded to v10.8.

Likely cause / short diagnosis

  • Code 5114 typically means the login popup/window was closed or blocked. On iOS Safari this commonly happens when the call that opens the popup is not performed synchronously as part of the direct user gesture (e.g., the browser blocks window.open when the call occurs after awaiting other async code or is invoked from an async action flow). Mobile Safari is stricter about popups / cross-origin navigation and in-app browsers (WKWebView / SFSafariViewController) can behave differently.

What I recommend you try next (ordered, minimal changes first)

  1. Confirm direct user-gesture call
    • Ensure connectTo(…) is invoked synchronously inside the click/tap handler triggered by the user — not after awaiting other async steps or inside an async Vuex action that performs additional awaits before calling connectTo. If you must call code before opening the popup, open the popup immediately on click and perform other work afterwards.
    • Quick test: add a simple button on the login view that calls getWeb3AuthInstance().connectTo(…) directly (no extra awaits/dispatch) and test on iPhone Safari.
  2. Verify web3AuthInstance.status is ‘ready’ at the moment of connect
    • You already wait for ready/connecting via interval, but please confirm status is ‘ready’ when clicking. If status is not ready the SDK might run an internal flow that delays opening the popup, leading to popup-block.
  3. Confirm environment is mobile Safari (not an in-app WKWebView)
    • If the app opens Safari inside a webview (e.g., inside an iOS app or social app), popups and cross-origin flows are often restricted. Please confirm whether you’re testing in the full Safari app vs. an embedded webview.
  4. Console logs / screenshots
    • Please attach Safari mobile console logs (or remote debugging logs) and a screenshot of any popup blocker prompt. If you can’t attach a console log, confirm whether console shows “Popup blocked” or any window.open null results.
  5. Reproduction case
    • If possible, make a minimal single-page reproduction where web3Auth is initialized ahead of time and the click handler directly calls connectTo. That helps the team reproduce quickly.
  6. Workaround if you can’t call connectTo synchronously
    • A common workaround is opening a blank window synchronously on click (window.open(‘’, ‘_blank’)) then navigating it to the auth URL when ready. Note: this can be flaky on iOS and is not always recommended — prefer making the connect call synchronously.

What I need from you (small, to avoid extra back-and-forth)

  • Confirm whether connectTo is executed directly inside the user click handler (yes/no). If no, try the direct-call test above and let me know result.
  • Confirm which Safari environment you’re using: native Safari app vs. in-app browser (WKWebView/SFSafariViewController).
  • If easy, attach mobile Safari console logs (or a screenshot) showing the popup-block / error and the exact network/console messages at the time of connection.

If you want, paste a tiny snippet of the click handler (template button + method) that triggers your Vuex action — I can point out exactly where to move the connectTo call to guarantee it runs under the user gesture.

If you’d like, I can also format a minimal reproduction example you can drop into a page to confirm whether the issue is the user gesture vs. another iOS-specific limitation.

You’re close (Android works and the instance init looks fine). If you can confirm the three items above, I’ll pass the concise repro + logs to the support team so they can investigate further.

Note: This response was generated by an AI bot and may require further verification. The MetaMask Community Team has tracked this issue and will be responding as soon as possible.

Additionally, we would recommend you to join our biweekly Office Hours to get this resolved even faster. MetaMask Developer Office Hours