@structured-id/ui-core 4.14.2 → 4.15.1

package/src/profile/composables/useUpstreamSignIn.test.ts

@@ -9,18 +9,24 @@ import {
   useUpstreamCallback,
   type UpstreamApi,
   type UpstreamBrowser,
+  type UpstreamOutcome,
 } from "./useUpstreamSignIn";
 import { UPSTREAM_CALLBACK_PATH, peekUpstream } from "../upstream";
+import { SECOND_FACTOR_PATH } from "./useLoginSuccess";
+import { endPendingSignIn, holdPendingSignIn } from "../pendingSignIn";
+import { StepUpMethod } from "@structured-id/proto/sid/v1/authn/auth";
+import { UpstreamProviderId } from "@structured-id/ids";
 
 vi.mock("../../composables/useBffAuth", () => ({
   checkBffSession: vi.fn().mockResolvedValue(null),
 }));
 
+const P1 = UpstreamProviderId.parse("0192f3a4-7c1e-7b2a-9d4e-3f5a6b7c8d20");
 const ORIGIN = "https://ee.sid.example.com";
 const ISSUER = "https://sid.example.com";
 const RD = `${ISSUER}/i/0123456789abcdef0123456789abcdef/oauth2/authorize?client_id=ops&request_uri=${encodeURIComponent("urn:ietf:params:oauth:request_uri:r")}`;
 
-function api(outcome: "signed-in" | "linking-required" = "signed-in") {
+function api(outcome: UpstreamOutcome = "signed-in") {
   return {
     list: vi.fn().mockResolvedValue([]),
     initiate: vi.fn().mockResolvedValue({
@@ -43,7 +49,10 @@ function browser(): UpstreamBrowser & { left: string[] } {
   };
 }
 
-beforeEach(() => sessionStorage.clear());
+beforeEach(() => {
+  endPendingSignIn();
+  sessionStorage.clear();
+});
 
 describe("startUpstream", () => {
   // The issuer starts the sign-in for this origin's exact callback page; the
@@ -51,18 +60,17 @@ describe("startUpstream", () => {
   it("starts at the issuer and leaves for the provider", async () => {
     const calls = api();
     const page = browser();
-    await startUpstream("p1", RD, calls, page);
+    await startUpstream(P1, RD, calls, page);
     expect(calls.initiate).toHaveBeenCalledWith(
-      "p1",
+      P1,
       `${ORIGIN}${UPSTREAM_CALLBACK_PATH}`,
     );
     expect(page.left).toEqual([
       "https://central.sid.example.com/i/h/oauth2/authorize?x=1",
     ]);
-    expect(peekUpstream(sessionStorage, "s1")).toEqual({
-      provider: "p1",
-      rd: RD,
-    });
+    const kept = peekUpstream(sessionStorage, "s1");
+    expect(kept?.provider.toString()).toBe(P1.toString());
+    expect(kept?.rd).toBe(RD);
   });
 
   // A refused start keeps nothing and leaves nowhere.
@@ -70,9 +78,7 @@ describe("startUpstream", () => {
     const calls = api();
     calls.initiate.mockRejectedValue(new Error("refused"));
     const page = browser();
-    await expect(startUpstream("p1", RD, calls, page)).rejects.toThrow(
-      "refused",
-    );
+    await expect(startUpstream(P1, RD, calls, page)).rejects.toThrow("refused");
     expect(page.left).toEqual([]);
     expect(sessionStorage.length).toBe(0);
   });
@@ -84,7 +90,7 @@ describe("abandonUpstream", () => {
   // nothing is left behind.
   it("takes the kept request of a refused return", async () => {
     const page = browser();
-    await startUpstream("p1", RD, api(), page);
+    await startUpstream(P1, RD, api(), page);
     expect(abandonUpstream("s1", page)).toBe(RD);
     expect(peekUpstream(sessionStorage, "s1")).toBeUndefined();
     expect(abandonUpstream("s1", page)).toBeNull();
@@ -97,10 +103,12 @@ describe("completeUpstream", () => {
   it("completes the sign-in this tab started", async () => {
     const calls = api();
     const page = browser();
-    await startUpstream("p1", RD, calls, page);
+    await startUpstream(P1, RD, calls, page);
     const done = await completeUpstream("c1", "s1", calls, page);
+    // The provider the return completes at is the one the start kept.
+    expect(calls.complete.mock.calls[0][0].toString()).toBe(P1.toString());
     expect(calls.complete).toHaveBeenCalledWith(
-      "p1",
+      expect.any(UpstreamProviderId),
       "c1",
       "s1",
       `${ORIGIN}${UPSTREAM_CALLBACK_PATH}`,
@@ -116,7 +124,7 @@ describe("completeUpstream", () => {
     expect(await completeUpstream("c1", "s1", calls, page)).toEqual({
       outcome: "unknown",
     });
-    await startUpstream("p1", RD, calls, page);
+    await startUpstream(P1, RD, calls, page);
     await completeUpstream("c1", "s1", calls, page);
     expect(await completeUpstream("c1", "s1", calls, page)).toEqual({
       outcome: "unknown",
@@ -128,7 +136,7 @@ describe("completeUpstream", () => {
   it("reports an account that needs linking", async () => {
     const calls = api("linking-required");
     const page = browser();
-    await startUpstream("p1", RD, calls, page);
+    await startUpstream(P1, RD, calls, page);
     expect(await completeUpstream("c1", "s1", calls, page)).toEqual({
       outcome: "linking-required",
       rd: RD,
@@ -147,6 +155,7 @@ async function callbackAt(
     routes: [
       { path: UPSTREAM_CALLBACK_PATH, component: { template: "<div />" } },
       { path: "/account", component: { template: "<div />" } },
+      { path: SECOND_FACTOR_PATH, component: { template: "<div />" } },
     ],
   });
   await router.push(at);
@@ -179,7 +188,7 @@ describe("useUpstreamCallback", () => {
   it("continues the request kept for the state", async () => {
     const calls = api();
     const page = browser();
-    await startUpstream("p1", RD, calls, page);
+    await startUpstream(P1, RD, calls, page);
     const { result, left } = await callbackAt(
       `${UPSTREAM_CALLBACK_PATH}?code=c1&state=s1`,
       calls,
@@ -195,7 +204,7 @@ describe("useUpstreamCallback", () => {
   it("continues no request named only by the callback's own query", async () => {
     const calls = api();
     const page = browser();
-    await startUpstream("p1", null, calls, page);
+    await startUpstream(P1, null, calls, page);
     const { result, router, left } = await callbackAt(
       `${UPSTREAM_CALLBACK_PATH}?code=c1&state=s1&rd=${encodeURIComponent(RD)}`,
       calls,
@@ -211,7 +220,7 @@ describe("useUpstreamCallback", () => {
   it("answers a provider error with the waiting request", async () => {
     const calls = api();
     const page = browser();
-    await startUpstream("p1", RD, calls, page);
+    await startUpstream(P1, RD, calls, page);
     const { result } = await callbackAt(
       `${UPSTREAM_CALLBACK_PATH}?error=access_denied&state=s1`,
       calls,
@@ -230,7 +239,7 @@ describe("useUpstreamCallback", () => {
     const calls = api();
     calls.complete.mockRejectedValue(new Error("unavailable"));
     const page = browser();
-    await startUpstream("p1", RD, calls, page);
+    await startUpstream(P1, RD, calls, page);
     const { result, left } = await callbackAt(
       `${UPSTREAM_CALLBACK_PATH}?code=c1&state=s1`,
       calls,
@@ -257,11 +266,35 @@ describe("useUpstreamCallback", () => {
     expect(left).toEqual([]);
   });
 
+  // Regression: a provider sign-in of an account owing its second factor
+  // was reported signed in and continued to the request. It goes to the
+  // second-factor page with the request it waits for.
+  it("continues a sign-in owing its second factor to the factor's page", async () => {
+    const calls = api("second-factor");
+    holdPendingSignIn({
+      secondFactors: [StepUpMethod.TOTP],
+      enrollableFactors: [],
+      browserCsrf: "csrf-1",
+    });
+    const page = browser();
+    await startUpstream(P1, RD, calls, page);
+    const { result, router, left } = await callbackAt(
+      `${UPSTREAM_CALLBACK_PATH}?code=c1&state=s1`,
+      calls,
+      page,
+    );
+    await result.complete();
+    expect(result.failure.value).toBeNull();
+    expect(left).toEqual([]);
+    expect(router.currentRoute.value.path).toBe(SECOND_FACTOR_PATH);
+    expect(router.currentRoute.value.query.rd).toBe(RD);
+  });
+
   // An account that needs linking is reported with its waiting request.
   it("reports linking with the waiting request", async () => {
     const calls = api("linking-required");
     const page = browser();
-    await startUpstream("p1", RD, calls, page);
+    await startUpstream(P1, RD, calls, page);
     const { result, left } = await callbackAt(
       `${UPSTREAM_CALLBACK_PATH}?code=c1&state=s1`,
       calls,

package/src/profile/composables/useUpstreamSignIn.ts

@@ -3,8 +3,9 @@
  * the sign-in surface's transport. See `../upstream` for what is kept
  * between leaving for the provider and its return.
  */
-import { ref } from "vue";
+import { ref, shallowRef } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import { UpstreamProviderId, required } from "@structured-id/ids";
 import { getTransport } from "../../index";
 import type { EnabledProviderInfo } from "@structured-id/proto/sid/v1/federation/upstream";
 import { UpstreamServiceClient } from "@structured-id/proto/sid/v1/federation/upstream.client";
@@ -15,51 +16,70 @@ import {
   upstreamCallbackUri,
 } from "../upstream";
 import { useLoginSuccess, type LoginSuccessOptions } from "./useLoginSuccess";
+import { holdPendingSignIn, pendingSignIn } from "../pendingSignIn";
 
 export type { EnabledProviderInfo };
 
+/** A provider the issuer trusts, named by its typed id. */
+export type UpstreamProvider = Omit<EnabledProviderInfo, "id"> & {
+  id: UpstreamProviderId;
+};
+
 /** The calls a sign-in makes; the issuer's upstream service by default. */
 export interface UpstreamApi {
-  list(): Promise<EnabledProviderInfo[]>;
+  list(): Promise<UpstreamProvider[]>;
   initiate(
-    provider: string,
+    provider: UpstreamProviderId,
     redirectUri: string,
   ): Promise<{ authorizationUrl: string; stateToken: string }>;
   complete(
-    provider: string,
+    provider: UpstreamProviderId,
     code: string,
     state: string,
     redirectUri: string,
-  ): Promise<"signed-in" | "linking-required">;
+  ): Promise<UpstreamOutcome>;
 }
 
+/**
+ * What the issuer answered a completed return: signed in, signed in but
+ * owing a second factor (kept as the tab's pending sign-in), or no Profile
+ * linked to the upstream account.
+ */
+export type UpstreamOutcome =
+  "signed-in" | "second-factor" | "linking-required";
+
 /** The issuer's upstream service on the sign-in surface. */
 export function upstreamApi(): UpstreamApi {
   const client = () => new UpstreamServiceClient(getTransport());
   return {
     async list() {
       const { response } = await client().listEnabledProviders({});
-      return [...response.providers].sort(
-        (a, b) => a.displayOrder - b.displayOrder,
-      );
+      return response.providers
+        .map((provider) => ({
+          ...provider,
+          id: required(UpstreamProviderId, provider.id),
+        }))
+        .sort((a, b) => a.displayOrder - b.displayOrder);
     },
     async initiate(provider, redirectUri) {
       const { response } = await client().initiateUpstreamAuth({
-        providerId: provider,
+        providerId: provider.toWire(),
         redirectUri,
       });
       return response;
     },
     async complete(provider, code, state, redirectUri) {
       const { response } = await client().handleUpstreamCallback({
-        providerId: provider,
+        providerId: provider.toWire(),
         code,
         state,
         redirectUri,
       });
       switch (response.result.oneofKind) {
         case "success":
-          return "signed-in";
+          return holdPendingSignIn(response.result.success)
+            ? "second-factor"
+            : "signed-in";
         case "linkingRequired":
           return "linking-required";
         default:
@@ -95,7 +115,7 @@ export function pageBrowser(
  * starts the sign-in for this origin's callback page.
  */
 export async function startUpstream(
-  provider: string,
+  provider: UpstreamProviderId,
   rd: string | null,
   api: UpstreamApi = upstreamApi(),
   browser: UpstreamBrowser = pageBrowser(),
@@ -124,7 +144,7 @@ export function abandonUpstream(
 export type UpstreamReturn =
   | {
       /** `failed`: the issuer could not complete it. */
-      outcome: "signed-in" | "linking-required" | "failed";
+      outcome: UpstreamOutcome | "failed";
       rd: string | null;
     }
   | { outcome: "unknown" };
@@ -170,7 +190,10 @@ export function useUpstreamSignIn(
   rd: () => string | null,
   options: UpstreamSignInOptions = {},
 ) {
-  const providers = ref<EnabledProviderInfo[]>([]);
+  // Shallow: a typed id keeps its bytes in private fields, which a deep
+  // reactive proxy cannot read.
+  const providers = shallowRef<UpstreamProvider[]>([]);
+  /** The text form of the provider the sign-in is leaving for. */
   const loading = ref<string | null>(null);
   const error = ref<string | null>(null);
   const api = () => options.api ?? upstreamApi();
@@ -184,8 +207,8 @@ export function useUpstreamSignIn(
     }
   }
 
-  async function signInWith(provider: string) {
-    loading.value = provider;
+  async function signInWith(provider: UpstreamProviderId) {
+    loading.value = provider.toString();
     error.value = null;
     try {
       await startUpstream(
@@ -262,7 +285,7 @@ export function useUpstreamCallback(
         return;
       }
       continued.value = done.rd;
-      if (done.outcome !== "signed-in") {
+      if (done.outcome === "linking-required" || done.outcome === "failed") {
         failure.value = done.outcome;
         return;
       }
@@ -270,7 +293,10 @@ export function useUpstreamCallback(
         path: route.path,
         query: done.rd ? { rd: done.rd } : {},
       });
-      await onLoginSuccess();
+      // A sign-in owing its second factor continues to the factor's page.
+      await onLoginSuccess(
+        done.outcome === "second-factor" ? { pending: pendingSignIn() } : {},
+      );
     } catch {
       failure.value = "failed";
     }

package/src/profile/index.ts

@@ -17,5 +17,8 @@ export * from "./components";
 // Upstream identity provider sign-in: what a return keeps
 export * from "./upstream";
 
+// A browser sign-in owing its second factor
+export * from "./pendingSignIn";
+
 // Auth helper
 export { authMeta } from "./auth";

package/src/profile/pendingSignIn.test.ts

@@ -0,0 +1,126 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { StepUpMethod } from "@structured-id/proto/sid/v1/authn/auth";
+import {
+  endPendingSignIn,
+  holdPendingSignIn,
+  pendingSignIn,
+  pendingSignInMeta,
+} from "./pendingSignIn";
+
+const owing = {
+  secondFactors: [StepUpMethod.TOTP],
+  enrollableFactors: [],
+  browserCsrf: "csrf-1",
+};
+
+beforeEach(() => {
+  endPendingSignIn();
+  sessionStorage.clear();
+});
+
+describe("pending sign-in", () => {
+  // A sign-in owing its second factor is kept with the CSRF token its
+  // completion sends; the token is not part of what pages read.
+  it("keeps a sign-in that owes a factor", () => {
+    expect(holdPendingSignIn(owing)).toEqual({
+      secondFactors: [StepUpMethod.TOTP],
+      enrollableFactors: [],
+    });
+    expect(pendingSignIn()).toEqual({
+      secondFactors: [StepUpMethod.TOTP],
+      enrollableFactors: [],
+    });
+    expect(pendingSignInMeta()).toEqual({ "x-csrf-token": "csrf-1" });
+  });
+
+  // An account that must enroll its first factor is pending too.
+  it("keeps a sign-in that must enroll its first factor", () => {
+    holdPendingSignIn({
+      secondFactors: [],
+      enrollableFactors: [StepUpMethod.TOTP],
+      browserCsrf: "csrf-2",
+    });
+    expect(pendingSignIn()?.enrollableFactors).toEqual([StepUpMethod.TOTP]);
+    expect(pendingSignInMeta()).toEqual({ "x-csrf-token": "csrf-2" });
+  });
+
+  // A complete sign-in replaces an earlier pending one: the earlier token
+  // is never sent with the new session.
+  it("forgets an earlier pending sign-in when a sign-in completes", () => {
+    holdPendingSignIn(owing);
+    expect(
+      holdPendingSignIn({ secondFactors: [], enrollableFactors: [] }),
+    ).toBeNull();
+    expect(pendingSignIn()).toBeNull();
+    expect(pendingSignInMeta()).toEqual({});
+  });
+
+  // Without its CSRF token the browser cannot complete the context; the
+  // answer is refused loudly rather than kept unusable.
+  it("refuses a pending answer without its CSRF token", () => {
+    expect(() =>
+      holdPendingSignIn({ ...owing, browserCsrf: undefined }),
+    ).toThrow();
+    expect(pendingSignIn()).toBeNull();
+  });
+
+  it("ends the pending sign-in", () => {
+    holdPendingSignIn(owing);
+    endPendingSignIn();
+    expect(pendingSignIn()).toBeNull();
+    expect(pendingSignInMeta()).toEqual({});
+  });
+
+  // Regression: with tab storage denied by browser policy, reading
+  // `sessionStorage` threw, so even a complete sign-in failed. A complete
+  // sign-in needs no storage, and a pending one is still held for the
+  // completion this page load sends.
+  it("works without tab storage", () => {
+    const denied = Object.getOwnPropertyDescriptor(window, "sessionStorage");
+    Object.defineProperty(window, "sessionStorage", {
+      configurable: true,
+      get() {
+        throw new DOMException("denied", "SecurityError");
+      },
+    });
+    try {
+      expect(
+        holdPendingSignIn({ secondFactors: [], enrollableFactors: [] }),
+      ).toBeNull();
+      holdPendingSignIn(owing);
+      expect(pendingSignIn()?.secondFactors).toEqual([StepUpMethod.TOTP]);
+      expect(pendingSignInMeta()).toEqual({ "x-csrf-token": "csrf-1" });
+      endPendingSignIn();
+      expect(pendingSignIn()).toBeNull();
+    } finally {
+      Object.defineProperty(window, "sessionStorage", denied!);
+    }
+  });
+
+  // A reload completes the sign-in from the tab's copy of the record.
+  it("is completed after a reload from the tab's copy", async () => {
+    holdPendingSignIn(owing);
+    const reloaded = await freshLoad();
+    expect(reloaded.pendingSignIn()?.secondFactors).toEqual([
+      StepUpMethod.TOTP,
+    ]);
+    expect(reloaded.pendingSignInMeta()).toEqual({ "x-csrf-token": "csrf-1" });
+  });
+
+  // A copy the reloaded page cannot read is no pending sign-in.
+  it("reads a corrupt copy as none", async () => {
+    sessionStorage.setItem("sid.pending-sign-in", "{not json");
+    expect((await freshLoad()).pendingSignIn()).toBeNull();
+    sessionStorage.setItem(
+      "sid.pending-sign-in",
+      JSON.stringify({ csrf: 1, secondFactors: [], enrollableFactors: [] }),
+    );
+    expect((await freshLoad()).pendingSignIn()).toBeNull();
+  });
+});
+
+/** The module as a new page load finds it: nothing held, only the tab's copy. */
+async function freshLoad(): Promise<typeof import("./pendingSignIn")> {
+  vi.resetModules();
+  return import("./pendingSignIn");
+}

package/src/profile/pendingSignIn.ts

@@ -0,0 +1,140 @@
+/**
+ * A browser sign-in that still owes its second factor. The first factor's
+ * answer names the factors that complete it, the factors it may enroll
+ * first, and the CSRF token the browser sends with its pending cookie to
+ * complete it. The record is kept until the completion ends it: a completion
+ * whose outcome is unknown is repeated with the same token and receives the
+ * sign-in it delivered.
+ *
+ * The page holds the record itself; the tab's session storage keeps a copy
+ * so a reload can still complete it. Storage the browser denies only loses
+ * that copy: a complete sign-in never needs it.
+ */
+import { StepUpMethod } from "@structured-id/proto/sid/v1/authn/auth";
+
+/** What a first-factor answer states about the sign-in it delivered. */
+export interface FirstFactorAnswer {
+  secondFactors: StepUpMethod[];
+  enrollableFactors: StepUpMethod[];
+  browserCsrf?: string;
+}
+
+/** A sign-in owing its second factor. */
+export interface PendingSignIn {
+  /** The enrolled factors that complete it; empty when it must enroll one first. */
+  secondFactors: StepUpMethod[];
+  /** The factors it may enroll first, when the account has none. */
+  enrollableFactors: StepUpMethod[];
+}
+
+interface Kept extends PendingSignIn {
+  csrf: string;
+}
+
+const KEY = "sid.pending-sign-in";
+
+/** The CSRF header the sign-in surface checks with the pending cookie. */
+const CSRF_HEADER = "x-csrf-token";
+
+/** The record this page load holds; `undefined` until it read the tab's copy. */
+let held: Kept | null | undefined;
+
+/** The tab's session storage, or null where the browser denies it. */
+function tabStorage(): Storage | null {
+  try {
+    return sessionStorage;
+  } catch {
+    return null;
+  }
+}
+
+function methods(value: unknown): StepUpMethod[] | null {
+  return Array.isArray(value) && value.every((m) => typeof m === "number")
+    ? (value as StepUpMethod[])
+    : null;
+}
+
+/** The tab's copy, none when it is absent, unreadable or not this module's. */
+function stored(): Kept | null {
+  try {
+    const raw = tabStorage()?.getItem(KEY);
+    if (!raw) return null;
+    const kept = JSON.parse(raw) as Record<string, unknown>;
+    const secondFactors = methods(kept.secondFactors);
+    const enrollableFactors = methods(kept.enrollableFactors);
+    if (typeof kept.csrf !== "string" || !secondFactors || !enrollableFactors) {
+      return null;
+    }
+    return { csrf: kept.csrf, secondFactors, enrollableFactors };
+  } catch {
+    return null;
+  }
+}
+
+/** Keep `kept` as the record, its copy in the tab when the tab allows. */
+function keep(kept: Kept | null): void {
+  held = kept;
+  try {
+    const storage = tabStorage();
+    if (kept) storage?.setItem(KEY, JSON.stringify(kept));
+    else storage?.removeItem(KEY);
+  } catch {
+    // Without the copy a reload no longer completes the sign-in; this page
+    // load still does.
+  }
+}
+
+function current(): Kept | null {
+  if (held === undefined) held = stored();
+  return held;
+}
+
+/**
+ * Keep the sign-in `answer` delivered when it still owes a factor; null when
+ * the sign-in is complete. A new first factor replaces any earlier record.
+ */
+export function holdPendingSignIn(
+  answer: FirstFactorAnswer,
+): PendingSignIn | null {
+  keep(null);
+  const owed =
+    answer.secondFactors.length > 0 || answer.enrollableFactors.length > 0;
+  if (!owed) return null;
+  if (!answer.browserCsrf) {
+    throw new Error(
+      "The issuer answered a pending sign-in without its CSRF token",
+    );
+  }
+  const kept: Kept = {
+    csrf: answer.browserCsrf,
+    secondFactors: [...answer.secondFactors],
+    enrollableFactors: [...answer.enrollableFactors],
+  };
+  keep(kept);
+  return {
+    secondFactors: kept.secondFactors,
+    enrollableFactors: kept.enrollableFactors,
+  };
+}
+
+/** The sign-in this tab is completing, if any. */
+export function pendingSignIn(): PendingSignIn | null {
+  const kept = current();
+  return kept
+    ? {
+        secondFactors: kept.secondFactors,
+        enrollableFactors: kept.enrollableFactors,
+      }
+    : null;
+}
+
+/** The metadata a completion of the pending sign-in sends; empty without one. */
+export function pendingSignInMeta(): Record<string, string> {
+  const kept = current();
+  return kept ? { [CSRF_HEADER]: kept.csrf } : {};
+}
+
+/** End the pending sign-in: its completion delivered the session, or it ended. */
+export function endPendingSignIn(): void {
+  keep(null);
+}