show x509 certificate on issuer home page (#5)

Signed-off-by: Berend Sliedrecht <sliedrecht@berend.io>

agent/src/endpoints.ts

@@ -2,14 +2,11 @@ import {
   DifPresentationExchangeService,
   JsonTransformer,
   RecordNotFoundError,
-  W3cJsonLdVerifiableCredential,
   W3cJsonLdVerifiablePresentation,
-  W3cJwtVerifiableCredential,
   W3cJwtVerifiablePresentation,
   getJwkFromKey,
 } from '@credo-ts/core'
 import { OpenId4VcVerificationSessionState } from '@credo-ts/openid4vc'
-import { OpenId4VcIssuanceSessionRepository } from '@credo-ts/openid4vc/build/openid4vc-issuer/repository'
 import express, { type NextFunction, type Request, type Response } from 'express'
 import z from 'zod'
 import { agent } from './agent'
@@ -46,6 +43,14 @@ apiRouter.post('/offers/create', async (request: Request, response: Response) =>
   return response.json(offer)
 })
 
+apiRouter.get('/x509', async (_, response: Response) => {
+  const certificate = getX509Certificate()
+
+  return response.json({
+    certificate,
+  })
+})
+
 apiRouter.get('/issuer', async (_, response: Response) => {
   const issuer = await getIssuer()
 

app/components/IssueTab.tsx

@@ -5,9 +5,10 @@ import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectVa
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
 import { type FormEvent, useEffect, useState } from 'react'
 import QRCode from 'react-qr-code'
-import { createOffer, getIssuer } from '../lib/api'
+import { createOffer, getIssuer, getX509Certificate } from '../lib/api'
 
 export function IssueTab() {
+  const [x509Certificate, setX509Certificate] = useState<string>()
   const [credentialType, setCredentialType] = useState<string>()
   const [issuerId, setIssuerid] = useState<string>()
   const [credentialOfferUri, setCredentialOfferUri] = useState<string>()
@@ -21,10 +22,8 @@ export function IssueTab() {
   }>()
 
   useEffect(() => {
-    getIssuer().then((i) => {
-      setIssuer(i)
-      console.log(i)
-    })
+    getIssuer().then(setIssuer)
+    getX509Certificate().then(({ certificate }) => setX509Certificate(certificate))
   }, [])
   async function onSubmitIssueCredential(e: FormEvent) {
     e.preventDefault()
@@ -110,6 +109,27 @@ export function IssueTab() {
         <Button onClick={onSubmitIssueCredential} className="w-full" onSubmit={onSubmitIssueCredential}>
           Issue Credential
         </Button>
+        <div className="flex justify-center flex-col items-center bg-gray-200 min-h-64 w-full rounded-md p-7">
+          <h3>X.509 Certificate in base64 format</h3>
+          <TooltipProvider>
+            <Tooltip>
+              <div className="flex flex-col p-5 gap-2 justify-center items-center gap-6">
+                <TooltipTrigger asChild>
+                  <p
+                    onClick={(e) => navigator.clipboard.writeText(e.currentTarget.innerText)}
+                    className="text-gray-500 break-all cursor-pointer"
+                  >
+                    {x509Certificate ?? 'No X.509 Certificate found'}
+                  </p>
+                </TooltipTrigger>
+              </div>
+
+              <TooltipContent>
+                <p>Click to copy</p>
+              </TooltipContent>
+            </Tooltip>
+          </TooltipProvider>
+        </div>
       </form>
     </Card>
   )

app/lib/api.ts

@@ -35,6 +35,16 @@ export async function getIssuer() {
   return response.json()
 }
 
+export async function getX509Certificate() {
+  const response = await fetch(`${NEXT_PUBLIC_API_URL}/api/x509`)
+
+  if (!response.ok) {
+    throw new Error('Failed to get x509 certificate')
+  }
+
+  return response.json()
+}
+
 export async function receiveOffer(offerUri: string) {
   const response = await fetch(`${NEXT_PUBLIC_API_URL}/api/offers/receive`, {
     headers: {