Skip to content

Commit 80c53e4

Browse files
berendsliedrechtberendsliedrecht
authored
feat: pid issue trusted certificates (#11)
Signed-off-by: Berend Sliedrecht <[email protected]>
1 parent 42e0aa5 commit 80c53e4

File tree

3 files changed

+80
-115
lines changed

3 files changed

+80
-115
lines changed

‎agent/src/agent.ts‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,11 @@ process.on('unhandledRejection', (reason) => {
1414
export const openId4VciRouter = Router()
1515
export const openId4VpRouter = Router()
1616

17+
const x509PidIssuerRootCertificate =
18+
'MIICeTCCAiCgAwIBAgIUB5E9QVZtmUYcDtCjKB/H3VQv72gwCgYIKoZIzj0EAwIwgYgxCzAJBgNVBAYTAkRFMQ8wDQYDVQQHDAZCZXJsaW4xHTAbBgNVBAoMFEJ1bmRlc2RydWNrZXJlaSBHbWJIMREwDwYDVQQLDAhUIENTIElERTE2MDQGA1UEAwwtU1BSSU5EIEZ1bmtlIEVVREkgV2FsbGV0IFByb3RvdHlwZSBJc3N1aW5nIENBMB4XDTI0MDUzMTA2NDgwOVoXDTM0MDUyOTA2NDgwOVowgYgxCzAJBgNVBAYTAkRFMQ8wDQYDVQQHDAZCZXJsaW4xHTAbBgNVBAoMFEJ1bmRlc2RydWNrZXJlaSBHbWJIMREwDwYDVQQLDAhUIENTIElERTE2MDQGA1UEAwwtU1BSSU5EIEZ1bmtlIEVVREkgV2FsbGV0IFByb3RvdHlwZSBJc3N1aW5nIENBMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEYGzdwFDnc7+Kn5ibAvCOM8ke77VQxqfMcwZL8IaIA+WCROcCfmY/giH92qMru5p/kyOivE0RC/IbdMONvDoUyaNmMGQwHQYDVR0OBBYEFNRWGMCJOOgOWIQYyXZiv6u7xZC+MB8GA1UdIwQYMBaAFNRWGMCJOOgOWIQYyXZiv6u7xZC+MBIGA1UdEwEB/wQIMAYBAf8CAQAwDgYDVR0PAQH/BAQDAgGGMAoGCCqGSM49BAMCA0cAMEQCIGEm7wkZKHt/atb4MdFnXW6yrnwMUT2u136gdtl10Y6hAiBuTFqvVYth1rbxzCP0xWZHmQK9kVyxn8GPfX27EIzzsw=='
19+
const x509PidIssuerCertificate =
20+
'MIICdDCCAhugAwIBAgIBAjAKBggqhkjOPQQDAjCBiDELMAkGA1UEBhMCREUxDzANBgNVBAcMBkJlcmxpbjEdMBsGA1UECgwUQnVuZGVzZHJ1Y2tlcmVpIEdtYkgxETAPBgNVBAsMCFQgQ1MgSURFMTYwNAYDVQQDDC1TUFJJTkQgRnVua2UgRVVESSBXYWxsZXQgUHJvdG90eXBlIElzc3VpbmcgQ0EwHhcNMjQwNTMxMDgxMzE3WhcNMjUwNzA1MDgxMzE3WjBsMQswCQYDVQQGEwJERTEdMBsGA1UECgwUQnVuZGVzZHJ1Y2tlcmVpIEdtYkgxCjAIBgNVBAsMAUkxMjAwBgNVBAMMKVNQUklORCBGdW5rZSBFVURJIFdhbGxldCBQcm90b3R5cGUgSXNzdWVyMFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEOFBq4YMKg4w5fTifsytwBuJf/7E7VhRPXiNm52S3q1ETIgBdXyDK3kVxGxgeHPivLP3uuMvS6iDEc7qMxmvduKOBkDCBjTAdBgNVHQ4EFgQUiPhCkLErDXPLW2/J0WVeghyw+mIwDAYDVR0TAQH/BAIwADAOBgNVHQ8BAf8EBAMCB4AwLQYDVR0RBCYwJIIiZGVtby5waWQtaXNzdWVyLmJ1bmRlc2RydWNrZXJlaS5kZTAfBgNVHSMEGDAWgBTUVhjAiTjoDliEGMl2Yr+ru8WQvjAKBggqhkjOPQQDAgNHADBEAiAbf5TzkcQzhfWoIoyi1VN7d8I9BsFKm1MWluRph2byGQIgKYkdrNf2xXPjVSbjW/U/5S5vAEC5XxcOanusOBroBbU='
21+
1722
export const agent = new Agent({
1823
dependencies: agentDependencies,
1924
config: {
@@ -43,6 +48,8 @@ export const agent = new Agent({
4348
baseUrl: joinUriParts(AGENT_HOST, ['siop']),
4449
router: openId4VpRouter,
4550
}),
46-
x509: new X509Module(),
51+
x509: new X509Module({
52+
trustedCertificates: [x509PidIssuerCertificate, x509PidIssuerRootCertificate],
53+
}),
4754
},
4855
})

‎app/components/VerifyBlock.tsx‎

Lines changed: 57 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,68 @@
1-
import {
2-
Tooltip,
3-
TooltipContent,
4-
TooltipProvider,
5-
TooltipTrigger,
6-
} from "@radix-ui/react-tooltip";
7-
import { Card } from "./ui/card";
8-
import QRCode from "react-qr-code";
9-
import { Alert, AlertDescription, AlertTitle } from "./ui/alert";
10-
import { CheckboxIcon, ExclamationTriangleIcon } from "@radix-ui/react-icons";
11-
import { TypographyH2, TypographyH3, TypographyH4 } from "./ui/typography";
12-
import { HighLight } from "./highLight";
13-
import { Button } from "./ui/button";
14-
import { FormEvent, useState } from "react";
15-
import { useInterval } from "@/lib/hooks";
16-
import { getRequestStatus } from "@/lib/api";
1+
import { getRequestStatus } from '@/lib/api'
2+
import { useInterval } from '@/lib/hooks'
3+
import { CheckboxIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons'
4+
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@radix-ui/react-tooltip'
5+
import { type FormEvent, useState } from 'react'
6+
import QRCode from 'react-qr-code'
7+
import { HighLight } from './highLight'
8+
import { Alert, AlertDescription, AlertTitle } from './ui/alert'
9+
import { Button } from './ui/button'
10+
import { Card } from './ui/card'
11+
import { TypographyH2, TypographyH3, TypographyH4 } from './ui/typography'
1712

1813
type VerifyBlockProps = {
19-
flowName: string;
14+
flowName: string
2015
createRequest: () => Promise<{
21-
verificationSessionId: string;
22-
authorizationRequestUri: string;
23-
}>;
24-
};
16+
verificationSessionId: string
17+
authorizationRequestUri: string
18+
}>
19+
}
2520

26-
export const VerifyBlock: React.FC<VerifyBlockProps> = ({
27-
createRequest,
28-
flowName,
29-
}) => {
30-
const [authorizationRequestUri, setAuthorizationRequestUri] =
31-
useState<string>();
32-
const [verificationSessionId, setVerificationSessionId] = useState<string>();
21+
export const VerifyBlock: React.FC<VerifyBlockProps> = ({ createRequest, flowName }) => {
22+
const [authorizationRequestUri, setAuthorizationRequestUri] = useState<string>()
23+
const [verificationSessionId, setVerificationSessionId] = useState<string>()
3324
const [requestStatus, setRequestStatus] = useState<{
34-
verificationSessionId: string;
35-
responseStatus:
36-
| "RequestCreated"
37-
| "RequestUriRetrieved"
38-
| "ResponseVerified"
39-
| "Error";
40-
error?: string;
41-
submission?: Record<string, unknown>;
42-
definition?: Record<string, unknown>;
43-
presentations?: Array<string | Record<string, unknown>>;
44-
}>();
25+
verificationSessionId: string
26+
responseStatus: 'RequestCreated' | 'RequestUriRetrieved' | 'ResponseVerified' | 'Error'
27+
error?: string
28+
submission?: Record<string, unknown>
29+
definition?: Record<string, unknown>
30+
presentations?: Array<string | Record<string, unknown>>
31+
}>()
4532

4633
const enabled =
4734
verificationSessionId !== undefined &&
48-
requestStatus?.responseStatus !== "ResponseVerified" &&
49-
requestStatus?.responseStatus !== "Error";
35+
requestStatus?.responseStatus !== 'ResponseVerified' &&
36+
requestStatus?.responseStatus !== 'Error'
5037

51-
const authorizationRequestUriHasBeenFetched =
52-
requestStatus?.responseStatus === "RequestUriRetrieved";
53-
const hasResponse = requestStatus?.responseStatus === "ResponseVerified";
54-
const isSuccess = requestStatus?.responseStatus === "ResponseVerified";
38+
const authorizationRequestUriHasBeenFetched = requestStatus?.responseStatus === 'RequestUriRetrieved'
39+
const hasResponse = requestStatus?.responseStatus === 'ResponseVerified'
40+
const isSuccess = requestStatus?.responseStatus === 'ResponseVerified'
5541

5642
useInterval({
5743
callback: async () => {
58-
if (!verificationSessionId) return;
44+
if (!verificationSessionId) return
5945

60-
const requestStatus = await getRequestStatus({ verificationSessionId });
61-
setRequestStatus(requestStatus);
46+
const requestStatus = await getRequestStatus({ verificationSessionId })
47+
setRequestStatus(requestStatus)
6248
},
6349
interval: 500,
6450
enabled,
65-
});
51+
})
6652

6753
const onSubmitCreateRequest = async (e: FormEvent) => {
68-
e.preventDefault();
54+
e.preventDefault()
6955

7056
// Clear state
71-
setAuthorizationRequestUri(undefined);
72-
setVerificationSessionId(undefined);
73-
setRequestStatus(undefined);
57+
setAuthorizationRequestUri(undefined)
58+
setVerificationSessionId(undefined)
59+
setRequestStatus(undefined)
7460

75-
const request = await createRequest();
61+
const request = await createRequest()
7662

77-
setVerificationSessionId(request.verificationSessionId);
78-
setAuthorizationRequestUri(request.authorizationRequestUri);
79-
};
63+
setVerificationSessionId(request.verificationSessionId)
64+
setAuthorizationRequestUri(request.authorizationRequestUri)
65+
}
8066

8167
return (
8268
<Card className="p-6">
@@ -93,11 +79,7 @@ export const VerifyBlock: React.FC<VerifyBlockProps> = ({
9379
</div>
9480
<TooltipTrigger asChild>
9581
<p
96-
onClick={(e) =>
97-
navigator.clipboard.writeText(
98-
e.currentTarget.innerText
99-
)
100-
}
82+
onClick={(e) => navigator.clipboard.writeText(e.currentTarget.innerText)}
10183
className="text-gray-500 break-all cursor-pointer"
10284
>
10385
{authorizationRequestUri}
@@ -112,66 +94,42 @@ export const VerifyBlock: React.FC<VerifyBlockProps> = ({
11294
</TooltipProvider>
11395
) : authorizationRequestUriHasBeenFetched ? (
11496
<p className="text-gray-500 break-all">
115-
Authorization request has been retrieved. Waiting for
116-
response...
97+
Authorization request has been retrieved. Waiting for response...
11798
</p>
11899
) : (
119-
<p className="text-gray-500 break-all">
120-
Authorization request will be displayed here
121-
</p>
100+
<p className="text-gray-500 break-all">Authorization request will be displayed here</p>
122101
)}
123102
</div>
124103
)}
125104
{hasResponse && (
126105
<div className="flex flex-col w-full gap-4">
127-
<Alert variant={isSuccess ? "success" : "warning"}>
128-
{isSuccess ? (
129-
<CheckboxIcon className="h-5 w-5" />
130-
) : (
131-
<ExclamationTriangleIcon className="h-4 w-4" />
132-
)}
133-
<AlertTitle className={isSuccess ? "mt-0.5" : ""}>
134-
{isSuccess
135-
? "Verification Successful"
136-
: "Verification Unsuccessful"}
106+
<Alert variant={isSuccess ? 'success' : 'warning'}>
107+
{isSuccess ? <CheckboxIcon className="h-5 w-5" /> : <ExclamationTriangleIcon className="h-4 w-4" />}
108+
<AlertTitle className={isSuccess ? 'mt-0.5' : ''}>
109+
{isSuccess ? 'Verification Successful' : 'Verification Unsuccessful'}
137110
</AlertTitle>
138111
{!isSuccess && (
139-
<AlertDescription className="mt-2">
140-
{requestStatus?.error ?? "Unknown error occurred"}
141-
</AlertDescription>
112+
<AlertDescription className="mt-2">{requestStatus?.error ?? 'Unknown error occurred'}</AlertDescription>
142113
)}
143114
</Alert>
144115
<div>
145116
<TypographyH4>Presentation Definition</TypographyH4>
146-
<HighLight
147-
code={JSON.stringify(requestStatus?.definition, null, 2)}
148-
language="json"
149-
/>
117+
<HighLight code={JSON.stringify(requestStatus?.definition, null, 2)} language="json" />
150118
</div>
151119
<div>
152120
<TypographyH4>Presentation Submission</TypographyH4>
153-
<HighLight
154-
code={JSON.stringify(requestStatus?.submission, null, 2)}
155-
language="json"
156-
/>
121+
<HighLight code={JSON.stringify(requestStatus?.submission, null, 2)} language="json" />
157122
</div>
158123
<div>
159124
<TypographyH4>Presentations</TypographyH4>
160-
<HighLight
161-
code={JSON.stringify(requestStatus?.presentations, null, 2)}
162-
language="json"
163-
/>
125+
<HighLight code={JSON.stringify(requestStatus?.presentations, null, 2)} language="json" />
164126
</div>
165127
</div>
166128
)}
167-
<Button
168-
onClick={onSubmitCreateRequest}
169-
className="w-full"
170-
onSubmit={onSubmitCreateRequest}
171-
>
129+
<Button onClick={onSubmitCreateRequest} className="w-full" onSubmit={onSubmitCreateRequest}>
172130
Verify Credential
173131
</Button>
174132
</form>
175133
</Card>
176-
);
177-
};
134+
)
135+
}

‎app/components/VerifyTab.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
1-
import { createRequest } from "../lib/api";
2-
import { VerifyBlock } from "./VerifyBlock";
1+
import { createRequest } from '../lib/api'
2+
import { VerifyBlock } from './VerifyBlock'
33

44
export function VerifyTab() {
55
const createCRequest = () =>
66
createRequest({
77
presentationDefinition: {
88
id: crypto.randomUUID(),
9-
name: "PID Credential request for C",
9+
name: 'PID Credential request for C',
1010
input_descriptors: [
1111
{
1212
id: crypto.randomUUID(),
1313
constraints: {
14-
limit_disclosure: "preferred",
14+
limit_disclosure: 'preferred',
1515
fields: [
1616
{
17-
path: ["$.given_name"],
17+
path: ['$.given_name'],
1818
},
1919
],
2020
},
21-
name: "PID Name",
22-
purpose: "Verify your name",
21+
name: 'PID Name',
22+
purpose: 'Verify your name',
2323
},
2424
],
2525
},
26-
});
26+
})
2727

2828
const createBPrimeRequest = () =>
2929
createRequest({
@@ -34,31 +34,31 @@ export function VerifyTab() {
3434
{
3535
id: crypto.randomUUID(),
3636
constraints: {
37-
limit_disclosure: "preferred",
37+
limit_disclosure: 'preferred',
3838
fields: [
3939
{
40-
path: ["$.given_name"],
40+
path: ['$.given_name'],
4141
},
4242
],
4343
},
44-
name: "PID Name",
45-
purpose: "Verify your name",
44+
name: 'PID Name',
45+
purpose: 'Verify your name',
4646
},
4747
],
4848
},
49-
});
49+
})
5050

5151
return (
5252
<>
5353
<VerifyBlock
5454
flowName="Signed Credential in generic flow (C) with SD-JWT and mDoc"
5555
createRequest={createCRequest}
5656
/>
57-
<div style={{ height: "20px" }} />
57+
<div style={{ height: '20px' }} />
5858
<VerifyBlock
5959
flowName="Authenticated Channel with Cloud Support (B') with SD-JWT and mDoc"
6060
createRequest={createBPrimeRequest}
6161
/>
6262
</>
63-
);
63+
)
6464
}

0 commit comments

Comments
 (0)