TLSNotary in React/Typescript with tlsn-js

In this quick start you will learn how to use TLSNotary in React/Typescript with the tlsn-js NPM module in the browser.

This quick start uses the react/typescript demos in tlsn-js. The demo directory contains three demos to quickly bootstrap a webpack app using tlsn-js:

  1. react-ts-webpack: create an attestation with a Notary and render the result
  2. interactive-demo: prove data interactively to a Verifier
  3. web-to-web-p2p: prove data between two peers, in the browser

tlsn-js in a React/Typescript app

In this demo, we will request JSON data from the Star Wars API at https://swapi.dev. We will use tlsn-js to notarize the TLS request with TLSNotary and store the result in a proof. Then, we will use tlsn-js again to verify this proof.

NOTE: ℹ️ This demo uses TLSNotary to notarize public data to simplify the quick start for everyone. For real-world applications, TLSNotary is particularly valuable for notarizing private and sensitive data.

  1. Clone the repository 
    git clone https://github.com/tlsnotary/tlsn-js
  2. Navigate to the demo directory: 
    cd tlsn-js/demo/react-ts-webpack
  3. Checkout the version of this quick start: 
    git checkout v0.1.0-alpha.8
  4. If you want to use a local TLSNotary server: Run a local notary server and websocket proxy, otherwise:
    1. Open app.tsx in your favorite editor.
    2. Replace notaryUrl: 'http://localhost:7047', with: 
         notaryUrl: 'https://notary.pse.dev/v0.1.0-alpha.8',
      This makes this webpage use the PSE notary server to notarize the API request. Feel free to use different or local notary; a local server will be faster because it removes the bandwidth constraints between the user and the notary.
    3. Replace websocketProxyUrl: 'ws://localhost:55688', with: 
          websocketProxyUrl: 'wss://notary.pse.dev/proxy?token=swapi.dev',
      Because a web browser doesn't have the ability to make TCP connection, we need to use a websocket proxy server. This uses a proxy hosted by PSE. Feel free to use different or local notary proxy.
    4. In package.json: check the version number: 
          "tlsn-js": "v0.1.0-alpha.8"
  5. Install dependencies 
    npm i
  6. Start Webpack Dev Server: 
    npm run dev
  7. Open http://localhost:8080 in your browser
  8. Click the Start demo button
  9. Open Developer Tools and monitor the console logs

Interactive verification with tlsn-js

Follow the instructions from: https://github.com/tlsnotary/tlsn-js/blob/main/demo/interactive-demo/README.md

Web-to-web proofs with tlsn-js

This demo showcases peer-to-peer communication between a web prover and a web verifier using TLSNotary. The prover fetches data from swapi.dev and proves it to the verifier.

Follow the instructions from: https://github.com/tlsnotary/tlsn-js/blob/main/demo/web-to-web-p2p/README.md

Run a local notary server and websocket proxy (Optional)

The instructions above, use the PSE hosted notary server and websocket proxy. This is easier for this quick start because it requires less setup. If you develop your own applications with tlsn-js, development will be easier with locally hosted services. This section explains how.

Websocket Proxy

Since a web browser doesn't have the ability to make TCP connection, we need to use a websocket proxy server.

  1. Install wstcp:
cargo install wstcp
  1. Run a websocket proxy for https://swapi.dev:
wstcp --bind-addr 127.0.0.1:55688 swapi.dev:443

Note the swapi.dev:443 argument on the last line, this is the server we will use in this quick start.

Run a Local Notary Server

For this demo, we also need to run a local notary server.

  1. Clone the TLSNotary repository (defaults to the main branch, which points to the latest release): 
    git clone https://github.com/tlsnotary/tlsn.git
  2. Run the notary server: 
    cd crates/notary/server
cargo run --release -- --tls-enabled false

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