tlsn-js/demo/react-ts-webpack

TLSNotary in React/TypeScript with tlsn-js

This demo shows how to use TLSNotary with a delegated verifier, also known as a notary.
In this demo, we request JSON data from a GitHub page, use tlsn-js to notarize the TLS request with TLSNotary, and display the attestation and revealed data.

Note:
This demo uses TLSNotary to notarize public data for simplicity. In real-world applications, TLSNotary is especially valuable for notarizing private and sensitive data.

---

Setup

Before running the demo, you need to start a local notary server and a websocket proxy. If you prefer to use the hosted test servers from PSE, see the section below.

Websocket Proxy

Browsers cannot make raw TCP connections, so a websocket proxy server is required.

1. Install wstcp:

   cargo install wstcp
   

2. Run a websocket proxy for https://raw.githubusercontent.com:

   wstcp --bind-addr 127.0.0.1:55688 raw.githubusercontent.com:443
   

   Note: The raw.githubusercontent.com:443 argument specifies the server used in this quick start.

Run a Local Notary Server

You also need to run a local notary server for this demo.

• Using Git and Rust Cargo:

  git clone https://github.com/tlsnotary/tlsn.git
  cargo run --release --bin notary-server
  

• Using Docker (from the root of the tlsn-js repo):

  npm run notary
  

The notary server will now be running in the background, waiting for connections.

---

Use the PSE Web Proxy and Notary

If you want to use the hosted PSE notary and proxy:

1. Open app.tsx in your editor.
2. Replace the notary URL:

   notaryUrl: 'https://notary.pse.dev/v0.1.0-alpha.11',
   

   This uses the PSE notary server to notarize the API request. You can use a different or local notary; a local server will be faster due to the high bandwidth and low network latency.
3. Replace the websocket proxy URL:

   websocketProxyUrl: 'wss://notary.pse.dev/proxy?token=raw.githubusercontent.com',
   

   This uses a proxy hosted by PSE. You can use a different or local proxy if you prefer.

---

Run the Demo

1. Install dependencies:

   npm i
   

2. Start the Webpack Dev Server:

   npm run dev
   

3. Open the demo in your browser:
   Go to http://localhost:8080
4. Click the "Start demo" button
5. Open Developer Tools and monitor the console logs