Issue when connecting web3auth on mobile

Help - Plug n Play PnP Web SDKs
1

Hello,
I’m new to web3 and I’m developing a dapp in javascript that allows users to verify web3 claims, but I’ve been having problems with the wallet login. Whenever I try to connect to Metamask a QR code appears, even on mobile. I’ve tried to change the logic of how this works by attempting deep linking without success. Am I missing something here? how do you normally do this?

WhatsApp Image 2025-07-16 at 12.14.01 (1)
WhatsApp Image 2025-07-16 at 12.14.01 (1)720×1600 115 KB

The weird things is that, when clicking on the “See all wallets” button, the metamask link there takes me directly to the metamask app installed on my phone, the way it’s supposed to be

WhatsApp Image 2025-07-16 at 12.14.01
WhatsApp Image 2025-07-16 at 12.14.01720×1600 49.2 KB

I’ve been following the instructions of web3auth docs and this site: Connect to MetaMask using Web3Auth SDK | MetaMask developer documentation

Below is my package.json:

"dependencies": {
    "@tailwindcss/vite": "^4.0.6",
    "@tanstack/react-query": "^5.83.0",
    "@web3auth/base": "^9.7.0",
    "@web3auth/metamask-adapter": "^8.12.4",
    "@web3auth/modal": "^10.0.5",
    "@web3auth/openlogin-adapter": "^8.12.4",
    "@zkmelabs/widget": "^0.3.5",
    "ethers": "^5.7.2",
    "lucide-react": "^0.475.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "tailwindcss": "^4.0.6",
    "view": "^1.1.1"
  }

and my wallet login method:

import {
  useWeb3Auth,
  useWeb3AuthConnect,
  useWeb3AuthDisconnect,
} from "@web3auth/modal/react";

const App = () => {
const { provider, isConnected, isInitialized } = useWeb3Auth();
const { connect, loading: connecting } = useWeb3AuthConnect();

const handleConnect = async () => {
    if (!isInitialized) {
      console.warn("Web3Auth not initialized yet");
      return;
    }
    setLoading(true);

    try {
      await connect(); 
      setConnectRequested(true);
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  };

also my main.jsx:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import { Web3AuthProvider } from "@web3auth/modal/react";
import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from "@web3auth/base";
import "./index.css";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <Web3AuthProvider
      config={{
        web3AuthOptions: {
          clientId: import.meta.env.VITE_WEB3AUTH_CLIENT_ID,
          web3AuthNetwork: "sapphire_devnet",
        },
      }}
      enableLogging={true}
      uiConfig={{
        appName: "Everi", 
      }}
    >
      <App />
    </Web3AuthProvider>
  </StrictMode>
);

Thank you,

2

Thank you for the detailed information and screenshots, Sebastian! Here’s a summary of your issue and some guidance to help you move forward:

Issue Summary

  • SDK: Web3Auth Plug and Play (PnP) Web SDK
  • SDK Versions:
    • @web3auth/base: ^9.7.0
    • @web3auth/metamask-adapter: ^8.12.4
    • @web3auth/modal: ^10.0.5
  • Platform: JavaScript (React), targeting mobile browsers
  • Problem:
    When attempting to connect to MetaMask via Web3Auth on mobile, a QR code is shown instead of directly deep-linking to the MetaMask app. However, using the “See all wallets” button and selecting MetaMask does trigger the expected deep-link behavior.
  • References: You are following both the Web3Auth docs and the MetaMask SDK with Web3Auth guide.
  • Code Provided: Yes (App and main.jsx initialization)
  • Screenshots Provided: Yes

Analysis & Guidance

Why is the QR Code Showing on Mobile?

By default, the Web3Auth Modal SDK will show a QR code for wallet connections unless it detects a mobile environment and is configured to deep-link directly to wallet apps like MetaMask.

Why Does “See all wallets” Work?

The “See all wallets” button uses WalletConnect’s deep-linking logic, which is optimized for mobile. This is why selecting MetaMask from there works as expected.

How to Enable Deep Linking for MetaMask on Mobile?

You need to ensure that:

  • The MetaMask Adapter is configured correctly for mobile deep linking.
  • The Web3Auth Modal is set up to recognize the mobile environment and trigger the deep link.

Key Steps:

  1. Ensure you are using the latest versions of the SDKs (which you are).
  2. Configure the MetaMask Adapter to support mobile deep linking:
    • You may need to explicitly set the adapterSettings for MetaMask to enable deep linking.
  3. Check the Modal UI Config:
    The modal should be able to detect mobile browsers, but sometimes custom logic is needed.

Reference Implementation:
See the Web3Auth Modal + MetaMask Adapter Docs and MetaMask Adapter Docs.

Example Adapter Setup

import { MetamaskAdapter } from "@web3auth/metamask-adapter";

const metamaskAdapter = new MetamaskAdapter({
  clientId: "YOUR_WEB3AUTH_CLIENT_ID",
  sessionTime: 3600,
  web3AuthNetwork: "sapphire_devnet",
  adapterSettings: {
    // Enable deep linking
    dappMetadata: {
      name: "Everi",
      url: "https://yourdapp.com",
    },
    // Optionally, you can force WalletConnect for mobile
    walletConnect: {
      enabled: true,
    },
  },
});

Then, add this adapter to your Web3Auth instance.

Additional Notes

  • If you want to force WalletConnect for MetaMask on mobile, you may need to customize the wallet list or modal behavior.
  • Review the WalletConnect Integration Guide for more details.

Next Steps

  • Check your MetaMask Adapter initialization and ensure it matches the above example, especially the adapterSettings.
  • If possible, share your MetaMask Adapter setup code snippet so the support team can verify your configuration.
  • If the issue persists, please specify the mobile browser and OS (e.g., Chrome on Android, Safari on iOS) as some behaviors may vary by platform.

Helpful Links

Let us know if updating the adapter settings resolves the issue or if you need further assistance! If you can, please share your MetaMask Adapter initialization code for a more targeted review.

Note: This response was generated by an AI bot and may require further verification. The Web3Auth support 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. Web3Auth Developer Office Hours

3

You’re using a very old version of Web3Auth. Can you start building using our quickstart with the latest version of Web3Auth: Integration Builder | Web3Auth ?

4

Hello,

I actually started building with that documentation but later switched to the one I referenced because I encountered this issue. Do you know any specific method to solve this problem? other than the one the bot suggested. I also needed to do more things iside my web3auth instance, I find this method way easier

Regards,

5

Please do not consider using the older version as an alternative way. The older versions are soon up for deprecation in few months, Please use the latest version and let me know the issues you face with that so that I can help you out.