Setup backend Web2 skeleton

This PR setups the backend API skeleton and changes the front-end to
interact with that API.

demos/web2_integration/astro.config.ts

@@ -1,4 +1,13 @@
 import { defineConfig } from "astro/config";
 
 // https://astro.build/config
-export default defineConfig({});
+export default defineConfig({
+  output: "server",
+  vite: {
+    server: {
+      watch: {
+        ignored: [".idea"], // don't hot reload on IDE file changes
+      },
+    },
+  },
+});

demos/web2_integration/src/auth_overrides.ts

@@ -0,0 +1,49 @@
+import { AuthClient, IdbStorage } from "@dfinity/auth-client";
+import { AnonymousIdentity, SignIdentity } from "@dfinity/agent";
+import type {
+  DerEncodedPublicKey,
+  PublicKey,
+  Signature,
+} from "@dfinity/agent/lib/esm/auth";
+
+export class ChallengeAuthClient extends AuthClient {
+  public constructor(challenge: string) {
+    super(
+      new AnonymousIdentity(),
+      new ChallengeIdentity(challenge),
+      null,
+      new IdbStorage(),
+      undefined,
+      undefined,
+    );
+  }
+}
+
+export class ChallengeIdentity extends SignIdentity {
+  private readonly challenge: ArrayBuffer;
+  public constructor(challenge: string) {
+    super();
+    this.challenge = base64ToBytes(challenge);
+  }
+
+  getPublicKey(): PublicKey {
+    return new Challenge(this.challenge);
+  }
+
+  sign(_blob: ArrayBuffer): Promise<Signature> {
+    throw new Error("not implemented");
+  }
+}
+
+export class Challenge {
+  constructor(public challenge: ArrayBuffer) {}
+
+  public toDer(): DerEncodedPublicKey {
+    return this.challenge;
+  }
+}
+
+function base64ToBytes(base64: string): Uint8Array {
+  const binString = atob(base64);
+  return Uint8Array.from(binString, (m) => m.codePointAt(0)!);
+}

demos/web2_integration/src/pages/api/attribute/verify.ts

@@ -0,0 +1,12 @@
+import type { APIRoute } from "astro";
+
+export const POST: APIRoute = async ({ request }) => {
+  if (request.headers.get("Content-Type") === "application/json") {
+    const body = await request.json();
+    console.log(`submitted verifiable presentation: ${JSON.stringify(body)}`);
+    return new Response(undefined, {
+      status: 200,
+    });
+  }
+  return new Response(null, { status: 400 });
+};

demos/web2_integration/src/pages/api/challenge.ts

@@ -0,0 +1,14 @@
+import type { APIRoute } from "astro";
+import crypto from "crypto";
+
+export const GET: APIRoute = () => {
+  console.log("challenge requested");
+  return new Response(
+    JSON.stringify({
+      challenge: crypto.randomBytes(20).toString("base64"),
+    }),
+    {
+      status: 200,
+    },
+  );
+};

demos/web2_integration/src/pages/api/challenge/verify.ts

@@ -0,0 +1,12 @@
+import type { APIRoute } from "astro";
+
+export const POST: APIRoute = async ({ request }) => {
+  if (request.headers.get("Content-Type") === "application/json") {
+    const body = await request.json();
+    console.log(`submitted delegation chain: ${JSON.stringify(body)}`);
+    return new Response(undefined, {
+      status: 200,
+    });
+  }
+  return new Response(null, { status: 400 });
+};

demos/web2_integration/src/pages/index.astro

@@ -7,24 +7,35 @@ import Layout from "../layouts/Layout.astro";
 
   <script>
     import { html } from "lit-html";
-    import { AuthClient } from "@dfinity/auth-client";
     import { nonNullish, isNullish } from "@dfinity/utils";
     import { asyncReplace } from "lit-html/directives/async-replace.js";
     import { createRef, ref } from "lit-html/directives/ref.js";
     import { decodeJwt } from "jose";
     import { Chan, renderPage, withRef } from "../utils";
+    import { ChallengeAuthClient } from "../auth_overrides";
+    import { DelegationIdentity } from "@dfinity/identity";
 
     const latestPres = new Chan<string | undefined>(undefined);
     const ii = new Chan<
       { win: Window; origin: string; flowId: number } | undefined
     >(undefined);
-    const evntHandler = (evnt: MessageEvent) => {
+    const evntHandler = async (evnt: MessageEvent) => {
       console.log(
         `Got:
         ${JSON.stringify(evnt.data, (_key, value) =>
           typeof value === "bigint" ? value.toString() : value,
         )}`,
       );
+      const credentialSpecs = {
+        employee: {
+          credentialType: "VerifiedEmployee",
+          arguments: { employerName: "DFINITY Foundation" },
+        },
+        grad: {
+          credentialType: "UniversityDegreeCredential",
+          arguments: { institutionName: "DFINITY College of Engineering" },
+        },
+      };
 
       if (evnt.data?.method === "vc-flow-ready" && nonNullish(ii.latest)) {
         const principal = withRef(principalInput, (principalInput) => {
@@ -54,17 +65,6 @@ import Layout from "../layouts/Layout.astro";
           return;
         }
 
-        const credentialSpecs = {
-          employee: {
-            credentialType: "VerifiedEmployee",
-            arguments: { employerName: "DFINITY Foundation" },
-          },
-          grad: {
-            credentialType: "UniversityDegreeCredential",
-            arguments: { institutionName: "DFINITY College of Engineering" },
-          },
-        };
-
         let message = {
           id: ii.latest.flowId,
           jsonrpc: "2.0",
@@ -84,6 +84,17 @@ import Layout from "../layouts/Layout.astro";
 
       const verifiablePresentation = evnt.data?.result?.verifiablePresentation;
       if (nonNullish(verifiablePresentation)) {
+        await fetch("/api/attribute/verify", {
+          method: "POST",
+          headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify({
+            verifiablePresentation: verifiablePresentation,
+            credentialSpec: credentialSpecs[credentialType.latest],
+          }),
+        });
         const ver = decodeJwt(verifiablePresentation) as any;
         const creds = ver.vp.verifiableCredential;
 
@@ -124,19 +135,34 @@ import Layout from "../layouts/Layout.astro";
             class="c-button"
             data-action="authenticate"
             @click=${async () => {
-              const authClient = await AuthClient.create();
+              let challengeResponse = await fetch("/api/challenge");
+              let { challenge }: { challenge: string } =
+                await challengeResponse.json();
+              console.log(`Retrieved challenge: ${challenge}`);
+              const authClient = new ChallengeAuthClient(challenge);
 
               const iiUrl = withRef(urlInput, (i) => i.value);
 
               const loginOptions: Parameters<typeof authClient.login>[0] = {
                 identityProvider: iiUrl,
-                onSuccess: () => {
+                onSuccess: async () => {
                   withRef(principalInput, (principalInput) => {
                     principalInput.innerText = authClient
                       .getIdentity()
                       .getPrincipal()
                       .toString();
                   });
+                  let delegation = (
+                    authClient.getIdentity() as DelegationIdentity
+                  ).getDelegation();
+                  await fetch("/api/challenge/verify", {
+                    method: "POST",
+                    headers: {
+                      Accept: "application/json",
+                      "Content-Type": "application/json",
+                    },
+                    body: JSON.stringify(delegation.toJSON()),
+                  });
                 },
                 onError: (e) => {
                   alert(e ?? "Unknown error");