- SDK Version:
"@web3auth/base": "^7.0.1",
"@web3auth/metamask-adapter": "^7.0.1",
"@web3auth/no-modal": "^7.0.1",
-
Reference api: 404 Page Not Found | Documentation | Web3Auth
-
Code:
import { Web3AuthNoModal } from "@web3auth/no-modal";
import { CHAIN_NAMESPACES, WALLET_ADAPTERS } from "@web3auth/base";
import { MetamaskAdapter } from "@web3auth/metamask-adapter";
const App = () => {
const web3authRef = useRef(null)
const [provider, setProvider] = useState(null)
useEffect(() => {
const fn = async () => {
try {
//Initialize within your constructor
const clientId = "xxxxxx-xxxxx-xxxxx-xxxxxxxx"
const options = {
clientId, // Get your Client ID from Web3Auth Dashboard
web3AuthNetwork: "cyan",
chainConfig: {
chainNamespace: CHAIN_NAMESPACES.EIP155,
chainId: "0x1",
rpcTarget: "https://rpc.ankr.com/eth", // This is the public RPC we have added, please pass on your own endpoint while creating an app
},
}
const web3auth = new Web3AuthNoModal(options);
const metamaskAdapter = new MetamaskAdapter({
...options,
sessionTime: 3600,
redirectUrl: "http://localhost:5173/login",
});
web3auth.configureAdapter(metamaskAdapter);
web3authRef.current = web3auth
console.log('web3auth', web3auth)
await web3auth.init();
if (web3auth.provider) {
setProvider(web3auth.provider);
};
} catch (error) {
console.log('web3auth error', error)
}
}
fn()
}, [])
const web3AuthLogin = async () => {
if (!web3authRef.current) {
return;
}
const web3authProvider = await web3authRef.current.connectTo(WALLET_ADAPTERS.METAMASK, {
mfaLevel: "default", // Pass on the mfa level of your choice: default, optional, mandatory, none
loginProvider: "google", // Pass on the login provider of your choice: google, facebook, discord, twitch, twitter, github, linkedin, apple, etc.
});
setProvider(web3authProvider);
}
return (
<div onClick={web3AuthLogin}><strong>Login</strong></div>
)
}
- Chrome console error:
