Fix: Stabilized enabling OIDC with full happy flow and credential ver…

…ification

demo/backend/gov-vc-issuer/src/controller/index.ts

@@ -17,6 +17,7 @@ import * as Ed25519Multikey from '@digitalbazaar/ed25519-multikey';
 import dataIntegrityContext from '@digitalbazaar/data-integrity-context';
 import jsonld from "jsonld";
 import {AccessModes, getResourceInfo, overwriteFile, universalAccess, UrlString} from "@inrupt/solid-client";
+import { randomUUID } from "node:crypto";
 
 const {contexts: credentialsContexts, constants: {CREDENTIALS_CONTEXT_V1_URL}} =
     cred;
@@ -116,10 +117,11 @@ export async function verify(params: VerifyParameters) {
 export function createCredential(k: K, credentialSubject: CredentialSubject): VCDIVerifiableCredential {
     return {
         '@context': [CREDENTIALS_CONTEXT_V1_URL],
+        id: `urn:gov.flanders.be:credentials:${randomUUID()}`,
         type: ['VerifiableCredential'],
         issuer: k.controller!,
         issuanceDate: getCurrentDateTime(),
-        credentialSubject: credentialSubject
+        credentialSubject: credentialSubject,
     }
 }
 

demo/backend/gov-vc-issuer/src/index.ts

@@ -143,11 +143,13 @@ app.post('/verify', async (req,res)=>{
     const verifiableCredential = req.body
     const documentLoader = createDocumentLoader(jdl)
 
-    const {validationResult, verificationResult} =  await verify({
+    const {validationResult, verificationResult} = await verify({
         credential: verifiableCredential,
         documentLoader
     })
 
+    console.log('result', JSON.stringify(validationResult, null, 2), JSON.stringify(verificationResult, null, 2))
+
     res.send({validationResult, verificationResult})
 })
 

demo/backend/store/src/util.ts

@@ -36,7 +36,7 @@ export const terms = {
   views: {
     bday: 'http://localhost:3000/ruben/private/derived/bday',
     age: 'http://localhost:3000/ruben/private/derived/age',
-    "age-credential": 'http://localhost:3000/ruben/private/age-credential',
+    "age-credential": 'http://localhost:3000/ruben/credentials/age-credential',
   },
   agents: {
     ruben: 'http://localhost:3000/ruben/profile/card#me',

demo/data/.meta

@@ -1 +0,0 @@
-<http://localhost:3000/> a <http://www.w3.org/ns/pim/space#Storage>.

demo/data/ruben/credentials/age-credential$.jsonld

@@ -0,0 +1,27 @@
+{
+  "@context": [
+      "https://www.w3.org/2018/credentials/v1",
+      "https://w3id.org/security/data-integrity/v2"
+  ],
+  "id": "urn:gov.flanders.be:credentials:2f195dc3-afad-4625-8d54-5142d57df604",
+  "type": [
+      "VerifiableCredential"
+  ],
+  "issuer": "http://localhost:4444/id#me",
+  "issuanceDate": "2024-05-14T14:41:43Z",
+  "credentialSubject": {
+      "@id": "http://localhost:3000/ruben/profile/card",
+      "http://www.w3.org/2006/vcard/ns#bday": {
+          "@value": "1995-04-09T00:00:00.000Z",
+          "@type": "http://www.w3.org/2001/XMLSchema#dateTime"
+      }
+  },
+  "proof": {
+      "type": "DataIntegrityProof",
+      "created": "2024-05-14T14:41:43Z",
+      "verificationMethod": "http://localhost:4444/key",
+      "cryptosuite": "eddsa-2022",
+      "proofPurpose": "assertionMethod",
+      "proofValue": "z4SYPZHamJ9Wzwnn9qP3WYPxtG7aSW6n3b6CucTDuSnm1z4fGan4quLxaBhaVpkXatoiSTWnFxaNwCsfWsMowhyDJ"
+  }
+}

demo/data/ruben/settings/policies/generic/owner-can-read.ttl

@@ -0,0 +1,7 @@
+<urn:ucp:policy:418921dc-0d94-4ea7-9c8e-0dd6458ea440> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <http://www.w3.org/ns/odrl/2/Agreement> .
+<urn:ucp:policy:418921dc-0d94-4ea7-9c8e-0dd6458ea440> <http://www.w3.org/ns/odrl/2/permission> <urn:ucp:rule:0006d599-d841-448f-a062-7fbb4b60adb2> .
+<urn:ucp:rule:0006d599-d841-448f-a062-7fbb4b60adb2> <http://www.w3.org/1999/02/22-rdf-syntax-ns#type> <http://www.w3.org/ns/odrl/2/Permission> .
+<urn:ucp:rule:0006d599-d841-448f-a062-7fbb4b60adb2> <http://www.w3.org/ns/odrl/2/action> <http://www.w3.org/ns/odrl/2/read>, <http://www.w3.org/ns/odrl/2/write> .
+<urn:ucp:rule:0006d599-d841-448f-a062-7fbb4b60adb2> <http://www.w3.org/ns/odrl/2/target> <http://localhost:3000/ruben/**/*> .
+<urn:ucp:rule:0006d599-d841-448f-a062-7fbb4b60adb2> <http://www.w3.org/ns/odrl/2/assignee> <http://localhost:3000/ruben/profile/card#me> .
+<urn:ucp:policy:418921dc-0d94-4ea7-9c8e-0dd6458ea440> <http://purl.org/dc/elements/1.1/description> "Owner can read all resources on their data space" .

demo/sites/auditingsite/src/util/verification.ts

@@ -32,7 +32,7 @@ export const terms = {
     views: {
       bday: 'http://localhost:3000/ruben/private/derived/bday',
       age: 'http://localhost:3000/ruben/private/derived/age',
-      "age-credential": 'http://localhost:3000/ruben/private/age-credential',
+      "age-credential": 'http://localhost:3000/ruben/credentials/age-credential',
     },
     agents: {
       ruben: 'http://localhost:3000/ruben/profile/card#me',

demo/sites/authorizationsite/src/App.tsx

@@ -8,7 +8,7 @@ import './App.css';
 import Home from './components/Home';
 import Navigate from './components/Navigate';
 import SolidAuth from './components/SolidAuth'
-import DataPage from "./components/DataPage";
+import DataPage from "./components/CredentialsPage";
 import PolicyPage from "./components/PolicyPage";
 
 const rubenWebID = 'http://localhost:3000/ruben/profile/card#me'
@@ -24,7 +24,7 @@ export default function App() {
 
   // De checkingLogin variabele houdt bij of onze initiële 
   // check voor login informatie is afgerond.
-  const [checkingLogin, setCheckingLogin] = useState<boolean>(true)
+  const [checkingLogin, setCheckingLogin] = useState<boolean>(false)
 
   // Deze functie voert uit bij het updaten van de component.
   useEffect(() => {
@@ -48,9 +48,19 @@ export default function App() {
       .catch(console.error)
   })  
 
-  return (
-    <div className="App">
-      <Home />
-    </div>
-  )
+  if (loggedIn)
+    return (
+      <div className="App">
+        <Navigate session={session} />
+        <Home session={session}/>
+      </div>
+    )
+  else {
+    return (
+      <div className="App">
+        <SolidAuth />
+        {/* <Home /> */}
+      </div>
+    )
+  }
 }

demo/sites/authorizationsite/src/components/CredentialsPage.tsx

@@ -0,0 +1,64 @@
+import { useEffect, useState } from "react";
+import { readCredentialsDirectory } from "../util/CredentialsManagement";
+import { VerifiableCredential } from "../util/Types";
+import { Session } from "@inrupt/solid-client-authn-browser";
+
+export default function CredentialsPage({
+    session
+}: {
+    session: Session
+}) { 
+
+    const [credentialsList, setCredentialsList] = useState<VerifiableCredential[]>([])
+    const [selectedCredential, setSelectedCredential] = useState<null|VerifiableCredential>(null)
+
+    useEffect(() => {
+      async function getCredentials() {
+        let credentials: VerifiableCredential[] = []
+        try {
+            credentials = await readCredentialsDirectory(session.fetch);
+        } catch (_ignored) {}
+
+        setCredentialsList(credentials)
+      }
+      getCredentials()
+    }, [])
+
+    // async function addPolicyFromText(policyText: string) {
+    //     console.log('Adding the following policy:')
+    //     console.log(policyText)
+    //     await doPolicyFlowFromString(policyText)
+    //     const policyObject = await readPolicy(policyText)
+    //     if(policyObject) setPolicyList(policyList.concat(policyObject))
+    // }
+
+    function renderCredential(entity: VerifiableCredential) {
+        return (
+            <div key={entity.id} className={
+                `policyentry ${entity.id === selectedCredential?.id ? 'selectedentry' : ''}`
+            } onClick={() => setSelectedCredential(entity)}>
+                <p>id: {entity.id}</p>
+                <p>{entity.description}</p>
+            </div>
+        )
+    }
+
+    const selectedCredentialContents = selectedCredential 
+        ? JSON.stringify(credentialsList.filter(c => c.id === selectedCredential.id)[0], null, 2) || ''
+        : ''
+
+    return (
+        <div id="credentials-page" className="page-view">
+            <div className="columncontainer flex-40">
+                <div id="credentials-list" >
+                    {
+                        credentialsList.map(renderCredential)
+                    }
+                </div>
+            </div>
+            <div id="PolicyDisplayScreen" className="flex-60">
+                <textarea id="policyview" value={selectedCredentialContents} readOnly/>
+            </div>
+        </div>
+    )
+}

demo/sites/authorizationsite/src/components/Home.tsx

@@ -1,14 +1,19 @@
 import { useEffect, useState } from "react";
 import PolicyPage from "./PolicyPage";
 import BasicTabs from "./Tabs";
+import { Session } from "@inrupt/solid-client-authn-browser";
 
-export default function Home() { 
+export default function Home({
+    session
+}: {
+    session: Session
+}) { 
 
 
     return (
         <div id="page-wrapper">
             <div id="page-container" className="rowcontainer">
-                <BasicTabs />
+                <BasicTabs session={session}/>
             </div>
         </div>
     )

demo/sites/authorizationsite/src/components/Navigate.tsx

@@ -1,14 +1,42 @@
+import { Session } from "@inrupt/solid-client-authn-browser"
+import { Parser, Store } from "n3"
+import { useEffect, useState } from "react"
 
-export default function Navigate() {
+export default function Navigate({
+    session
+}: {
+    session: Session
+}) {
+    console.log('session info', session.info)
     // Component die de links naar de vershillende paginas bijhoudt.
+    const [name, setName] = useState<string>('Loading ...')
+    const [img, setImg] = useState<string>('https://static.vecteezy.com/system/resources/previews/026/630/551/original/profile-icon-symbol-design-illustration-vector.jpg')
+    useEffect(() => {
+        async function getName() {
+            if (!session.info.webId) return;
+            const webId = session.info.webId
+            const res = await session.fetch(session.info.webId)
+            const parsed = new Parser({baseIRI: webId}).parse((await res.text()))
+            const store = new Store()
+            store.addQuads(parsed)
+            console.log('store', JSON.stringify(store.getQuads(null, null, null, null), null, 2))
+            const name = store.getQuads(webId, "http://xmlns.com/foaf/0.1/name", null, null)[0]?.object.value
+            if (name) setName(name);
+            const img = store.getQuads(webId, "http://xmlns.com/foaf/0.1/img", null, null)[0]?.object.value
+            if (img) setImg(img);
+        }
+        getName()
+
+    }, [session.info.isLoggedIn])
+
     return (
         <div>
             <nav>
                 <h3 className="header-title">My Datastore Companion</h3>
                 <div className="header-greeting">
                     <p>Logged in as:</p> 
-                    <p className="user-name">Ruben Verborgh</p> 
-                    <img src="./profile.png"/>
+                    <p className="user-name">{name}</p> 
+                    <img src={img}/>
                 </div>
             </nav>
         </div>

demo/sites/authorizationsite/src/components/PolicyPage.tsx

@@ -2,9 +2,14 @@ import { useEffect, useState } from "react";
 import { createAndSubmitPolicy, doPolicyFlowFromString, 
     readPolicy, readPolicyDirectory } from "../util/PolicyManagement";
 import PolicyFormModal from "./FormModal"
-import { SimplePolicy } from "../util/policyCreation";
+import { SimplePolicy } from "../util/Types";
+import { Session } from "@inrupt/solid-client-authn-browser";
 
-export default function PolicyPage() {
+export default function PolicyPage({
+    session
+}: {
+    session: Session
+}) { 
 
     const [policyList, setPolicyList] = useState<SimplePolicy[]>([])
     const [selectedPolicy, setSelectedPolicy] = useState<null|string>(null)
@@ -21,13 +26,13 @@ export default function PolicyPage() {
       getPolicies()
     }, [])
 
-    async function addPolicyFromText(policyText: string) {
-        console.log('Adding the following policy:')
-        console.log(policyText)
-        await doPolicyFlowFromString(policyText)
-        const policyObject = await readPolicy(policyText)
-        if(policyObject) setPolicyList(policyList.concat(policyObject))
-    }
+    // async function addPolicyFromText(policyText: string) {
+    //     console.log('Adding the following policy:')
+    //     console.log(policyText)
+    //     await doPolicyFlowFromString(policyText)
+    //     const policyObject = await readPolicy(policyText)
+    //     if(policyObject) setPolicyList(policyList.concat(policyObject))
+    // }
 
     async function addPolicyFromFormdata(formdata: any) {
         console.log('Adding the following policy:')

demo/sites/authorizationsite/src/components/SolidAuth.tsx

@@ -1,9 +1,9 @@
-import { getDefaultSession } from "@inrupt/solid-client-authn-browser"
+import { getDefaultSession, Session } from "@inrupt/solid-client-authn-browser"
 
-export default function SolidAuth(props: { loggedIn: boolean }) {  
+export default function SolidAuth(){  
 
   // Verkrijg login status van App component.
-  const { loggedIn } = props
+  const loggedIn = false
 
   // Haal het Solid session object op
   const session = getDefaultSession();

demo/sites/authorizationsite/src/components/Tabs.tsx

@@ -3,8 +3,9 @@ import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
-import DataPage from './DataPage';
+import DataPage from './CredentialsPage';
 import PolicyPage from './PolicyPage';
+import { Session } from '@inrupt/solid-client-authn-browser';
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -36,7 +37,11 @@ function a11yProps(index: number) {
   };
 }
 
-export default function BasicTabs() {
+export default function BasicTabs({
+  session
+}: {
+  session: Session
+}) { 
   const [value, setValue] = React.useState(0);
 
   const handleChange = (event: React.SyntheticEvent, newValue: number) => {
@@ -53,10 +58,10 @@ export default function BasicTabs() {
         </Tabs>
       </Box>
       <CustomTabPanel value={value} index={0}>
-        <DataPage />
+        <DataPage session={session} />
       </CustomTabPanel>
       <CustomTabPanel value={value} index={1}>
-        <PolicyPage />
+        <PolicyPage session={session} />
       </CustomTabPanel>
     </Box>
   );