Archived Content from Web3Auth Community
This topic was originally posted by bsrinath4839 on 11/27/2024.
This content has been migrated from our previous community forum to preserve valuable discussions.
When I connect at first time that when I call loginWithGoogle or loginWithEmail and login.
The console CONNECTING and CONNECTED is coming multiple times and fetchAddress is getting called multiple times.
Any solution for this?
- SDK Version(package.json):
"@web3auth/auth-adapter": "^9.4.0", "@web3auth/base": "^9.4.0", "@web3auth/base-provider": "^9.4.0", "@web3auth/no-modal": "^9.4.0",
import { useCallback, useEffect, useState } from "react"; import { useDispatch, useSelector } from "react-redux"; import { CommonPrivateKeyProvider } from "@web3auth/base-provider"; import { Web3AuthNoModal as Web3Auth } from "@web3auth/no-modal"; import { ADAPTER_EVENTS, WALLET_ADAPTERS, WEB3AUTH_NETWORK } from "@web3auth/base"; import { AuthAdapter } from "@web3auth/auth-adapter"; import { UPDATE_AUTH_DETAILS } from "@reducers/account.reducer"; import { AUTH_TYPES, KEPLER_WEBSITE_LINK, chainID, web3AuthChainConfig, web3AuthCliedId } from "@root/constants"; import { getPublicCompressed } from "@toruslabs/eccrypto"; import accountServices from "@services/account.services";let web3auth;
const initWeb3Auth = async () => {
try {
const privateKeyProvider = new CommonPrivateKeyProvider({
config: { chainConfig: web3AuthChainConfig },
});web3auth = new Web3Auth({ clientId: web3AuthCliedId, privateKeyProvider, web3AuthNetwork: WEB3AUTH_NETWORK.SAPPHIRE_DEVNET, }); const authAdapter = new AuthAdapter({ adapterSettings: {}, }); web3auth.configureAdapter(authAdapter); await web3auth.init();} catch (error) {
console.log(“ERROR_INIT_WEB3AUTH”, error);
}
};
initWeb3Auth();const useAuth = () => {
const dispatch = useDispatch();
const [loading, setLoading] = useState(false);
const { accessToken, address, authProvider } = useSelector(state => state.account.auth);const loginWithKeplr = async () => {
try {
if (!window.keplr) {
window.open(KEPLER_WEBSITE_LINK);
return;
}
await window.keplr.enable(chainID);
const offlineSigner = window.keplr.getOfflineSigner(chainID);
const accounts = await offlineSigner.getAccounts();
const address = accounts[0].address;
dispatch(UPDATE_AUTH_DETAILS({ accessToken: “”, address, authProvider: AUTH_TYPES.KEPLR }));
} catch (e) {
console.log(“ERROR_loginWithKeplr”, e);
}
};const loginWithGoogle = async () => {
try {
if (!web3auth) { return;}
await web3auth.connectTo(WALLET_ADAPTERS.AUTH, { loginProvider: “google” });
} catch (e) {
console.log(“ERROR_loginWithGoogle”, e);
}
};const loginWithEmail = async (email) => {
try {
if (!web3auth) { return;}
await web3auth.connectTo(WALLET_ADAPTERS.AUTH, { extraLoginOptions: { login_hint: email }, loginProvider: “email_passwordless” });
} catch (e) {
console.log(“ERROR_loginWithGoogle”, e);}};
const logout = useCallback( async () => {
try {
if (!web3auth) { return; }
if (window.keplr) {
await window.keplr.disable();
dispatch(UPDATE_AUTH_DETAILS({ accessToken: “”, address: “”, authProvider: AUTH_TYPES.NONE }));
}
if (accessToken && accessToken.length > 0) {
await web3auth.logout();
}
} catch (e) {
console.log(e);
}
}, [accessToken, dispatch]);useEffect(() => {
const fetchAddress = async () => {
try {
if (accessToken && accessToken.length > 0 && [AUTH_TYPES.EMAIL_PASSWORDLESS, AUTH_TYPES.GOOGLE].includes(authProvider)) {
const details = await accountServices.fetchUserDetailsWithPublicKey({ publicKey:${accessToken}});
const expiresIn = new Date(details?.expiredAt) - new Date();
if (expiresIn > 0) {
if (address.length === 0 && address !== details.sentinelAddress) {
dispatch(UPDATE_AUTH_DETAILS({ address: details.sentinelAddress }));
}
return;
}
logout();
return;
}
} catch (e) {
console.log(“ERROR_fetchAddress”, e);
return;
} finally {
setLoading(false);
}
};
fetchAddress();
}, [accessToken, address, authProvider, dispatch, logout]);const handleConnecting = () => {
console.log(“-- CONNECTING --”);
setLoading(true);
};const handleConnected = useCallback(async () => {
console.log(“-- CONNECTED --”);
const user = await web3auth.getUserInfo();
const idToken = await web3auth.authenticateUser();
const privateKey = await web3auth.provider.request({ method: “private_key” });if (privateKey) { const appPubKey = getPublicCompressed(Buffer.from(privateKey.padStart(64, "0"), "hex")).toString("hex"); const token = await accountServices.fetchPublicKey({ appPubKey, idToken: idToken.idToken }); if (accessToken !== token && user.typeOfLogin !== authProvider) { dispatch(UPDATE_AUTH_DETAILS({ accessToken: token, authProvider: user.typeOfLogin })); } }}, [accessToken, authProvider, dispatch]);
const handleDisconnected = useCallback(() => {
console.log(“-- DISCONNECTED --”);
dispatch(UPDATE_AUTH_DETAILS({ accessToken: “”, address: “”, authProvider: AUTH_TYPES.NONE }));
}, [dispatch]);const handleErrored = () => {
console.log(“-- ERRORED --”);
setLoading(false);
};useEffect(() => {
web3auth.on(ADAPTER_EVENTS.CONNECTING, handleConnecting);
web3auth.on(ADAPTER_EVENTS.CONNECTED, handleConnected);
web3auth.on(ADAPTER_EVENTS.DISCONNECTED, handleDisconnected);
web3auth.on(ADAPTER_EVENTS.ERRORED, handleErrored);return () => { web3auth.off(ADAPTER_EVENTS.CONNECTING, handleConnecting); web3auth.off(ADAPTER_EVENTS.CONNECTED, handleConnected); web3auth.off(ADAPTER_EVENTS.DISCONNECTED, handleDisconnected); web3auth.off(ADAPTER_EVENTS.ERRORED, handleErrored); };}, [dispatch, handleConnected, handleDisconnected]);
return { loading, loginWithEmail, loginWithGoogle, loginWithKeplr, logout };
};
export default useAuth;