Hi,
First and foremost, I want to express my gratitude for your swift response. I’ve closely followed the steps you provided and wanted to assure you that I’ve already added chrome-extension://{extension-id} to the whitelist section of our project on the Web3auth dashboard.
Additionally, our project is currently set to the sapphire. I’ve double-checked the network configuration in our code to ensure it aligns with our project setup.
Regarding the example for the Chrome browser extension, I’ve made certain to include our Client ID and matched the network settings as per the setup on our project.
import React, { createContext, useEffect, useState, ReactNode } from 'react';
import { Web3AuthNoModal } from '@web3auth/no-modal';
import { CHAIN_NAMESPACES, IProvider } from '@web3auth/base';
import { clientId } from '../../../common/constant/web3-auth';
import { EthereumPrivateKeyProvider } from '@web3auth/ethereum-provider';
import { OpenloginAdapter } from '@web3auth/openlogin-adapter';
interface Web3AuthContextType {
web3auth: Web3AuthNoModal | null;
provider: IProvider | null;
loggedIn: boolean;
logout: () => void;
}
export const Web3AuthContext = createContext<Web3AuthContextType | null>(null);
interface Web3AuthProviderProps {
children: ReactNode;
}
export const Web3AuthProvider: React.FC<Web3AuthProviderProps> = ({ children }) => {
const [web3auth, setWeb3auth] = useState<Web3AuthNoModal | null>(null);
const [provider, setProvider] = useState<IProvider | null>(null);
const [loggedIn, setLoggedIn] = useState(false);
useEffect(() => {
const init = async () => {
try {
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: '0x5', // Please use 0x1 for Mainnet
rpcTarget: 'https://rpc.ankr.com/eth_goerli',
displayName: 'Goerli Testnet',
blockExplorer: 'https://goerli.etherscan.io/',
ticker: 'ETH',
tickerName: 'Ethereum',
};
const web3auth = new Web3AuthNoModal({
clientId,
chainConfig,
web3AuthNetwork: 'sapphire_devnet',
useCoreKitKey: false,
});
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const openloginAdapter = new OpenloginAdapter({
privateKeyProvider,
adapterSettings: {
uxMode: 'redirect',
loginConfig: {
jwt: {
verifier: 'gu-wallet-firebase',
typeOfLogin: 'jwt',
clientId,
},
},
},
});
web3auth.configureAdapter(openloginAdapter);
setWeb3auth(web3auth);
await web3auth.init();
const status = await web3auth.status;
console.log('status: ', status);
setProvider(web3auth.provider);
if (web3auth.connected) {
setLoggedIn(true);
}
} catch (error) {
console.error(error);
}
};
init();
}, []);
const logout = async () => {
if (web3auth) {
await web3auth.logout();
setLoggedIn(false);
}
};
return (
<Web3AuthContext.Provider value={{ web3auth, provider, loggedIn, logout }}>
{children}
</Web3AuthContext.Provider>
);
};
And here is config at Web3Dashboard
