-
Describe your issue or question:
-
web page built on Vue2.
-
using @web3auth/modal": "^10.5.4
-
connection in desktop works fine, but in android mobiles is not working, in iphone works but connection is super slow.
-
Before migration to version 10, it worked fine. Web3auth initialization was being made in first rendering, but this was causing problems with other wallets connections, so initialization now is made only when user chooses web3auth. For this, it was necessary to set a timeout to give it time to be ready before trying to connect.
-
-
Code snippets:
[constants.SESSION_CONNECT_WEB3AUTH]: async (
{ commit, dispatch, state },
{ loginProvider }
) => {
setWalletConnectionEventMP(EVENT_NAME.WCS, 'WEB3AUTH');
commit(constants.SESSION_SET_PROPERTY, { showDialogConnect: false });
const { chainId } = state;
try {
const web3AuthInstance = await web3AuthInit(chainId);
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,
})
Vue.prototype.$web3 = Vue.web3 = new ethers.providers.Web3Provider(localProvider, 'any');
Vue.prototype.$tropykus = Vue.tropykus = new Tropykus(Vue.web3, null, 900000);
Vue.tropykus.setPriceOracle(addresses[chainId].priceOracleProxy);
const tropykusAccount = await Vue.tropykus.getAccount();
const tropykusComptroller = await Vue.tropykus.setComptroller(
tropykusAccount,
addresses[chainId].comptroller
);
const tropykusMkts = await tropykusComptroller.getAllMarketsInstances(
addresses[chainId].kSAT,
addresses[chainId].kRBTC,
addresses[chainId].krDOC
);
const tropykus = {
account: tropykusAccount,
comptroller: tropykusComptroller,
mkts: tropykusMkts,
};
const account = await Vue.web3.getSigner();
const walletAddress = await account.getAddress();
const clientInformation = getInfoNavigation();
const mappedClientInformation = {
browser: clientInformation.browser,
browser_version: clientInformation.browser_version,
os: clientInformation.os,
isMobile: clientInformation.isMobile,
os_version: clientInformation.os_version,
};
commit(constants.SESSION_SET_PROPERTY, { clientInformation: mappedClientInformation });
commit(constants.SESSION_SET_PROPERTY, { chainId });
commit(constants.SESSION_SET_PROPERTY, { tropykus });
commit(constants.SESSION_SET_PROPERTY, { provider: Vue.web3 });
commit(constants.SESSION_SET_PROPERTY, { account });
commit(constants.SESSION_SET_PROPERTY, { walletAddress });
commit(constants.SESSION_SET_PROPERTY, { wallet: 'WEB3AUTH' });
dispatch(constants.SESSION_GET_USER_ID, { walletAddress, source: 'fromSession' });
dispatch(constants.SESSION_SET_TROPK_PROVIDER);
dispatch(constants.SESSION_GET_EXPLORER, chainId);
setWalletConnectionEventMP(EVENT_NAME.WCC, 'WEB3AUTH');
return localProvider;
} catch (error) {
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);
}
},
export async function web3AuthInit(chainId) {
const clientId = process.env.VUE_APP_CLIENT_ID;
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();
await new Promise((resolve, reject) => {
let interval;
const timeout = setTimeout(() => {
if (interval) clearInterval(interval);
reject(new Error('Timeout esperando Web3Auth.connected'));
}, 15000);
interval = setInterval(() => {
const connected = web3AuthInstance.status === 'ready';
if (connected) {
clearInterval(interval);
clearTimeout(timeout);
resolve();
}
}, 200);
});
setWeb3AuthInstance(web3AuthInstance);
return web3AuthInstance;
}
-
Exact error and logs:
-
One of the errors I get in android is this one:
{“error”:{},“message”:“Timeout esperando Web3Auth.connected”}, this means web3auth initizlization is not posible despite the timeout set in web3AuthInit function.
Another error is this one, despite user does not close the popup beacuse it never shows.{ "id": 1281, "type": "error", "data": { "error": { "code": 5113, "name": "LoginError", "message": "login popup has been closed by the user, " }, "message": "login popup has been closed by the user, " }, "description": "error session connect web3auth", "address": "0x0000000000000000000000000000000000000000", "wallet_type": "WEB3AUTH", "client_information": { "os": "Android", "browser": "Chrome", "isMobile": true, "os_version": "Android 10", "browser_version": "141.0.0.0" }, "created_at": "2025-10-27T15:04:13.621Z" }, -
Package details: “@web3auth/ethereum-provider”: “^9.7.0”,
"@web3auth/modal": "^10.5.4",