Implement expiration handler for access token

src/pages/OnboardingSuccess.tsx

@@ -7,7 +7,7 @@ import { Registry } from "@cerc-io/registry-sdk";
 import SumsubWebSdk from "@sumsub/websdk-react";
 import { MessageHandler } from "@sumsub/websdk";
 
-import { accessTokenExpirationHandler, config, fetchAccessToken, options } from "../utils/sumsub";
+import { config, fetchAccessToken, getAccessTokenExpirationHandler, options } from "../utils/sumsub";
 
 interface Participant {
   cosmosAddress: string;
@@ -31,12 +31,7 @@ const OnboardingSuccess = () => {
   const [loading, setLoading] = useState<boolean>(true);
 
   const messageHandler: MessageHandler = (event, payload) => {
-    console.log('sumsubEvent:', event);
-
-    if (payload) {
-      console.log("Event payload is: ", payload);
-    }
-
+    console.log('sumsubEvent:', event, payload);
   };
 
   useEffect(() => {
@@ -69,12 +64,10 @@ const OnboardingSuccess = () => {
     };
 
     if (cosmosAddress) {
-      console.log("Cosmos addy: ", cosmosAddress);
       getToken(cosmosAddress).catch(error => {
         console.error(error);
         alert("Failed to fetch token");
       });
-
     }
   }, [cosmosAddress]);
 
@@ -112,10 +105,10 @@ const OnboardingSuccess = () => {
         </pre>
       </Box>
       <Typography variant="h5">KYC Status</Typography>
-      {!loading && token && (
+      {!loading && token && cosmosAddress && (
         <SumsubWebSdk
           accessToken={token}
-          expirationHandler={accessTokenExpirationHandler}
+          expirationHandler={getAccessTokenExpirationHandler(cosmosAddress)}
           config={config}
           options={options}
           onMessage={messageHandler}

src/pages/UserVerification.tsx

@@ -6,7 +6,7 @@ import SumsubWebSdk from '@sumsub/websdk-react';
 import { MessageHandler } from '@sumsub/websdk';
 import { EventPayload } from '@sumsub/websdk/types/types';
 
-import { accessTokenExpirationHandler, config, fetchAccessToken, options } from '../utils/sumsub';
+import { config, fetchAccessToken, getAccessTokenExpirationHandler, options } from '../utils/sumsub';
 
 const UserVerification = () => {
   const [kycId, setKycId] = useState<string>('unknown');
@@ -88,10 +88,10 @@ const UserVerification = () => {
         <Typography variant="h5">User verification</Typography>
         <div id="sumsub-websdk-container"></div>
       </Box>
-      {!loading && token && (
+      {!loading && token && userId && (
         <SumsubWebSdk
           accessToken={token}
-          expirationHandler={accessTokenExpirationHandler}
+          expirationHandler={getAccessTokenExpirationHandler(userId)}
           config={config}
           options={options}
           onMessage={messageHandler}

src/utils/sumsub.ts

@@ -25,7 +25,9 @@ export const options = {
   adaptIframeHeight: true,
 };
 
-export const accessTokenExpirationHandler = async () => {
-  alert("Please renew token");
-  return "Token expired";
+export const getAccessTokenExpirationHandler = (userId: string) => {
+  return async () => {
+    const newToken = await fetchAccessToken(userId);
+    return newToken;
+  }
 };