improve auth flow

Signed-off-by: F-Node-Karlsruhe <christian.fries@eecc.de>
european-epc-competence-center · Jun 29, 2023 · 39c7b03 · 39c7b03
1 parent 40aeacb
commit 39c7b03
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -5,6 +5,13 @@ WIP
 ---
 
 
+1.6.4 (2023-06-29)
+---
+
+- use authentication for inital fetchif present
+- general improvements to authentication
+
+
 1.6.3 (2023-06-27)
 ---
 

diff --git a/api/package.json b/api/package.json
@@ -1,6 +1,6 @@
 {
   "name": "vc-verifier",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "The EECC verifier for verifiable credentials which provides an verification API as well as the corresponding UI.",
   "main": "index.js",
   "type": "module",

diff --git a/frontend/package.json b/frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "verifier_frontend",
-  "version": "1.6.3",
+  "version": "1.6.4",
   "description": "Vue frontend for the EECC vc verifier API",
   "scripts": {
     "build": "vue-cli-service build",

diff --git a/frontend/src/components/AuthModal.vue b/frontend/src/components/AuthModal.vue
@@ -14,7 +14,7 @@
                         <div class="col-1 ps-0">
                             <div class="form-check form-switch">
                                 <input @change="updateDemoAuth($event)" class="form-check-input" type="checkbox"
-                                    id="useDemoSwitch" :checked="authentication">
+                                    id="useDemoSwitch" :checked="isDemoAuth">
                             </div>
                         </div>
                     </div>
@@ -43,18 +43,21 @@
                     <div v-else class="row align-items-center" style="height: 30vh;">
                         <div class="col-12">
                             <h5>Authenticate with your wallet</h5>
-                            <PresentationRequest mode="authenticate" />
+                            <PresentationRequest v-if="active" mode="authenticate" />
                         </div>
                     </div>
                 </div>
                 <div class="modal-footer row justify-content-center">
                     <div class="col-6 col-md-5 col-lg-3">
-                        <button @click="this.authentication = undefined" type="button"
+                        <button :disabled="!authentication" @click="this.authentication = undefined" type="button"
                             class="btn btn-outline-secondary w-100">Re-authenticate <i class="bi-arrow-repeat"></i></button>
                     </div>
                     <div class="col-6 col-md-5 col-lg-3">
-                        <button data-bs-dismiss="modal" type="button" class="btn btn-outline-primary w-100">Okay
+                        <button v-if="authentication" data-bs-dismiss="modal" type="button"
+                            class="btn btn-outline-primary w-100">Apply
                             <i class="bi-check-circle-fill"></i></button>
+                        <button v-else data-bs-dismiss="modal" type="button" class="btn btn-outline-secondary w-100">Discard
+                            <i class="bi-x-octagon"></i></button>
                     </div>
                 </div>
             </div>
@@ -65,7 +68,7 @@
 <script>
 import PresentationRequest from "./PresentationRequest.vue";
 import { demoAuthPresentation } from "@/store/demoAuth";
-import { Modal } from "bootstrap";
+import { isDemoAuth } from "../utils.js";
 
 export default {
     name: 'AuthModal',
@@ -77,10 +80,19 @@ export default {
     },
     data() {
         return {
-            demoAuth: demoAuthPresentation
+            demoAuth: demoAuthPresentation,
+            active: false
         }
     },
+    mounted() {
+        const modal = document.getElementById(this.id)
+        modal.addEventListener('show.bs.modal', () => this.active = true)
+        modal.addEventListener('hide.bs.modal', () => this.active = false)
+    },
     computed: {
+        isDemoAuth() {
+            return isDemoAuth(this.authentication);
+        },
         authentication: {
             get() {
                 return this.$store.state.authentication;
@@ -106,10 +118,6 @@ export default {
         updateDemoAuth(event) {
             this.authentication = event.target.checked ? this.demoAuth : undefined;
         },
-        requestDisclosure() {
-            this.$store.dispatch("makeAuthenticatedRequest", { url: this.requestURL, authPresentation: this.authentication });
-            Modal.getInstance(document.getElementById(this.id)).hide()
-        }
     }
 }
 </script>
diff --git a/frontend/src/components/DiscloseModal.vue b/frontend/src/components/DiscloseModal.vue
@@ -14,7 +14,7 @@
                         <div class="col-1 ps-0">
                             <div class="form-check form-switch">
                                 <input @change="updateDemoAuth($event)" class="form-check-input" type="checkbox"
-                                    id="useDemoSwitch" :checked="authentication">
+                                    id="useDemoSwitch" :checked="isDemoAuth">
                             </div>
                         </div>
                     </div>
@@ -45,7 +45,7 @@
                     <div v-else class="row align-items-center" style="height: 30vh;">
                         <div class="col-12">
                             <h5>authenticate with your wallet</h5>
-                            <PresentationRequest mode="authenticate" />
+                            <PresentationRequest v-if="active" mode="authenticate" />
                         </div>
                     </div>
                 </div>
@@ -63,6 +63,7 @@
 import PresentationRequest from './PresentationRequest.vue';
 import { demoAuthPresentation } from '@/store/demoAuth';
 import { Modal } from 'bootstrap';
+import { isDemoAuth } from "../utils.js";
 
 export default {
     name: 'DiscloseModal',
@@ -76,10 +77,19 @@ export default {
     },
     data() {
         return {
-            demoAuth: demoAuthPresentation
+            demoAuth: demoAuthPresentation,
+            active: false
         }
     },
+    mounted() {
+        const modal = document.getElementById(this.id)
+        modal.addEventListener('show.bs.modal', () => this.active = true)
+        modal.addEventListener('hide.bs.modal', () => this.active = false)
+    },
     computed: {
+        isDemoAuth() {
+            return isDemoAuth(this.authentication);
+        },
         authentication: {
             get() {
                 return this.$store.state.authentication;

diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
@@ -1,12 +1,12 @@
 import { createStore } from 'vuex'
 import api from '../api'
-import { demoAuthPresentation } from './demoAuth';
+
 
 
 export default createStore({
   state: {
-    version: '1.6.3',
-    authentication: demoAuthPresentation,
+    version: '1.6.4',
+    authentication: undefined,
     verifiables: [],
     disclosedCredentials: [],
     VC_REGISTRY: process.env.VC_REGISTRY || 'https://ssi.eecc.de/api/registry/vcs/',

diff --git a/frontend/src/utils.js b/frontend/src/utils.js
@@ -1,4 +1,5 @@
 import jsonld from 'jsonld';
+import { demoAuthPresentation } from './store/demoAuth';
 
 export const VerifiableType = {
     CREDENTIAL: 'VerifiableCredential',
@@ -83,3 +84,7 @@ export async function getContext(credential) {
     return resolved.mappings;
 }
 
+export function isDemoAuth(auth) {
+    return auth != undefined && JSON.stringify(auth) == JSON.stringify(demoAuthPresentation);
+}
+
diff --git a/frontend/src/views/Verify.vue b/frontend/src/views/Verify.vue
@@ -75,6 +75,9 @@ export default {
             });
     },
     computed: {
+        authenctication() {
+            return this.$store.state.authentication;
+        },
         storeVerifiables() {
             return this.$store.state.verifiables;
         },
@@ -135,16 +138,18 @@ export default {
             this.$store.dispatch("resetVerifiables");
             verifiables.map(async v => await this.verify(v));
         },
+        async fetchAuth(url) {
+            return this.authenctication ? await this.$api.post(url, { vp: this.authenctication }) : await this.$api.get(url);
+        },
         async fetchData() {
-
             if (this.credentialId) {
-                const res = await this.$api.get(this.credentialId);
+                const res = await this.fetchAuth(this.credentialId);
                 this.verifiables.push(res.data);
                 return
             }
 
             if (this.subjectId) {
-                const res = await this.$api.get(this.$store.state.VC_REGISTRY + encodeURIComponent(this.subjectId));
+                const res = await this.fetchAuth(this.$store.state.VC_REGISTRY + encodeURIComponent(this.subjectId));
                 this.verifiables = res.data
                 return
             }