@hraness/suite-accounts 0.9.20

package/src/profile-form.tsx

@@ -0,0 +1,314 @@
+"use client";
+
+export { SuitePublicProfileForm } from "./public-profile-form.js";
+export type { SuitePublicProfileFormProps, SuitePublicProfileFormResult } from "./public-profile-form.js";
+
+import { profileFormClasses } from "./profile-form.stylex.js";
+
+import {
+  SUITE_PROFILE_BIO_MAX_LENGTH,
+  SUITE_PROFILE_NAME_MAX_LENGTH,
+  parseSuiteProfileUpdateRequest,
+  type SuiteProfileIssue,
+  type SuiteProfileLinkKey,
+  type SuiteProfileUpdateRequest,
+  type SuiteProfileView,
+} from "./identity/profiles.js";
+import {
+  type FormEvent,
+  useId,
+  useState,
+} from "react";
+
+export type SuiteProfileFormResult =
+  | Readonly<{ profile: SuiteProfileView; status: "saved" }>
+  | Readonly<{ profile: SuiteProfileView; status: "conflict" }>;
+
+export type SuiteProfileFormProps = Readonly<{
+  className?: string;
+  initialProfile: SuiteProfileView;
+  onSave: (
+    request: SuiteProfileUpdateRequest,
+  ) => Promise<SuiteProfileFormResult>;
+  onSaved?: (profile: SuiteProfileView) => void;
+  submitLabel: string;
+}>;
+
+type LinkInputs = Record<SuiteProfileLinkKey, string>;
+type FieldErrors = Partial<Record<
+  SuiteProfileIssue["field"],
+  string
+>>;
+
+function withoutFieldError(
+  errors: FieldErrors,
+  field: SuiteProfileIssue["field"],
+): FieldErrors {
+  const next = { ...errors };
+  delete next[field];
+  return next;
+}
+
+const LINK_FIELDS = [
+  ["x", "X"],
+  ["linkedin", "LinkedIn"],
+  ["bluesky", "Bluesky"],
+  ["instagram", "Instagram"],
+  ["telegram", "Telegram"],
+  ["website", "Personal website"],
+] as const satisfies readonly (readonly [SuiteProfileLinkKey, string])[];
+
+function linkInputs(profile: SuiteProfileView): LinkInputs {
+  return {
+    bluesky: profile.links.bluesky ?? "",
+    instagram: profile.links.instagram ?? "",
+    linkedin: profile.links.linkedin ?? "",
+    telegram: profile.links.telegram ?? "",
+    website: profile.links.website ?? "",
+    x: profile.links.x ?? "",
+  };
+}
+
+function issueMessage(issue: SuiteProfileIssue): string {
+  if (issue.field === "name") {
+    return issue.reason === "required"
+      ? "Enter a name."
+      : `Use ${SUITE_PROFILE_NAME_MAX_LENGTH} characters or fewer.`;
+  }
+  if (issue.field === "bio") {
+    return `Use ${SUITE_PROFILE_BIO_MAX_LENGTH} characters or fewer.`;
+  }
+  if (issue.field === "linkedin") return "Enter a LinkedIn profile URL.";
+  if (issue.field === "website") return "Enter a complete HTTPS URL.";
+  if (
+    issue.field === "x"
+    || issue.field === "bluesky"
+    || issue.field === "instagram"
+    || issue.field === "telegram"
+  ) {
+    const label = LINK_FIELDS.find(([key]) => key === issue.field)?.[1]
+      ?? "profile";
+    return `Enter a valid ${label} handle or profile URL.`;
+  }
+  return "Check the profile and try again.";
+}
+
+function applyProfile(
+  profile: SuiteProfileView,
+  setters: Readonly<{
+    setBio: (value: string) => void;
+    setEmail: (value: string) => void;
+    setLinks: (value: LinkInputs) => void;
+    setName: (value: string) => void;
+    setRevision: (value: number) => void;
+  }>,
+): void {
+  setters.setBio(profile.bio);
+  setters.setEmail(profile.email);
+  setters.setLinks(linkInputs(profile));
+  setters.setName(profile.name);
+  setters.setRevision(profile.revision);
+}
+
+export function SuiteProfileForm({
+  className,
+  initialProfile,
+  onSave,
+  onSaved,
+  submitLabel,
+}: SuiteProfileFormProps) {
+  const id = useId();
+  const [name, setName] = useState(initialProfile.name);
+  const [email, setEmail] = useState(initialProfile.email);
+  const [bio, setBio] = useState(initialProfile.bio);
+  const [links, setLinks] = useState<LinkInputs>(() =>
+    linkInputs(initialProfile)
+  );
+  const [revision, setRevision] = useState(initialProfile.revision);
+  const [pending, setPending] = useState(false);
+  const [fieldErrors, setFieldErrors] = useState<FieldErrors>({});
+  const [formError, setFormError] = useState<string | null>(null);
+
+  async function submit(event: FormEvent<HTMLFormElement>) {
+    event.preventDefault();
+    if (pending) return;
+    setFieldErrors({});
+    setFormError(null);
+    const parsed = parseSuiteProfileUpdateRequest({
+      bio,
+      expectedRevision: revision,
+      links,
+      name,
+    });
+    if (!parsed.ok) {
+      setFieldErrors({
+        [parsed.error.field]: issueMessage(parsed.error),
+      });
+      return;
+    }
+    setPending(true);
+    try {
+      const result = await onSave(parsed.value);
+      applyProfile(result.profile, {
+        setBio,
+        setEmail,
+        setLinks,
+        setName,
+        setRevision,
+      });
+      if (result.status === "conflict") {
+        setFormError(
+          "The profile changed elsewhere. Review it and save again.",
+        );
+        return;
+      }
+      onSaved?.(result.profile);
+    } catch {
+      setFormError("The profile could not be saved. Try again.");
+    } finally {
+      setPending(false);
+    }
+  }
+
+  const formClassName = className === undefined
+    ? `suite-profile-form ${profileFormClasses.form}`
+    : `suite-profile-form ${profileFormClasses.form} ${className}`;
+
+  return (
+    <form
+      aria-busy={pending}
+      className={formClassName}
+      onSubmit={(event) => {
+        void submit(event);
+      }}
+    >
+      <label className={`suite-profile-field ${profileFormClasses.field}`} htmlFor={`${id}-name`}>
+        <span className={profileFormClasses.label}>Name</span>
+        <input
+          className={profileFormClasses.control}
+          aria-describedby={
+            fieldErrors.name === undefined ? undefined : `${id}-name-error`
+          }
+          aria-invalid={fieldErrors.name === undefined ? undefined : "true"}
+          autoComplete="name"
+          disabled={pending}
+          id={`${id}-name`}
+          maxLength={SUITE_PROFILE_NAME_MAX_LENGTH}
+          onChange={(event) => {
+            setName(event.currentTarget.value);
+            setFieldErrors(errors => withoutFieldError(errors, "name"));
+          }}
+          required
+          type="text"
+          value={name}
+        />
+        {fieldErrors.name === undefined
+          ? null
+          : (
+            <span
+              className={`suite-profile-error ${profileFormClasses.error}`}
+              id={`${id}-name-error`}
+              role="alert"
+            >
+              {fieldErrors.name}
+            </span>
+          )}
+      </label>
+
+      <label className={`suite-profile-field ${profileFormClasses.field}`} htmlFor={`${id}-email`}>
+        <span className={profileFormClasses.label}>Email</span>
+        <input
+          className={profileFormClasses.email}
+          aria-readonly="true"
+          autoComplete="email"
+          id={`${id}-email`}
+          readOnly
+          type="email"
+          value={email}
+        />
+      </label>
+
+      <label className={`suite-profile-field ${profileFormClasses.field}`} htmlFor={`${id}-bio`}>
+        <span className={profileFormClasses.label}>Bio</span>
+        <textarea
+          className={profileFormClasses.textarea}
+          aria-describedby={
+            fieldErrors.bio === undefined ? undefined : `${id}-bio-error`
+          }
+          aria-invalid={fieldErrors.bio === undefined ? undefined : "true"}
+          disabled={pending}
+          id={`${id}-bio`}
+          maxLength={SUITE_PROFILE_BIO_MAX_LENGTH}
+          onChange={(event) => {
+            setBio(event.currentTarget.value);
+            setFieldErrors(errors => withoutFieldError(errors, "bio"));
+          }}
+          placeholder="Introduce yourself"
+          rows={5}
+          value={bio}
+        />
+        {fieldErrors.bio === undefined
+          ? null
+          : (
+            <span
+              className={`suite-profile-error ${profileFormClasses.error}`}
+              id={`${id}-bio-error`}
+              role="alert"
+            >
+              {fieldErrors.bio}
+            </span>
+          )}
+      </label>
+
+      {LINK_FIELDS.map(([key, label]) => {
+        const error = fieldErrors[key];
+        return (
+          <label
+            className={`suite-profile-field ${profileFormClasses.field}`}
+            htmlFor={`${id}-${key}`}
+            key={key}
+          >
+            <span className={profileFormClasses.label}>{label}</span>
+            <input
+              className={profileFormClasses.control}
+              aria-describedby={
+                error === undefined ? undefined : `${id}-${key}-error`
+              }
+              aria-invalid={error === undefined ? undefined : "true"}
+              autoCapitalize="none"
+              autoComplete="url"
+              disabled={pending}
+              id={`${id}-${key}`}
+              inputMode="url"
+              maxLength={2_048}
+              onChange={(event) => {
+                const value = event.currentTarget.value;
+                setLinks(current => ({ ...current, [key]: value }));
+                setFieldErrors(errors => withoutFieldError(errors, key));
+              }}
+              spellCheck={false}
+              type="text"
+              value={links[key]}
+            />
+            {error === undefined
+              ? null
+              : (
+                <span
+                  className={`suite-profile-error ${profileFormClasses.error}`}
+                  id={`${id}-${key}-error`}
+                  role="alert"
+                >
+                  {error}
+                </span>
+              )}
+          </label>
+        );
+      })}
+
+      {formError === null
+        ? null
+        : <p className={`suite-profile-error ${profileFormClasses.error}`} role="alert">{formError}</p>}
+      <button className={profileFormClasses.button} disabled={pending} type="submit">{submitLabel}</button>
+    </form>
+  );
+}

package/src/profile.ts

@@ -0,0 +1,33 @@
+import {
+  SUITE_COMMUNITY_APPLICATION_STATUSES,
+  SUITE_PROFILE_BIO_MAX_LENGTH,
+  SUITE_PROFILE_NAME_MAX_LENGTH,
+  SUITE_PROFILE_URL_MAX_LENGTH,
+  normalizeSuiteProfileLink,
+  parseSuiteCommunityProfileView,
+  parseSuiteProfileUpdateRequest,
+  parseSuiteProfileView,
+} from "./identity/profiles.js";
+
+export * from "./identity/profiles-v2.js";
+
+export {
+  SUITE_COMMUNITY_APPLICATION_STATUSES,
+  SUITE_PROFILE_BIO_MAX_LENGTH,
+  SUITE_PROFILE_NAME_MAX_LENGTH,
+  SUITE_PROFILE_URL_MAX_LENGTH,
+  normalizeSuiteProfileLink,
+  parseSuiteCommunityProfileView,
+  parseSuiteProfileUpdateRequest,
+  parseSuiteProfileView,
+};
+export type {
+  SuiteCommunityApplicationStatus,
+  SuiteCommunityApplicationView,
+  SuiteCommunityProfileView,
+  SuiteProfileIssue,
+  SuiteProfileLinkKey,
+  SuiteProfileLinks,
+  SuiteProfileUpdateRequest,
+  SuiteProfileView,
+} from "./identity/profiles.js";

package/src/public-config.ts

@@ -0,0 +1,294 @@
+import { parseConvexDeployment } from "./convex-url.js";
+import { deepFreeze } from "./immutable.js";
+
+import {
+  getSuiteAccountsCurrentConsumerEnvironment,
+  getSuiteAccountsCurrentConsumer,
+  getSuiteAccountsConsumer,
+  getSuiteAccountsDeployment,
+  isSuiteAccountsCurrentConsumerId,
+  type SuiteAccountsAuthConfiguration,
+  type SuiteAccountsCurrentConsumerId,
+  type SuiteAccountsEnvironment,
+  type SuiteAccountsRegisteredConsumerId,
+} from "./registry.js";
+
+const LOOPBACK_HOSTS = new Set(["127.0.0.1", "[::1]", "localhost"]);
+
+export const SUITE_ACCOUNTS_PUBLIC_ENVIRONMENT_KEYS = deepFreeze([
+  "NEXT_PUBLIC_ACCOUNTS_CONVEX_URL",
+  "NEXT_PUBLIC_ACCOUNTS_CONVEX_SITE_URL",
+  "NEXT_PUBLIC_SITE_URL",
+] as const);
+
+export type SuiteAccountsPublicEnvironmentKey =
+  (typeof SUITE_ACCOUNTS_PUBLIC_ENVIRONMENT_KEYS)[number];
+
+export type SuiteAccountsPublicEnvironment = Readonly<{
+  NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN?: string | undefined;
+  NEXT_PUBLIC_ACCOUNTS_CONVEX_SITE_URL?: string | undefined;
+  NEXT_PUBLIC_ACCOUNTS_CONVEX_URL?: string | undefined;
+  NEXT_PUBLIC_SITE_URL?: string | undefined;
+}>;
+
+type ReadySuiteAccountsPublicConfigBase = Readonly<{
+  canonicalProductOrigin: string;
+  consumer: SuiteAccountsPublicConsumerId;
+  convexSiteUrl: string;
+  convexUrl: string;
+  environment: SuiteAccountsEnvironment;
+  kind: "ready";
+  siteUrl: string;
+  surfaceOrigin: string;
+}>;
+
+export type SuiteAccountsPublicConsumerId =
+  | SuiteAccountsRegisteredConsumerId
+  | SuiteAccountsCurrentConsumerId;
+
+export type ReadySuiteAccountsAuthConfiguration =
+    | Readonly<{
+        authBasePath: "/api/auth";
+        authMode: "authority" | "proxy";
+      }>
+    | Readonly<{
+        authBasePath: "/api/suite-auth";
+        authMode: "oidc-rp";
+      }>;
+
+export type ReadySuiteAccountsPublicConfig =
+  ReadySuiteAccountsPublicConfigBase
+  & ReadySuiteAccountsAuthConfiguration;
+
+export type SuiteAccountsPublicConfig =
+  | ReadySuiteAccountsPublicConfig
+  | Readonly<{ kind: "invalid"; message: string }>
+  | Readonly<{
+      kind: "missing";
+      missing: readonly SuiteAccountsPublicEnvironmentKey[];
+    }>
+  | Readonly<{
+      canonicalProductOrigin: string;
+      environment: "production";
+      kind: "unavailable";
+      message: string;
+      surfaceOrigin: string;
+    }>;
+
+function parseOrigin(
+  value: string,
+  field: SuiteAccountsPublicEnvironmentKey | "NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN",
+): URL {
+  let url: URL;
+  try {
+    url = new URL(value);
+  } catch {
+    throw new Error(`${field} must be an absolute URL.`);
+  }
+  const loopback = LOOPBACK_HOSTS.has(url.hostname);
+  if (url.protocol !== "https:" && !(loopback && url.protocol === "http:")) {
+    throw new Error(
+      `${field} must use HTTPS (HTTP is allowed only on loopback).`,
+    );
+  }
+  if (
+    url.username !== ""
+    || url.password !== ""
+    || url.search !== ""
+    || url.hash !== ""
+    || (url.pathname !== "" && url.pathname !== "/")
+  ) {
+    throw new Error(`${field} must be a credential-free origin.`);
+  }
+  return new URL(url.origin);
+}
+
+function readyRemoteConfig(
+  consumer: SuiteAccountsPublicConsumerId,
+  siteUrl: string,
+  convexUrl: string,
+  convexSiteUrl: string,
+): ReadySuiteAccountsPublicConfig | null {
+  const registration = getPublicConsumer(consumer);
+  const environment = "production" as const;
+  const consumerEnvironment = getSuiteAccountsCurrentConsumerEnvironment(
+    consumer,
+    environment,
+  );
+  const deployment = getSuiteAccountsDeployment(environment);
+  if (
+    consumerEnvironment?.siteUrl === siteUrl
+    && deployment.convexUrl === convexUrl
+    && deployment.convexSiteUrl === convexSiteUrl
+  ) {
+    return deepFreeze({
+      ...publicAuthConfiguration(registration.auth),
+      canonicalProductOrigin: siteUrl,
+      consumer,
+      convexSiteUrl,
+      convexUrl,
+      environment,
+      kind: "ready",
+      siteUrl,
+      surfaceOrigin: siteUrl,
+    });
+  }
+  return null;
+}
+
+function publicAuthConfiguration(
+  auth: SuiteAccountsAuthConfiguration,
+): ReadySuiteAccountsAuthConfiguration {
+  switch (auth.kind) {
+    case "authority":
+      return { authBasePath: auth.basePath, authMode: auth.kind };
+    case "oidc-rp":
+      return { authBasePath: auth.basePath, authMode: auth.kind };
+    case "proxy":
+      return { authBasePath: auth.basePath, authMode: auth.kind };
+  }
+}
+
+function getPublicConsumer(consumer: SuiteAccountsPublicConsumerId) {
+  return isSuiteAccountsCurrentConsumerId(consumer)
+    ? getSuiteAccountsCurrentConsumer(consumer)
+    : getSuiteAccountsConsumer(consumer);
+}
+
+export function parseSuiteAccountsPublicConfig(
+  consumer: SuiteAccountsPublicConsumerId,
+  environment: SuiteAccountsPublicEnvironment,
+): Exclude<SuiteAccountsPublicConfig, { kind: "invalid" }> {
+  const missing = SUITE_ACCOUNTS_PUBLIC_ENVIRONMENT_KEYS.filter((name) => {
+    const value = environment[name];
+    return typeof value !== "string" || value.trim() === "";
+  });
+  if (missing.length > 0) return deepFreeze({ kind: "missing", missing });
+
+  const site = parseOrigin(
+    environment.NEXT_PUBLIC_SITE_URL!,
+    "NEXT_PUBLIC_SITE_URL",
+  );
+  const convexSite = parseOrigin(
+    environment.NEXT_PUBLIC_ACCOUNTS_CONVEX_SITE_URL!,
+    "NEXT_PUBLIC_ACCOUNTS_CONVEX_SITE_URL",
+  );
+  const deployment = parseConvexDeployment(
+    environment.NEXT_PUBLIC_ACCOUNTS_CONVEX_URL,
+  );
+  if (deployment.kind !== "ready") {
+    throw new Error(
+      deployment.kind === "invalid"
+        ? `NEXT_PUBLIC_ACCOUNTS_CONVEX_URL is invalid: ${deployment.message}`
+        : "NEXT_PUBLIC_ACCOUNTS_CONVEX_URL is required.",
+    );
+  }
+  const convex = parseOrigin(
+    deployment.url,
+    "NEXT_PUBLIC_ACCOUNTS_CONVEX_URL",
+  );
+  const loopback = [site, convex, convexSite].map(url =>
+    LOOPBACK_HOSTS.has(url.hostname)
+  );
+  if (loopback.every(Boolean)) {
+    // This new registration has no local trust surface. Preserve existing
+    // consumers' released loopback behavior below.
+    if (consumer === "aicharts") {
+      throw new Error(
+        "AI Charts authentication requires its registered production origin.",
+      );
+    }
+    if (
+      deployment.transport !== "local"
+      || site.hostname !== convex.hostname
+      || site.hostname !== convexSite.hostname
+    ) {
+      throw new Error(
+        "Local consumer and Accounts endpoints must use the same loopback host.",
+      );
+    }
+    const registration = getPublicConsumer(consumer);
+    return deepFreeze({
+      ...publicAuthConfiguration(registration.auth),
+      canonicalProductOrigin: site.origin,
+      consumer,
+      convexSiteUrl: convexSite.origin,
+      convexUrl: convex.origin,
+      environment: "local",
+      kind: "ready",
+      siteUrl: site.origin,
+      surfaceOrigin: site.origin,
+    });
+  }
+  if (loopback.some(Boolean)) {
+    throw new Error(
+      "Consumer and Accounts endpoints cannot mix local and remote environments.",
+    );
+  }
+  const previewSurfaceValue = environment.NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN;
+  if (previewSurfaceValue !== undefined) {
+    const previewSurface = parseOrigin(
+      previewSurfaceValue,
+      "NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN",
+    );
+    if (!previewSurface.hostname.endsWith(".vercel.app")) {
+      throw new Error(
+        "NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN must use a generated .vercel.app origin.",
+      );
+    }
+    const production = readyRemoteConfig(
+      consumer,
+      site.origin,
+      convex.origin,
+      convexSite.origin,
+    );
+    if (production === null) {
+      throw new Error(
+        `${getPublicConsumer(consumer).displayName} and Accounts endpoints `
+          + "do not match the production deployment.",
+      );
+    }
+    return deepFreeze({
+      canonicalProductOrigin: site.origin,
+      environment: "production",
+      kind: "unavailable",
+      message: "Suite authentication is unavailable on generated Vercel Preview origins.",
+      surfaceOrigin: previewSurface.origin,
+    });
+  }
+  const remote = readyRemoteConfig(
+    consumer,
+    site.origin,
+    convex.origin,
+    convexSite.origin,
+  );
+  if (remote !== null) return remote;
+  throw new Error(
+    `${getPublicConsumer(consumer).displayName} and Accounts endpoints `
+      + "do not match an owned deployment environment.",
+  );
+}
+
+export function suiteAccountsPublicConfigFromEnvironment(
+  consumer: SuiteAccountsPublicConsumerId,
+  environment: SuiteAccountsPublicEnvironment = {
+    NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN:
+      process.env.NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN,
+    NEXT_PUBLIC_ACCOUNTS_CONVEX_SITE_URL:
+      process.env.NEXT_PUBLIC_ACCOUNTS_CONVEX_SITE_URL,
+    NEXT_PUBLIC_ACCOUNTS_CONVEX_URL:
+      process.env.NEXT_PUBLIC_ACCOUNTS_CONVEX_URL,
+    NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+  },
+): SuiteAccountsPublicConfig {
+  try {
+    return parseSuiteAccountsPublicConfig(consumer, environment);
+  } catch (error) {
+    return deepFreeze({
+      kind: "invalid",
+      message: error instanceof Error
+        ? error.message
+        : "Suite Accounts configuration is invalid.",
+    });
+  }
+}