feat: DC API oid4vci support (#78)

Wicpar · web-flow · commit f1161f2d4d68 · 2026-02-23T21:29:19.000+01:00
diff --git a/agent/src/endpoints.ts b/agent/src/endpoints.ts
@@ -261,44 +261,42 @@ apiRouter.post('/requests/create', async (request: Request, response: Response)
 
     console.log('Requesting definition', JSON.stringify(definition, null, 2))
     const queryRequest = dcqlQueryFromRequest(definition, purpose)
+    const pidSdJwtVct = pidSdJwtCredential({ fields: [] }).vcts[0]
+    const pidMdocDoctype = pidMdocCredential({ fields: [] }).doctype
+
     let pidCredentialIds = findCredentials(queryRequest.credentials, {
-      vcts: [pidSdJwtCredential({ fields: [] }).vcts[0]],
-      doctypes: [pidMdocCredential({ fields: [] }).doctype],
+      vcts: [pidSdJwtVct],
     }).map((query) => query.id)
 
-    // create qes credentials if non is present
+    // create qes credentials if none is present (SD-JWT only)
     if (qesRequest && !pidCredentialIds.length) {
       addOneOfCredentials(queryRequest, [
         {
           id: 'qes_pid_sd_jwt',
           format: 'dc+sd-jwt',
           meta: {
-            vct_values: [pidSdJwtCredential({ fields: [] }).vcts[0]],
-          },
-          require_cryptographic_holder_binding: true,
-        },
-        {
-          id: 'qes_pid_mdoc',
-          format: 'mso_mdoc',
-          meta: {
-            doctype_value: pidMdocCredential({ fields: [] }).doctype,
+            vct_values: [pidSdJwtVct],
           },
           require_cryptographic_holder_binding: true,
         },
       ])
-      pidCredentialIds = ['qes_pid_sd_jwt', 'qes_pid_mdoc']
+      pidCredentialIds = ['qes_pid_sd_jwt']
     }
     // create payment credential
     const scaId = 'sca_credential'
     if (paymentRequest) {
-      addOneOfCredentials(queryRequest, [
-        {
-          id: scaId,
-          format: 'dc+sd-jwt',
-          meta: {},
-          require_cryptographic_holder_binding: true,
-        },
-      ])
+      addOneOfCredentials(
+        queryRequest,
+        [
+          {
+            id: scaId,
+            format: 'dc+sd-jwt',
+            meta: {},
+            require_cryptographic_holder_binding: true,
+          },
+        ],
+        { position: 'prepend' }
+      )
     }
 
     const definitionTransactionData = definition.transaction_data ?? []
diff --git a/agent/src/server.ts b/agent/src/server.ts
@@ -129,6 +129,7 @@ async function run() {
     AGENT_HOST.includes('ngrok') ||
     AGENT_HOST.includes('.ts.net') ||
     AGENT_HOST.includes('.serveousercontent.com') ||
+    AGENT_HOST.includes('trycloudflare.com') ||
     AGENT_HOST.includes('localhost')
   ) {
     console.log(path.join(dirname, '../../app/public/assets'))
diff --git a/agent/src/utils/dcql.ts b/agent/src/utils/dcql.ts
@@ -20,9 +20,14 @@ export function findCredentials(
 /**
  * Adds a new credential set with OR relationship
  */
-export function addOneOfCredentials(query: DcqlQuery, newCredentials: DcqlQuery['credentials'][number][]) {
+export function addOneOfCredentials(
+  query: DcqlQuery,
+  newCredentials: DcqlQuery['credentials'][number][],
+  options?: { position?: 'append' | 'prepend' }
+) {
   if (newCredentials.length === 0) return
 
+  const position = options?.position ?? 'append'
   const existingIds = query.credentials.map((c) => c.id)
   if (!query.credential_sets || query.credential_sets.length === 0) {
     query.credential_sets = [{ options: [existingIds], required: true }]
@@ -35,8 +40,13 @@ export function addOneOfCredentials(query: DcqlQuery, newCredentials: DcqlQuery[
     // biome-ignore lint/suspicious/noExplicitAny: match existing pattern
     query.credentials.push(credential as any)
   }
-  query.credential_sets.push({
+  const newSet = {
     options: newIds.map((it) => [it]) as NonEmptyArray<string[]>,
     required: true,
-  })
+  }
+  if (position === 'prepend') {
+    query.credential_sets.unshift(newSet)
+  } else {
+    query.credential_sets.push(newSet)
+  }
 }
diff --git a/agent/src/verifier.ts b/agent/src/verifier.ts
@@ -10,7 +10,14 @@ export interface PlaygroundVerifierOptions {
     purpose: string
     credentials: Array<SdJwtCredential | MdocCredential>
     // Indexes
-    credential_sets?: Array<number[]>
+    credential_sets?: Array<
+      | number[]
+      | {
+          options: number[]
+          required?: boolean
+          purpose?: string
+        }
+    >
     transaction_data?: Array<{
       type: string
       subtype?: string
diff --git a/agent/src/verifiers/util.ts b/agent/src/verifiers/util.ts
@@ -93,13 +93,24 @@ export function dcqlQueryFromRequest(
           }
     ),
     credential_sets: request.credential_sets
-      ? request.credential_sets.map((set) => ({
-          options: set.map((v) => [`${v}`]),
-          purpose: purpose ?? request.purpose,
-        }))
+      ? request.credential_sets.map((set) => {
+          if (Array.isArray(set)) {
+            return {
+              options: set.map((v) => [`${v}`]),
+              required: true,
+              purpose: purpose ?? request.purpose,
+            }
+          }
+          return {
+            options: set.options.map((v) => [`${v}`]),
+            required: set.required ?? true,
+            purpose: set.purpose ?? purpose ?? request.purpose,
+          }
+        })
       : [
           {
             options: [request.credentials.map((_, index) => `${index}`)],
+            required: true,
             purpose: purpose ?? request.purpose,
           },
         ],
diff --git a/agent/src/verifiers/utopiaGovernment.ts b/agent/src/verifiers/utopiaGovernment.ts
@@ -127,6 +127,15 @@ export const utopiaGovernmentVerifier = {
       credentials: [pidMdocNames, mdlNames],
       credential_sets: [[0, 1]],
     },
+    {
+      name: 'PID (sd-jwt-vc or mdoc) + optional mDL (mdoc)',
+      purpose: 'PID (sd-jwt-vc or mdoc) + optional mDL (mdoc)',
+      credentials: [pidSdJwtVcNames, pidMdocNames, mdlNames],
+      credential_sets: [
+        { options: [0, 1], required: true },
+        { options: [2], required: false },
+      ],
+    },
     {
       name: 'PID - postal code or resident city (mdoc)',
       purpose: 'PID - postal code or resident city (mdoc)',
diff --git a/app/components/IssueTab.tsx b/app/components/IssueTab.tsx
@@ -1,10 +1,11 @@
-import { CheckIcon, CopyIcon } from '@radix-ui/react-icons'
+import { CheckIcon, CopyIcon, ExclamationTriangleIcon } from '@radix-ui/react-icons'
 import { RadioGroup } from '@radix-ui/react-radio-group'
 import Image from 'next/image'
 import Link from 'next/link'
 import { type ReadonlyURLSearchParams, useRouter } from 'next/navigation'
 import { type FormEvent, useEffect, useState } from 'react'
 import QRCode from 'react-qr-code'
+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 import { Button } from '@/components/ui/button'
 import { Card } from '@/components/ui/card'
 import { Label } from '@/components/ui/label'
@@ -38,9 +39,12 @@ export function IssueTab({
 
   const [selectedAuthorization, setSelectedAuthorization] = useState<string>('none')
   const [selectedDeferBy, setDeferBy] = useState<string>('none')
+  const [issuanceMethod, setIssuanceMethod] = useState<'qr' | 'dcApi'>('qr')
 
   const [credentialOfferUri, setCredentialOfferUri] = useState<string>()
   const [userPin, setUserPin] = useState<string>()
+  const [issueStatus, setIssueStatus] = useState<'idle' | 'issuing' | 'issued' | 'error'>('idle')
+  const [issueError, setIssueError] = useState<string>()
 
   const selectedIssuer = issuers?.find((i) => i.id === selectedIssuerId)
   const router = useRouter()
@@ -68,6 +72,9 @@ export function IssueTab({
       if (query.dpop) setRequireDpop(query.dpop === 'true')
       if (query.walletAttestation) setRequireWalletAttestation(query.walletAttestation === 'true')
       if (query.keyAttestation) setRequireKeyAttestation(query.keyAttestation === 'true')
+      if (query.initiationMethod === 'dcApi' || query.initiationMethod === 'qr') {
+        setIssuanceMethod(query.initiationMethod)
+      }
     })
   }, [issuers, searchParams])
 
@@ -84,6 +91,7 @@ export function IssueTab({
     params.set('dpop', `${requireDpop}`)
     params.set('keyAttestation', `${requireKeyAttestation}`)
     params.set('walletAttestation', `${requireWalletAttestation}`)
+    if (issuanceMethod) params.set('initiationMethod', issuanceMethod)
     if (credentialType !== undefined) params.set('credentialType', `${credentialType}`)
 
     const existingSearchParams = new URLSearchParams(searchParams.toString())
@@ -101,6 +109,7 @@ export function IssueTab({
     selectedFormat,
     selectedAuthorization,
     selectedDeferBy,
+    issuanceMethod,
     credentialType,
     router,
     searchParams,
@@ -109,6 +118,54 @@ export function IssueTab({
     requireWalletAttestation,
   ])
 
+  useEffect(() => {
+    setIssueStatus('idle')
+    setIssueError(undefined)
+  }, [issuanceMethod])
+
+  const buildDcApiRequestData = (offerUri: string) => {
+    const queryIndex = offerUri.indexOf('?')
+    if (queryIndex >= 0) {
+      const params = new URLSearchParams(offerUri.slice(queryIndex + 1))
+      const offerUriParam = params.get('credential_offer_uri')
+      if (offerUriParam) {
+        return { credential_offer_uri: offerUriParam }
+      }
+      const inlineOffer = params.get('credential_offer')
+      if (inlineOffer) {
+        try {
+          return { credential_offer: JSON.parse(inlineOffer) }
+        } catch {
+          return { credential_offer: inlineOffer }
+        }
+      }
+    }
+
+    try {
+      return { credential_offer: JSON.parse(offerUri) }
+    } catch {
+      return { credential_offer_uri: offerUri }
+    }
+  }
+
+  const initiateDcIssuance = async (offerUri: string) => {
+    if (!('credentials' in navigator) || typeof navigator.credentials.create !== 'function') {
+      throw new Error('Digital Credentials API is not supported in this browser.')
+    }
+    const requestData = buildDcApiRequestData(offerUri)
+    await navigator.credentials.create({
+      // @ts-expect-error Digital Credentials API typings
+      digital: {
+        requests: [
+          {
+            protocol: 'openid4vci1.0',
+            data: requestData,
+          },
+        ],
+      },
+    })
+  }
+
   async function onSubmitIssueCredential(e: FormEvent) {
     e.preventDefault()
     console.log(selectedIssuer, credentialType, selectedFormat, selectedAuthorization)
@@ -128,6 +185,19 @@ export function IssueTab({
     })
     setCredentialOfferUri(offer.credentialOffer)
     setUserPin(offer.issuanceSession.userPin)
+    setIssueError(undefined)
+    setIssueStatus('idle')
+
+    if (issuanceMethod === 'dcApi') {
+      setIssueStatus('issuing')
+      try {
+        await initiateDcIssuance(offer.credentialOffer)
+        setIssueStatus('issued')
+      } catch (error) {
+        setIssueStatus('error')
+        setIssueError(error instanceof Error ? error.message : 'Unknown error while calling Digital Credentials API')
+      }
+    }
   }
 
   const copyConfiguration = async () => {
@@ -252,6 +322,19 @@ export function IssueTab({
             ))}
           </RadioGroup>
         </div>
+        <div className="space-y-2">
+          <Label htmlFor="initiation-method">Initiation Method</Label>
+          <RadioGroup
+            name="initiation-method"
+            required
+            className="flex flex-col gap-2 md:gap-4 md:flex-row"
+            onValueChange={(v) => setIssuanceMethod(v as 'qr' | 'dcApi')}
+            value={issuanceMethod}
+          >
+            <MiniRadioItem value="qr" label="QR / Deeplink" />
+            <MiniRadioItem value="dcApi" label="Digital Credentials API" />
+          </RadioGroup>
+        </div>
         <div className="space-y-2">
           <div>
             <Label htmlFor="format">Authentication</Label>
@@ -327,7 +410,11 @@ export function IssueTab({
           />
         </div>
         <div className="flex justify-center items-center bg-gray-200 min-h-64 w-full rounded-md">
-          {credentialOfferUri ? (
+          {issuanceMethod === 'dcApi' ? (
+            <p className="text-gray-500 text-center px-6">
+              Digital Credentials API is selected. The credential offer will be sent directly.
+            </p>
+          ) : credentialOfferUri ? (
             <TooltipProvider>
               <Tooltip>
                 <div className="flex flex-col p-5 gap-2 justify-center items-center gap-6">
@@ -372,6 +459,25 @@ export function IssueTab({
             <p className="text-gray-500 break-all">Credential offer will be displayed here</p>
           )}
         </div>
+        {issuanceMethod === 'dcApi' && issueStatus !== 'idle' && (
+          <Alert variant={issueStatus === 'issued' ? 'success' : issueStatus === 'error' ? 'destructive' : 'warning'}>
+            {issueStatus === 'error' ? (
+              <ExclamationTriangleIcon className="h-4 w-4" />
+            ) : issueStatus === 'issued' ? (
+              <CheckIcon className="h-5 w-5" />
+            ) : null}
+            <AlertTitle>
+              {issueStatus === 'issuing'
+                ? 'Requesting Credential'
+                : issueStatus === 'issued'
+                  ? 'Credential Request Sent'
+                  : 'Issuance Failed'}
+            </AlertTitle>
+            {issueStatus === 'error' && issueError && (
+              <AlertDescription className="mt-2">{issueError}</AlertDescription>
+            )}
+          </Alert>
+        )}
         <Button
           onClick={onSubmitIssueCredential}
           disabled={disabled}
diff --git a/app/components/VerifyBlock.tsx b/app/components/VerifyBlock.tsx
@@ -481,13 +481,13 @@ export const VerifyBlock = ({ searchParams }: { searchParams: ReadonlyURLSearchP
                     <div className="gap-2 w-full justify-center flex flex-1">
                       <div>
                         <Link href={authorizationRequestUri}>
-                          <Button>Open in Wallet</Button>
+                          <Button type="button">Open in Wallet</Button>
                         </Link>
                       </div>
                     </div>
                     <div>
                       <Link href={authorizationRequestUri.replace('openid4vp://', 'id.animo.paradym:')}>
-                        <Button>Open in Paradym Wallet</Button>
+                        <Button type="button">Open in Paradym Wallet</Button>
                       </Link>
                     </div>
                   </div>
