Sample App (Web SDK)

For those that prefer to learn by doing

This app provides an easy way to run the end-to-end Powered by CLEAR experience and learn how to build your own integration.

Tech Stack

There are two parts to this WebApp:

• A React frontend.
• An ExpressJS backend.
• Built using Docker Compose
• Runs on Docker, to simplify dependency management.

Scenario

The Powered by CLEAR Web SDK offers a seamless way for partners to integrate our products into browser-based web applications. These applications are typically designed to verify a user’s identity and remove friction from end-user onboarding, check-in, & age verification experiences.

This example presents a fake company (R-eally Fake Company) and a form for their end-users. The form asks the user to provide a few pieces of self-attested information, then click "Verify", leading the user to CLEAR's verfication experience. CLEAR verifies the user with high-trust methods like "taking a selfie" and scanning state-issued IDs.

Data Matching

Once verified, the user is returned to the R-eally Fake app, where the callback screen shows both sets of data, side-by-side. This represents a common use case for Powered by CLEAR partners.

Set Up

Configure CLEAR

Work with your CLEAR account team to get your client_id, client_secret, and other environment variables. Ensure your config can callback to the correct redirectURI. If you are running on localhost, the redirect_uri must include http://localhost:3000/callback or http://localhost:3000/*

Update .env file (lives in the base project directory). Input your REACT_APP_CLIENT_ID, REACT_APP_SCOPE, CLIENT_SECRET, API_KEY, CLEAR_AUTH_URL and CLEAR_BACKEND_SERVICE

Running the Buildscript

For developers using MacOS, you can build the project and run it automatically with the file: mac_build.sh. Just navigate to the folder and run the following command:

./mac_build.sh

Manual Setup

You can also choose to manually run this project. Before getting started, ensure that you have the Docker installed on your machine

• Docker: Installation Guide

Docker Desktop is an additional UI tool that is free for individual users but needs a paid license for enterprises. If you choose to install Desktop Desktop, Docker Compose comes included.

• Docker Desktop: Installation Guide

If you choose not to install Docker Desktop, you can install Docker Compose and Colima

• Docker Compose: Installation Guide
• Colima: Installation Guide

Run The App

Execute locally (localhost:3000)

1. Clone the repository

   git clone https://github.com/poweredbyclear/Demo-Verify-React-Web.git

2. Navigate into the project directory:

   cd Demo-Verify-React-Web

3. Build and run the project using Docker Compose:

   docker-compose up --build

This command will build the Docker images and start the containers defined in the docker-compose.yml file.

4. Go to localhost:3000 on your browser to get started

5. For the best experience, open Developer Tools (right click -> inspect) and simulate a mobile viewport with the "device toolbar".

• https://developer.chrome.com/docs/devtools/device-mode/
• https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/