Merge pull request #1 from schlagtim/c2bo/example

WIP: Highlight digests of disclosures on mouse events

src/lib/sd-jwt.ts

@@ -1,4 +1,4 @@
-import { SdJwt } from "@sd-jwt/core";
+import { SdJwt, type HasherAndAlgorithm, HasherAlgorithm } from "@sd-jwt/core";
 
 export function splitJwt(text: string): string[] {
 	const result = text.split(".");
@@ -57,3 +57,34 @@ export function decodeSdJwt(encodedJwt: string) {
 		return undefined;
 	}
 }
+
+export default crypto;
+export function provideHasher(alg: string) {
+	let browserAlg: string = "";
+	switch (alg.toLowerCase()) {
+		case "sha-256":
+			browserAlg = "SHA-256";
+			break;
+		case "sha-384":
+			browserAlg = "SHA-384";
+			break;
+		case "sha-512":
+			browserAlg = "SHA-512";
+			break;
+	}
+	var enc = new TextEncoder();
+	const hasherAndAlgorithm: HasherAndAlgorithm = {
+		// TODO: how do you properly cast this?
+		hasher: (input: string) =>
+			crypto.subtle
+				.digest(browserAlg, enc.encode(input))
+				.then((val) => {
+					return new Uint8Array(val);
+				})
+				.catch((err) => {
+					return new Uint8Array(0);
+				}),
+		algorithm: alg,
+	};
+	return hasherAndAlgorithm;
+}

src/routes/+page.svelte

@@ -1,23 +1,27 @@
 <script lang="ts">
-	import { decodeSdJwt, formatJsonObject } from "$lib/sd-jwt";
-	import { Disclosure } from "@sd-jwt/core";
+	import { decodeSdJwt, formatJsonObject, provideHasher } from "$lib/sd-jwt";
 	import Disclosures from "./Disclosures.svelte";
 	import Editor from "./Editor.svelte";
+	import type { DisclosureWithDigest } from "@sd-jwt/core/build/sdJwt";
 	import { onMount } from "svelte";
 
 	let encodedJwt: string | undefined =
 		"eyJhbGciOiJFZERTQSIsInR5cCI6InNkLWp3dCJ9.eyJpYXQiOjE3MDc2NjcxNTM2MzQsImlzcyI6ImRpZDprZXk6c29tZS1yYW5kb20tZGlkLWtleSIsIm5iZiI6MTcwNzY2NzE1MzczNCwiY3JlZGVudGlhbCI6eyJfc2QiOlsiNjRkUkN0YllkVkVMYW90eDBRVlFMZEdqcm9RSG1OUEI0TmI4b1BzbnE3YyIsIjZBMHF6TDQtZ3hrSkFuQ1EtSzN6b2hMYXo2Qzh3TUhXei0tSW41eFdsZmMiLCI2UFgxYXRrNEtpdm5NRDlSZjBMcF9LV2JBRkJVT1RPQjN1NzFmZzRPZ2NrIiwiWE4tZzluLXphODViVnhPaWlQUXF2Vl9VVmtLdG04VXlWbFZJZElCU3ltNCIsIm5Xc29GQ2V1cnFLZzJDbmFEeUxKMXV5UUtNUmtPdFFNMV95dUtaTjR5VlEiLCJ2bnBZcU1qOTdVMUZPX3VzRHhacWZVcl84Z2ZvdkpfdDNpVmo1OWtfZGkwIl19LCJfc2RfYWxnIjoic2hhLTI1NiIsIl9zZCI6WyJFX2N2SWNYOGYzYnZFNXVNVzctNEp5ZnNNMkNycUFhLVBjOU15MmtNaGFNIiwidlcxdWJSTUotVFBlRzIzS0J1OElleXlNeXVJRG5QNDB3SzR0YmRjbDdxdyIsInl5aTItMVJLaVNiR2YyY3hyX2VkQkljbVNUdzJMSVQ4dWUwVm1RemNpeTgiXX0.zeCXWQgiWFJIFZBVC9GKKSilJ--6u8OIQ4AnDRopKN4KQtYS8Z98ORxWb3_bDOdmNEHDvMqtAkEvxqk08_USCQ~WyJpSFFLaDlFM3BxZUluLXFvelVMMU93IiwiY3JlZGVudGlhbFN1YmplY3QiLCJkaWQ6cGVlcjo0cmVjZWl2ZXItcGVlci1kaWQiXQ~WyJxYzlObkVjeVA4YmsxV2RKTE53c1BBIiwiZGF0ZU9mQmlydGgiLCIyMDAwMDEwMSJd~WyJvVXJsUnNfRzlncWlQN2o4TDhPekd3IiwibmFtZSIsIkpvaG4iXQ~WyJpeld6c3BQMzUxdm55dzN0eno0blNnIiwibGFzdE5hbWUiLCJEb2UiXQ~eyJ0eXAiOiJrYitqd3QiLCJhbGciOiJFZERTQSJ9.eyJpYXQiOjE3MDc2NjcxNTM2MzMsImF1ZCI6ImRpZDpwZWVyOjQ6c29tZS12ZXJpZmllciIsIm5vbmNlIjoiaVloOXBoU3ZWWTFVcUpsX05pNklJUSIsIl9zZF9oYXNoIjoiRTYwNWJfbnJPallsdUlSbktfQThKNTNhemwwcG8wcThBbHBJczZrQm5JWSJ9.6ZAydMHRVByM02Z79zQSWuZU3ZfNIkmVrMXM2ZVR-nN92h_J9D5-2cB7gPZ3aDP3Z-BY1Wj2kp_cIakv5ji3Cw";
 	let jwtHeader = "";
 	let jwtPayload = "";
 	let jwtSignature = "";
+	let disclosures: Promise<DisclosureWithDigest[] | undefined> | undefined;
+	let alg: any;
 	let jwtPayloadSelection = "credential";
-	let disclosures: Disclosure[] = [];
 
 	$: sdJWt = encodedJwt ? decodeSdJwt(encodedJwt) : undefined;
 	$: jwtHeader = formatJsonObject(sdJWt?.header);
 	$: jwtPayload = formatJsonObject(sdJWt?.payload);
 	$: jwtSignature = sdJWt?.signature ? sdJWt?.signature.toLocaleString() : "";
-	$: disclosures = sdJWt?.disclosures ? sdJWt?.disclosures : [];
+	$: alg = sdJWt ? sdJWt?.payload["_sd_alg"] : "";
+	$: disclosures = sdJWt
+		? sdJWt?.withHasher(provideHasher(alg)).disclosuresWithDigest()
+		: undefined;
 </script>
 
 <svelte:head>
@@ -43,7 +47,11 @@
 			<Editor title="Signature" value={jwtSignature} emitChanges={false}></Editor>
 		</div>
 		<div class="column" style="flex: 1;">
-			<Disclosures {disclosures}></Disclosures>
+			{#await disclosures then disclosures}
+				<Disclosures bind:jwtPayloadSelection {disclosures}></Disclosures>
+			{:catch error}
+				<p style="color: red">{error.message}</p>
+			{/await}
 		</div>
 	</div>
 </section>

src/routes/Disclosures.svelte

@@ -1,15 +1,23 @@
 <script lang="ts">
+	import { page } from "$app/stores";
 	import type { Disclosure } from "@sd-jwt/core";
 
 	export let disclosures: Disclosure[] = [];
+	export let jwtPayloadSelection: string = "";
 </script>
 
 <div class="box">
 	<div class="stripes">
 		<h5>DISCLOSURES</h5>
 	</div>
 	{#each disclosures as disclosure}
-		<div class="stripes">
+		<div
+			class="stripes"
+			on:mouseover={() => {
+				jwtPayloadSelection = disclosure.digest ? disclosure.digest : "";
+				console.log("Hovering ", jwtPayloadSelection);
+			}}
+		>
 			<p style="text-align: center;"><small><b>{disclosure.key}</b></small></p>
 			<div style="background-color: whitesmoke;">
 				<p>

src/routes/Editor.svelte

@@ -84,6 +84,7 @@
 	}
 	$: if (selectText != null) {
 		selectedText ? selectText(selectedText) : undefined;
+		console.log("setting hover target", selectedText);
 	}
 
 	onDestroy(() => {