[Archive] Modal doesn't show rightly

Embedded Wallets (Web3Auth)
1

:classical_building: Archived Content from Web3Auth Community

This topic was originally posted by sazhang0928 on 11/16/2023.
This content has been migrated from our previous community forum to preserve valuable discussions.

When asking for help in this category, please make sure to provide the following details:

  • SDK Version:
{
  "name": "xxxx",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.17",
    "@rainbow-me/rainbowkit": "^1.2.0",
    "@safe-global/auth-kit": "^1.2.1",
    "@web3auth/base": "^7.1.0",
    "@web3auth/modal": "^7.1.1",
    "@web3auth/openlogin-adapter": "^7.1.1",
    "clsx": "^2.0.0",
    "next": "14.0.2",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.48.2",
    "viem": "^1.18.9",
    "wagmi": "^1.4.6"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.2",
    "postcss": "^8",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

  • Platform: nextjs

  • Browser Console Screenshots:

  • If the issue is related to Custom Authentication, please include the following information (optional):

    • Verifier Name:
    • JWKS Endpoint:
    • Sample idToken (JWT):
import { Web3AuthModalPack, Web3AuthConfig } from '@safe-global/auth-kit'
import { Web3Auth, Web3AuthOptions } from '@web3auth/modal'
import { CHAIN_NAMESPACES, IProvider, WALLET_ADAPTERS } from "@web3auth/base";
import { OpenloginAdapter } from '@web3auth/openlogin-adapter'
import { useEffect, useState } from 'react';

const web3AuthConfig: Web3AuthConfig = {

txServiceUrl: ‘https://safe-transaction-goerli.safe.global’

}


// Instantiate and initialize the pack

const web3AuthModalPack = new Web3AuthModalPack(web3AuthConfig)


export default function Test() {

const [donation, setDonation] = useState(0);

const clientId =

process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID ??

“BOZ_Bpk52QEjIZheU6fcq3e8ZGsHaoJizs7vbT5HPJN9cITsnR6ky2CFV3jvor_yKt42wk44sNYmPdXSfKhcSow”;

// never mind,it’s in testnet and, I will change it later.

const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null);

const [provider, setProvider] = useState<IProvider | null>(null);

const [address, setAddress] = useState<string>(“”);

const modalConfig = {

[WALLET_ADAPTERS.TORUS_EVM]: {

label: ‘torus’,

showOnModal: false

},

[WALLET_ADAPTERS.METAMASK]: {

label: ‘metamask’,

showOnDesktop: true,

showOnMobile: false

}

}

const options: Web3AuthOptions = {

clientId,

web3AuthNetwork: “testnet”,

chainConfig: {

chainNamespace: CHAIN_NAMESPACES.EIP155,

chainId: “0x5”,

rpcTarget: “https://rpc.ankr.com/eth_goerli”,

},

// uiConfig: {

//     // theme: ‘dark’,

//     loginMethodsOrder: [‘google’, ‘facebook’]

// }

}

const openloginAdapter = new OpenloginAdapter({

loginSettings: {

mfaLevel: “none”,

},

adapterSettings: {},

});

// const [privateKey, savePrviateKey] = useLocalStorage(“key”, null);

useEffect(() => {

(

async () => {

await web3AuthModalPack.init({ options, adapters: [openloginAdapter], modalConfig })


        }
    )()
}, [])
useEffect(() =&gt; {
    const init = async () =&gt; {
        try {
            const web3auth = new Web3Auth(options);


            web3auth.configureAdapter(openloginAdapter);
            setWeb3auth(web3auth);

            await web3auth.initModal();

            if (web3auth.provider) {
                setProvider(web3auth.provider);
            }
        } catch (error) {
            console.error(error);
        }
    };

    init();
}, []);

const login = async () =&gt; {
    if (!web3auth) {
        return;
    }

    const data = await web3AuthModalPack.signIn()

    console.log("hi~", data);

};
return &lt;div&gt;
    &lt;p&gt;Test&lt;/p&gt;
    &lt;button onClick={() =&gt; { login() }}&gt;handleLogin&lt;/button&gt;
&lt;/div&gt;



}

2

If I delete cide below, it will work properly.

But there is anoter error,

image
image763×772 59.3 KB

so I change my code to this, added CommenKeyPrivider in openloginAdapter.

import { Web3AuthModalPack, Web3AuthConfig } from '@safe-global/auth-kit'
import { Web3Auth, Web3AuthOptions } from '@web3auth/modal'
import { CHAIN_NAMESPACES, IProvider, WALLET_ADAPTERS } from "@web3auth/base";
import { OpenloginAdapter, CommenKeyPrivider } from '@web3auth/openlogin-adapter'
import { useEffect, useState } from 'react';
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import { CommonPrivateKeyProvider } from "@web3auth/base-provider";
const web3AuthConfig: Web3AuthConfig = {
    txServiceUrl: 'https://safe-transaction-goerli.safe.global'
}

// Instantiate and initialize the pack

const web3AuthModalPack = new Web3AuthModalPack(web3AuthConfig)


export default function Test() {

const [donation, setDonation] = useState(0);

const clientId =

process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID ??

“BOZ_Bpk52QEjIZheU6fcq3e8ZGsHaoJizs7vbT5HPJN9cITsnR6ky2CFV3jvor_yKt42wk44sNYmPdXSfKhcSow”;

const [web3auth, setWeb3auth] = useState<Web3Auth | null>(null);

const [provider, setProvider] = useState<IProvider | null>(null);

const [address, setAddress] = useState<string>(“”);

const modalConfig = {

[WALLET_ADAPTERS.TORUS_EVM]: {

label: ‘torus’,

showOnModal: false

},

[WALLET_ADAPTERS.METAMASK]: {

label: ‘metamask’,

showOnDesktop: true,

showOnMobile: false

}

}

const chainConfig = {

chainNamespace: CHAIN_NAMESPACES.EIP155,

chainId: “0x1”,

rpcTarget: “https://rpc.ankr.com/eth”,

displayName: “Ethereum Mainnet”,

blockExplorer: “https://goerli.etherscan.io”,

ticker: “ETH”,

tickerName: “Ethereum”,

};

const options: Web3AuthOptions = {

clientId,

web3AuthNetwork: “testnet”,

chainConfig: chainConfig,

// uiConfig: {

//     // theme: ‘dark’,

//     loginMethodsOrder: [‘google’, ‘facebook’]

// }

}

const privateKeyProvider = new CommonPrivateKeyProvider({

config: { chainConfig },

});

const openloginAdapter = new OpenloginAdapter({

loginSettings: {

mfaLevel: “none”,

},

adapterSettings: {},

privateKeyProvider,

});

// const [privateKey, savePrviateKey] = useLocalStorage(“key”, null);

useEffect(() => {

(

async () => {

const web3auth = new Web3Auth(options);


            web3auth.configureAdapter(openloginAdapter);
            await web3auth.initModal();

            const res = await web3AuthModalPack.init({ options, adapters: [openloginAdapter], modalConfig })
            console.log(res)
        }
    )()
}, [])

const login = async () =&gt; {


    const data = await web3AuthModalPack.signIn()

    console.log("hi~", data);

};
return &lt;div&gt;
    &lt;p&gt;Test&lt;/p&gt;
    &lt;button onClick={() =&gt; { login() }}&gt;handleLogin&lt;/button&gt;
&lt;/div&gt;



}

But still bit work… Internal JSON-RPC error. happened and I have no idea to fix it.

3

@sazhang0928 Welcome Aboard!

Your issue has been forwarded to our Dev team and we will get back with further updates.

4

Hey @sazhang0928

Are you using @safe-global/auth-kit? If so, the current version will show a peer dependency issue.

I request you to use the default version of auth-kit or use entirely the web3auth latest version.