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>
);
};
