Implement method to fetch token from API

src/pages/UserVerification.tsx

@@ -1,25 +1,48 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Box, Typography } from '@mui/material';
+import SumsubWebSdk from '@sumsub/websdk-react';
 
-import { Box, Typography } from '@mui/material'
+import { fetchToken } from '../utils/getToken';
-import SumsubWebSdk from '@sumsub/websdk-react'
 
 const config = {
   lang: "en", // language of WebSDK texts and comments (ISO 639-1 format)
   theme: "light",
-}
+};
 
 const options = {
   addViewportTag: false,
-  adaptIframeHeight: true
+  adaptIframeHeight: true,
-}
+};
 
 const UserVerification = () => {
-  const [kycId, setKycId] = useState<String>('');
+  const [kycId, setKycId] = useState<string>('');
   const [applicationSubmitted, setApplicationSubmitted] = useState<boolean>(false);
+  const [token, setToken] = useState<string>('');
+  const [loading, setLoading] = useState<boolean>(true);
 
   const navigate = useNavigate();
 
+  useEffect(() => {
+    const getToken = async (kycId: string) => {
+      console.log(kycId);
+      const newToken = await fetchToken(kycId);
+      if (newToken) {
+        console.log('newToken: ', newToken);
+        setToken(newToken);
+      } else {
+        alert("Failed to fetch token");
+      }
+      setLoading(false);
+    };
+
+    if (kycId) {
+      console.log(kycId);
+      getToken(kycId);
+    }
+
+  }, [kycId]);
+
   useEffect(() => {
     if (applicationSubmitted && kycId !== '') {
       navigate("/connect-wallet", {
@@ -30,20 +53,13 @@ const UserVerification = () => {
     }
   }, [applicationSubmitted, kycId, navigate]);
 
-  // TODO: Implement
   const accessTokenExpirationHandler = async () => {
     alert("Please renew token");
     return "Token expired";
-  }
+  };
-
-  const accessToken  = {
-    // TODO: Programmatically fetch access-token using sumsub API
-    "token": process.env.REACT_APP_SUMSUB_TOKEN!,
-    // TODO: Generate random user-id string
-    "userId": "alice"
-  }
 
   const messageHandler = (event: any, payload: any) => {
+    console.log(event);
     if (event === 'idCheck.onApplicantLoaded') {
       setKycId(payload.applicantId);
     }
@@ -57,7 +73,7 @@ const UserVerification = () => {
         setApplicationSubmitted(true);
       }
     }
-  }
+  };
 
   return (
     <>
@@ -70,19 +86,19 @@ const UserVerification = () => {
         }}
       >
         <Typography variant="h5">User verification</Typography>
-        <div id="sumsub-websdk-container">
+        <div id="sumsub-websdk-container"></div>
-
-        </div>
       </Box>
+      {!loading && token && (
         <SumsubWebSdk
-        accessToken={accessToken.token}
+          accessToken={token}
           expirationHandler={accessTokenExpirationHandler}
           config={config}
           options={options}
           onMessage={messageHandler}
         />
+      )}
     </>
-  )
+  );
-}
+};
 
-export default UserVerification
+export default UserVerification;

src/utils/getToken.ts

@@ -0,0 +1,21 @@
+export const fetchToken = async (userId: string) => {
+  try {
+    const response = await fetch('http://localhost:3000/generate-token', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ userId })
+    });
+
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
+
+    const data = await response.json();
+    return data.token;
+  } catch (error) {
+    console.error('Error fetching token:', error);
+    return null;
+  }
+};