logout when connected with social login or passwordless

[Felix-Asante]

For some reasons when i connect to my app with openlogin social login i cannot logout. i get an error which no wallet connected even though i am logged in. any solutions for this problem?

version of packages
"@web3auth/base": "^2.1.3",
"@web3auth/core": "^2.1.3",
"@web3auth/openlogin-adapter": "^2.1.3",
"@web3auth/torus-wallet-connector-plugin": "^2.1.3",
"@web3auth/web3auth": "^2.1.3",

[rinzler99]

Hey, Thanks for reaching out. Can you please share code snippet for login and logout methods?

[rinzler99]

Also, please share consol logs.

[Felix-Asante]

LOGIN CODE
`import { useEffect, useRef, useState } from "react";
import { Web3Auth } from "@web3auth/web3auth";
import {
WALLET_ADAPTERS,
CHAIN_NAMESPACES,
ADAPTER_EVENTS,
} from "@web3auth/base";
import { Web3AuthCore } from "@web3auth/core";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import RPC from "../web3RPC";
import { toast } from "react-toastify";
import { alreadyHasAccount } from "../../lib/auth/AlreadyHasAnAccount";
import cookie from "js-cookie";
import { fetchUserProfile } from "../../lib/fetchUserProfile";
import { USER_ROLES } from "../../utils/constants";
import { createUser } from "../../lib/auth/createUser";
import { useRouter } from "next/router";
const clientId = process.env.NEXT_PUBLIC_WEB3AUTH_CLIENT_ID;
import { useAuthContext } from "../../context/auth";
export function useAuth() {
const [web3auth, setWeb3auth] = useState(null);
const [loggedInProvider, setLoggedInProvider] = useState(null);
const [openTermsAndCondition, setOpenTermsAndCondition] = useState(false);
const [user, setUser] = useState({});
const [status, setStatus] = useState(200);
const provider = useRef();
const web3authRef = useRef(null);
const { push } = useRouter();
const { updateUser, setActiveProvider, setAuthPageLoading } =
useAuthContext();
const toggleTermsModal = () => setOpenTermsAndCondition((isOpen) => !isOpen);

useEffect(() => {
	setAuthPageLoading(true);
	const init = async () => {
		try {
			const web3auth = new Web3Auth({
				clientId,
				chainConfig: {
					chainNamespace: CHAIN_NAMESPACES.EIP155,
					chainId: process.env.NEXT_PUBLIC_CHAIN_ID,
					rpcTarget: process.env.NEXT_PUBLIC_RPC,
				},
				uiConfig: {
					theme: "light",
					loginMethodsOrder: ["google", "facebook"],
					appLogo:
						"https://res.cloudinary.com/fedev/image/upload/v1665819770/moment/logo-dark_pskepb.png", // Your App Logo Here
				},
				sessionTime: 86400 * 7,
			});

			const openloginAdapter = new OpenloginAdapter({
				adapterSettings: {
					clientId,
					network: "testnet",
					uxMode: "popup",
					whiteLabel: {
						name: "MO:ME:NT",
						logoLight:
							"https://res.cloudinary.com/fedev/image/upload/v1665819770/moment/logo-dark_pskepb.png",
						logoDark:
							"https://res.cloudinary.com/fedev/image/upload/v1665819770/moment/logo-dark_pskepb.png",
						defaultLanguage: "en",
					},
				},
				loginSettings: {
					mfaLevel: "none",
					sessionTime: 86400 * 7,
				},
			});
			web3auth.configureAdapter(openloginAdapter);
			web3authRef.current = web3auth;
			setWeb3auth(web3auth);
			await web3auth.initModal({
				modalConfig: {
					[WALLET_ADAPTERS.OPENLOGIN]: {
						label: "openlogin",
						loginMethods: {
							reddit: {
								showOnModal: false,
								name: "reddit",
							},
							twitch: {
								showOnModal: false,
								name: "twitch",
							},
							github: {
								showOnModal: false,
								name: "github",
							},
							twitter: {
								showOnModal: false,
								name: "twitter",
							},
							apple: {
								showOnModal: false,
								name: "apple",
							},
							discord: {
								showOnModal: false,
								name: "discord",
							},
							line: {
								showOnModal: false,
								name: "line",
							},
							weibo: {
								showOnModal: false,
								name: "weibo",
							},
							kakao: {
								showOnModal: false,
								name: "kakao",
							},
							wechat: {
								showOnModal: false,
								name: "wechat",
							},
							linkedin: {
								showOnModal: false,
								name: "linkedin",
							},
						},
					},
					"wallet-connect-v1": {
						showOnModal: false,
					},
					"torus-evm": {
						showOnModal: false,
					},
				},
				loginConfig: {
					google: {
						name: "google-auth",
						verifier: "web3auth-google-testnet",
						typeOfLogin: "google",
						clientId:
							"230706315408-dsul35s5ep1l794vn5s5sdvdkt4kctbq.apps.googleusercontent.com",
					},
				},
			});
			if (web3auth.provider) {
				provider.current = web3auth.provider;
				setLoggedInProvider(web3auth.provider);
				setActiveProvider(web3auth.provider);
				const userId = cookie.get("userKey");
				const userData = await fetchUserProfile(userId);
				const authenticatedUser = { ...userData, isAuthenticated: true };
				updateUser(authenticatedUser);
				setAuthPageLoading(false);
				setUser(authenticatedUser);
			} else {
				setAuthPageLoading(false);
			}
		} catch (error) {
			console.error(error);
		}
	};

	init();
}, []);

const getUserInfo = async () => {
	if (!web3authRef.current) {
		toast.error("web3auth not initialized yet");
		return {};
	}
	try {
		const user = await web3authRef?.current?.getUserInfo();
		return user;
	} catch (error) {
		toast.error(error?.message);
	}
};
const getUserTokenId = async () => {
	if (!web3authRef.current) {
		toast.error("web3auth not initialized yet");
		return;
	}
	try {
		const token = await web3authRef?.current?.authenticateUser();
		return token;
	} catch (error) {
		toast.error(error?.message);
	}
};

const logout = async () => {
	if (!web3authRef.current) {
		toast.error("web3auth not initialized yet");
		return;
	}
	try {
		await web3auth.logout();
		web3authRef.current = null;
		provider.current = null;
		setUser({});
		updateUser({});
		cookie.set("userKey", null);
		setLoggedInProvider(null);
		setActiveProvider(null);
		cookie.set("loginMethod", null);
		push("/");
	} catch (error) {
		toast.error(error.message);
	}
};

const getChainId = async () => {
	if (!provider.current) {
		toast.error("provider not initialized yet");
		return;
	}
	const rpc = new RPC(provider.current);
	const chainId = await rpc.getChainId();
	return chainId;
};
const getAccounts = async () => {
	if (!provider.current) {
		toast.error("provider not initialized yet");
		return;
	}
	const rpc = new RPC(provider.current);
	const address = await rpc.getAccounts();
	return address;
};

const getBalance = async () => {
	if (!provider.current) {
		toast.error("provider not initialized yet");
		return;
	}
	const rpc = new RPC(provider.current);
	const balance = await rpc.getBalance();
	return balance;
};

const sendTransaction = async () => {
	if (!provider.current) {
		toast.error("provider not initialized yet");
		return;
	}
	const rpc = new RPC(provider.current);
	const receipt = await rpc.sendTransaction();
	return receipt;
};

const signMessage = async () => {
	if (!provider.current) {
		toast.error("provider not initialized yet");
		return;
	}
	const rpc = new RPC(provider.current);
	const signedMessage = await rpc.signMessage();
	return signedMessage;
};

const getPrivateKey = async () => {
	if (!provider.current) {
		toast.error("provider not initialized yet");
		return;
	}
	const rpc = new RPC(provider.current);
	const privateKey = await rpc.getPrivateKey();
	return privateKey;
};
const login = async (
	inviterId = "",
	email = "",
	userRole = USER_ROLES.COLLECTOR
) => {
	if (!web3auth) {
		toast.error("web3auth not initialized yet");
	}
	try {
		// console.log("web3Auth", web3auth);
		// console.log("web3Auth connect", web3auth);
		const web3authProvider = await web3auth.connect();
		provider.current = web3authProvider;
		setLoggedInProvider(web3authProvider);
		setActiveProvider(web3authProvider);
		// cookie.set("authProvider", web3authProvider);
		const account = await getAccounts();
		const loggedWithSocialAccount = await getUserInfo();
		if (Object.keys(loggedWithSocialAccount).length > 0) {
			cookie.set("loginMethod", "social");
		} else {
			cookie.set("loginMethod", "externalWallet");
		}
		const fetchedUser = await alreadyHasAccount(account);
		await getUserTokenId();
		setUser({
			...user,
			...fetchedUser,
			isAuthenticated: true,
		});
		updateUser({
			...user,
			...fetchedUser,
			isAuthenticated: true,
		});
		cookie.set("userKey", fetchedUser.id);
		setLoggedInProvider(web3authProvider);
		setActiveProvider(web3authProvider);
	} catch (error) {
		if (error?.response?.status === 404) {
			const account = await getAccounts();
			const loggedWithSocialAccount = await getUserInfo();
			const token = await getUserTokenId();
			try {
				const data = {
					walletAddress: account,
					username: account.slice(0, 5),
					roles: userRole?.toLowerCase(),
				};
				if (email?.length > 0) {
					data.email = email;
				}
				if (inviterId?.length > 0) {
					data.invitedBy = inviterId;
				}
				// console.log("login data", data);
				let header = {};
				header =
					cookie.get("loginMethod") === "externalWallet"
						? {
								"public-address": account,
								Authorization: `Bearer ${token.idToken}`,
						  }
						: {
								"application-public-key": loggedWithSocialAccount?.idToken,
								Authorization: `Bearer ${token.idToken}`,
						  };

				const result = await createUser(data, header);
				const newUser = await fetchUserProfile(result.id);
				setUser({ ...newUser, isAuthenticated: true });
				updateUser({ ...newUser, isAuthenticated: true });
				cookie.set("Agreed", false);
				cookie.set("userKey", result.id);
				await getUserTokenId();
				push("/agree-to-terms?q=new");
			} catch (error) {
				console.log(error);
				if (error?.response?.status === 401) {
					toast.error("Please make sure you are logged in");
				} else {
					toast.error("An error occurred, Please try again");
				}
			}
		}
	}
};

return {
	login,
	getAccounts,
	getBalance,
	getChainId,
	getPrivateKey,
	signMessage,
	sendTransaction,
	isOpen: openTermsAndCondition,
	setOpenTermsAndCondition,
	logout,
	provider: loggedInProvider,
	user,
	getUserTokenId,
	refProvider: provider.current,
	setLoggedInProvider,
	setUser,
	getUserInfo,
	web3auth,
};

}

export default useAuth;
`

[Felix-Asante]

1. it just keep loading without showing login methods as well.
2. problem with logout