Archived Content from Web3Auth Community
This topic was originally posted by mahmed10.pk on 12/2/2024.
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: 9.4.5
- Platform: web
- Browser Console Screenshots:
- If the issue is related to Custom Authentication, please include the following information (optional):
- Verifier Name: sms-verifier
- JWKS Endpoint:
- Sample idToken (JWT):
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.
import React, { createContext, useContext, useEffect, useState } from "react"; import { IProvider, WALLET_ADAPTERS, WEB3AUTH_NETWORK, IWeb3AuthCoreOptions, IAdapter, } from "@web3auth/base"; import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; import { Web3AuthNoModal } from "@web3auth/no-modal"; import { AuthAdapter } from "@web3auth/auth-adapter"; import { chainConfig, clientId } from "../constants/web3auth";const Web3AuthContext = createContext<any>(null);
export const useWeb3Auth = () => useContext(Web3AuthContext);
export const Web3AuthProvider = ({
children,
}: {
children: React.ReactNode;
}) => {
const [provider, setProvider] = useState<IProvider | null>(null);
const [web3auth, setWeb3auth] = useState<Web3AuthNoModal | null>(null);
const [loggedIn, setLoggedIn] = useState(false);
const [isInitializing, setIsInitializing] = useState(false);useEffect(() => {
const initWeb3Auth = async () => {
try {
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});const web3AuthOptions: IWeb3AuthCoreOptions = { clientId, web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, privateKeyProvider, }; const web3authInstance = new Web3AuthNoModal(web3AuthOptions); const authAdapter = new AuthAdapter({ adapterSettings: { uxMode: "popup", loginConfig: { // SMS Passwordless login sms_passwordless: { verifier: "sms-verifier", // Pass your verifier name here typeOfLogin: "sms_passwordless", }, }, }, }); web3authInstance.configureAdapter(authAdapter); await web3authInstance.init(); setWeb3auth(web3authInstance); setProvider(web3authInstance.provider); if (web3authInstance.connected) { setLoggedIn(true); } } catch (error) { console.error("Error initializing Web3Auth:", error); } }; initWeb3Auth();}, );
const resetAdapter = async (adapter: IAdapter<unknown>) => {
if (!adapter) return;
console.log(
adapter.status === “connected” || adapter.status === “connecting”
);
try {
if (adapter.status === “connected”) {
const check = await adapter.disconnect();
console.log(“~ resetAdapter ~ check:”, check, adapter.status);
}await adapter.init({ autoConnect: false }); console.log("Adapter reset successfully."); } catch (error) { console.error("Failed to reset adapter:", error); }};
const login = async () => {
if (isInitializing || !web3auth) {
console.log(“Web3Auth is still initializing. Please wait…”);
return;
}const adapter = web3auth.getAdapter(WALLET_ADAPTERS.AUTH); if (adapter?.status === "connecting") { console.log("Resetting adapter stuck in 'connecting' state."); await resetAdapter(adapter); } try { // const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, { // loginProvider: "google", // }); const web3authProvider = await web3auth.connectTo(WALLET_ADAPTERS.AUTH, { loginProvider: "sms_passwordless", extraLoginOptions: { login_hint: "+358-417216920" }, }); // focus-end setProvider(web3authProvider); if (web3auth.connected) { setLoggedIn(true); } } catch (error) { console.error("Login failed:", error); }};
const logout = async () => {
if (!web3auth) {
console.error(“Web3Auth is not initialized”);
return;
}try { await web3auth.logout(); setProvider(null); setLoggedIn(false); } catch (error) { console.error("Logout failed:", error); }};
const getUserInfo = async () => {
if (!web3auth) {
console.error(“Web3Auth is not initialized”);
return;
}try { const user = await web3auth.getUserInfo(); console.log("User Info:", user); } catch (error) { console.error("Failed to get user info:", error); }};
const reinitializeWeb3Auth = async () => {
if (!web3auth || isInitializing) return;setIsInitializing(true); try { if (web3auth.connected) { await web3auth.logout(); } await web3auth.init(); } catch (error) { console.error("Error during Web3Auth reinitialization:", error); } finally { setIsInitializing(false); }};
return (
<Web3AuthContext.Provider
value={{
provider,
web3auth,
loggedIn,
login,
logout,
getUserInfo,
}}
>
{children}
</Web3AuthContext.Provider>
);
};
