optimized auth0 github example

Web3Auth · Sep 20, 2023 · bfd7f97 · bfd7f97
1 parent 321e1a2
commit bfd7f97
Showing 1 changed file with 27 additions and 32 deletions.
diff --git a/single-factor-auth-web/sfa-react-auth0-github-example /src/App.tsx b/single-factor-auth-web/sfa-react-auth0-github-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";
 
 // RPC libraries for blockchain calls
@@ -29,31 +29,27 @@ const chainConfig = {
   tickerName: "Ethereum",
 };
 
+// Initialising Web3Auth Single Factor Auth SDK
+const web3authSfa = new Web3Auth({
+  clientId, // Get your Client ID from Web3Auth Dashboard
+  web3AuthNetwork: "cyan", // ["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<Web3Auth | null>(null);
   const [usesSfaSDK, setUsesSfaSDK] = useState(false);
-  const [provider, setProvider] = useState<IProvider | null>(
-    null
-  );
   const [idToken, setIdToken] = useState<string | null>(null);
   const [isLoggingIn, setIsLoggingIn] = useState(false);
+  const [loggedIn, setLoggedIn] = useState(false);
   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: "cyan", // ["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);
       }
@@ -76,7 +72,7 @@ function App() {
   const login = 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;
       }
@@ -86,16 +82,14 @@ function App() {
       console.log(idToken);
       setIdToken(idToken!);
       const { sub } = parseToken(idToken);
-      const web3authSfaprovider = await web3authSFAuth.connect({
+      await web3authSfa.connect({
         verifier,
         verifierId: sub,
         idToken: idToken!,
       });
-      if (web3authSfaprovider) {
-        setProvider(web3authSfaprovider);
-      }
       setUsesSfaSDK(true);
       setIsLoggingIn(false);
+      setLoggedIn(true);
     } catch (err) {
       // Single Factor Auth SDK throws an error if the user has already enabled MFA
       // One can use the Web3AuthNoModal SDK to handle this case
@@ -119,47 +113,48 @@ 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."
       );
-      setProvider(null);
+      web3authSfa.logout();
+      setLoggedIn(false);
       return;
     }
   };
 
   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);
   };
@@ -231,7 +226,7 @@ function App() {
         <Loading />
       ) : (
         <div className="grid">
-          {web3authSFAuth ? (provider ? loginView : logoutView) : null}
+          {web3authSfa ? ( loggedIn ? loginView : logoutView) : null}
         </div>
       )}