When asking for help in this category, please make sure to provide the following details:
- SDK Version: 7.3.1
- Platform: Mac
- Browser Console Screenshots:
Also, kindly provide the Web3Auth initialization and login code snippet below. This will help us better understand your issue and provide you with the necessary assistance.
"use client";
// Web3AuthContext.tsx
import React, {createContext, useEffect, useState} from "react";
import {Web3AuthNoModal} from "@web3auth/no-modal";
import RPC from "../web3auth/web3RPC";
import {EthereumPrivateKeyProvider} from "@web3auth/ethereum-provider";
import {
CHAIN_NAMESPACES,
IProvider,
ADAPTER_EVENTS,
WALLET_ADAPTERS,
CONNECTED_EVENT_DATA,
ADAPTER_STATUS,
} from "@web3auth/base";
import {OpenloginAdapter, OpenloginUserInfo} from "@web3auth/openlogin-adapter";
// import {subscribeAuthEvents} from "../web3auth/Web3AuthHelpers";
import {
getPolygonAddress,
getBnbAddress,
getSolanaAddress,
getTezosAddress,
getStarkExAddress,
getStarkNetAddress,
getPolkadotAddress,
getEthereumAddress,
} from "../web3auth/ChainProviders";
import {error} from "console";
interface Web3AuthContextType {
web3auth: Web3AuthNoModal | null;
login: () => Promise<void>;
logout: () => Promise<void>;
isLoading: boolean;
isLoggedIn: boolean;
user: Partial<OpenloginUserInfo> | null;
authenticateUser: () => Promise<void>;
sendTransaction: () => Promise<void>;
signMessage: () => Promise<void>;
userAccounts: {
polygon: string;
bnb: string;
solana: string;
tezos: string | undefined;
starkEx: string;
starkNet: string;
polkadot: string | undefined;
} | null;
}
const Web3AuthContext = createContext<Web3AuthContextType | undefined>(
undefined
);
interface Web3AuthProviderProps {
children: React.ReactNode;
}
export const Web3AuthProvider: React.FC<Web3AuthProviderProps> = ({
children,
}) => {
const [web3auth, setWeb3Auth] = useState<Web3AuthNoModal | null>(null);
const [provider, setProvider] = useState<IProvider | null>(null);
const [isLoading, setIsLoading] = useState<boolean>(false);
const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
const [user, setUser] = useState<Partial<OpenloginUserInfo> | null>(null);
const [userAccounts, setUserAccounts] = useState<{
polygon: string;
bnb: string;
solana: string;
tezos: string | undefined;
starkEx: string;
starkNet: string;
polkadot: string | undefined;
} | null>(null);
useEffect(() => {
const init = async () => {
try {
const clientId =
client_id
// ETH_Goerli
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 web3authInstance: Web3AuthNoModal = new Web3AuthNoModal({
clientId,
chainConfig,
web3AuthNetwork: "sapphire_devnet",
});
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: {chainConfig},
});
const openloginAdapter = new OpenloginAdapter({
privateKeyProvider: privateKeyProvider,
loginSettings: {
mfaLevel: "mandatory",
},
adapterSettings: {
whiteLabel: {
appName: "Your app Name",
logoLight: "https://web3auth.io/images/web3auth-logo.svg",
logoDark: "https://web3auth.io/images/web3auth-logo---Dark.svg",
defaultLanguage: "en",
mode: "auto", // "light" or "dark" or "auto"
},
loginConfig: {
google: {
name: "google",
verifier: "google_auth",
typeOfLogin: "google",
clientId:
"googleclient_id",
},
},
mfaSettings: {
deviceShareFactor: {
enable: true,
priority: 1,
mandatory: true,
},
backUpShareFactor: {
enable: true,
priority: 2,
mandatory: false,
},
socialBackupFactor: {
enable: true,
priority: 3,
mandatory: false,
},
passwordFactor: {
enable: true,
priority: 4,
mandatory: false,
},
},
},
});
web3authInstance.configureAdapter(openloginAdapter);
await web3authInstance.init();
subscribeAuthEvents(web3authInstance);
setWeb3Auth(web3authInstance);
setProvider(web3authInstance.provider);
} catch (error) {
console.error(error);
}
};
init();
};
}, []);
const handleLogin = async () => {
if (!web3auth) {
console.log("web3auth not initialized yet");
return;
}
try {
setIsLoading(true);
console.log(!!web3auth);
console.log("before :", isLoading, isLoggedIn);
if (web3auth.status !== ADAPTER_STATUS.CONNECTED) {
await web3auth.connectTo(WALLET_ADAPTERS.OPENLOGIN, {
loginProvider: "google",
});
setIsLoading(false);
setIsLoggedIn(true);
return;
}
const web3authProvider = await web3auth.connectTo(
WALLET_ADAPTERS.OPENLOGIN,
{
loginProvider: "google",
}
);
console.log("Logged in Successfully!");
setIsLoading(false);
setIsLoggedIn(true);
setProvider(web3authProvider);
const loggedInUser = await web3auth?.getUserInfo();
setUser(loggedInUser);
const accounts = await fetchUserAccounts(provider);
setUserAccounts(accounts);
console.log(isLoggedIn);
} catch (error) {
console.log("error: ", error);
}
};
const handleLogout = async () => {
if (!web3auth) {
console.log("web3auth not initialized yet");
return;
}
await web3auth.logout();
setWeb3Auth(null);
setProvider(null);
setUser(null); // Clear user data on logout
setUserAccounts(null);
setIsLoading(false);
setIsLoggedIn(false);
};
const subscribeAuthEvents = (web3auth: Web3AuthNoModal): void => {
web3auth.on(ADAPTER_EVENTS.CONNECTED, (data: CONNECTED_EVENT_DATA) => {
console.log("connected to wallet", data);
// web3auth.provider will be available here after the user is connected
});
web3auth.on(ADAPTER_EVENTS.CONNECTING, () => {
console.log("connecting");
});
web3auth.on(ADAPTER_EVENTS.DISCONNECTED, () => {
console.log("disconnected");
});
web3auth.on(ADAPTER_EVENTS.ERRORED, (error) => {
console.log("error", error);
});
};
const fetchUserAccounts = async (provider: IProvider | null) => {
try {
const polygon = await getPolygonAddress(provider);
const bnb = await getBnbAddress(provider);
const solana = await getSolanaAddress(provider);
const tezos = await getTezosAddress(provider);
const starkEx = await getStarkExAddress(provider);
const starkNet = await getStarkNetAddress(provider);
const polkadot = await getPolkadotAddress(provider);
const ethereum = await getEthereumAddress(provider);
return {
polygon,
bnb,
solana,
tezos,
starkEx,
starkNet,
polkadot,
ethereum,
};
} catch (error) {
console.error("Error fetching user accounts:", error);
return null;
}
};
const authenticateUser = async () => {
try {
if (!web3auth) {
console.log("web3auth not initialized yet");
return;
}
const idToken = await web3auth.authenticateUser();
console.log(idToken);
} catch (error) {
console.log("Authentication error: " + error);
}
};
const sendTransaction = async () => {
try {
if (!provider) {
console.log("provider not initialized yet");
return;
}
const rpc = new RPC(provider);
const receipt = await rpc.sendTransaction();
console.log(receipt);
} catch (error) {
console.log("Send Transaction error: " + error);
}
};
const signMessage = async () => {
try {
if (!provider) {
console.log("provider not initialized yet");
return;
}
const rpc = new RPC(provider);
const signedMessage = await rpc.signMessage();
console.log(signedMessage);
} catch (error) {
console.log("Sign Message error: " + error);
}
};
return (
<Web3AuthContext.Provider
value={{
web3auth,
login: handleLogin,
logout: handleLogout,
isLoading,
isLoggedIn,
user,
userAccounts,
authenticateUser,
sendTransaction,
signMessage,
}}
>
{children}
</Web3AuthContext.Provider>
);
};
export const useWeb3Auth = (): Web3AuthContextType => {
const context = React.useContext(Web3AuthContext);
if (!context) {
throw new Error("useWeb3Auth must be used within a Web3AuthProvider");
}
return context;
};
I’m exporting this as a provider for use in another file with “useWeb3auth()” but for some reason the state for logging in is not updating accordingly and I’m getting a wallet already connected error, and when I logout and try to login again, I get a web3auth not initialized error
