feat(FTL-16871): integrate with redirect flow

generator/nextjs/template/appInformation.json

@@ -33,7 +33,9 @@
             "cis:getIssuanceConfigList",
             "cis:getIssuanceConfigById",
             "ais:listIotaConfigurations",
-            "ais:listPexQueries"
+            "ais:listPexQueries",
+            "ais:initiateDataSharingRequest",
+            "ais:fetchIotaVpResponse"
           ]
         }
       }
@@ -75,7 +77,9 @@
             "cis.operation.getIssuanceConfigList",
             "cis.operation.getIssuanceConfigById",
             "ais.operation.listIotaConfigurations",
-            "ais.operation.listPexQueries"
+            "ais.operation.listPexQueries",
+            "ais.operation.initiateDataSharingRequest",
+            "ais.operation.fetchIotaVpResponse"
           ]
         }
       }

generator/nextjs/template/package.json

@@ -16,17 +16,20 @@
     "@affinidi-tdk/iota-client": "^1.25.0",
     "@affinidi-tdk/iota-core": "^1.20.0",
     "@tanstack/react-query": "^5.49.2",
+    "jose": "^5.9.3",
     "next": "^14.2.13",
     "next-auth": "^4.24.3",
     "qrcode.react": "^3.1.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "uuid": "^10.0.0",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@types/node": "18.19.39",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
+    "@types/uuid": "^10.0.0",
     "autoprefixer": "^10.4.13",
     "cross-env": "^7.0.3",
     "eslint": "^8.50.0",

generator/nextjs/template/src/components/NavBar.tsx

@@ -64,7 +64,14 @@ const NavBar: FC = () => {
             className="py-4 font-medium transition-colors hover:text-blue-500"
             prefetch={false}
           >
-            Receive Credentials
+            Receive Credentials (WS)
+          </Link>
+          <Link
+            href="/iota-redirect"
+            className="py-4 font-medium transition-colors hover:text-blue-500"
+            prefetch={false}
+          >
+            Receive Credentials (Redirect)
           </Link>
         </nav>
         {session && (

generator/nextjs/template/src/components/iota/IotaClientPage.tsx

@@ -11,6 +11,7 @@ import { useSession } from "next-auth/react";
 import { useState } from "react";
 import Button from "../core/Button";
 import Select, { SelectOption } from "../core/Select";
+import { IotaConfigurationDto } from "@affinidi-tdk/iota-client";
 
 const openModeOptions = [
   {
@@ -31,9 +32,9 @@ type DataRequests = {
   };
 };
 
-const fetchIotaConfigurations = (): Promise<SelectOption[]> =>
-  fetch("/api/iota/configuration-options", { method: "GET" }).then((res) =>
-    res.json(),
+const fetchIotaConfigurations = (): Promise<IotaConfigurationDto[]> =>
+  fetch("/api/iota/configurations", { method: "GET" }).then((res) =>
+    res.json()
   );
 
 const getQueryOptions = async (configurationId: string) => {
@@ -44,7 +45,7 @@ const getQueryOptions = async (configurationId: string) => {
       }),
     {
       method: "GET",
-    },
+    }
   );
   return (await response.json()) as SelectOption[];
 };
@@ -57,7 +58,7 @@ const getIotaCredentials = async (configurationId: string) => {
       }),
     {
       method: "GET",
-    },
+    }
   );
   return (await response.json()) as IotaCredentials;
 };
@@ -216,7 +217,10 @@ export default function IotaSessionMultipleRequestsPage({
               <Select
                 id="configurationIdSelect"
                 label="Configuration"
-                options={configurationsQuery.data || []}
+                options={configurationsQuery.data.map((configuration) => ({
+                  label: configuration.name,
+                  value: configuration.configurationId,
+                }))}
                 value={selectedConfigId}
                 disabled={isFormDisabled}
                 onChange={handleConfigurationChange}
@@ -295,7 +299,7 @@ export default function IotaSessionMultipleRequestsPage({
                             {JSON.stringify(
                               dataRequests[id].error,
                               undefined,
-                              2,
+                              2
                             )}
                           </pre>
                         </>
@@ -309,7 +313,7 @@ export default function IotaSessionMultipleRequestsPage({
                             {JSON.stringify(
                               dataRequests[id].response,
                               undefined,
-                              2,
+                              2
                             )}
                           </pre>
                         </>

generator/nextjs/template/src/components/iota/RedirectFlowCallbackPage.tsx

@@ -0,0 +1,87 @@
+import { useSearchParams } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+
+interface GetIotaResponseParams {
+  configurationId: string;
+  responseCode: string;
+  correlationId: string;
+  transactionId: string;
+}
+
+const getIotaResponse = async (params: GetIotaResponseParams) => {
+  const response = await fetch("/api/iota/iota-response", {
+    method: "POST",
+    body: JSON.stringify(params),
+    headers: {
+      "Content-Type": "application/json",
+      Accept: "application/json",
+    },
+  });
+  return await response.json();
+};
+
+export default function IotaCallbackPage({
+  featureAvailable,
+}: {
+  featureAvailable: boolean;
+}) {
+  const searchParams = useSearchParams();
+  const responseCode = searchParams.get("response_code");
+  const errorMessage = searchParams.get("error");
+
+  const iotaRedirectString = localStorage.getItem("iotaRedirect") || "{}";
+  const iotaRedirect = JSON.parse(iotaRedirectString);
+
+  const iotaResponseQuery = useQuery({
+    queryKey: ["queryOptions", iotaRedirectString],
+    queryFn: ({ queryKey }) =>
+      getIotaResponse({ ...JSON.parse(queryKey[1]), responseCode }),
+    enabled: iotaRedirectString !== "" && responseCode !== null,
+  });
+
+  const loading = iotaResponseQuery.isFetching;
+  const error = iotaResponseQuery.error;
+
+  if (loading) return <div>Loading...</div>;
+  if (error) return <div>Error: {error.message}</div>;
+
+  const generatedNonce = iotaRedirect?.nonce;
+  const receivedNonce = iotaResponseQuery?.data?.nonce;
+  const matched = generatedNonce === receivedNonce;
+
+  const hasErrors = !featureAvailable || errorMessage;
+
+  const renderErrors = () => {
+    if (!featureAvailable) {
+      return (
+        <div>
+          Feature not available. Please set your Personal Access Token in your
+          environment secrets.
+        </div>
+      );
+    }
+
+    if (errorMessage) {
+      return (
+        <div>
+          <h1>{errorMessage}</h1>
+        </div>
+      );
+    }
+  };
+
+  return (
+    <>
+      {renderErrors()}
+
+      {!hasErrors && (
+        <>
+          <pre>Generated nonce: {generatedNonce} | Received nonce: {receivedNonce} | Nonce matched: {matched ? '✅' : '❌'}</pre>
+          <br/><br/>
+          <h1>Data Loaded:</h1>
+          <pre>{JSON.stringify(iotaResponseQuery.data, null, 2)}</pre>
+        </>
+      )}
+    </>
+  );
+}