Something went wrong when using web3auth Modal on React

[keyspace.dev]

Hello,

I’ve upgraded the modal to version v7.0.4 and the modal popup.

Email / Password-less and SMS login does not work.

Google login does work on desktops for some but does not on mobile. Can we get some help?

[vjgee]

@keyspace.dev Thanks for reaching out.

Where are you unable to login ?
Is the the Dashboard or your Dapp?
Which login method are you facing the issue with Passwordless or Social login?

The error indicates you have setup your project on Testnet but your code has the WebAuth network in your code setup as Mainnet

Web3Auth network for React Native are either sapphire_mainnet or sapphire_testnet

Please do not use Brave browser due to the blocking of cross-site tracking. Can you check on Google Chrome after verifying the network settings for your app?

[keyspace.dev]

@vjgee Hi this is my dapp

Noted I will try not to use brave.

• Yes I was using email/passwordless and SMS passwordless login

• How can change it to testnet within the code?

• I am using REACT not react native

• I have tested on Safari on and same situation

[keyspace.dev]

This is my web3auth code in their respective react.js file:

import { Web3Auth } from "@web3auth/modal";
// import { Web3Auth } from "@web3auth/web3auth";
import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from "@web3auth/base";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { MetamaskAdapter } from "@web3auth/metamask-adapter";
import Web3 from "web3";
import logo from "./favicon-32x32.png";

const clientId = process.env.REACT_APP_WEB3AUTH_CLIENT_ID;

export const modalConfigLogins = {
  label: "openlogin",
  loginMethods: {
    sms_passwordless: { showOnModal: true },
    google: {
      showOnModal: true,
      name: "Google Login", // The desired name you want to show on the login button
      //verifier: "YOUR_GOOGLE_VERIFIER_NAME", // Please create a verifier on the developer dashboard and pass the name here
      typeOfLogin: "google", // Pass on the login provider of the verifier you've created
      //clientId: "GOOGLE_CLIENT_ID.apps.googleusercontent.com", // use your app client id you got from google
    },
    facebook: {
      name: "Facebook Login",
      showOnModal: false,
    },
    twitter: {
      name: "Twitter Login",
      showOnModal: false,
    },
    reddit: {
      name: "Reddit Login",
      showOnModal: false,
    },
    discord: {
      name: "Discord Login",
      showOnModal: false,
    },
    twitch: {
      name: "Twitch Login",
      showOnModal: false,
    },
    apple: {
      name: "Apple Login",
      showOnModal: false,
    },
    line: {
      showOnModal: false,
    },
    github: {
      name: "Github Login",
      showOnModal: false,
    },
    kakao: {
      showOnModal: false,
    },
    linkedin: {
      name: "LinkedIn Login",
      showOnModal: false,
    },
    weibo: {
      showOnModal: false,
    },
    wechat: {
      showOnModal: false,
    },
  },
};

export const fetchChainId = (chain) => {
  if (chain === "Ethereum") {
    return "0x5";
  } else if (chain === "Polygon") {
    return "0x13881";
  }
};

export const web3auth = new Web3Auth({
  clientId,
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: process.env.REACT_APP_ETH_CHAIN_ID, //currently on Goerli test net "0x1": ETHEREUM
    rpcTarget: process.env.REACT_APP_ALCHEMY_URL_ETH,
  },
  authMode: "DAPP",
  uiConfig: {
    theme: "light",
    // appLogo: logo,
  },
});


export const web3authPolygon = new Web3Auth({
  clientId,
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: process.env.REACT_APP_POLYGON_CHAIN_ID,
    rpcTarget: process.env.REACT_APP_ALCHEMY_URL_POLYGON,
  },
  authMode: "DAPP",
  uiConfig: {
    theme: "light",
    // appLogo: logo,
  },
});

export const metamaskAdapter = new MetamaskAdapter({
  clientId,
  sessionTime: 3600, // 1 hour in seconds
  web3AuthNetwork: "cyan",
});

export const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    clientId,
    network: "mainnet",
    uxMode: "popup",
    whiteLabel: {
      name: "Keyspace Studio",
      logoLight: "logo",
      logoDark: "logo",
      defaultLanguage: "en",
      dark: false, // whether to enable dark mode. defaultValue: false
    },
  },
});

//Web3Auth old modal
export async function connectWallet(chain) {
  console.log("connecting to web3 t3")
  console.log("chain", chain)
  if (chain === "Ethereum") {
    console.log("web3auth initialized?", web3auth)
    if (!web3auth) {
      console.log("Web3Auth not initialized yet");
      return;
    }

    const walletProvider = await web3auth.connect();
    console.log("web3auth walletProvider", walletProvider)

    const caller = new Web3(walletProvider);
    console.log("web3auth caller", caller)

    const accounts = await caller.eth.getAccounts();
    console.log("web3auth accounts", accounts)

    const user = await web3auth.getUserInfo();
    console.log("web3auth user", user)

    let email = null;

    if (user.email !== undefined && user.email !== null && user.email !== "") {
      email = user.email;
    }

    return [accounts[0], caller, email];
  } else if (chain === "Polygon") {
    console.log("web3authPolygon initialized?", web3authPolygon)
    if (!web3authPolygon) {
      console.log("Web3Auth not initialized yet");
      return;
    }
    const walletProvider = await web3authPolygon.connect();

    const caller = new Web3(walletProvider);
    const accounts = await caller.eth.getAccounts();

    const user = await web3authPolygon.getUserInfo();

    let email = null;

    if (user.email !== undefined && user.email !== null && user.email !== "") {
      email = user.email;
    }

    return [accounts[0], caller, email];
  }
}

//Web3Auth integration
export async function connectWallet1(chain) {
  try {
    if (chain === "Ethereum") {
      if (!web3auth) {
        return;
      }
      ////web3auth.configureAdapter(openloginAdapter);

      const walletProvider = await web3auth.connect();

      const caller = new Web3(walletProvider);

      const accounts = await caller.eth.getAccounts();

      const user = await web3auth.getUserInfo();

      let email = null;

      if (
        user.email !== undefined &&
        user.email !== null &&
        user.email !== ""
      ) {
        email = user.email;
      }

      return [accounts[0], caller, email];
    } else if (chain === "Polygon") {
      if (!web3authPolygon) {
        return;
      }
      console.log("web3authPolygon", web3authPolygon)
      const walletProvider = await web3authPolygon.connect();
      console.log("walletProvider", walletProvider)

      const caller = new Web3(walletProvider);
      const accounts = await caller.eth.getAccounts();

      const user = await web3authPolygon.getUserInfo();

      let email = null;

      if (
        user.email !== undefined &&
        user.email !== null &&
        user.email !== ""
      ) {
        email = user.email;
      }

      return [accounts[0], caller, email];
    }
  } catch (e) {
    console.log(e);
  }
}

[vjgee]

@keyspace.dev

• I am using REACT not react native

My apologies!

@keyspace.dev

    network: "mainnet",

If you have setup up your project on Legacy Testnet, network should be testnet Can you share a screenshot of your project environment from your Dashboard to cross check ? Have you setup your project with the same environment as the verifier?

[ty1]

@vjgee Hey sorry my other account had the daily reply limit (please remove as this is urgent).

Absolutely this is what I have here

[vjgee]

Please provide your Dapp URL so I can replicate this issue with passwordless login.

[ty1]

here you are:

https://keyspace.pro/marketplaces/65302776d5402a66d1216e7e

[ty1]

@vjgee did you receive it?

[pepper]

Hello @ty1 .
I would advise you to create a new thread so that it can gets all the attention it deserves, this issue is no related to the original question.

[ty1]

Hey no this issue still hasn’t been resolved. My customers still can’t login with email nor phone number

[pepper]

Hello @ty1 , sorry for the late reply.
I have a few question for your implementation,

1. you initialized web3auth and web3authpolygon twice, for the web3auth instance,
   do you have any specific reason for this?
   we recoomend you to initialize only one instance, to avoid inconsistency and confusion.

2. when initializing the web3auth instance, there is a way to add web3authNetwork in the configuration. Check this code :
   https://github.com/Web3Auth/web3auth-pnp-examples/blob/main/web-modal-sdk/quick-starts/react-modal-quick-start/src/App.tsx#L24
   Also it seems that your network configuration is not consistent :
   you are using mainnet at openloginAdapter, and cyan at metamaskAdapter
   try setting up the network as same as you set up in the developer dashboard.

if it still does not work, then try make the new verifier on sapphire mainnet and try again.
Thanks.

[keyspace.dev]

I added the mainnet thing and it still broke

[pepper]

Hello @keyspace.dev
we tested your dapp again and found there is an issue with translation.
Recently we fixed this bug and released new version.
So can you kindly upgrade the pnp sdk version to latest one and try again?
If error still happens after the sdk upgrade, then please leave it here. Thank you.

a