Add persistence to store for redirect route

components/PresentationForm.vue

@@ -23,20 +23,27 @@
         Hier ausweisen
       </button>
     </div>
+    <div v-if="errorMessage" class="mx-6 my-4 p-4 border-red-400 border rounded text-red-500">
+      <p>{{ errorMessage }}</p>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
 import axios from 'axios';
-import type {PresentationRequest} from "~/models/PresentationRequest.ts";
+import type {TransactionRequest} from "~/models/TransactionRequest.ts";
 import {presentationInfo} from '~/models/PresentationInfo';
-import type {PresentationResponse} from "~/models/PresentationResponse";
+import type {TransactionResponse} from "~/models/TransactionResponse";
+import {ref} from "vue";
+
+const errorMessage = ref<string | null>(null);
 
 const emit = defineEmits(['data-posted']);
 const sessionStore = useSessionStore();
 
 const runtimeConfig = useRuntimeConfig()
 const baseUrl = runtimeConfig.public.apiUrl
+const nonce = crypto.randomUUID()
 
 const dataList = ref<{ kind: string, selected: boolean }[]>(Object.keys(presentationInfo).map(kind => ({
   kind,
@@ -45,8 +52,8 @@ const dataList = ref<{ kind: string, selected: boolean }[]>(Object.keys(presenta
 const postData = async () => {
   const selectedItems = dataList.value.filter(item => item.selected);
 
-  const presentationRequest: PresentationRequest = {
-    nonce: crypto.randomUUID(),
+  const presentationRequest: TransactionRequest = {
+    nonce: nonce,
     response_mode: 'direct_post',
     type: 'vp_token',
     presentation_definition: {
@@ -78,14 +85,15 @@ const postData = async () => {
 
   try {
     const response = await axios.post(`${baseUrl}/ui/presentations`, presentationRequest);
-    const presentationResponse: PresentationResponse = response.data;
+    const {client_id, presentation_id, request_uri}: TransactionResponse = response.data;
 
-    sessionStore.setPresentationResponse(presentationResponse);
-    emit('data-posted', presentationResponse);
+    sessionStore.setPresentationStore({client_id, presentation_id, request_uri, nonce});
+    emit('data-posted', {client_id, request_uri});
+    console.log('client_id: ', client_id);
 
-  emit('data-posted', presentationResponse);
   } catch (error) {
     console.error('Error posting data:', error);
+    errorMessage.value = 'Fehler beim Senden der Daten';
   }
 }
 </script>

components/QrCode.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="data" class="flex flex-col justify-center items-center gap-6">
+  <div v-if="props.data" class="flex flex-col justify-center items-center gap-6">
     <qrcode-vue :value="link" :level="level" :render-as="renderAs" :size="200" class="my-10"/>
     <NuxtLink :to="link">
       <button class="btn btn-primary">
@@ -12,16 +12,15 @@
 <script setup lang="ts">
 import QrcodeVue from 'qrcode.vue'
 import type {Level, RenderAs} from 'qrcode.vue'
-import type {PresentationResponse} from "~/models/PresentationResponse";
 
 const runtimeConfig = useRuntimeConfig()
 const baseUrl = runtimeConfig.public.apiUrl
 
 const props = defineProps<{
-  data: PresentationResponse;
+  data: { client_id: string, request_uri: string }
 }>();
+const {client_id, request_uri} = props.data;
 
-const {request_uri, client_id} = props.data
 const authenticationUrl = `eudi-openid4vp://${baseUrl}?client_id=${client_id}&request_uri=${request_uri}`
 
 const link = ref(authenticationUrl)

models/TransactionRequest.ts

@@ -0,0 +1,34 @@
+export type TransactionRequest = {
+    nonce: string;
+    presentation_definition: PresentationDefinition;
+    type: string;
+    response_mode: string;
+}
+
+type PresentationDefinition = {
+    id: string;
+    input_descriptors: InputDescriptor[];
+}
+
+type InputDescriptor = {
+    id: string;
+    name: string;
+    purpose: string;
+    format: Format;
+    constraints: Constraint;
+}
+
+type Format = {
+    mso_mdoc: {
+        alg: string[];
+    };
+}
+
+type Constraint = {
+    fields: Field[];
+}
+
+type Field = {
+    path: string[];
+    intent_to_retain: boolean;
+}

models/PresentationResponse.ts → models/TransactionResponse.ts

@@ -1,4 +1,4 @@
-export type PresentationResponse = {
+export type TransactionResponse = {
     client_id: string;
     presentation_id:string;
     request_uri: string;

models/TransactionStore.ts

@@ -0,0 +1,5 @@
+import type { TransactionResponse } from "~/models/TransactionResponse";
+
+export interface TransactionStore extends TransactionResponse {
+    nonce: string;
+}

nuxt.config.ts

@@ -2,7 +2,7 @@
 
 export default defineNuxtConfig({
   ssr: false,
-  modules: ['@nuxt/eslint', '@pinia/nuxt', '@nuxtjs/tailwindcss'],
+  modules: ['@nuxt/eslint', '@pinia/nuxt', '@nuxtjs/tailwindcss', '@pinia-plugin-persistedstate/nuxt',],
   devtools: { enabled: true },
   runtimeConfig: {
     public: {

package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "@nuxt/eslint": "^0.3.13",
     "@nuxtjs/tailwindcss": "^6.12.0",
+    "@pinia-plugin-persistedstate/nuxt": "^1.2.1",
     "daisyui": "^4.12.10",
     "eslint": "^8.57.0"
   },

pages/provider.vue

@@ -8,11 +8,10 @@
 <script setup lang="ts">
 import QrCode from "~/components/QrCode.vue";
 import PresentationForm from "~/components/PresentationForm.vue";
-import type {PresentationResponse} from "~/models/PresentationResponse";
 
-const qrCodeData = ref<PresentationResponse | null>(null);
+const qrCodeData = ref<{client_id: string, request_uri: string} | null>(null);
 
-const handleDataPosted = (data: PresentationResponse) => {
-  qrCodeData.value = data;
+const handleDataPosted = (client_id: string, request_uri: string) => {
+  qrCodeData.value = {client_id, request_uri};
 };
 </script>

stores/SessionStore.ts

@@ -1,18 +1,27 @@
 import { defineStore } from 'pinia'
-import type {PresentationResponse} from "~/models/PresentationResponse";
+import type {TransactionStore} from "~/models/TransactionStore";
 
 
 export const useSessionStore = defineStore('session', {
     state: () => ({
         clientId: null as string | null,
         presentationId: null as string | null,
         requestUri: null as string | null,
+        nonce: null as string | null,
     }),
     actions: {
-        setPresentationResponse(response: PresentationResponse) {
-            this.clientId = response.client_id
-            this.presentationId = response.presentation_id
-            this.requestUri = response.request_uri
+        setPresentationStore(data: TransactionStore) {
+            this.clientId = data.client_id
+            this.presentationId = data.presentation_id
+            this.requestUri = data.request_uri
+            this.nonce = data.nonce
+        },
+        $reset() {
+            this.clientId = null
+            this.presentationId = null
+            this.requestUri = null
+            this.nonce = null
         }
-    }
+    },
+    persist: true,
 })