Modal doesn't show rightly

Help - Plug n Play PnP Web SDKs
1

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:

    image
    image807×732 28 KB

  • 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(() => {
        const init = async () => {
            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 () => {
        if (!web3auth) {
            return;
        }

        const data = await web3AuthModalPack.signIn()

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

    };
    return <div>
        <p>Test</p>
        <button onClick={() => { login() }}>handleLogin</button>
    </div>
}
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 () => {


        const data = await web3AuthModalPack.signIn()

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

    };
    return <div>
        <p>Test</p>
        <button onClick={() => { login() }}>handleLogin</button>
    </div>
}

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.

1 Like