When asking for help in this category, please make sure to provide the following details:
-
SDK Version: ^8.12.4
-
Platform: Auth0
-
Browser Console Screenshots:
Web3AuthComponent.tsx:88 Failed to connect with openlogin provider LoginError: login popup has been closed by the user,
at LoginError.fromCode (openlogin.esm.js:113:12)
at LoginError.popupClosed (openlogin.esm.js:125:23)
at PopupHandler.eval (openlogin.esm.js:704:27)
at PopupHandler.emit (events.js:153:5)
at eval (openlogin.esm.js:308:18)
window.console.error @ app-index.js:33
console.error @ hydration-error-info.js:63
connect @ openloginAdapter.esm.js:140
await in connect
connectTo @ noModal.esm.js:211
connectToLinkedin @ Web3AuthComponent.tsx:88
await in connectToLinkedin
callCallback @ react-dom.development.js:20565
invokeGuardedCallbackImpl @ react-dom.development.js:20614
invokeGuardedCallback @ react-dom.development.js:20689
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:20703
executeDispatch @ react-dom.development.js:32128
processDispatchQueueItemsInOrder @ react-dom.development.js:32160
processDispatchQueue @ react-dom.development.js:32173
dispatchEventsForPlugins @ react-dom.development.js:32184
eval @ react-dom.development.js:32374
batchedUpdates$1 @ react-dom.development.js:24953
batchedUpdates @ react-dom.development.js:28844
dispatchEventForPluginEventSystem @ react-dom.development.js:32373
dispatchEvent @ react-dom.development.js:30141
dispatchDiscreteEvent @ react-dom.development.js:30112
Show 18 more frames
Show lessUnderstand this error
Web3AuthComponent.tsx:104 Failed to connect with openlogin provider WalletLoginError: Failed to connect with wallet. Failed to login with openlogin
at WalletLoginError.fromCode (base.esm.js:196:12)
at WalletLoginError.connectionError (base.esm.js:199:29)
at OpenloginAdapter.connect (openloginAdapter.esm.js:149:74)
at async Web3AuthNoModal.connectTo (noModal.esm.js:211:22)
at async connectToLinkedin (Web3AuthComponent.tsx:88:7)Caused by: LoginError: login popup has been closed by the user,
at LoginError.fromCode (openlogin.esm.js:113:12)
at LoginError.popupClosed (openlogin.esm.js:125:23)
at PopupHandler.eval (openlogin.esm.js:704:27)
at PopupHandler.emit (events.js:153:5)
at eval (openlogin.esm.js:308:18) -
If the issue is related to Custom Authentication, please include the following information (optional):
- Verifier Name: verifi-social-login-verifier
- JWKS Endpoint: using auth0 domain
- Sample idToken (JWT): using Email for 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.
here is my web3auth component,
“use client”; // Add this directive at the top
import React, { useEffect, useState } from ‘react’;
import { Web3AuthNoModal } from “@web3auth/no-modal”;
import { OpenloginAdapter } from “@web3auth/openlogin-adapter”;
import { EthereumPrivateKeyProvider } from “@web3auth/ethereum-provider”;
import { CHAIN_NAMESPACES } from “@web3auth/base”;
const clientId = “”;
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: “0x1”,
rpcTarget: “https://rpc.ankr.com/eth”,
displayName: “Ethereum Mainnet”,
blockExplorerUrl: “https://etherscan.io”,
ticker: “ETH”,
tickerName: “Ethereum”,
logo: “https://images.toruswallet.io/ethereum.svg”,
};
const Web3AuthComponent: React.FC = () => {
const [web3auth, setWeb3auth] = useState<Web3AuthNoModal | null>(null);
useEffect(() => {
const initializeWeb3Auth = async () => {
const privateKeyProvider = new EthereumPrivateKeyProvider({ config: { chainConfig } });
const web3authInstance = new Web3AuthNoModal({
clientId,
web3AuthNetwork: "sapphire_mainnet",
privateKeyProvider: privateKeyProvider,
});
const openloginAdapter = new OpenloginAdapter({
adapterSettings: {
loginConfig: {
google: {
verifier: "verifi-social-login-verifier",
verifierSubIdentifier: "google-auth0",
typeOfLogin: "jwt",
clientId: "",
},
linkedin: {
verifier: "verifi-social-login-verifier",
verifierSubIdentifier: "linkedin-auth0",
typeOfLogin: "jwt",
clientId: "",
},
github: {
verifier: "verifi-social-login-verifier",
verifierSubIdentifier: "github-auth0",
typeOfLogin: "jwt",
clientId: "",
},
twitter: {
verifier: "verifi-social-login-verifier",
verifierSubIdentifier: "twitter-auth0",
typeOfLogin: "jwt",
clientId: "",
},
emailpasswordless: {
verifier: "verifi-social-login-verifier",
verifierSubIdentifier: "email-pw-auth0",
typeOfLogin: "jwt",
clientId: "",
},
},
},
privateKeyProvider,
});
web3authInstance.configureAdapter(openloginAdapter);
setWeb3auth(web3authInstance);
};
initializeWeb3Auth();
}, []);
const connectToLinkedin = async () => {
if (!web3auth) {
uiConsole(“web3auth not initialized yet”);
return;
}
try {
await web3auth.init();
await web3auth.connectTo("openlogin", {
loginProvider: "jwt",
extraLoginOptions: {
domain: "https://dev-2uegducfnv75kjbo.us.auth0.com",
},
});
} catch (error) {
uiConsole("Failed to connect with openlogin provider", error);
}
};
const uiConsole = (…args: any[]): void => {
const el = document.querySelector(“#console>p”);
if (el) {
el.innerHTML = JSON.stringify(args || {}, null, 2);
}
console.log(…args);
};
return (
Connect LinkedIn
);
};
export default Web3AuthComponent;