How can i make to export Web3Auth as i did with metamask provider?

[lucasch2011]

Hi guys, i am new with the web3auth sdk, so am having a little troble tryng to export Web3Auth as i did with the web3 utilizing metamask to interact with smart-contracts. The way i did with metamask was the classical:

import Web3 from 'web3';

const { PROJECT_ID } = process.env;

let web3;

if (typeof window !== 'undefined' && typeof window.ethereum !== 'undefined') {
    web3 = new Web3(window.ethereum);
} else {
    const provider = new Web3.providers.HttpProvider(`https://polygon-mumbai.infura.io/v3/${PROJECT_ID}`);
    web3 = new Web3(provider);
}
export default web3;

I did this so i could re-utilize the code and gain time while working on my projects. As i try to implement new features as Web3Auth and export it i start receving error like:

So here is my try to export Web3Auth so i could gain more time:

import Web3 from 'web3';
import { Web3Auth } from '@web3auth/modal';
const { PROJECT_ID } = process.env;
import { CHAIN_NAMESPACES } from '@web3auth/base';


const web3 = async () => {
    if (typeof window !== 'undefined') {
        const clientId = '';

        const chainConfig = {
            chainNamespace: CHAIN_NAMESPACES.EIP155,
            chainId: '0x13881',
            rpcTarget: 'https://polygon-mumbai.infura.io/v3/', // This is the public RPC we have added, please pass on your own endpoint while creating an app
        };
        const webauth = new Web3Auth({
            clientId,
            web3AuthNetwork: 'testnet', // mainnet, aqua,  cyan or testnet
            chainConfig,
        });
        await webauth.initModal();
        const provider = await webauth.connect();
        const webbauth = new Web3(provider);
        return webbauth;
    } else {
        const provider = new Web3.providers.HttpProvider(`https://polygon-mumbai.infura.io/v3/${PROJECT_ID}`);
        const webbauth = new Web3(provider);
        return webbauth;
    }
};
export default web3;

I hope someone could help me with these problem

[maharshi]

Hey @lucasch2011, can you please help me with the version of webmodal sdk and the version of web3.js you’re using?

[lucasch2011]

Sure here it is:

"dependencies": {
    "@web3auth/modal": "^6.1.4",
    "@web3auth/openlogin-adapter": "^6.1.4",
    "next": "13.4.8",
    "react": "18.2.0",
    "web3": "^1.8.0"
  }

[maharshi]

Those versions look okay. Did you get a chance to check out our examples repo? I will provide the link here for your convenience. You can ignore the plugins for now, so that you get a basic understanding of initialising the web-modal sdk. Let me know if this helps you.

[lucasch2011]

I can make it work as it is on the exemple repo, but every time i want to use the provider i need to intiate the web3auth like these example? Am asking it because in my project, while utilizing window.ethereum as provider, i could just export the web3 object from another file, as i mentioned before, and utilize it to interact with any smart-contract, but i cant figure it out how to make the same with Web3Auth.