Add the SDK and Load the App Config

Journal uses the backend Presentation Exchange SDK to create signed requests, verify wallet submissions, and check stored credentials. Journal’s deployed React frontend generates a QR code with qrcode. The frontend example in this guide uses the Vue Presentation Request SDK with the same backend flow.

The backend owns requests, sessions, replay protection, storage, and authorization.

Install the packages

Install the backend SDK on your app server:

npm install @iamhuman.link/presentation-exchange-sdk

For the Vue frontend example in this guide:

npm install @iamhuman.link/presentation-request-frontend-sdk qrcode.vue

Use Node.js 22 or later for this walkthrough, matching Journal’s runtime requirement.

Load app config on the backend

Download separate stage and production configs from your own PEP registrations. Store the complete request-issuer DID in backend secret storage and supply it as PRESENTATION_REQUEST_ISSUER_DID_JSON. Never import the signing secret into client code.

This server-only module adapts Journal’s configuration loader. The JSON imports are public app configs, not signing keys.

import {
  PresentationService,
  type PresentationAppConfig,
  type RequestIssuerDid,
} from '@iamhuman.link/presentation-exchange-sdk';
import stage from './config/iamhuman-journal-stage-presentation-config.json';
import production from './config/iamhuman-journal-presentation-config.json';

const environment = process.env.DEPLOY_ENV ?? 'stage';
if (environment !== 'stage' && environment !== 'production') {
  throw new Error('Invalid DEPLOY_ENV');
}
const appConfig = (environment === 'stage' ? stage : production) as PresentationAppConfig;
const raw = process.env.PRESENTATION_REQUEST_ISSUER_DID_JSON;
if (!raw) throw new Error('Missing request issuer DID');
const requestIssuerDid = JSON.parse(raw) as RequestIssuerDid;
if (requestIssuerDid.uri !== appConfig.appDid) {
  throw new Error('Request issuer DID does not match app config');
}
if (!appConfig.scopes.some((scope) => scope.requestCredentialTypes.some(
  (request) => request.type === 'BasicAccessRequestVerifiableCredential',
))) {
  throw new Error('Missing basic access request scope');
}

export const presentation = new PresentationService({
  appConfig,
  requestIssuerDid,
  statusListTtlMs: 0,
});

Use your own downloaded config filenames. Journal defaults to stage and bundles these configs with its server, so updating a config requires rebuilding the deployment. Keep each environment’s signing secret paired with its config.

Journal sets statusListTtlMs: 0 to avoid a positive cache lifetime for mutable status lists before comment publication. Sealed lists retain the SDK’s final-state semantics.

Frontend SDK

The frontend SDK provides the Vue PresentationRequestQr component and wallet-opening helpers. Use it to show the backend request without exposing signing secrets. See Display and Scan the Request for the Vue example. Apps using other frameworks can build their own interface with the same backend contracts.

Next Step

Continue to Create a request.