diff --git a/demo/interactive-demo-inverted/prover-rs/src/lib.rs b/demo/interactive-demo-inverted/prover-rs/src/lib.rs index 7927a49..8d9d06a 100644 --- a/demo/interactive-demo-inverted/prover-rs/src/lib.rs +++ b/demo/interactive-demo-inverted/prover-rs/src/lib.rs @@ -36,9 +36,9 @@ use ws_stream_tungstenite::WsStream; mod axum_websocket; // Maximum number of bytes that can be sent from prover to server -const MAX_SENT_DATA: usize = 1 << 12; +const MAX_SENT_DATA: usize = 2048; // Maximum number of bytes that can be received by prover from server -const MAX_RECV_DATA: usize = 1 << 14; +const MAX_RECV_DATA: usize = 4096; const SECRET: &str = "TLSNotary's private key 🤡"; diff --git a/demo/interactive-demo-inverted/verifier-rs/src/main.rs b/demo/interactive-demo-inverted/verifier-rs/src/main.rs index 7b1213d..7acbf70 100644 --- a/demo/interactive-demo-inverted/verifier-rs/src/main.rs +++ b/demo/interactive-demo-inverted/verifier-rs/src/main.rs @@ -18,9 +18,9 @@ const TRACING_FILTER: &str = "INFO"; const PROVER_HOST: &str = "localhost"; const PROVER_PORT: u16 = 9816; // Maximum number of bytes that can be sent from prover to server -const MAX_SENT_DATA: usize = 1 << 12; +const MAX_SENT_DATA: usize = 2048; // Maximum number of bytes that can be received by prover from server -const MAX_RECV_DATA: usize = 1 << 14; +const MAX_RECV_DATA: usize = 4096; /// Make sure the following url's domain is the same as SERVER_DOMAIN on the prover side const SERVER_DOMAIN: &str = "raw.githubusercontent.com"; diff --git a/demo/interactive-demo-inverted/prover-ts/.gitignore b/demo/interactive-demo-inverted/verifier-ts/.gitignore similarity index 100% rename from demo/interactive-demo-inverted/prover-ts/.gitignore rename to demo/interactive-demo-inverted/verifier-ts/.gitignore diff --git a/demo/interactive-demo-inverted/prover-ts/index.ejs b/demo/interactive-demo-inverted/verifier-ts/index.ejs similarity index 100% rename from demo/interactive-demo-inverted/prover-ts/index.ejs rename to demo/interactive-demo-inverted/verifier-ts/index.ejs diff --git a/demo/interactive-demo-inverted/prover-ts/package.json b/demo/interactive-demo-inverted/verifier-ts/package.json similarity index 97% rename from demo/interactive-demo-inverted/prover-ts/package.json rename to demo/interactive-demo-inverted/verifier-ts/package.json index f4b3879..80129ef 100644 --- a/demo/interactive-demo-inverted/prover-ts/package.json +++ b/demo/interactive-demo-inverted/verifier-ts/package.json @@ -1,5 +1,5 @@ { - "name": "prover-ts", + "name": "verifier-ts", "version": "1.0.0", "description": "", "main": "webpack.js", diff --git a/demo/interactive-demo-inverted/prover-ts/playwright.config.ts b/demo/interactive-demo-inverted/verifier-ts/playwright.config.ts similarity index 100% rename from demo/interactive-demo-inverted/prover-ts/playwright.config.ts rename to demo/interactive-demo-inverted/verifier-ts/playwright.config.ts diff --git a/demo/interactive-demo-inverted/prover-ts/postcss.config.js b/demo/interactive-demo-inverted/verifier-ts/postcss.config.js similarity index 100% rename from demo/interactive-demo-inverted/prover-ts/postcss.config.js rename to demo/interactive-demo-inverted/verifier-ts/postcss.config.js diff --git a/demo/interactive-demo-inverted/prover-ts/src/app.scss b/demo/interactive-demo-inverted/verifier-ts/src/app.scss similarity index 100% rename from demo/interactive-demo-inverted/prover-ts/src/app.scss rename to demo/interactive-demo-inverted/verifier-ts/src/app.scss diff --git a/demo/interactive-demo-inverted/prover-ts/src/app.tsx b/demo/interactive-demo-inverted/verifier-ts/src/app.tsx similarity index 51% rename from demo/interactive-demo-inverted/prover-ts/src/app.tsx rename to demo/interactive-demo-inverted/verifier-ts/src/app.tsx index 92e2ee0..9a655a7 100644 --- a/demo/interactive-demo-inverted/prover-ts/src/app.tsx +++ b/demo/interactive-demo-inverted/verifier-ts/src/app.tsx @@ -2,13 +2,18 @@ import React, { ReactElement, useCallback, useState } from 'react'; import { createRoot } from 'react-dom/client'; import * as Comlink from 'comlink'; import { Watch } from 'react-loader-spinner'; -import { Prover as TProver } from 'tlsn-js'; +import { + Prover as TProver, + Verifier as TVerifier, + Commit, + Transcript, +} from 'tlsn-js'; import { type Method } from 'tlsn-wasm'; import './app.scss'; import { HTTPParser } from 'http-parser-js'; import { Reveal, mapStringToRange, subtractRanges } from 'tlsn-js'; -const { init, Prover }: any = Comlink.wrap( +const { init, Verifier }: any = Comlink.wrap( new Worker(new URL('./worker.ts', import.meta.url)), ); @@ -19,130 +24,69 @@ root.render(); const serverUrl = 'https://raw.githubusercontent.com/tlsnotary/tlsn/refs/tags/v0.1.0-alpha.12/crates/server-fixture/server/src/data/1kb.json'; // const websocketProxyUrl = `wss://notary.pse.dev/proxy`; -const websocketProxyUrl = 'ws://localhost:55688'; -const verifierProxyUrl = 'ws://localhost:9816/verify'; +const proverProxyUrl = 'ws://localhost:9816/prove'; function App(): ReactElement { + const [ready, setReady] = useState(false); const [processing, setProcessing] = useState(false); const [result, setResult] = useState(null); + // Initialize TLSNotary + React.useEffect(() => { + (async () => { + await init({ loggingLevel: 'Info' }); + setReady(true); + console.log('tlsn init ready'); + })(); + }, []); + const onClick = useCallback(async () => { setProcessing(true); - const url = serverUrl; - const method: Method = 'GET'; - const headers = { - secret: "TLSNotary's private key", - 'Content-Type': 'application/json', - }; - const body = {}; - - const hostname = new URL(url).hostname; - - let prover: TProver; + let verifier: TVerifier; try { - console.time('setup'); - await init({ loggingLevel: 'Info' }); - console.log('Setting up Prover for', hostname); - prover = (await new Prover({ - serverDns: hostname, - maxRecvData: 2000 - })) as TProver; - console.log('Setting up Prover: 1/2'); - await prover.setup(verifierProxyUrl); - console.log('Setting up Prover: done'); - console.timeEnd('setup'); - } catch (error) { - const msg = `Error setting up prover: ${error}`; - console.error(msg); - setResult(msg); + console.log('Setting up Verifier'); + verifier = await new Verifier({ + maxSentData: 2048, + maxRecvData: 4096 + }); + console.log('Verifier class instantiated'); + await verifier.connect(proverProxyUrl); + console.log('Connecting verifier to p2p proxy: done'); + } catch (e: any) { + console.error('Error setting up verifier', e); + console.error('Error connecting verifier to p2p proxy', e); setProcessing(false); return; } - let transcript; - try { - console.time('request'); - console.log('Sending request to proxy'); + await new Promise((r) => setTimeout(r, 2000)); - const resp = await prover.sendRequest( - `${websocketProxyUrl}?token=${hostname}`, - { url, method, headers, body }, - ); - console.log('Response:', resp); - console.log('Wait for transcript'); - transcript = await prover.transcript(); - console.log('Transcript:', transcript); - console.timeEnd('request'); - } catch (error) { - const msg = `Error sending request: ${error}`; - console.error(msg); - setResult(msg); - setProcessing(false); - return; - } + console.log('Start verifier'); + // This needs to be called before we send the request + // This starts the verifier and makes it wait for the prover to send the request + const verified = verifier.verify(); + const result = await verified; + console.log('Verification completed'); - try { - const { sent, recv } = transcript; - const { - info: recvInfo, - headers: recvHeaders, - body: recvBody, - } = parseHttpMessage(Buffer.from(recv), 'response'); + const t = new Transcript({ + sent: result.transcript?.sent || [], + recv: result.transcript?.recv || [], + }); - const body = JSON.parse(recvBody[0].toString()); - - console.log("test", body.information.address.street); - - console.time('reveal'); - const reveal: Reveal = { - sent: subtractRanges( - { start: 0, end: sent.length }, - mapStringToRange( - ['secret: test_secret'], - Buffer.from(sent).toString('utf-8'), - ), - ), - recv: [ - ...mapStringToRange( - [ - recvInfo, - `${recvHeaders[4]}: ${recvHeaders[5]}\r\n`, - `${recvHeaders[6]}: ${recvHeaders[7]}\r\n`, - `${recvHeaders[8]}: ${recvHeaders[9]}\r\n`, - `${recvHeaders[10]}: ${recvHeaders[11]}\r\n`, - `${recvHeaders[12]}: ${recvHeaders[13]}`, - `${recvHeaders[14]}: ${recvHeaders[15]}`, - `${recvHeaders[16]}: ${recvHeaders[17]}`, - `${recvHeaders[18]}: ${recvHeaders[19]}`, - `"name": "${body.information.name}"`, - `"street": "${body.information.address.street}"`, - ], - Buffer.from(recv).toString('utf-8'), - ), - ], - server_identity: true, - }; - console.log('Start reveal:', reveal); - await prover.reveal(reveal); - console.timeEnd('reveal'); - } catch (error) { - console.dir(error); - console.error('Error during data reveal:', error); - setResult(`${error}`); - setProcessing(false); - return; - } + console.log('Verified data:'); + console.log(`transcript.sent: ${t.sent()}`); + console.log(`transcript.recv: ${t.recv()}`); console.log('Ready'); console.log('Unredacted data:', { - sent: transcript.sent, - received: transcript.recv, + sent: t.sent(), + received: t.recv(), }); setResult( - "Unredacted data successfully revealed to Verifier. Check the Verifier's console output to see what exactly was shared and revealed.", + t.recv(), ); setProcessing(false); @@ -152,14 +96,14 @@ function App(): ReactElement {

TLSNotary

- Interactive Prover Demo + Interactive Verifier Demo

- Before clicking the Start{' '} - button, make sure the interactive verifier and the{' '} - web socket proxy are running. + Before clicking the Verify{' '} + button, make sure the interactive Prover is running.
+ (This demo does not require a proxy server.)

Check the{' '} @@ -181,13 +125,10 @@ function App(): ReactElement { {serverUrl} - Verifier - {verifierProxyUrl} - - - WebSocket Proxy - {websocketProxyUrl} + Prover + {proverProxyUrl} +

@@ -199,11 +140,11 @@ function App(): ReactElement { ${processing ? 'bg-slate-400 cursor-not-allowed' : 'bg-slate-600 hover:bg-slate-700'} `} > - Start Prover + Verify Prover Server
- Proof: + Verified data: {!processing && !result ? ( Not started yet ) : !result ? ( diff --git a/demo/interactive-demo-inverted/prover-ts/src/worker.ts b/demo/interactive-demo-inverted/verifier-ts/src/worker.ts similarity index 55% rename from demo/interactive-demo-inverted/prover-ts/src/worker.ts rename to demo/interactive-demo-inverted/verifier-ts/src/worker.ts index 72ced4f..d221592 100644 --- a/demo/interactive-demo-inverted/prover-ts/src/worker.ts +++ b/demo/interactive-demo-inverted/verifier-ts/src/worker.ts @@ -1,7 +1,7 @@ import * as Comlink from 'comlink'; -import init, { Prover } from 'tlsn-js'; +import init, { Verifier } from 'tlsn-js'; Comlink.expose({ init, - Prover, + Verifier, }); diff --git a/demo/interactive-demo-inverted/prover-ts/tailwind.config.js b/demo/interactive-demo-inverted/verifier-ts/tailwind.config.js similarity index 100% rename from demo/interactive-demo-inverted/prover-ts/tailwind.config.js rename to demo/interactive-demo-inverted/verifier-ts/tailwind.config.js diff --git a/demo/interactive-demo-inverted/prover-ts/tests/demo-flow.spec.ts b/demo/interactive-demo-inverted/verifier-ts/tests/demo-flow.spec.ts similarity index 100% rename from demo/interactive-demo-inverted/prover-ts/tests/demo-flow.spec.ts rename to demo/interactive-demo-inverted/verifier-ts/tests/demo-flow.spec.ts diff --git a/demo/interactive-demo-inverted/prover-ts/tsconfig.json b/demo/interactive-demo-inverted/verifier-ts/tsconfig.json similarity index 100% rename from demo/interactive-demo-inverted/prover-ts/tsconfig.json rename to demo/interactive-demo-inverted/verifier-ts/tsconfig.json diff --git a/demo/interactive-demo-inverted/prover-ts/webpack.js b/demo/interactive-demo-inverted/verifier-ts/webpack.js similarity index 100% rename from demo/interactive-demo-inverted/prover-ts/webpack.js rename to demo/interactive-demo-inverted/verifier-ts/webpack.js