Web Modal/NoModal not working on iPhone web browsers (Safari, Chrome, etc)

Help - Plug n Play PnP Web SDKs
1

Please provide the following details too when asking for help in this category:

  • SDK Version: N/A
  • Platform: iPhone/Mobile
  • Browser Console Screenshots: N/A

Please provide the Web3Auth initialization and login code snippet below:

I have tried both No Modal and Modal versions. They all fail to do anything on web browsers on mobile (iPhone, have not tested Android yet).

The modal/noModal works fine on a desktop browser ie Chrome, but it doesn’t work on mobile.

This is in my react.js application:

    const chainConfig = {
        chainNamespace: CHAIN_NAMESPACES.EIP155,
        chainId: "0x1",
        rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
        displayName: "Ethereum Mainnet",
        blockExplorer: "https://etherscan.io",
        ticker: "ETH",
        tickerName: "Ethereum",
    }

    const metamaskAdapter = new MetamaskAdapter({
        clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID, // Get your Client ID from Web3Auth Dashboard
        sessionTime: 3600, // 1 hour in seconds
        web3AuthNetwork: "cyan",
        chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x1",
            rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
        },
    })

    const web3Auth = new Web3AuthNoModal({
        clientId: process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID, // Get your Client ID from Web3Auth Dashboard
        chainConfig,
    })

    const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } })
    const openloginProvider = new OpenloginAdapter({
        privateKeyProvider,
    })

    web3Auth.configureAdapter(openloginProvider)
    web3Auth.configureAdapter(metamaskAdapter)

    metamaskAdapter.setAdapterSettings({
        sessionTime: 86400, // 1 day in seconds
        chainConfig: {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: "0x1",
            rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
        },
        web3AuthNetwork: "cyan",
    })

    web3Auth.init().then(
        (response) => console.log("response: ", response),
        (error) => console.log(error)
    )

    const loginGoogle = async () => {
        const response = await web3Auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
            loginProvider: "google",
        })
        console.log("response: ", response)
    }

    const loginApple = async () => {
        const response = await web3Auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
            loginProvider: "apple",
        })
        console.log("response: ", response)
    }

    const loginMetaMask = async () => {
        const response = await web3Auth.connectTo(WALLET_ADAPTERS.METAMASK)
        console.log("response: ", response)
    }
1 Like
2

Hi @studiokanvas, this could be due to the popup blocking policies on handheld devices. Have you tried setting the uxMode parameter as redirect? It is a parameter under the adapterSettings given to the OpenloginAdapter during initialization. I’ll link an example here.

3

Thank you so much. That seems to be the solution! I had another question. The uxMode is readily available for OpenloginAdapter. What about the metamaskAdapter? I checked within metamaskAdapter.setAdapterSettings, but it doesn’t seem like uxMode or adapterSettings is a valid key within the object.

1 Like
4

I’m glad to help @studiokanvas . You are correct, there’s no parameter of that sort for metamaskAdapter. The uxMode in openloginAdapter defines the behaviour while logging in i.e.whether to perform it through redirect or a popup. I don’t think we have that option for the metamaskAdapter.