Hi guys! I'm struggling to do pretty basic thing - allow only few social media for log in and hide other ones in modal window.
I didn't found any recipe either in documentation nor articles on it.
So I'm modifying react-app example with latest @Web3Auth packages (0.9.3). Here all 14 loginMethods are set for adapter OpenLogin, and this cannot be avoided.
Adding code like this doesn't affect, as well as passing similar config to initModal:

          web3AuthInstance.loginModal.addSocialLogins(EVM_ADAPTERS.OPENLOGIN, {
            google: {
              name: "google",
              showOnModal: true,
              showOnDesktop: true,
              showOnMobile: true,
            },
            facebook: {
              name: "facebook",
              showOnModal: true,
              showOnDesktop: false,
              showOnMobile: true,
              mainOption: true,
              description: "facebook social login",
            },
          }, ['google', 'facebook'])

The reason (according to my debug) is wrong functioning of lodash.deepmerge, it doesn't override existing loginMethods. It happens in @web3auth/ui/src/components/Modal.tsx:62.

Any ideas on how to implement this must-be-simple thing or pointing, what I'm doing wrong, will be quite helpful

/packages/ui/src/components/SocialLogins.tsx

In this file, could you please add logic for empty social logins, just hide all of the elements, include "CONTINUE WITH".

Hi,

When logging in with Metamask, hard refreshing doesn't disconnect. Whilst using social login or email link (openlogin), when refreshing the adapter disconnects: i.e. web3auth.connectedAdapterName: null and web3auth.status: ready, instead of openlogin and connected respectively.

Thanks in advance.

Hi,

Sorry if this is not the right place but I'm not really sure where to report this issue. I'm creating a Next.js app using yarn PnP workspaces (monorepo) and as soon as I try to import @web3auth/web3auth build process fails with this error message:

error - ../.yarn/__virtual__/@toruslabs-base-controllers-virtual-3b88d48747/0/cache/@toruslabs-base-controllers-npm-1.6.3-9d8d665e41-654630130b.zip/node_modules/@toruslabs/base-controllers/dist/baseControllers.esm.js:1:0
Module not found: @toruslabs/base-controllers tried to access @babel/runtime (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

Required package: @babel/runtime
Required by: @toruslabs/base-controllers@virtual:3a7ee52a0b56322830850ebe6918747c0f3521e5f17b6f8a246dd611d5c20ba079dad34ecc7f48fd5737401f6af51dcf99cda685b477295ae3cd82a6c7d2f706#npm:1.6.3 (via /Users/robert/WebstormProjects/fqx/.yarn/__virtual__/@toruslabs-base-controllers-virtual-3b88d48747/0/cache/@toruslabs-base-controllers-npm-1.6.3-9d8d665e41-654630130b.zip/node_modules/@toruslabs/base-controllers/dist/)

Ancestor breaking the chain: @web3auth/openlogin-adapter@npm:0.3.1
Ancestor breaking the chain: @web3auth/phantom-adapter@npm:0.3.1
Ancestor breaking the chain: @web3auth/torus-solana-adapter@npm:0.3.1
Ancestor breaking the chain: @web3auth/wallet-connect-v1-adapter@npm:0.3.1

Import trace for requested module:
../.yarn/__virtual__/@web3auth-ethereum-provider-virtual-838e20da5e/0/cache/@web3auth-ethereum-provider-npm-0.3.1-61bfc93942-a4837ba2f9.zip/node_modules/@web3auth/ethereum-provider/dist/ethereumProvider.esm.js
../.yarn/cache/@web3auth-openlogin-adapter-npm-0.3.1-37a0171cb7-2547e918fe.zip/node_modules/@web3auth/openlogin-adapter/dist/openloginAdapter.esm.js
../.yarn/__virtual__/@web3auth-web3auth-virtual-59d7e0ed5a/0/cache/@web3auth-web3auth-npm-0.3.2-c02e4b8850-1d1ef366bb.zip/node_modules/@web3auth/web3auth/dist/web3auth.esm.js
./components/Web3/Web3.tsx
./pages/index.tsx

I've installed @babel/runtime but it didn't resolve the issue. However, if I try importing @toruslabs/base-controllers directly instead of @web3auth/web3auth then it works.

We are currently integrating web3auth into our website. However we have come across an issue where due to the modal content being injected onto the page this is causing some semantic issues for our html which could effect SEO rankings.

For example the Header component includes a <h1> element and as our content already has an <h1> element this fails our html validation and accessibility checks when checking the rendered markup for the entire page. See: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements#multiple_h1_elements_on_one_page

Initially I thought a solution would be to simply change the element to a <h2>. However for a more robust solution would it be possible to wrap the modal content in a <section> element as suggested in the link above as the modal is always likely to be secondary to the main content on the page?

Error: Could not get result from torus nodes 
 Error occurred while verifying paramsaud validation failed, token values [hideouts-340218] dont include validation value web3auth-firebase

Getting this error. I customized some fields to fix it, still no bueno.

all examples next-app, react-app, vue-app are fail when run

ex react-app

cd Web3Auth/examples/react-app
$ npm i
$ npm run start

as a test to play with web3auth I only fix the minor issue in react-app, to fix replace

  return loaded ? user ? renderAuthenticated() : renderUnauthenticated() : <h1>Loading....</h1>;

  return !isLoading
    ? user ? renderAuthenticated() : renderUnauthenticated()
    : <h1>Loading....</h1>;

thanks for this awesome project

Hello,

I'm trying to integrate web3Auth Authentication within a VueJS Web App.

I'm using a custom clientId and I whitelisted the URLs that I want to access for the page. (http://localhost:8080 in my case)

Upon calling await this.web3auth.initModal(); I get this error
openloginJrpc.esm.js?fd97:991 Uncaught DOMException: Failed to execute 'postMessage' on 'Window': #<Object> could not be cloned. at PostMessageStream._postMessage (webpack-internal:///./node_modules/@toruslabs/openlogin-jrpc/dist/openloginJrpc.esm.js:1026:24) at PostMessageStream._write (webpack-internal:///./node_modules/@toruslabs/openlogin-jrpc/dist/openloginJrpc.esm.js:165:10) at doWrite (webpack-internal:///./node_modules/@toruslabs/openlogin-jrpc/node_modules/readable-stream/lib/_stream_writable.js:409:139) at clearBuffer (webpack-internal:///./node_modules/@toruslabs/openlogin-jrpc/node_modules/readable-stream/lib/_stream_writable.js:526:7) at PostMessageStream.Writable.uncork (webpack-internal:///./node_modules/@toruslabs/openlogin-jrpc/node_modules/readable-stream/lib/_stream_writable.js:321:94) at PostMessageStream._onData (webpack-internal:///./node_modules/@toruslabs/openlogin-jrpc/dist/openloginJrpc.esm.js:127:14) at PostMessageStream.onMessage (webpack-internal:///./node_modules/@toruslabs/openlogin-jrpc/dist/openloginJrpc.esm.js:157:10)

Do you have an idea on what is causing this issue ?

Thanks a lot!
Alexandru Gherghe

If there is not any social login configured, the whole block is not necessary to display.

If you connect metamask in openlogin, it works normally with the same settings, but if you use torus wallet, this error appears.

chunk-vendors.92e40d68.js:32 Uncaught (in promise) Error: Invalid transaction params: specified gasPrice but also included maxFeePerGas, these cannot be mixed

The chain setting proceeded as follows.
Network Name: Klaytn Baobab
New RPC URL: https://api.baobab.klaytn.net:8651
Block Explorer URL: https://baobab.scope.klaytn.com/
Chain ID: 1001 (0x3e9)

It seems that internally base and core are using constants from here:
https://github.com/Web3Auth/Web3Auth/blob/master/packages/base/src/adapter/IAdapter.ts#L51

I feel that it would be better form to use these constants (or even better, actual ts enums) in the example code and the docs instead of the hardcoded strings:

https://github.com/Web3Auth/Web3Auth/blob/118c0b8d405f2bf8fb1794a8b3221c8a0bf6d42c/examples/getting-started/eth/index.html#L51-L54

could look like:

web3auth.on(ADAPTER_STATUS.CONNECTED, (data) => {
                console.log("Yeah!, you are successfully logged in", data);
});

As a developer
I want to custom torus wallet display styles.
So that
Torus wallet can be more uniform and consistent with the website style
Expect
1, Currently wallet icon can be change to another, but the background is always blue (background-color: var(--v-torusBrand1-base)!important;), I need to change change the color to fit my site.
2, Sometimes I donot want user have too many additional actions，so, does any way to hide "Transfer", "Topup", "Open Wallet" operations, I my site, user can just got the wallet address and sign message. of curse "topupHide" is working well now.

I've just downloaded the latest source code, got into the next-app folder, install dependencies with yarn then run yarn dev. I've left my metamask wallet on the mainnet just in case. Not working

When: After a successful login, using OpenLogin adapter, on a page refresh

What happens: the userInfo object ( obtained by using web3Auth.getUserInfo() ) contains typeOfLogin "google" with any email. The same field value was "jwt" right after the first login.

What is expected: that the userInfo info object is consistent at every web3Auth re-hydration, in this case I alway expect the field typeOfLogin, to be "jwt" (the same value I got at the first login)

Additional data:

• aggregateVerifier: "tkey-auth0-email-passwordless-lrc"
• verifier: "torus"
• browser info: {"browser":{"name":"Chrome","version":"100.0.4896.75"},"os":{"name":"Linux"},"platform":{"type":"desktop"},"engine":{"name":"Blink"}}

UI issue in modal under https://demo-app.web3auth.io

View more options is not needed when there are less than 4 options under 'CONNECT WITH'.
https://demo-app.web3auth.io

The issue from couple of days ago still persists in mobile browsers. In responsive mode on chrome desktop the provider is now set, but on mobile safari for example it is always null when using OpenLogin adapter (individual buttons for google, apple and email). The same problem appears on your demo page.

Describe the bug

I my site, sometimes when I want to pay with torus wallet, but got a block page.

To Reproduce

Steps to reproduce the behavior:

1, Write code to Send transaction:

     await this.provider.request({
        method: 'eth_sendTransaction',
        params: [{
          from: _from,
          to,
          value: _value,
          data: _data,
          gas: Web3.utils.numberToHex('25000')
        }]
      })

2, click 'Send Transaction'
3, Page redirect success, but without any information.
4, from console page, see the error: We're sorry but app doesn't work properly without javascript enabled. Please enable it to continue.

Expected behavior

Transaction page display.

Screenshots

Device Info (please complete the following information):

• Device: Desktop
• OS: Windows 11
• Browser: Chrome
• Version: 100.0.4896.75
• Web3Auth Version: 1.0.0-alpha.0

On some user devices, we see endless loading on a modal, If the same user tries using open login in incognito mode of chrome browser. Things work fine. So I am wondering it has something to do with stored information on the device.

Hi, In example from main README.md file we have:

const web3auth = new Web3Auth({
 chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
 clientId: "localhost-id" // get your clientId from https://developer.web3auth.io
 });

But I couldn't find implementation for Web3Auth constructor in the source code. Can someone point out too the file?
I'm not really sure if it's correct place to ask the question but I would appreciate the help :d

Added reproducible error here -
https://github.com/JohnRSim/web3AuthIssue/blob/master/src/routes/index.svelte

When I try to initialise

await web3auth.initModal();

I get the following error

Describe the bug

A feedback component is display over wallet icon.

To Reproduce

Steps to reproduce the behavior:

1. Login to torus
2. show wallet icon

Expected behavior

there is no feedback component display.

Screenshots

Device Info (please complete the following information):

• Device: Chrome
• OS: Windows 10
• Browser Chrome
• Version 101.0.4951.67
• Web3Auth Version 1.0.0

Additional context

after web3auth upgrade from 1.22.6 (https://app.tor.us/v1.22.6) to 1.23.0 (https://app.tor.us/v1.23.0), this issue occured.

When you login using the popup OpenloginAdapter (be it social login or metamask login) you only remain authenticated as long as you stay inside 1 browser tab. If your application contains target _blank links (within the same domain) you are logged out and you need to login again for that browser tab.

Desired behaviour:
Persist authentication across browser tabs if the application domain is the same.

setup :

const adapter = new OpenloginAdapter({ adapterSettings: { network: process.env['NEXT_PUBLIC_BLOCKCHAIN_NETWORK'] === 'mainnet' ? 'mainnet' : 'testnet', clientId, uxMode: 'popup', }, });

Issue

I'm trying to use the Web3Auth (web) to integrate sign-in in my application. I've connected to the Binance Testnet Chain in the config, but while trying to login with the Magic link and the social logins, I get the following error:

Repo for reproduction

Here's a repo I created which reproduces the issues along with how to run the repo and details on the issue I found during my investigation: https://github.com/snigdha920/web3-auth

Hello, Web3auth, there is a question about torus wallet network.

when I add TorusWalletConnectorPlugin, the torus wallet network is shown as https://goerli.infura.io/v3/776218ac4734478c90191dde8cae483c, I want to shown as default "Goerli Test Network", so what should I do for this purpose.

const ethChainConfig: Partial<CustomChainConfig> & Pick<CustomChainConfig, "chainNamespace"> = {
  chainNamespace: CHAIN_NAMESPACES.EIP155,
  chainId: "0x5",
  ticker: "ETH",
  tickerName: "Ethereum",
};

Wasn't able to tunnel my localhost OAuth2 OIDC service correctly, so the Web3Auth verifiers could connect to it. Came up with a stupid simple mock for private keys based on OAuth2 subjects. Feel free to copy it into your code, but never use this in prod.

function mockPrivateKeyForSubject(subject: string) {
  const pkey = localStorage.getItem(`mock:privateKey:${subject}`);
  if (pkey) return pkey;
 
  const account = new Web3().eth.accounts.create();
  localStorage.setItem(`mock:privateKey:${subject}`, account.privateKey);
  return account.privateKey;
}

Usage:

1. Implement where you handle your OAuth callback
2. Check environment to be local and continue with Web3Auth if not
3. In case of local env call mockPrivateKeyForSubject(user.profile.sub) and continue with your pkey as you would with the one from Web3Auth

Hello,

I use web3Auth Authentication and config custom chain can get wallet address.
then i use web3.eth.Contract can get method call but not working method send show error

What should I do this issue?

The package writes a lot to logs, I should have the option to disable logging or have much less verbose logging when initializing.

Using wallet connect with web3auth is flawless. Using wallet connect with web3auth core doesn't seem to work. I was expecting the QR code modal to show when I call connectTo function, however, it doesn't show and I see that's because QRCode is set to false in the adapter.

I've been implementing Web3Auth in my app. All worked smoothly but while I was trying to use Phantom as an external wallet it wasn't working. I've been debugging and I'll show you why and how I manage to 'hack fix' the bug.

When I call signMessage from my UI I'm calling your code inside the solana provider package.

This function from solana-provider/src/solanaWallet:

The problem was that when I was calling that method with my Phantom wallet connected I was receiving this output:

I wasn't receiving a Uint8Array as expected. So I started to check the code behind window.solana.signMessage which is the code used by the solana-adapter-* sdk. I found this:

That code basically first request the user to sign the message and after receiving the signature, it's decoded from base58 to Uint8Array.

So in my code to be able to handle the Phantom response using Web3Auth I've done the following:

It seems to be an incompatibility in the interface between phantom and web3auth's wallet.

Hi, guys, during the usage of torus wallet, I found that the popup window showed the latest activity, but after I click 'Open Wallet', swith to 'Activity' tab, it is empty, does that correct?

Steps

1. Cloned repo
2. npm run bootstrap
3. npm run build

First error:

lerna notice cli v4.0.0
lerna info Executing command in 13 packages: "yarn run build"
@web3auth/base: yarn run v1.22.17
@web3auth/base: $ rimraf dist/ && torus-scripts build
@web3auth/base: /bin/sh: torus-scripts: command not found
@web3auth/base: error Command failed with exit code 127.
@web3auth/base: info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run build exited 127 in '@web3auth/base'

4. npm i -g @toruslabs/torus-scripts
5. npm run build

$ rimraf dist/ && torus-scripts build
@web3auth/base: /Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/@babel/core/lib/config/files/plugins.js:139
@web3auth/base:   throw error;
@web3auth/base:   ^
@web3auth/base: Error: Cannot find module '@babel/plugin-syntax-bigint'
@web3auth/base: Require stack:
@web3auth/base: - /Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/@babel/core/lib/config/files/plugins.js
@web3auth/base: - /Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/@babel/core/lib/config/files/index.js
@web3auth/base: - /Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/@babel/core/lib/index.js
@web3auth/base: - /Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/config/rollup.config.js
@web3auth/base: - /Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/scripts/build.js
@web3auth/base:     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:885:15)
@web3auth/base:     at resolve (internal/modules/cjs/helpers.js:94:19)
@web3auth/base:     at tryRequireResolve (/Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/@babel/core/lib/config/files/plugins.js:157:9)
@web3auth/base:     at resolveStandardizedNameForRequrie (/Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/@babel/core/lib/config/files/plugins.js:195:19)
@web3auth/base:     at sync (/Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/@babel/core/lib/config/files/plugins.js:224:12)
@web3auth/base:     at sync (/Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/gensync/index.js:182:19)
@web3auth/base:     at /Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/gensync/index.js:210:24
@web3auth/base:     at Generator.next (<anonymous>)
@web3auth/base:     at resolvePlugin (/Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/@babel/core/lib/config/files/plugins.js:83:17)
@web3auth/base:     at resolvePlugin.next (<anonymous>) {
@web3auth/base:   code: 'MODULE_NOT_FOUND',
@web3auth/base:   requireStack: [
@web3auth/base:     '/Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/@babel/core/lib/config/files/plugins.js',
@web3auth/base:     '/Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/@babel/core/lib/config/files/index.js',
@web3auth/base:     '/Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/node_modules/@babel/core/lib/index.js',
@web3auth/base:     '/Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/config/rollup.config.js',
@web3auth/base:     '/Users/adrienblavier/.nvm/versions/node/v14.17.0/lib/node_modules/@toruslabs/torus-scripts/scripts/build.js'
@web3auth/base:   ]
@web3auth/base: }
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
lerna ERR! yarn run build exited 1 in '@web3auth/base'

As you can see I run node v14.17.0. Anything obvious I am missing here?

I've integrated web3auth into my Solana web app. I'm able to connect with a social login on the home page of the modal and the Torus Wallet under "External Wallet" via my google login. I'm able to sign transactions with Torus which seems to work great.

However, when I connect using the social login on the home page of the modal, it successfully connects but when I go to sign a transaction with the wallet using signTransaction I get the error: Error: Transaction fee payer required.

Since the Torus integration works, I think I am specifying a fee payer correctly, something isn't getting configured right now the web3auth side.

Getting this error when trying to run the react-app and custom-ui-react-app examples

Error: NormalModuleFactory.resolve (NormalModuleFactory) is no longer a waterfall hook, but a bailing hook instead. Do not return the passed object, but modify it instead. Returning false will ignore the request and results in no module created. Returning a Module object will result in this module used as result.

UI issue in modal under https://demo-app.web3auth.io/

View more options is not consistent with the design.
https://demo-app.web3auth.io/

Hi, I used the web3auth modal, but I don't know how to disable the console log.

just create vue3 project (via Vite) and add following codes.

import { Web3Auth } from "@web3auth/web3auth"
import { CHAIN_NAMESPACES } from "@web3auth/base"

const web3auth = new Web3Auth({
  chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155 },
  clientId: "815138507228-0qmlub6bcdroj6jc7qam40g87gclmohn.apps.googleusercontent.com"
})

await web3auth.initModal();

then, error occured

_stream_readable.js:48 Uncaught ReferenceError: global is not defined
    at node_modules/@toruslabs/openlogin-jrpc/node_modules/readable-stream/lib/_stream_readable.js (_stream_readable.js:48:21)
    at __require2 (chunk-SULJOONQ.js?v=767cbc63:48:44)
    at node_modules/@toruslabs/openlogin-jrpc/node_modules/readable-stream/readable-browser.js (readable-browser.js:1:28)
    at __require2 (chunk-SULJOONQ.js?v=767cbc63:48:44)
    at defineProperty.js:13:10

Is there any workaround?

When we use the OpenLogin adapter on our website after a successful login we get redirected to the next page. When in desktop mode everything works correctly, the connectedAdapterName is shown as 'openlogin' and trying to log the web3Auth.provider in our code prints out Proxy {} in the console.

If we don't change anything, but simply toggle the responsive mode in google chrome and select iPhone XR as the device, upon refreshing the page we can see that the connectedAdapterName becomes null and web3Auth.provider also prints null to the browser console. This happens every single time and if we switch back to the desktop mode (without going through the login process, just switch to desktop and refresh) everything start working again, so it seems like the mobile browser is the issue.

I have a Next.js project, and I want to integrate web3auth there.
I am having this error when I am trying to initialize from client side of next app.

if (typeof window !== undefined) {
  const web3auth = new Web3Auth({
    chainConfig: { chainNamespace: CHAIN_NAMESPACES.EIP155, chainId: "0x3" },
    authMode: "DAPP",
    clientId: "example-client-id", // get your client id from developer dashboard
  });

  console.log(web3auth);
}

Steps to recreate:

1. Create a Next js app.
2. Create a Component to hold all Web3Auth related actions.
   import {useRouter} from "next/router";
   import { Web3Auth } from "@web3auth/web3auth";
   import { ADAPTER_EVENTS, CHAIN_NAMESPACES } from "@web3auth/base";
   import { LOGIN_MODAL_EVENTS } from "@web3auth/ui";
   import React, { useEffect, useState } from "react";

import Button from '@mui/material/Button';
import Image from "next/image";

function Login() {
const [user, setUser] = useState(null);
const [web3auth, setWeb3auth] = useState(null);
const [loaded, setLoaded] = useState(false);
const [subscribed, setSubscribed] = useState(false);
useEffect(() => {
console.log("useEffect");

    const subscribeAuthEvents = (web3auth) => {
        console.log("subscribeAuthEvents ", subscribed);

        if (subscribed) {
            return;
        }
        web3auth.on(ADAPTER_EVENTS.CONNECTED, (data) => {
            debugger;
            console.log("Yeah!, you are successfully logged in", data);
            setUser(data);
        });

        web3auth.on(ADAPTER_EVENTS.CONNECTING, () => {
            debugger;
            console.log("connecting");
        });

        web3auth.on(ADAPTER_EVENTS.DISCONNECTED, () => {
            debugger;
            console.log("disconnected");
            setUser(null);
        });

        web3auth.on(ADAPTER_EVENTS.ERRORED, (error) => {
            debugger;
            console.log("some error or user have cancelled login request", error);
        });

        web3auth.on(LOGIN_MODAL_EVENTS.MODAL_VISIBILITY, (isVisible) => {
            debugger;
            console.log("modal visibility", isVisible);
        });

        setSubscribed(true);
    };

    const polygonMumbaiConfig = {
        chainNamespace: CHAIN_NAMESPACES.EIP155,
        rpcTarget: "your rpc target",
        blockExplorer: "https://mumbai-explorer.matic.today",
        chainId: "0x13881",
        displayName: "Polygon Mumbai Testnet",
        ticker: "matic",
        tickerName: "matic",
    };

    const web3auth = new Web3Auth({
        chainConfig: polygonMumbaiConfig,
        clientId: "your client id",
    });

    setWeb3auth(web3auth);

    // ⭐️ initialize modal on page mount.
    const initializeModal = async () => {
        console.log("initializeModal");
        subscribeAuthEvents(web3auth);
        await web3auth.initModal();
        setLoaded(true);
    };
    initializeModal();
}, [subscribed]);

const login = async () => {
    debugger;
    if (!web3auth) return;
    const provider = await web3auth.connect();
    // TODO: add this provider to web3/ethers
    debugger;
};
const logout = async () => {
    if (!web3auth) return;
    await web3auth.logout();
};
const getUserInfo = async () => {
    debugger;
    if (!web3auth) return;
    const userInfo = await web3auth.getUserInfo();
    console.log(userInfo);
};

const renderUnauthenticated = () => {
    return (
        <div>
            <Button variant="contained" onClick={login}>
                LOGIN
            </Button>
        </div>
    );
};

const renderAuthenticated = () => {
    return (
        <div className="App">
            <Button variant="contained" onClick={logout}>
                LOG OUT
            </Button>
            <Button variant="contained" onClick={getUserInfo}>
            </Button>
        </div>
    );
};
return loaded && user ? renderAuthenticated() : renderUnauthenticated();

}
export default Login;
3. Create a Home component added the login component as dynamic component
import React, { useEffect } from "react";
import { Box, Button } from "@mui/material";
import { useRouter } from "next/router";
import Image from "next/image";
import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
() => import('../components/Login'),
{ ssr: false }
)

function Home() {
useEffect(() => {
window.scrollTo(0, 0);
}, []);

const router = useRouter();

return (
<Box
sx={{
height: "85vh",
opacity: 0.9,
filter: "brightness(0.9)",
position: "relative",
top: 0,
zIndex: 0,
display: "flex",
justifyContent: "center",
alignContent: "center",
alignItems: "center",
bgcolor: "black",
flexDirection: "column",
}}
>

  <Button onClick={() => router.push("/dashboard")}>
    <Image
      src="/images/logo.png"
      width="100%"
      height="100%"
      priority="true"
    />
  </Button>
  <DynamicComponentWithNoSSR />
</Box>

);
}

export default Home;
4. When we run the project and click on login button getting error:

• Move default adapters out of web3auth package (added in #14 )
• Use web3auth provider for wallet connect (added in #19 )
• Migrate modal UI code to react