Safari Mobile Browser Issue with WalletConnect on DApp

[danishfik]

Hi everyone,

I'm currently working on integrating WalletConnect into my DApp using Vue + Ethers, and I'm encountering an issue specifically with Safari on mobile devices.

Issue Description:
When I try to connect my DApp to WalletConnect using MetaMask on Safari mobile, the connection process works fine. However, when MetaMask prompts the user to return to the DApp, Safari reloads the page, which resets the session. This behavior doesn’t happen in android.

Steps Taken So Far:
Here’s the relevant part of my code:

await useAppKit().open();
const account = await useAppKitAccount();
const { address: addressConnect, isConnected } = account;
console.log('connected: ',isConnected)
address.value = addressConnect;
console.log(address.value);
localStorage.setItem('address', address.value);
walletType.value = 'walletconnect';
localStorage.setItem('walletType', 'walletconnect');
isConnect.value = true;
await useAppKit().close();

I’m storing the address and wallet type in localStorage, but when Safari reloads the page, it seems to reset the session and does not persist the connection.

What I've Tried:

• I’ve tested this in other browsers (Chrome, Firefox) on both mobile and desktop, and the problem seems to be specific to IOS mobile.
• I suspect that IOS mobile background handling or cache behavior might be the issue, but I’m not sure how to work around it.

Help Needed:

• Has anyone else encountered this issue with Safari mobile and WalletConnect?
• Is there a way to prevent Safari from reloading or resetting the session after returning from MetaMask?
• Would appreciate any guidance or suggestions on how to handle this!

Thanks in advance for your help!

[danishfik]

I found the issues it just because of ios browser will not run localhost on background