VDS · Web App

VDS Check-in WebApp Developer Guide

Set up, run, and customize the VDS Check-in Demo Web Application for mDL identity verification using Tap2iD devices.

Version 1.0
Node.js
React.js
Tap2iD Device
01
IntroductionObjectives
02
Health CheckPostman & API
03
InstallationClone & setup
04
Run AppStart server
05
CustomizeLogo & text
06
DoneApp running
01

Introduction

1.1 Objective

The objective of this documentation is to guide developers in setting up a local development environment for the VDS Check-in demo web application and to guide them to customize the application as per their needs.

1.2 Target Audience

The primary audience includes Tap2iD device integrators and their developers who are involved in building mDL (mobile driver's license) compliant solutions using Tap2iD devices. It is designed for individuals and teams seeking to understand, implement, and customize the VDS demo web app in the context of identity verification using Tap2iD Verifiers.

1.3 Assumptions

It is assumed that the document readers are familiar with the following:

  • ✓Understanding of digital identification, mobile driver's licenses (mDL), and familiarity with ISO mDL 18013-5 specifications.
  • ✓Knowledge of the Tap2iD system, Verifier Device Service (VDS), and the process of verifying mDL using Tap2iD.
  • ✓Prior experience with the Tap2iD VDS Interface Control Document (ICD).
  • ✓Knowledge of software development tools such as GitHub, IDEs, Postman, etc.
02

Application Overview

2.1 VDS Check-in Demo Web Application

This web app is built to demonstrate the capabilities of Tap2iD reader and how to integrate customer business applications requiring ID verification. We use Tap2iD to scan and send mDL Holder's details to this web app.

  • →Serves as an identity verification tool for mDL holders, allowing quick and accurate confirmation of their identity.
  • →Supports various forms of driving license verification — digital format (mDL) or 2D barcode (PDF417) — ensuring flexibility.
  • →Seamlessly integrates with Tap2iD devices, effortlessly transferring DL details for instant access and verification.
  • →Users have the flexibility to customize the app and integrate it into mDL-compliant solutions.

2.2 Application Architecture

🏗
The app is split into two components: a Node.js backend (Express server, SQLite3 DB, REST APIs) and a React.js frontend (UI components, VDS API clients). The VDS APIs are localhost APIs invoked directly from the browser.
vds-webapp/ ├── vds-backend/ # Node.js · Express · SQLite3 │ └── index.js # Entry point, REST APIs, cron job └── vds-frontend/ # React.js └── src/ ├── assets/ # Logos, images, gifs ├── components/ # Reusable UI components ├── containers/ # Dashboard, Header, Settings ├── services/ # Utils.js – VDS API clients ├── App.jsx # Route rendering logic ├── App.scss # Global styles └── UrlConfig.js # Defines the VDS URL
03

VDS Health Check

Before setting up the VDS Demo Web App, verify that VDS is running by invoking a VDS API on an API testing platform. We use Postman as the primary platform, though developers are free to use any API testing tool of their choice.

3.1 Setup Postman

Download Postman from https://www.postman.com/downloads/

3.2 Create a New API Request for GetReaderInfo API

Create a new GET request with the following URL:

GET 
https://localhost:4215/verifier-sdk/reader/info
✅
If VDS is up and running, the API returns a 200 OK response with reader information. A failed response indicates VDS is not running — ensure the service is installed and started before proceeding.
04

Installation and Setup

4.1 Prerequisites

  • 🌐Modern web browser — Google Chrome, Microsoft Edge, or Mozilla Firefox
  • 💻IDE — VS Code (recommended) or any other IDE of your choice
  • 📦Node.js & NPM — Download from nodejs.org according to your OS

4.2 Setting Up the Project Locally

To get the web app on your local system, use one of the following two options:

1

Clone the Remote Repository

Open a terminal, navigate to your desired location, and run:

bash 
git clone https://github.com/CredenceID/vds-webapp.git
⚠️
Make sure to clone the main branch code.
2

Download the Zip File

Visit the GitHub Repository, choose Download Zip, and extract the files to your preferred location. Make sure you download the main branch code.

4.3 Installing the Project Dependencies

The project contains separate backend and frontend folders. The backend uses Node.js and the frontend uses React.js. Follow the steps below to install all dependencies.

1

Open Project in IDE

Open the web app folder in VS Code or your preferred IDE.

2

Install Frontend Dependencies

Open the terminal in the IDE, navigate to the frontend directory, and run:

bash 
cd vds-frontend
npm install
3

Install Backend Dependencies

Open a new terminal, navigate to the backend directory, and run:

bash 
cd vds-backend
npm install
4

Build the Frontend Code

Navigate back to the terminal in the frontend folder and run:

bash 
npm run build
📁
A new build folder is created after this step containing all compiled dependencies.
05

Starting the Web App

With dependencies installed and the frontend built, start the local server:

1

Start the Backend Server

Navigate to the terminal where the backend folder is open and run:

bash 
node index.js
2

Open in Browser

Open the following URL in your browser:

url 
http://localhost:3000
🚀
Web App Running
The VDS Check-in Demo Web App is now live at http://localhost:3000. Ensure Tap2iD and VDS are connected for full functionality.
06

Code Overview

6.1 Backend

The backend is built using JavaScript with the Node.js runtime. The entry point is index.js, which includes:

  • 🗄SQLite3 Database — Stores Holder Document number and check-in timestamp. When a Holder checks in, the document number is searched to verify if the Holder is already checked in.
  • ⏱Cron Job — Uses node-cron package. Scheduled to run every minute to clear holder demo data from the DB after 30 minutes.
  • 🌐Express Web Server — Listens on port 3000 for incoming requests. Frontend code is deployed on this server.
  • 🔗REST APIs — Provide an interface to database operations and a bridge for the UI to interact with the backend.
ℹ️
The VDS APIs are localhost APIs and are invoked directly from the browser by the demo web app — not through the backend server.

6.2 Frontend

Inside the src folder, the following structure is present:

src/ ├── assets/ # Logos and images ├── components/ │ ├── CheckinMessages.js # Rendered at /checkin/message │ ├── InformationModal.jsx # Rendered at /checkin │ ├── Loader.js # Loader component │ └── History.js # History component ├── containers/ │ ├── dashboard/ # Home page component │ ├── header/ # Header component │ └── settings/ # Settings page component ├── services/ │ └── Utils.js # VDS API clients ├── App.jsx # Route rendering logic ├── App.scss # Global styles └── UrlConfig.js # Defines the VDS URL
07

Unavailability of Tap2iD and VDS

If you don't have access to Tap2iD and VDS, you can mock the VDS APIs using Mockoon. Download from https://mockoon.com

⚠️
Frontend change required before using Mockoon
Navigate to UrlConfig.js and change "https" to "http" in the VDS_URL & save the file. Then rebuild the frontend and restart the backend server.
bash — rebuild after URL change 
# From the frontend directory
npm run build

# From the backend directory
node index.js

Mockoon Setup Steps

Click each step to expand the details.

1
Open Mockoon
▼

Launch Mockoon after installation.

2
Create a New Environment
▼

Click New Environment in Mockoon.

3
Configure Environment Settings
▼

Set any name for your environment and configure the port along with the URL path (e.g., port 4215).

4
Set Response Headers
▼

Configure the headers for the API responses in the environment settings.

5
Create an API Endpoint
▼

Click Add Route → HTTP Route. Set the method, endpoint path, response status, response body, and response headers. Use the VDS Interface Control Document (ICD) as a reference for request/response shapes. Repeat for all required API endpoints.

6
Run the Mock Server
▼

Start the Mockoon environment. Verify using Postman with a GET request to http://localhost:4215/verifier-sdk/reader/info — it should return 200 OK with the mocked response body.

✅
Mockoon Running
Visit http://localhost:3000/ to see the VDS demo web app running with mocked VDS APIs.
08

Customization of the WebApp

8.1 Customizing the Logo

1

Add Image to Assets

Place your image file in the following assets folder:

path 
vds-webapp/vds-frontend/src/assets/images/
2

Update the Image Path

Change the src attribute of the img tag to point to your new image:

jsx 
<img src="../../assets/images/your_image_name.png" />
💡
The same procedure can be followed to change the mid logo as well.

8.2 Customizing Text, Images, and Alert Messages

Home Page

Navigate to vds-frontend/src/containers/dashboard/dashboard.jsx. Replace the text in the paragraph tag and customize the two buttons as needed.

Check-in Page

Navigate to vds-frontend/src/components/informationModal/InformationModel.jsx. Replace the text in the related span tag. To swap gifs or images, add your files to the assets/images folder and update the src attribute of the img tag.

Check-in / Message Page

Navigate to vds-frontend/src/components/informationModal/InformationModal.jsx. Different messages are set inside the getIdentityInfo() API handler function for each API response type. Update the catch block to change the error message.

Settings Page

Navigate to vds-frontend/src/containers/settings/Settings.jsx to customize input fields, alert messages, and other settings.

09

Contact and Support

If you have any questions, encounter issues, or need assistance with our web app, please don't hesitate to reach out to our support team.