Hello,
I’m trying to implement web3Auth, but since a week can not loggin
I’ve set up a “Plug and play” project pointing to “Cyan” network.
On trying it the popup shows “Constructing key from: 127.0.0.1” then shows “Unable to detect login share from the Auth Network. This may be due to slow internet connection. Check your internet speed and try again. If you’re using a vpn, please turn it off.”
How to solve this error ?
@limbachiyachintan500 Welcome Aboard!
Can you please share the console logs from the popup window where the error happens? Do share your implementation code as well .
Can you share your implementation code as well? Is this the behavior with all browsers? Are you using any Chrome extensions like Adblock or any popup blockers?
okay
import { useEffect, useState } from "react";
import { Web3AuthNoModal } from "@web3auth/no-modal";
import {
WALLET_ADAPTERS,
CHAIN_NAMESPACES,
SafeEventEmitterProvider,
} from "@web3auth/base";
import { OpenloginAdapter } from "@web3auth/openlogin-adapter";
import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider";
import "./App.css";
// import RPC from './ethersRPC' // for using ethers.js
import RPC from "./web3RPC"; // for using web3.js
const clientId =
"BHz-6jU5ZS4NjHv5TINyf9Pf_HUlZxJMRR1GDON_ZsI6bxykQivGZz5pFr4v0hl4Z8GFpnMeqFvzOqHGUP--N94"; // get from https://dashboard.web3auth.io
function Walletconnect() {
const [web3auth, setWeb3auth] = useState<Web3AuthNoModal | null>(null);
const [provider, setProvider] = useState<SafeEventEmitterProvider | null>(
null
);
const [loggedIn, setLoggedIn] = useState<boolean | null>(null);
useEffect(() => {
const init = async () => {
try {
const chainConfig = {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x5", // Please use 0x1 for Mainnet
rpcTarget: "https://rpc.ankr.com/eth_goerli",
displayName: "Goerli Testnet",
blockExplorer: "https://goerli.etherscan.io/",
ticker: "ETH",
tickerName: "Ethereum",
};
const web3auth = new Web3AuthNoModal({
clientId,
chainConfig,
web3AuthNetwork: "cyan",
useCoreKitKey: false,
});
const privateKeyProvider = new EthereumPrivateKeyProvider({
config: { chainConfig },
});
const openloginAdapter = new OpenloginAdapter({
privateKeyProvider,
adapterSettings: {
whiteLabel: {
name: "W3A Heroes",
url: "https://web3auth.io",
logoLight: "https://web3auth.io/images/w3a-L-Favicon-1.svg",
logoDark: "https://web3auth.io/images/w3a-D-Favicon-1.svg",
defaultLanguage: "en", // en, de, ja, ko, zh, es, fr, pt, nl
dark: true, // whether to enable dark mode. defaultValue: false
theme: {
primary: "#00D1B2",
},
},
loginConfig: {
google: {
verifier: "web3auth-google-example",
typeOfLogin: "google",
clientId:
"88764335395-lmv3n474pi12pg0k2q63chdpketu2nc2.apps.googleusercontent.com", //use your app client id you got from google
},
},
},
});
web3auth.configureAdapter(openloginAdapter);
setWeb3auth(web3auth);
await web3auth.init();
setProvider(web3auth.provider);
if (web3auth.connected) {
setLoggedIn(true);
}
} catch (error) {
console.error(error);
}
};
init();
}, []);
const login = async () => {
if (!web3auth) {
uiConsole("web3auth not initialized yet");
return;
}
const web3authProvider = await web3auth.connectTo(
WALLET_ADAPTERS.OPENLOGIN,
{
loginProvider: "google",
}
);
console.log("----------->", web3authProvider);
setLoggedIn(true);
setProvider(web3authProvider);
};
const authenticateUser = async () => {
if (!web3auth) {
uiConsole("web3auth not initialized yet");
return;
}
const idToken = await web3auth.authenticateUser();
uiConsole(idToken);
};
const getUserInfo = async () => {
if (!web3auth) {
uiConsole("web3auth not initialized yet");
return;
}
const user = await web3auth.getUserInfo();
uiConsole(user);
};
const logout = async () => {
if (!web3auth) {
uiConsole("web3auth not initialized yet");
return;
}
await web3auth.logout();
setLoggedIn(false);
setProvider(null);
};
const getChainId = async () => {
if (!provider) {
uiConsole("provider not initialized yet");
return;
}
const rpc = new RPC(provider);
const chainId = await rpc.getChainId();
uiConsole(chainId);
};
const getAccounts = async () => {
if (!provider) {
uiConsole("provider not initialized yet");
return;
}
const rpc = new RPC(provider);
const address = await rpc.getAccounts();
uiConsole(address);
};
const getBalance = async () => {
if (!provider) {
uiConsole("provider not initialized yet");
return;
}
const rpc = new RPC(provider);
const balance = await rpc.getBalance();
uiConsole(balance);
};
const sendTransaction = async () => {
if (!provider) {
uiConsole("provider not initialized yet");
return;
}
const rpc = new RPC(provider);
const receipt = await rpc.sendTransaction();
uiConsole(receipt);
};
const signMessage = async () => {
if (!provider) {
uiConsole("provider not initialized yet");
return;
}
const rpc = new RPC(provider);
const signedMessage = await rpc.signMessage();
uiConsole(signedMessage);
};
const getPrivateKey = async () => {
if (!provider) {
uiConsole("provider not initialized yet");
return;
}
const rpc = new RPC(provider);
const privateKey = await rpc.getPrivateKey();
uiConsole(privateKey);
};
function uiConsole(...args: any[]): void {
const el = document.querySelector("#console>p");
if (el) {
el.innerHTML = JSON.stringify(args || {}, null, 2);
}
}
const loggedInView = (
<>
<div className="flex-container">
<div>
<button onClick={getUserInfo} className="card">
Get User Info
</button>
</div>
<div>
<button onClick={authenticateUser} className="card">
Get ID Token
</button>
</div>
<div>
<button onClick={getChainId} className="card">
Get Chain ID
</button>
</div>
<div>
<button onClick={getAccounts} className="card">
Get Accounts
</button>
</div>
<div>
<button onClick={getBalance} className="card">
Get Balance
</button>
</div>
<div>
<button onClick={signMessage} className="card">
Sign Message
</button>
</div>
<div>
<button onClick={sendTransaction} className="card">
Send Transaction
</button>
</div>
<div>
<button onClick={getPrivateKey} className="card">
Get Private Key
</button>
</div>
<div>
<button onClick={logout} className="card">
Log Out
</button>
</div>
</div>
<div id="console" style={{ whiteSpace: "pre-line" }}>
<p style={{ whiteSpace: "pre-line" }}>Logged in Successfully!</p>
</div>
</>
);
const unloggedInView = (
<button onClick={login} className="card">
Login
</button>
);
return (
<div className="container">
<h1 className="title">
<a target="_blank" href="http://web3auth.io/" rel="noreferrer">
Web3Auth
</a>{" "}
No Modal & ReactJS Example for Google Login
</h1>
<div className="grid">{loggedIn ? loggedInView : unloggedInView}</div>
</div>
);
}
export default Walletconnect;
Hi, I am facing same issue, can you please take a look?
I am using zeroDEV to implement JWT using JWKS and this is my JWKS endpoint
{
“keys”:[
{
“alg”: “RS256”,
“use”: “sig”,
“kty”: “RSA”,
“n”: “qK53lcX2kRmxhEgp0N6DfrEXDOMJMKyn-KoWpHjvHrGC0unBgo183rcO-xS-zVY3LzXryA_Zehic_dfGk7kh2eJ3C_eD1g2gFjoG0_p9mm45dpjbF48z3ipNpOQsjyJhYYCHTJ2LYpmmmLXqIOizNdSTs7g6a0WitMn427_9S351-CTxhm6E_Mw-KJXReXgxUnJz82kc_HRkwm1OIYsBc7Yu33D3fxcGOwbkLoEAmLgczlwlA7egnxZr_YxIj1ShmXMR2-ciubuvY6uS0uMijFIcGZT9v7newpJE1DKmjmj1mWdXT8WRNCr2xaQvEeUstdCFvHKEchH9ACxNerd9WQ”,
“e”: “AQAB”,
“kid”: “BjOB1/WMAIH2D24hbeBPnhf5AayQbayLNw7kWdNhFX0=”
}
]
}
When I had only 1 jwks-key-object instead of an array of jwks-keys inside an object, the wen3Auth would just keep loading
my Code
‘use client’
import { ZeroDevWeb3Auth } from ‘@zerodev/web3auth’
import * as sdk from ‘@zerodev/sdk’
import { ECDSAProvider } from ‘@zerodev/sdk’
import { useEffect, useMemo, useState } from ‘react’
//const { ZeroDevWeb3Auth } = require(‘@zerodev/web3auth’)
const JWT_ZeroDev=({my_jwt}:{my_jwt:string})=> {
const [jwt, setJWT] = useState<null|string>(null)
const [address, setAddress] = useState(‘’)
const [loading, setLoading] = useState(false)
const defaultProjectId=‘73748e98-6b11-44bf-a759-e4bc97d46197’;
useEffect(() => {
// THIS IS DEMO CODE TO CREATE A JWT, YOU WOULD HAVE YOUR OWN WAY TO GET YOUR JWT
setJWT(null)
fetch('/api/verify_jwt',{cache:'no-cache'}).then((data)=>{data.json().then((d)=>{console.log(d);setJWT(d.jwt);console.log(jwt)})})
}, [])
const setWallet = async (provider:any) => {
const ecdsaProvider = await ECDSAProvider.init({
projectId: defaultProjectId,
owner: sdk.getRPCProviderOwner(provider),
});
setAddress(await ecdsaProvider.getAddress())
}
const zeroDevWeb3Auth = useMemo(() => {
const instance = new ZeroDevWeb3Auth([defaultProjectId])
instance.init({onConnect: async () => {
setLoading(true)
setWallet(zeroDevWeb3Auth.provider)
setLoading(false)
}})
return instance
}, [])
const disconnect = async () => {
await zeroDevWeb3Auth.logout()
setAddress(‘’)
}
const handleClick = async () => {
alert(‘clicked’)
setLoading(true)
zeroDevWeb3Auth.connect(‘jwt’, {jwt}).then((provider:any) => {
setWallet(provider)
}).finally(() => {
setLoading(false)
})
}
const connected = !!address
return (
export default JWT_ZeroDev;
Is this your Google client ID? And did you create/own web3auth-google-example verifier? If not, you’ll have to create one by following this documentation.
Hello @dreamtwister61814,
I understand that you’re facing an issue that seems to be somewhat similar to this one. However, in order to address this new issue properly, I suggest that we create a new thread.
In the new thread, kindly provide us with the following details:
Thanks!
I was using zeroDev, so they were handling configuration, but the issue is fixed, it was due to Incognito Tab I believe, but now it also works in incognito.
There was also a field missing.
Fixed now
Thank you , i am try to this way.