Add VC support for alternative origins

demos/test-app/src/index.tsx

@@ -360,6 +360,7 @@ let latestOpts:
   | undefined
   | {
       issuerOrigin: string;
+      derivationOrigin?: string;
       credTy: CredType;
       flowId: number;
       win: Window;
@@ -408,6 +409,7 @@ function handleFlowReady(evnt: MessageEvent) {
       },
       credentialSpec: credentialSpecs[opts.credTy],
       credentialSubject: principal,
+      derivationOrigin: opts.derivationOrigin,
     },
   };
 
@@ -458,6 +460,9 @@ const App = () => {
     "http://issuer.localhost:5173"
   );
 
+  // Alternative origin for the RP, if any
+  const [derivationOrigin, setDerivationOrigin] = useState<string>("");
+
   // Continuously incrementing flow IDs used in the JSON RPC messages
   const [nextFlowId, setNextFlowId] = useState(0);
 
@@ -486,6 +491,7 @@ const App = () => {
       flowId,
       credTy,
       issuerOrigin: issuerUrl,
+      derivationOrigin: derivationOrigin !== "" ? derivationOrigin : undefined,
       win: iiWindow,
     };
 
@@ -504,6 +510,15 @@ const App = () => {
           onChange={(evt) => setIssuerUrl(evt.target.value)}
         />
       </label>
+      <label>
+        Alternative Derivation Origin:
+        <input
+          data-role="derivation-origin-rp"
+          type="text"
+          placeholder="(use default)"
+          onChange={(evt) => setDerivationOrigin(evt.target.value)}
+        />
+      </label>
 
       <button
         data-action="verify-employee"

src/frontend/src/flows/verifiableCredentials/abortedCredentials.json

@@ -9,6 +9,7 @@
     "aborted_bad_principal_rp": "The principal provided by the relying party does not match the data Internet Identity has.",
     "aborted_no_canister_id": "Internet Identity could not find the canister for the issuer.",
     "aborted_bad_canister_id": "Internet Identity could not confirm the canister ID given for the issuer.",
+    "aborted_bad_derivation_origin_rp": "Internet Identity could not confirm the derivation origin for the relying party.",
     "notice": "We will now let the relying party know there was an issue.",
     "you_may_close": "You may now close this page."
   }

src/frontend/src/flows/verifiableCredentials/abortedCredentials.ts

@@ -15,7 +15,8 @@ export type AbortReason =
   | "issuer_api_error"
   | "bad_principal_rp"
   | "no_canister_id"
-  | "bad_canister_id";
+  | "bad_canister_id"
+  | "bad_derivation_origin_rp";
 
 /* A screen telling the user the flow was aborted and giving information
  * on why it was aborted and what they can do about it. */
@@ -42,7 +43,8 @@ const abortedCredentialsTemplate = ({
 
   const slot = html`
     <hgroup
-      data-page="vc-allow"
+      data-page="vc-aborted"
+      data-abort-reason=${reason}
       ${scrollToTop ? mount(() => window.scrollTo(0, 0)) : undefined}
     >
       <h1 class="t-title t-title--main">${copy.title}</h1>

src/frontend/src/flows/verifiableCredentials/index.ts

@@ -4,6 +4,7 @@ import { withLoader } from "$src/components/loader";
 import { showMessage } from "$src/components/message";
 import { showSpinner } from "$src/components/spinner";
 import { fetchDelegation } from "$src/flows/authorize/fetchDelegation";
+import { validateDerivationOrigin } from "$src/flows/authorize/validateDerivationOrigin";
 import { getAnchorByPrincipal } from "$src/storage";
 import { AuthenticatedConnection, Connection } from "$src/utils/iiConnection";
 import {
@@ -69,8 +70,9 @@ const verifyCredentials = async ({
     credentialSubject: givenP_RP,
     issuer: { origin: issuerOrigin, canisterId: expectedIssuerCanisterId_ },
     credentialSpec,
+    derivationOrigin: rpDerivationOrigin,
   },
-  rpOrigin,
+  rpOrigin: rpOrigin_,
 }: { connection: Connection } & VerifyCredentialsArgs) => {
   // Look up the canister ID from the origin
   const lookedUp = await withLoader(() =>
@@ -89,6 +91,15 @@ const verifyCredentials = async ({
     }
   }
 
+  const validationResult = await withLoader(() =>
+    validateDerivationOrigin(rpOrigin_, rpDerivationOrigin)
+  );
+  if (validationResult.result === "invalid") {
+    return abortedCredentials({ reason: "bad_derivation_origin_rp" });
+  }
+  validationResult.result satisfies "valid";
+  const rpOrigin = rpDerivationOrigin ?? rpOrigin_;
+
   const vcIssuer = new VcIssuer(issuerCanisterId);
   // XXX: We don't check that the language matches the user's language. We need
   // to figure what to do UX-wise first.
@@ -99,13 +110,15 @@ const verifyCredentials = async ({
   }
 
   const userNumber_ = await getAnchorByPrincipal({
-    origin: rpOrigin,
+    origin:
+      rpOrigin_ /* NOTE: the storage uses the request origin, not the derivation origin */,
     principal: givenP_RP,
   });
 
   // Ask user to confirm the verification of credentials
   const allowed = await allowCredentials({
-    relyingOrigin: rpOrigin,
+    relyingOrigin:
+      rpOrigin_ /* NOTE: the design does not show the derivation origin (yet) */,
     providerOrigin: issuerOrigin,
     consentMessage: consentInfo.consent_message,
     userNumber: userNumber_,

src/frontend/src/test-e2e/verifiableCredentials/alternativeOrigins.test.ts

@@ -0,0 +1,109 @@
+import { runInBrowser } from "$src/test-e2e/util";
+import { DemoAppView } from "$src/test-e2e/views";
+
+import {
+  II_URL,
+  ISSUER_APP_URL,
+  TEST_APP_CANONICAL_URL,
+  TEST_APP_NICE_URL,
+} from "$src/test-e2e/constants";
+
+import {
+  authenticateToRelyingParty,
+  getVCPresentation,
+  getVCPresentation_,
+  register,
+  registerWithIssuer,
+} from "./utils";
+
+test("Can issue credential with alternative RP derivation origin", async () => {
+  await runInBrowser(async (browser: WebdriverIO.Browser) => {
+    await browser.url(II_URL);
+
+    const authConfig = await register["webauthn"](browser);
+
+    // 1. Add employee
+
+    const { msg: _msg, principal: _principal } = await registerWithIssuer({
+      browser,
+      issuer: ISSUER_APP_URL,
+      authConfig,
+    });
+
+    // 2. Do the flow without alt origins
+
+    const vcTestApp = await authenticateToRelyingParty({
+      browser,
+      issuer: ISSUER_APP_URL,
+      authConfig,
+      relyingParty: TEST_APP_CANONICAL_URL,
+    });
+    const principalRP = await vcTestApp.getPrincipal();
+    const { alias: alias_ } = await getVCPresentation({
+      vcTestApp,
+      browser,
+      authConfig,
+    });
+    const alias = JSON.parse(alias_);
+
+    // 3. Do the flow WITH alt origins
+    const vcTestAppAlt = await authenticateToRelyingParty({
+      browser,
+      issuer: ISSUER_APP_URL,
+      authConfig,
+      relyingParty: TEST_APP_NICE_URL,
+      derivationOrigin: TEST_APP_CANONICAL_URL,
+    });
+    const principalRPAlt = await vcTestAppAlt.getPrincipal();
+    expect(principalRPAlt).toBe(principalRP);
+
+    const { alias: aliasAlt_ } = await getVCPresentation({
+      vcTestApp: vcTestAppAlt,
+      browser,
+      authConfig,
+    });
+
+    const aliasAlt = JSON.parse(aliasAlt_);
+    expect(aliasAlt.sub).toBe(alias.sub);
+  });
+}, 300_000);
+
+test("Cannot issue credential with bad alternative RP derivation origin", async () => {
+  await runInBrowser(async (browser: WebdriverIO.Browser) => {
+    await browser.url(II_URL);
+
+    const authConfig = await register["webauthn"](browser);
+
+    // 1. Add employee
+
+    const { msg: _msg, principal: _principal } = await registerWithIssuer({
+      browser,
+      issuer: ISSUER_APP_URL,
+      authConfig,
+    });
+
+    // 2. Do the flow WITH alt origins RESET
+
+    const vcTestAppAlt = await authenticateToRelyingParty({
+      browser,
+      issuer: ISSUER_APP_URL,
+      authConfig,
+      relyingParty: TEST_APP_NICE_URL,
+      derivationOrigin: TEST_APP_CANONICAL_URL,
+    });
+
+    await new DemoAppView(browser).resetAlternativeOrigins();
+
+    const result = await getVCPresentation_({
+      vcTestApp: vcTestAppAlt,
+      browser,
+      authConfig,
+    });
+
+    expect(result.result).toBe("aborted");
+    if (!("reason" in result)) {
+      throw new Error("brwa");
+    }
+    expect(result.reason).toBe("bad_derivation_origin_rp");
+  });
+}, 300_000);

src/frontend/src/test-e2e/verifiableCredentials/index.test.ts

@@ -0,0 +1,111 @@
+import { runInBrowser } from "$src/test-e2e/util";
+
+import {
+  APPLE_USER_AGENT,
+  II_URL,
+  ISSUER_APP_URL,
+  ISSUER_APP_URL_LEGACY,
+  TEST_APP_CANONICAL_URL,
+  TEST_APP_CANONICAL_URL_LEGACY,
+} from "$src/test-e2e/constants";
+
+import {
+  authenticateToRelyingParty,
+  getVCPresentation,
+  register,
+  registerWithIssuer,
+} from "./utils";
+
+test("Can add employee on issuer app", async () => {
+  await runInBrowser(async (browser: WebdriverIO.Browser) => {
+    const authConfig = await register["webauthn"](browser);
+
+    const { msg, principal } = await registerWithIssuer({
+      browser,
+      authConfig,
+      issuer: ISSUER_APP_URL,
+    });
+
+    expect(msg).toContain("Added");
+    expect(msg).toContain(principal);
+  });
+}, 300_000);
+
+const getDomain = (url: string) => url.split(".").slice(1).join(".");
+
+// The different test configs (different URLs, differnet auth methods)
+const testConfigs: Array<{
+  relyingParty: string;
+  issuer: string;
+  authType: "pin" | "webauthn";
+}> = [
+  {
+    relyingParty: TEST_APP_CANONICAL_URL_LEGACY,
+    issuer: ISSUER_APP_URL,
+    authType: "webauthn",
+  },
+  {
+    relyingParty: TEST_APP_CANONICAL_URL,
+    issuer: ISSUER_APP_URL_LEGACY,
+    authType: "webauthn",
+  },
+  {
+    relyingParty: TEST_APP_CANONICAL_URL,
+    issuer: ISSUER_APP_URL,
+    authType: "pin",
+  },
+];
+
+testConfigs.forEach(({ relyingParty, issuer, authType }) => {
+  const testSuffix = `RP: ${getDomain(relyingParty)}, ISS: ${getDomain(
+    issuer
+  )}, auth: ${authType}`;
+
+  test(
+    "Can issue credentials " + testSuffix,
+    async () => {
+      await runInBrowser(
+        async (browser: WebdriverIO.Browser) => {
+          await browser.url(II_URL);
+
+          const authConfig = await register[authType](browser);
+
+          // 1. Add employee
+
+          const { msg: _msg, principal: _principal } = await registerWithIssuer(
+            {
+              browser,
+              issuer,
+              authConfig,
+            }
+          );
+
+          // 2. Auth to RP
+
+          const vcTestApp = await authenticateToRelyingParty({
+            browser,
+            issuer,
+            authConfig,
+            relyingParty,
+          });
+
+          const principalRP = await vcTestApp.getPrincipal();
+
+          // 3. Get VC presentation
+
+          const { alias } = await getVCPresentation({
+            vcTestApp,
+            browser,
+            authConfig,
+          });
+
+          // Perform a basic check on the alias
+          const aliasObj = JSON.parse(alias);
+          expect(aliasObj.sub).toBe(`did:icp:${principalRP}`);
+        },
+        authType === "pin" ? APPLE_USER_AGENT : undefined
+      );
+    },
+    300_000
+  );
+});