feat: OpenID Federation playground

agent/package.json

@@ -1,10 +1,10 @@
 {
   "name": "agent",
   "dependencies": {
-    "@credo-ts/askar": "0.6.0-alpha-20241119125554",
-    "@credo-ts/core": "0.6.0-alpha-20241119125554",
-    "@credo-ts/node": "0.6.0-alpha-20241119125554",
-    "@credo-ts/openid4vc": "0.6.0-alpha-20241119125554",
+    "@credo-ts/askar": "0.6.0-pr-2094-20241120112900",
+    "@credo-ts/core": "0.6.0-pr-2094-20241120112900",
+    "@credo-ts/node": "0.6.0-pr-2094-20241120112900",
+    "@credo-ts/openid4vc": "0.6.0-pr-2094-20241120112900",
     "@hyperledger/aries-askar-nodejs": "^0.2.3",
     "@animo-id/mdoc": "^0.2.38",
     "cors": "^2.8.5",
@@ -24,6 +24,6 @@
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "start": "node dist/server.js",
-    "dev": "tsx watch -r dotenv/config src/server.ts dotenv_config_path=.env.development"
+    "dev": "tsx watch -r dotenv/config src/server.ts dotenv_config_path=.env.development dotenv_config_path=.env"
   }
 }

agent/src/endpoints.ts

@@ -180,17 +180,19 @@ apiRouter.get('/verifier', async (_, response: Response) => {
 })
 
 const zCreatePresentationRequestBody = z.object({
+  requestSignerType: z.enum(['x5c', 'openid-federation']),
   presentationDefinitionId: z.string(),
   requestScheme: z.string(),
   responseMode: z.enum(['direct_post.jwt', 'direct_post']),
 })
 
 apiRouter.post('/requests/create', async (request: Request, response: Response) => {
-  const createPresentationRequestBody = zCreatePresentationRequestBody.parse(request.body)
+  const { presentationDefinitionId, requestScheme, responseMode, requestSignerType } =
+    await zCreatePresentationRequestBody.parseAsync(request.body)
 
   const x509Certificate = getX509Certificate()
 
-  const definitionId = createPresentationRequestBody.presentationDefinitionId
+  const definitionId = presentationDefinitionId
   const definition = allDefinitions.find((d) => d.id === definitionId)
   if (!definition) {
     return response.status(404).json({
@@ -209,22 +211,27 @@ apiRouter.post('/requests/create', async (request: Request, response: Response)
   const { authorizationRequest, verificationSession } =
     await agent.modules.openId4VcVerifier.createAuthorizationRequest({
       verifierId: verifier.verifierId,
-      requestSigner: {
-        method: 'x5c',
-        x5c: [x509Certificate],
-        // FIXME: remove issuer param from credo as we can infer it from the url
-        issuer: `${AGENT_HOST}/siop/${verifier.verifierId}/authorize`,
-      },
+      requestSigner:
+        requestSignerType === 'x5c'
+          ? {
+              method: 'x5c',
+              x5c: [x509Certificate],
+              // FIXME: remove issuer param from credo as we can infer it from the url
+              issuer: `${AGENT_HOST}/siop/${verifier.verifierId}/authorize`,
+            }
+          : {
+              method: 'openid-federation',
+            },
       presentationExchange: {
         definition,
       },
-      responseMode: createPresentationRequestBody.responseMode,
+      responseMode,
     })
 
   console.log(authorizationRequest)
 
   return response.json({
-    authorizationRequestUri: authorizationRequest.replace('openid4vp://', createPresentationRequestBody.requestScheme),
+    authorizationRequestUri: authorizationRequest.replace('openid4vp://', requestScheme),
     verificationSessionId: verificationSession.id,
   })
 })

app/components/VerifyBlock.tsx

@@ -5,6 +5,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@radix
 import Link from 'next/link'
 import { type FormEvent, useEffect, useState } from 'react'
 import QRCode from 'react-qr-code'
+import type { CreateRequestOptions, CreateRequestResponse } from './VerifyTab'
 import { HighLight } from './highLight'
 import { Alert, AlertDescription, AlertTitle } from './ui/alert'
 import { Button } from './ui/button'
@@ -19,20 +20,11 @@ export type ResponseMode = 'direct_post' | 'direct_post.jwt'
 type VerifyBlockProps = {
   flowName: string
   x509Certificate?: string
-  createRequest: ({
-    presentationDefinitionId,
-    requestScheme,
-    responseMode,
-  }: {
-    presentationDefinitionId: string
-    requestScheme: string
-    responseMode: ResponseMode
-  }) => Promise<{
-    verificationSessionId: string
-    authorizationRequestUri: string
-  }>
+  createRequest: (options: CreateRequestOptions) => Promise<CreateRequestResponse>
 }
 
+type RequestSignerType = CreateRequestOptions['requestSignerType']
+
 export const VerifyBlock: React.FC<VerifyBlockProps> = ({ createRequest, flowName, x509Certificate }) => {
   const [authorizationRequestUri, setAuthorizationRequestUri] = useState<string>()
   const [verificationSessionId, setVerificationSessionId] = useState<string>()
@@ -62,6 +54,7 @@ export const VerifyBlock: React.FC<VerifyBlockProps> = ({ createRequest, flowNam
   const isSuccess = requestStatus?.responseStatus === 'ResponseVerified'
   const [presentationDefinitionId, setPresentationDefinitionId] = useState<string>()
   const [requestScheme, setRequestScheme] = useState<string>('openid4vp://')
+  const [requestSignerType, setRequestSignerType] = useState<RequestSignerType>('x5c')
 
   useEffect(() => {
     getVerifier().then(setVerifier)
@@ -90,7 +83,12 @@ export const VerifyBlock: React.FC<VerifyBlockProps> = ({ createRequest, flowNam
     if (!id) {
       throw new Error('No definition')
     }
-    const request = await createRequest({ presentationDefinitionId: id, requestScheme, responseMode })
+    const request = await createRequest({
+      requestSignerType,
+      presentationDefinitionId: id,
+      requestScheme,
+      responseMode,
+    })
 
     setVerificationSessionId(request.verificationSessionId)
     setAuthorizationRequestUri(request.authorizationRequestUri)
@@ -135,6 +133,29 @@ export const VerifyBlock: React.FC<VerifyBlockProps> = ({ createRequest, flowNam
             </SelectContent>
           </Select>
         </div>
+        <div className="space-y-2">
+          <Label htmlFor="response-mode">Request Signer Type</Label>
+          <Select
+            name="request-signer-type"
+            required
+            value={requestSignerType}
+            onValueChange={(value) => setRequestSignerType(value as RequestSignerType)}
+          >
+            <SelectTrigger className="w-1/2">
+              <SelectValue placeholder="Select request signer type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem key="x5c" value="x5c">
+                  <pre>X509 certificate</pre>
+                </SelectItem>
+                <SelectItem key="openid-federation" value="openid-federation">
+                  <pre>OpenID Federation</pre>
+                </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
         <div className="space-y-2">
           <Label htmlFor="request-scheme">Scheme</Label>
           <Input

app/components/VerifyTab.tsx

@@ -1,29 +1,20 @@
 import { useEffect, useState } from 'react'
 import { createRequest, getX509Certificate } from '../lib/api'
-import { type ResponseMode, VerifyBlock } from './VerifyBlock'
+import { VerifyBlock } from './VerifyBlock'
+
+export type CreateRequestOptions = Parameters<typeof createRequest>[0]
+export type CreateRequestResponse = Awaited<ReturnType<typeof createRequest>>
 
 export function VerifyTab() {
   const [x509Certificate, setX509Certificate] = useState<string>()
 
-  const createRequestForVerification = async (options: {
-    presentationDefinitionId: string
-    requestScheme: string
-    responseMode: ResponseMode
-  }) => {
-    return await createRequest({
-      requestScheme: options.requestScheme,
-      presentationDefinitionId: options.presentationDefinitionId,
-      responseMode: options.responseMode,
-    })
-  }
-
   useEffect(() => {
     getX509Certificate().then(({ certificate }) => setX509Certificate(certificate))
   }, [])
 
   return (
     <>
-      <VerifyBlock flowName="Verify" createRequest={createRequestForVerification} x509Certificate={x509Certificate} />
+      <VerifyBlock flowName="Verify" createRequest={createRequest} x509Certificate={x509Certificate} />
     </>
   )
 }

app/lib/api.ts

@@ -77,7 +77,9 @@ export async function createRequest({
   presentationDefinitionId,
   requestScheme,
   responseMode,
+  requestSignerType,
 }: {
+  requestSignerType: 'x5c' | 'openid-federation'
   presentationDefinitionId: string
   requestScheme: string
   responseMode: 'direct_post' | 'direct_post.jwt'
@@ -88,6 +90,7 @@ export async function createRequest({
       'Content-Type': 'application/json',
     },
     body: JSON.stringify({
+      requestSignerType,
       presentationDefinitionId,
       requestScheme,
       responseMode,

package.json

@@ -6,5 +6,10 @@
   },
   "devDependencies": {
     "@biomejs/biome": "^1.8.3"
+  },
+  "pnpm": {
+    "resolutions": {
+      "@openid-federation/core": "0.1.1-alpha.14"
+    }
   }
 }