@structured-id/ui-core 3.1.1 → 4.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@structured-id/ui-core",
-  "version": "3.1.1",
+  "version": "4.0.0",
   "type": "module",
   "publishConfig": {
     "access": "public",

package/src/composables/useBffAuth.test.ts

@@ -0,0 +1,96 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import {
+  bffCsrfToken,
+  bffLogout,
+  checkBffSession,
+  initBff,
+} from "./useBffAuth";
+
+/** A BFF that answers every request with this response. */
+function bffAnswers(response: unknown) {
+  const fetchMock = vi.fn().mockResolvedValue(response);
+  vi.stubGlobal("fetch", fetchMock);
+  return fetchMock;
+}
+
+/** The BFF's sign-out answer: the session ended, with this grant outcome. */
+function ended(grant: string) {
+  return { ok: true, status: 200, json: async () => ({ grant }) };
+}
+
+describe("bffLogout", () => {
+  beforeEach(async () => {
+    initBff("");
+    bffAnswers({
+      ok: true,
+      status: 200,
+      json: async () => ({ sub: "s", csrf_token: "token-1" }),
+    });
+    await checkBffSession();
+  });
+
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  // The page tells a local end of its session from one where the issuer also
+  // revoked the grant, so it can say which happened.
+  it.each(["revoked", "not_revoked", "none"] as const)(
+    "reports the ended session with grant %s",
+    async (grant) => {
+      const fetchMock = bffAnswers(ended(grant));
+      await expect(bffLogout()).resolves.toEqual({ ended: true, grant });
+      expect(fetchMock).toHaveBeenCalledWith("/auth/logout", {
+        method: "POST",
+        credentials: "include",
+        headers: { "X-CSRF-Token": "token-1" },
+      });
+    },
+  );
+
+  // A refused or failed sign-out leaves the BFF session alive: the page must
+  // not report it as ended.
+  it.each([
+    ["refused", { ok: false, status: 403 }],
+    ["unavailable", { ok: false, status: 503 }],
+  ])("reports a %s sign-out as not ended", async (_name, response) => {
+    bffAnswers(response);
+    await expect(bffLogout()).resolves.toEqual({ ended: false });
+  });
+
+  it("reports an unreachable BFF as not ended", async () => {
+    vi.stubGlobal("fetch", vi.fn().mockRejectedValue(new TypeError("offline")));
+    await expect(bffLogout()).resolves.toEqual({ ended: false });
+  });
+
+  // An answer the page cannot read still came after the BFF ended the
+  // session; only the grant's fate is unknown.
+  it("reports an unreadable answer as ended with an unknown grant", async () => {
+    bffAnswers({
+      ok: true,
+      status: 200,
+      json: async () => {
+        throw new SyntaxError("not json");
+      },
+    });
+    await expect(bffLogout()).resolves.toEqual({
+      ended: true,
+      grant: "unknown",
+    });
+  });
+
+  it("reports nothing ended before the BFF is set up", async () => {
+    vi.resetModules();
+    const fresh = await import("./useBffAuth");
+    const fetchMock = bffAnswers(ended("revoked"));
+    await expect(fresh.bffLogout()).resolves.toEqual({ ended: false });
+    expect(fetchMock).not.toHaveBeenCalled();
+  });
+
+  // Whatever the BFF answers, the page forgets the session's token.
+  it("forgets the CSRF token even when the sign-out failed", async () => {
+    bffAnswers({ ok: false, status: 503 });
+    await bffLogout();
+    expect(bffCsrfToken()).toBeNull();
+  });
+});

package/src/composables/useBffAuth.ts

@@ -118,28 +118,55 @@ export function startBffLogin(
   window.location.href = url;
 }
 
+/**
+ * What became of the grant behind an ended BFF session: revoked by the
+ * issuer, left to expire because the issuer did not revoke it, none held,
+ * or unknown when the BFF's answer could not be read.
+ */
+export type BffGrantOutcome = "revoked" | "not_revoked" | "none" | "unknown";
+
+/** The outcome of a sign-out: whether the BFF ended the session, and its grant. */
+export type BffLogoutResult =
+  { ended: true; grant: BffGrantOutcome } | { ended: false };
+
+const GRANT_OUTCOMES: readonly BffGrantOutcome[] = [
+  "revoked",
+  "not_revoked",
+  "none",
+];
+
 /**
  * Log out by calling POST /auth/logout with X-CSRF-Token header.
  *
- * The BFF validates the CSRF header, clears server-side session,
- * and sends a Set-Cookie header to clear the session cookie. The token
- * dies with the session either way.
+ * The BFF validates the CSRF header, ends the session, clears its cookie and
+ * says whether the issuer revoked the grant. `ended: false` means the
+ * session may still be alive (refused, unavailable, unreachable). The page
+ * forgets the CSRF token either way.
  *
  * @param bffBaseUrl  Override BFF base URL
  */
-export async function bffLogout(bffBaseUrl?: string): Promise<void> {
+export async function bffLogout(bffBaseUrl?: string): Promise<BffLogoutResult> {
   const base = bffBaseUrl ?? _bffBaseUrl;
-  if (base === null) return;
+  if (base === null) return { ended: false };
   const csrf = _csrfToken;
   _csrfToken = null;
+  let resp: Response;
   try {
-    await fetch(`${base}/auth/logout`, {
+    resp = await fetch(`${base}/auth/logout`, {
       method: "POST",
       credentials: "include",
       headers: csrf ? { "X-CSRF-Token": csrf } : {},
     });
   } catch {
-    // Best-effort — local state is cleared by caller regardless
+    return { ended: false };
+  }
+  if (!resp.ok) return { ended: false };
+  try {
+    const { grant } = (await resp.json()) as { grant?: unknown };
+    const known = GRANT_OUTCOMES.find((outcome) => outcome === grant);
+    return { ended: true, grant: known ?? "unknown" };
+  } catch {
+    return { ended: true, grant: "unknown" };
   }
 }
 

package/src/index.ts

@@ -17,6 +17,8 @@ export {
   bffLogout,
   bffCsrfToken,
   type BffUserInfo,
+  type BffGrantOutcome,
+  type BffLogoutResult,
 } from "./composables/useBffAuth";
 export {
   initAccountApi,

package/src/profile/components/SidRegistrationForm.test.ts

@@ -297,6 +297,92 @@ describe("SidRegistrationForm", () => {
     vi.useRealTimers();
   });
 
+  describe("password rules", () => {
+    // A q-input that shows the first rule its value fails, as QInput does.
+    const ruleStubs = {
+      ...quasarStubs,
+      "q-input": {
+        props: ["modelValue", "rules"],
+        emits: ["update:modelValue"],
+        computed: {
+          failed(): string {
+            const self = this as unknown as {
+              modelValue?: string;
+              rules?: ((v: string) => true | string)[];
+            };
+            for (const rule of self.rules ?? []) {
+              const result = rule(self.modelValue ?? "");
+              if (result !== true) return result;
+            }
+            return "";
+          },
+        },
+        template:
+          '<label><input :value="modelValue" @input="$emit(\'update:modelValue\', $event.target.value)" /><span class="failed">{{ failed }}</span></label>',
+      },
+    };
+    const ceDefault = {
+      minLength: 8,
+      minUppercase: 1,
+      minLowercase: 1,
+      minDigit: 1,
+      minSymbol: 0,
+    };
+
+    async function passwordError(
+      value: string,
+      passwordPolicyFn: () => Promise<typeof ceDefault>,
+    ): Promise<string> {
+      const w = mount(SidRegistrationForm, {
+        props: { registerFn, passwordPolicyFn, showConfirmPassword: false },
+        global: { stubs: ruleStubs },
+      });
+      await flushPromises();
+      const password = w.find('[data-test="password"]');
+      await password.find("input").setValue(value);
+      return password.find(".failed").text();
+    }
+
+    // The rules are the server's policy: an 8-character password with an
+    // uppercase letter, a lowercase letter and a digit meets the CE default.
+    it("accepts a password that meets the server policy", async () => {
+      expect(
+        await passwordError("HrenVam1", () => Promise.resolve(ceDefault)),
+      ).toBe("");
+    });
+
+    // Each minimum names itself: a missing uppercase letter is not reported
+    // as a short password.
+    it("names the rule a password fails", async () => {
+      const policy = () => Promise.resolve(ceDefault);
+      expect(await passwordError("hrenvam1", policy)).toBe(
+        "At least 1 uppercase letter",
+      );
+      expect(await passwordError("HrenVamX", policy)).toBe("At least 1 digit");
+      expect(await passwordError("HrenVa1", policy)).toBe(
+        "At least 8 characters",
+      );
+    });
+
+    // Symbols are the printable ASCII characters that are not letters or
+    // digits, as the proof counts them; a space is not one.
+    it("checks the symbol minimum", async () => {
+      const policy = () => Promise.resolve({ ...ceDefault, minSymbol: 1 });
+      expect(await passwordError("Hren Vam1", policy)).toBe(
+        "At least 1 symbol",
+      );
+      expect(await passwordError("Hren-Vam1", policy)).toBe("");
+    });
+
+    // Until the server answers only an empty password is refused: the
+    // proof, not the form, enforces the policy.
+    it("checks only presence until the policy is known", async () => {
+      const never = () => new Promise<typeof ceDefault>(() => {});
+      expect(await passwordError("a", never)).toBe("");
+      expect(await passwordError("", never)).toBe("This field is required");
+    });
+  });
+
   it("renders footer slot", () => {
     const w = mount(SidRegistrationForm, {
       props: { registerFn },

package/src/profile/components/SidRegistrationForm.vue

@@ -217,6 +217,14 @@ import { ref, computed, watch, useSlots } from "vue";
 import { SidPasswordCeremony, SidPrincipalInput } from "../../quasar";
 import type { CeremonyOutcome } from "../../quasar";
 import type { PasswordOperationProgress } from "../composables/useAuth";
+import { getPasswordPolicy } from "../composables/useAuthApi";
+import {
+  defaultPasswordRuleText,
+  failedPasswordRule,
+  usePasswordPolicy,
+  type PasswordPolicy,
+  type PasswordRuleText,
+} from "../composables/usePasswordPolicy";
 
 // Minimal QInput shape — we only use validate(). Avoids importing 'quasar' at
 // type level (it's a peer dep, not present during ui-core typecheck).
@@ -254,8 +262,10 @@ const props = withDefaults(
     confirmPasswordLabel?: string;
     /** Password required validation text */
     passwordRequiredText?: string;
-    /** Password min length validation text */
-    passwordMinLengthText?: string;
+    /** What a password that fails a policy minimum is told. */
+    passwordRuleText?: PasswordRuleText;
+    /** Loads the server's password policy. */
+    passwordPolicyFn?: () => Promise<PasswordPolicy>;
     /** Passwords mismatch validation text */
     passwordsMismatchText?: string;
     /** Invite code input label */
@@ -303,8 +313,6 @@ const props = withDefaults(
     ) => Promise<void>;
     /** What the ceremony says once the account is created. */
     acceptedText?: string;
-    /** Min password length (default 12 — NIST SP 800-63B 4th draft baseline). */
-    passwordMinLength?: number;
     /** Show confirm-password field with match validation. Default true. */
     showConfirmPassword?: boolean;
     /** Min username length. Registration default 6 (premium feature gating);
@@ -319,8 +327,8 @@ const props = withDefaults(
     passwordLabel: "Password",
     confirmPasswordLabel: "Confirm password",
     passwordRequiredText: REQUIRED_FIELD_TEXT,
-    passwordMinLengthText: "At least 12 characters with mixed case + digit",
-    passwordMinLength: 12,
+    passwordRuleText: defaultPasswordRuleText,
+    passwordPolicyFn: getPasswordPolicy,
     passwordsMismatchText: "Passwords do not match",
     inviteCodeLabel: "Invite code",
     inviteCodeRequiredText: "Invite code required",
@@ -380,16 +388,14 @@ let announce: (() => void) | undefined;
 const passwordRef = ref<ValidatableInput | null>(null);
 const confirmRef = ref<ValidatableInput | null>(null);
 
-// Password complexity (matches sid-pake-core ZKPP gadget A defaults).
-// Server enforces via OPAQUE-ZKPP zero-knowledge proof; client also checks
-// to give immediate UX feedback.
+const { policy } = usePasswordPolicy(props.passwordPolicyFn);
+
 const passwordRules = computed(() => [
   (v: string) => !!v || props.passwordRequiredText,
-  (v: string) =>
-    v.length >= props.passwordMinLength || props.passwordMinLengthText,
-  (v: string) => /[a-z]/.test(v) || props.passwordMinLengthText,
-  (v: string) => /[A-Z]/.test(v) || props.passwordMinLengthText,
-  (v: string) => /[0-9]/.test(v) || props.passwordMinLengthText,
+  (v: string) => {
+    const failed = policy.value && failedPasswordRule(v, policy.value);
+    return !failed || props.passwordRuleText(failed.rule, failed.count);
+  },
 ]);
 
 // Re-validate confirm field whenever password changes (eager match feedback).

package/src/profile/composables/index.ts

@@ -6,3 +6,4 @@ export * from "./useEnrollmentApi";
 export * from "./useIdentityApi";
 export * from "./useSecurityLevel";
 export * from "./useCurrentPasswordRequirement";
+export * from "./usePasswordPolicy";

package/src/profile/composables/useAuthApi.ts

@@ -57,6 +57,7 @@ import {
   type OpaqueZkppRegistrationFinishResponse,
   type PasswordChangeChallengeResponse,
   type PasswordChangeExecuteResponse,
+  type GetZkppPolicyResponse,
 } from "@structured-id/proto/sid/v1/authn/auth";
 import type {
   PasswordHistoryContext,
@@ -574,6 +575,12 @@ export async function completePasswordReset(
   return response;
 }
 
+/** The password policy the server's proof checks a new password against. */
+export async function getPasswordPolicy(): Promise<GetZkppPolicyResponse> {
+  const { response } = await client().getZkppPolicy({});
+  return response;
+}
+
 // Recovery shard RPCs (downloadRecoveryShard, uploadRecoveryShard, getRecoveryInfo)
 // are EE/SaaS-only — defined in proto-ee, not in CE proto.
 

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

@@ -0,0 +1,109 @@
+import { describe, it, expect } from "vitest";
+import { flushPromises } from "@vue/test-utils";
+import {
+  defaultPasswordRuleText,
+  failedPasswordRule,
+  usePasswordPolicy,
+} from "./usePasswordPolicy";
+
+const ceDefault = {
+  minLength: 8,
+  minUppercase: 1,
+  minLowercase: 1,
+  minDigit: 1,
+  minSymbol: 0,
+};
+
+describe("failedPasswordRule", () => {
+  it("passes a password that meets every minimum", () => {
+    expect(failedPasswordRule("HrenVam1", ceDefault)).toBeNull();
+  });
+
+  // The first failed minimum is reported, in a fixed order, with the
+  // policy's number for it.
+  it("reports the first failed minimum with its number", () => {
+    expect(failedPasswordRule("hV1", ceDefault)).toEqual({
+      rule: "length",
+      count: 8,
+    });
+    expect(failedPasswordRule("hrenvam1", ceDefault)).toEqual({
+      rule: "uppercase",
+      count: 1,
+    });
+    expect(failedPasswordRule("HRENVAM1", ceDefault)).toEqual({
+      rule: "lowercase",
+      count: 1,
+    });
+    expect(failedPasswordRule("HrenVamX", ceDefault)).toEqual({
+      rule: "digit",
+      count: 1,
+    });
+  });
+
+  // Counts, not presence: a minimum of 2 needs two of the class.
+  it("counts the characters of a class", () => {
+    const policy = { ...ceDefault, minDigit: 2 };
+    expect(failedPasswordRule("HrenVam1", policy)?.rule).toBe("digit");
+    expect(failedPasswordRule("HrenVam12", policy)).toBeNull();
+  });
+
+  // The proof's classes are ASCII: a non-ASCII letter is none of them, a
+  // space is not a symbol, and every other printable ASCII non-alphanumeric
+  // character is.
+  it("classifies characters as the proof does", () => {
+    const policy = {
+      minLength: 0,
+      minUppercase: 0,
+      minLowercase: 0,
+      minDigit: 0,
+      minSymbol: 1,
+    };
+    expect(failedPasswordRule(" ", policy)?.rule).toBe("symbol");
+    expect(failedPasswordRule("Ж", policy)?.rule).toBe("symbol");
+    for (const symbol of "!/:@[`{~") {
+      expect(failedPasswordRule(symbol, policy)).toBeNull();
+    }
+    expect(
+      failedPasswordRule("ЖЖЖЖЖЖЖЖ", { ...ceDefault, minLength: 8 })?.rule,
+    ).toBe("uppercase");
+  });
+
+  // Length counts characters, so a character outside the BMP is one.
+  it("counts length in characters", () => {
+    const policy = { ...ceDefault, minUppercase: 0, minDigit: 0, minLength: 3 };
+    expect(failedPasswordRule("a😀b", policy)).toBeNull();
+    expect(failedPasswordRule("a😀", policy)?.rule).toBe("length");
+  });
+});
+
+describe("defaultPasswordRuleText", () => {
+  it("names the rule and its number", () => {
+    expect(defaultPasswordRuleText("length", 8)).toBe("At least 8 characters");
+    expect(defaultPasswordRuleText("uppercase", 1)).toBe(
+      "At least 1 uppercase letter",
+    );
+    expect(defaultPasswordRuleText("lowercase", 2)).toBe(
+      "At least 2 lowercase letters",
+    );
+    expect(defaultPasswordRuleText("digit", 2)).toBe("At least 2 digits");
+    expect(defaultPasswordRuleText("symbol", 1)).toBe("At least 1 symbol");
+  });
+});
+
+describe("usePasswordPolicy", () => {
+  it("holds the policy once loaded", async () => {
+    const { policy } = usePasswordPolicy(() => Promise.resolve(ceDefault));
+    expect(policy.value).toBeNull();
+    await flushPromises();
+    expect(policy.value).toEqual(ceDefault);
+  });
+
+  // A policy that cannot be loaded leaves the checks to the server.
+  it("stays unknown when the policy cannot be loaded", async () => {
+    const { policy } = usePasswordPolicy(() =>
+      Promise.reject(new Error("unavailable")),
+    );
+    await flushPromises();
+    expect(policy.value).toBeNull();
+  });
+});

package/src/profile/composables/usePasswordPolicy.ts

@@ -0,0 +1,83 @@
+/**
+ * The server's password policy, as a form checks a new password against it.
+ * The proof enforces the policy; these checks only tell the user early.
+ */
+import { readonly, ref } from "vue";
+import type { GetZkppPolicyResponse } from "@structured-id/proto/sid/v1/authn/auth";
+import { getPasswordPolicy } from "./useAuthApi";
+
+/** The minimums of a password policy. */
+export type PasswordPolicy = Pick<
+  GetZkppPolicyResponse,
+  "minLength" | "minUppercase" | "minLowercase" | "minDigit" | "minSymbol"
+>;
+
+/** A minimum a password can fail. */
+export type PasswordRule =
+  "length" | "uppercase" | "lowercase" | "digit" | "symbol";
+
+/** What a failed rule says, given the policy's number for it. */
+export type PasswordRuleText = (rule: PasswordRule, count: number) => string;
+
+export const defaultPasswordRuleText: PasswordRuleText = (rule, count) => {
+  switch (rule) {
+    case "length":
+      return `At least ${count} characters`;
+    case "uppercase":
+      return `At least ${count} uppercase ${count === 1 ? "letter" : "letters"}`;
+    case "lowercase":
+      return `At least ${count} lowercase ${count === 1 ? "letter" : "letters"}`;
+    case "digit":
+      return `At least ${count} ${count === 1 ? "digit" : "digits"}`;
+    case "symbol":
+      return `At least ${count} ${count === 1 ? "symbol" : "symbols"}`;
+  }
+};
+
+// The character classes the proof counts: ASCII letters and digits, and the
+// printable ASCII characters that are neither (a space is not a symbol).
+const UPPERCASE = /[A-Z]/g;
+const LOWERCASE = /[a-z]/g;
+const DIGIT = /[0-9]/g;
+const SYMBOL = /[!-/:-@[-`{-~]/g;
+
+const count = (value: string, pattern: RegExp) =>
+  value.match(pattern)?.length ?? 0;
+
+/**
+ * The first minimum `password` fails, or null when it meets them all. Length
+ * is counted in characters: the proof counts UTF-8 bytes, never fewer, so a
+ * password that passes here is never refused there for its length.
+ */
+export function failedPasswordRule(
+  password: string,
+  policy: PasswordPolicy,
+): { rule: PasswordRule; count: number } | null {
+  const checks: [PasswordRule, number, number][] = [
+    ["length", [...password].length, policy.minLength],
+    ["uppercase", count(password, UPPERCASE), policy.minUppercase],
+    ["lowercase", count(password, LOWERCASE), policy.minLowercase],
+    ["digit", count(password, DIGIT), policy.minDigit],
+    ["symbol", count(password, SYMBOL), policy.minSymbol],
+  ];
+  for (const [rule, has, needs] of checks) {
+    if (has < needs) return { rule, count: needs };
+  }
+  return null;
+}
+
+/**
+ * Load the policy once. Until it is known (or when it cannot be loaded)
+ * `policy` stays null: the operation itself then meets the server, which
+ * refuses a password its policy does not admit.
+ */
+export function usePasswordPolicy(
+  load: () => Promise<PasswordPolicy> = getPasswordPolicy,
+) {
+  const policy = ref<PasswordPolicy | null>(null);
+  load().then(
+    (p) => (policy.value = p),
+    () => undefined,
+  );
+  return { policy: readonly(policy) };
+}