// Web3AuthProvider.jsx
import React, { createContext, useContext, useState, useEffect } from “react”;
import { Web3Auth } from “@web3auth/modal”;
import { CHAIN_NAMESPACES } from “@web3auth/base”;
import { OpenloginAdapter } from “@web3auth/openlogin-adapter”;
import { EthereumPrivateKeyProvider } from “@web3auth/ethereum-provider”;
const Web3AuthContext = createContext();
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: “0xaa36a7”,
rpcTarget: “https://rpc.ankr.com/eth_sepolia”,
// Avoid using public rpcTarget in production.
// Use services like Infura, Quicknode etc
displayName: “Ethereum Sepolia Testnet”,
blockExplorerUrl: “https://sepolia.etherscan.io”,
ticker: “ETH”,
tickerName: “Ethereum”,
logo: “https://cryptologos.cc/logos/ethereum-eth-logo.png”,
};
const Web3AuthProvider = ({ children }) => {
const [web3auth, setWeb3auth] = useState(null);
const [user, setUser] = useState(null);
const [isLoading, setIsLoading] = useState(true);
const [isReady, setIsReady] = useState(false);
const [initializationError, setInitializationError] = useState(null);
useEffect(() => {
let mounted = true;
const init = async () => {
try {
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
const web3auth = new Web3Auth({
clientId:
"BAuX9b2uRpOyTHye2LXca5ocgI5hG4q-usWtp6QL9Bm2Ezd2XvpH3LjWhSKwalqdc_EA68btSnwpi--_qtBenhw",
web3AuthNetwork: "sapphire_devnet",
chainConfig: chainConfig,
privateKeyProvider,
enableLogging: false,
});
web3auth.on("connected", async () => {
console.log("Web3Auth connected");
if (mounted) {
setIsReady(true);
try {
const userData = await web3auth.getUserInfo();
const userType = localStorage.getItem("userType");
if (userType) {
setUser({ ...userData, type: userType });
}
} catch (error) {
console.warn("Error getting user info:", error);
}
}
});
web3auth.on("disconnected", () => {
if (mounted) {
setUser(null);
localStorage.removeItem("userType");
setIsReady(true);
}
});
const openloginAdapter = new OpenloginAdapter({
privateKeyProvider,
chainConfig: chainConfig,
adapterSettings: {
network: "sapphire_devnet",
iframeUrl: "https://beta.openlogin.com",
uxMode: "popup",
loginConfig: {
jwt: {
verifier: "contract-dapp-test",
typeOfLogin: "jwt",
clientId:
"595659542544-213hls7eoaft0u5scu2ab00o5b4uip62.apps.googleusercontent.com",
},
},
},
});
web3auth.configureAdapter(openloginAdapter);
// Initialize with retries
let initRetries = 0;
const maxRetries = 3;
let initialized = false;
while (initRetries < maxRetries && !initialized && mounted) {
try {
await web3auth.initModal();
initialized = true;
if (mounted) {
setWeb3auth(web3auth);
setIsReady(true);
setInitializationError(null);
}
} catch (error) {
initRetries++;
console.warn(
`Initialization attempt ${initRetries} failed:`,
error
);
if (initRetries === maxRetries) {
if (mounted) {
setInitializationError(
"Failed to initialize Web3Auth. Please refresh the page and try again."
);
}
} else {
await new Promise((resolve) => setTimeout(resolve, 1500));
}
}
}
} catch (error) {
console.error("Error in Web3Auth setup:", error);
if (mounted) {
setInitializationError(
"Failed to setup Web3Auth. Please check your connection and try again."
);
}
} finally {
if (mounted) {
setIsLoading(false);
}
}
};
init();
return () => {
mounted = false;
if (web3auth) {
web3auth.removeAllListeners();
}
};
}, []);
const login = async (selectedUserType) => {
if (!web3auth) {
throw new Error(“Web3Auth not initialized yet. Please wait…”);
}
if (!isReady) {
throw new Error("Please wait while we set up your secure connection...");
}
try {
const web3authProvider = await web3auth.connect();
if (!web3authProvider) {
throw new Error("Could not connect to wallet. Please try again.");
}
const userData = await web3auth.getUserInfo();
const userWithType = { ...userData, type: selectedUserType };
localStorage.setItem("userType", selectedUserType);
setUser(userWithType);
return userWithType;
} catch (error) {
console.error("Login error:", error);
localStorage.removeItem("userType");
throw new Error(
error.message || "Failed to connect wallet. Please try again."
);
}
};
const logout = async () => {
if (!web3auth) {
throw new Error(“Web3Auth not initialized”);
}
await web3auth.logout();
setUser(null);
localStorage.removeItem("userType");
};
return (
<Web3AuthContext.Provider
value={{ user, login, logout, isLoading, isReady, initializationError }}
>
{children}
</Web3AuthContext.Provider>
);
};
const useWeb3Auth = () => {
const context = useContext(Web3AuthContext);
if (!context) {
throw new Error(“useWeb3Auth must be used within a Web3AuthProvider”);
}
return context;
};
export { Web3AuthProvider, useWeb3Auth };
this above is my web3auth provider code , error is Error: unspecified network and iframeUrl i m using the sapphire_devnet, is this used for the testing in my local environment
please give the solution
