Showing blank page when user clicks on sign in with a social media account on local host

Please provide the following details too when asking for help in this category:
It shows a blank page when the user clicks on sign-in with a social media account on localhost.

  • SDK Version: “@web3auth/base”: “^4.3.0”,
  • Platform: localhost
  • Browser Console Screenshots:

It’s showing no error.

Please provide the Web3Auth initialization and login code snippet below:

// https://web3auth.io/docs/sdk/pnp/web/modal/initialize#arguments
const options: Web3AuthOptions = {
  clientId: 'my-client-Id', // https://dashboard.web3auth.io/
  web3AuthNetwork: 'testnet',
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: '0x5',
    // https://chainlist.org/
    rpcTarget: 'https://rpc.ankr.com/eth_goerli'
  },
  uiConfig: {
    theme: 'dark',
    loginMethodsOrder: ['google', 'facebook']
  }
}

// https://web3auth.io/docs/sdk/pnp/web/modal/initialize#configuring-adapters
const modalConfig = {
  [WALLET_ADAPTERS.TORUS_EVM]: {
    label: 'torus',
    showOnModal: false
  },
  [WALLET_ADAPTERS.METAMASK]: {
    label: 'metamask',
    showOnDesktop: true,
    showOnMobile: false
  }
}

// https://web3auth.io/docs/sdk/pnp/web/modal/whitelabel#whitelabeling-while-modal-initialization
const openloginAdapter = new OpenloginAdapter({
  loginSettings: {
    mfaLevel: 'mandatory'
  },
  adapterSettings: {
    uxMode: 'popup',
    whiteLabel: {
      name: 'Safe'
    }
  }
})

const web3AuthConfig: Web3AuthConfig = {
  txServiceUrl: 'https://safe-transaction-goerli.safe.global'
}

const web3AuthModalPack = new Web3AuthModalPack(web3AuthConfig)
const web3auth = new Web3Auth(options);

useEffect(() => {
    const init =async () => {
      await web3AuthModalPack.init({ options, adapters: [openloginAdapter], modalConfig })

       try{
        const res = await web3auth.getUserInfo();

        console.log(res);
       }catch(error){
        console.log(error);
       }
    }

    init();
  }, [])

  const signIn = async () => {
    await web3AuthModalPack.signIn();
  }

I am experiencing the same issue too. Please tag me once you get a response.

@okwuosahpaschal Welcome Aboard!

Can you upgrade to the latest version V7 of Web3Auth npmjs.com/package/@web3auth/modal

Hello @vjgee I tried upgrading here. Same issues


I also get this response after initialization

Do you have any Chrome extensions such as Metamask or any other wallet extension which can be interfering. You may disable such extensions. Are you facing this issue in Chrome Incognito mode as well ?

Just tried it. No issues with incognito mode, but other browsers are giving the same issues.

@vjgee

The error message suggests the session has expired. Since it is working in Incognito mode, it is indicative that there is a browser issue in normal mode on Chrome. Are you able to clear the cache and cookies only on Chrome and check?

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.