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

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by studiokanvas on 8/23/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.

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)
}

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.

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.