diff --git a/single-factor-auth-web/sfa-react-auth0-agg-verifier-example/src/App.tsx b/single-factor-auth-web/sfa-react-auth0-agg-verifier-example/src/App.tsx index 9fd290d3..aeae5065 100644 --- a/single-factor-auth-web/sfa-react-auth0-agg-verifier-example/src/App.tsx +++ b/single-factor-auth-web/sfa-react-auth0-agg-verifier-example/src/App.tsx @@ -2,7 +2,7 @@ import { useEffect, useState } from "react"; // Import Single Factor Auth SDK for no redirect flow import { Web3Auth } from "@web3auth/single-factor-auth"; -import { CHAIN_NAMESPACES, IProvider } from "@web3auth/base"; +import { CHAIN_NAMESPACES } from "@web3auth/base"; import { EthereumPrivateKeyProvider } from "@web3auth/ethereum-provider"; import { GoogleLogin, CredentialResponse, googleLogout } from '@react-oauth/google'; @@ -11,11 +11,6 @@ import { GoogleLogin, CredentialResponse, googleLogout } from '@react-oauth/goog import RPC from "./evm.ethers"; import { useAuth0 } from "@auth0/auth0-react"; -// import { auth } from './FireBaseConfig'; -// import { -// GoogleAuthProvider, -// signInWithPopup, -// } from "firebase/auth"; import "./App.css"; @@ -36,32 +31,27 @@ const chainConfig = { tickerName: "Ethereum", }; +// Initialising Web3Auth Single Factor Auth SDK +const web3authSfa = new Web3Auth({ + clientId, // Get your Client ID from Web3Auth Dashboard + web3AuthNetwork: "testnet", // ["cyan", "testnet"] + usePnPKey: false, // Setting this to true returns the same key as PnP Web SDK, By default, this SDK returns CoreKitKey. +}); +const ethereumPrivateKeyProvider = new EthereumPrivateKeyProvider({ + config: { chainConfig }, +}); + function App() { - const [web3authSFAuth, setWeb3authSFAuth] = useState(null); const [usesSfaSDK, setUsesSfaSDK] = useState(false); const [idToken, setIdToken] = useState(null); const [loading, setLoading] = useState(false); const [isLoggedIn, setIsLoggedIn] = useState(false); - const [provider, setProvider] = useState( - null - ); const { getIdTokenClaims, loginWithPopup } = useAuth0(); useEffect(() => { const init = async () => { try { - // Initialising Web3Auth Single Factor Auth SDK - const web3authSfa = new Web3Auth({ - clientId, // Get your Client ID from Web3Auth Dashboard - web3AuthNetwork: "testnet", // ["cyan", "testnet"] - usePnPKey: false, // Setting this to true returns the same key as PnP Web SDK, By default, this SDK returns CoreKitKey. - }); - setWeb3authSFAuth(web3authSfa); - const provider = new EthereumPrivateKeyProvider({ - config: { chainConfig }, - }); - - web3authSfa.init(provider); + web3authSfa.init(ethereumPrivateKeyProvider); } catch (error) { console.error(error); } @@ -84,7 +74,7 @@ function App() { const loginAuth0GitHub = async () => { // trying logging in with the Single Factor Auth SDK try { - if (!web3authSFAuth) { + if (!web3authSfa) { uiConsole("Web3Auth Single Factor Auth SDK not initialized yet"); return; } @@ -100,15 +90,12 @@ function App() { idToken: idToken!, } ] - const web3authSfaprovider = await web3authSFAuth.connect({ + await web3authSfa.connect({ verifier, verifierId: email, idToken: idToken!, subVerifierInfoArray, }); - if (web3authSfaprovider) { - setProvider(web3authSfaprovider); - } setUsesSfaSDK(true); setLoading(false); setIsLoggedIn(true); @@ -122,7 +109,7 @@ function App() { const onSuccess = async (response: CredentialResponse) => { try { - if (!web3authSFAuth) { + if (!web3authSfa) { uiConsole("Web3Auth Single Factor Auth SDK not initialized yet"); return; } @@ -137,15 +124,12 @@ function App() { idToken: idToken!, } ] - const web3authSfaprovider = await web3authSFAuth.connect({ + await web3authSfa.connect({ verifier, verifierId: email, idToken: idToken!, subVerifierInfoArray, }); - if (web3authSfaprovider) { - setProvider(web3authSfaprovider); - } setUsesSfaSDK(true); setLoading(false); setIsLoggedIn(true); @@ -172,7 +156,7 @@ function App() { console.log( "You are directly using Single Factor Auth SDK to login the user, hence the Web3Auth logout function won't work for you. You can logout the user directly from your login provider, or just clear the provider object." ); - web3authSFAuth?.logout(); + web3authSfa?.logout(); googleLogout(); setIsLoggedIn(false); return; @@ -180,41 +164,41 @@ function App() { }; const getAccounts = async () => { - if (!provider) { + if (!web3authSfa.provider) { uiConsole("No provider found"); return; } - const rpc = new RPC(provider!); + const rpc = new RPC(web3authSfa.provider); const userAccount = await rpc.getAccounts(); uiConsole(userAccount); }; const getBalance = async () => { - if (!provider) { + if (!web3authSfa.provider) { uiConsole("No provider found"); return; } - const rpc = new RPC(provider!); + const rpc = new RPC(web3authSfa.provider); const balance = await rpc.getBalance(); uiConsole(balance); }; const signMessage = async () => { - if (!provider) { + if (!web3authSfa.provider) { uiConsole("No provider found"); return; } - const rpc = new RPC(provider!); + const rpc = new RPC(web3authSfa.provider); const result = await rpc.signMessage(); uiConsole(result); }; const sendTransaction = async () => { - if (!provider) { + if (!web3authSfa.provider) { uiConsole("No provider found"); return; } - const rpc = new RPC(provider!); + const rpc = new RPC(web3authSfa.provider); const result = await rpc.signAndSendTransaction(); uiConsole(result); };