Skip to main content

Set up the Issuer UI

This article details the steps to achieve full integration of the Issuer Node with the Polygon ID APIs, as well as instructs on how to set up an intuitive user interface to manage credentials.

caution

The content of the QR code provided by the Issuer or Verifier has changed since the release 2.3.0 of the Issuer node. Instead of sending the JSON information through the QR code, now we provide an embedded link to a page where this JSON is hosted, which improves the application performance. Please check the IDEN3MESSAGE_PARSER.md file for more information on how to parse the new QR code content.

Installation​

There are two options for installing and running the UI:

  1. Docker Setup Guide
  2. Standalone Mode Guide
note

We encourage the use of Standalone for production environments.

For either one, you first have to clone the repository.

Standalone Mode Guide​

Standalone Mode Guide Requirements​

  • Have followed the Core-API Standalone Mode Guide. (Step 4 of the Standalone Mode Setup is not mandatory as the UI uses an extended version of the Core API)
  • npm installed

Standalone Mode Setup​

  1. Env file configuration:

    .env-api

ISSUER_API_UI_SERVER_URL=<PUBLICLY_ACCESSIBLE_URL_POINTING_TO_ISSUER_API_UI_SERVER_PORT>
  1. Create an identity as your issuer DID.
      make generate-issuer-did
  2. Run ./bin/platform_ui command to start the issuer-ui API.
  3. Configure and deploy the UI

Completing the installation process yields the UI as a minified Javascript app. Any changes to the UI source code would necessitate a full re-build to apply them. In most development scenarios this is undesirable, so the UI app can also be run in development mode like any React application to enable hot module replacement (HMR).

4.1. Make sure that the UI API is set up and running properly (default http://localhost:3002).

4.2. Go to the ui/ folder.

4.3. Copy the .env.sample file as .env

4.4. The UI requires some of the configurations already present in the parent folder files .env-api and .env-ui. Here it's the list of variables required by the UI and the mapping between them and the variables present in the parent config files, grouped by file. Please make sure the values match.

Variables from .env-api:

  - `VITE_API_URL -> ISSUER_API_UI_SERVER_URL`
  - `VITE_API_USERNAME -> ISSUER_API_UI_AUTH_USER`
  - `VITE_API_PASSWORD -> ISSUER_API_UI_AUTH_PASSWORD`
  - `VITE_ISSUER_NAME -> ISSUER_API_UI_ISSUER_NAME`
  - `VITE_ISSUER_LOGO -> ISSUER_API_UI_ISSUER_LOGO`
  - `VITE_ISSUER_DID -> ISSUER_API_UI_ISSUER_DID`

Variables from .env-ui:

  - `VITE_BLOCK_EXPLORER_URL -> ISSUER_UI_BLOCK_EXPLORER_URL`
  - `VITE_BUILD_TAG -> ISSUER_UI_BUILD_TAG`
  - `VITE_WARNING_MESSAGE -> ISSUER_UI_WARNING_MESSAGE`
  - `VITE_IPFS_GATEWAY_URL -> ISSUER_UI_IPFS_GATEWAY_URL`
  - `VITE_SCHEMA_EXPLORER_AND_BUILDER_URL -> ISSUER_UI_SCHEMA_EXPLORER_AND_BUILDER_URL`

4.5. Run npm install

4.6. Run npm start

4.7. The app will be running on http://localhost:5173.

API UI specification - http://localhost:3002

UI - http://localhost:8088

How to Set Up Issuer Node Core API Guide

Advanced Issuer Node Configuration

Quick Start Demo