Can't store ethersProvider to recoil in React

[aristidesgpg]

I connected the web3auth using custom login
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, ... )

After that, I got the ethers provider and tried to store to recoil, but showed error:
ethersProvider = new ethers.providers.Web3Provider(web3auth.provider); setEthersProvider(ethersProvider);

[shahbaz17]

Hey @talentdev2020

Are you using something similar code?

import { Web3AuthCore } from "@web3auth/core";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { WALLET_ADAPTERS, CHAIN_NAMESPACES } from "@web3auth/base";
import { ethers } from "ethers";

const web3auth = new Web3AuthCore({
  clientId: "YOUR_CLIENT_ID", // get it from Web3Auth Dashboard
  chainConfig: {
    chainNamespace: CHAIN_NAMESPACES.EIP155,
    chainId: "0x3", // ropsten, hex of 3
  },
});

const openloginAdapter = new OpenloginAdapter({
  adapterSettings: {
    clientId: "YOUR-WEB3AUTH-CLIENT-ID",
    network: "testnet",
    uxMode: "popup",
    loginConfig: {
      jwt: {
        name: "Name of your choice",
        verifier: "YOUR-VERIFIER-NAME-ON-WEB3AUTH-DASHBOARD",
        typeOfLogin: "jwt",
        clientId: "YOUR-CLIENTID-FROM-SOCIAL-PROVIDER",
      },
    },
  },
});

web3auth.configureAdapter(openloginAdapter);

await web3auth.init();

// Login
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
  loginProvider: "jwt",
  extraLoginOptions: {
    domain: "https://YOUR-DOMAIN", // if using Auth0, Cognito or Firebase.
    verifierIdField: "sub",
  },
});

const provider = new ethers.providers.Web3Provider(web3auth.provider);

Also, try looking at our guides to see if anything matches your requirement or not.

[aristidesgpg]

@shahbaz17 Yes, exactly.

[aristidesgpg]

Is there something wrong to get the ethers provider?

[shahbaz17]

@talentdev2020

Can you console web3auth.provider? to check whether it's returning something or not?

[shahbaz17]

And could you also try const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, ... ) and setProvider(web3authProvider)

And then do
ethersProvider = new ethers.providers.Web3Provider(provider);

Also see https://github.com/Web3Auth/examples/blob/main/web-core-sdk/custom-authentication/auth0-react-core-example/src/App.tsx