mirror of
https://github.com/tlsnotary/tlsn-js.git
synced 2026-04-02 03:00:18 -04:00
66ec4343e8
* chore: update config options * Alpha.12 --------- Co-authored-by: Hendrik Eeckhaut <hendrik@eeckhaut.org>
78 lines
2.5 KiB
Markdown
78 lines
2.5 KiB
Markdown
# 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](https://github.com/sile/wstcp):**
|
|
```sh
|
|
cargo install wstcp
|
|
```
|
|
2. **Run a websocket proxy for `https://raw.githubusercontent.com`:**
|
|
```sh
|
|
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:**
|
|
```sh
|
|
git clone https://github.com/tlsnotary/tlsn.git
|
|
cargo run --release --bin notary-server
|
|
```
|
|
- **Using Docker (from the root of the tlsn-js repo):**
|
|
```sh
|
|
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:
|
|
```ts
|
|
notaryUrl: 'https://notary.pse.dev/v0.1.0-alpha.11',
|
|
```
|
|
This uses the [PSE](https://pse.dev) notary server to notarize the API request. You can use a different or [local notary](#run-a-local-notary-server); a local server will be faster due to the high bandwidth and low network latency.
|
|
3. Replace the websocket proxy URL:
|
|
```ts
|
|
websocketProxyUrl: 'wss://notary.pse.dev/proxy?token=raw.githubusercontent.com',
|
|
```
|
|
This uses a proxy hosted by [PSE](https://pse.dev). You can use a different or local proxy if you prefer.
|
|
|
|
---
|
|
|
|
## Run the Demo
|
|
|
|
1. **Install dependencies:**
|
|
```sh
|
|
npm i
|
|
```
|
|
2. **Start the Webpack Dev Server:**
|
|
```sh
|
|
npm run dev
|
|
```
|
|
3. **Open the demo in your browser:**
|
|
Go to [http://localhost:8080](http://localhost:8080)
|
|
4. **Click the "Start demo" button**
|
|
5. **Open Developer Tools** and monitor the console logs |