Sithum-Ravishka/js-frontent

This is a Verifiable Credential (VC) Gated Website

The code below still works as of June 2023, but for the best developer experience, use my fullstack template instead - fullstack-polygon-id-vc-gated-dapp - It includes both the server and frontend and is everything you need to set up a KYCAgeCredential VC gated dapp with Polygon ID.

---

Deprecated repo

(use above repo)

• Website: https://birthday-gated-website.on.fleek.co/
• In order to see the gated part of the website, you need a KYCAgeCredential Verifiable Credential with a birthday after January 1, 2023, held in the Polygon ID Mobile wallet app.

How to run locally

0. Follow Verifier server setup instructions

Read through the server readme and follow local server setup instructions: https://github.com/oceans404/vc-verifier#local-server-setup

1. ⭐ Star this repo so you have it for future reference, then clone it and install dependencies

git clone https://github.com/oceans404/vc-gated-website
cd vc-gated-website
npm i

2. Create a .env file by copying my sample

cp .env.sample .env;

Update the REACT_APP_VERIFICATION_SERVER_URL variable to your hosted server url from step 7: https://github.com/oceans404/vc-verifier#7-hosting-the-server-optional

Or, if you haven't hosted the server using Render, set REACT_APP_VERIFICATION_SERVER_URL="http://localhost:3000" because that's where the you are running the server locally. Don't set REACT_APP_VERIFICATION_SERVER_URL to your ngrok forwarding address or you'll face CORS errors.

3. Start the frontend

npm start

Visit http://localhost:8080/

4. Optional: host your website using Fleek

I've documented a similar hosting process here: https://github.com/oceans404/fullstack-sockets-demo#deploy-your-frontend

Logic flow

This frontend interacts with my verifier server to

• Watch for events emitted by socket for the user's specific sessionId
  • frontend: https://github.com/oceans404/vc-gated-website/blob/main/src/PolygonIDVerifier.js#L48
  • backend:
    • getAuthQr in progress https://github.com/oceans404/vc-verifier/blob/main/index.js#L63
    • getAuthQr done: https://github.com/oceans404/vc-verifier/blob/main/index.js#L86
    • handleVerification in progress: https://github.com/oceans404/vc-verifier/blob/main/index.js#L100
    • handleVerification done: https://github.com/oceans404/vc-verifier/blob/main/index.js#L135
• Request the QR code containing the birthday query (zk request) for display
  • frontend fetch: https://github.com/oceans404/vc-gated-website/blob/main/src/PolygonIDVerifier.js#L62
  • backend getAuthQr: https://github.com/oceans404/vc-verifier/blob/main/index.js#L37
  • backend birthday query: https://github.com/oceans404/vc-verifier/blob/main/proofRequest.js
• Report verification result to the rest of the app: https://github.com/oceans404/vc-gated-website/blob/main/src/App.js#L39