@hraness/suite-accounts 0.9.20

package/src/oidc-session-policy.ts

@@ -0,0 +1,6 @@
+/**
+ * Refresh a central OAuth bearer before downstream short-token issuance would
+ * leave too little useful lifetime. The browser refresh coordinator and every
+ * server exchange share this exact window.
+ */
+export const SUITE_OIDC_EARLY_REFRESH_WINDOW_MS = 30_000;

package/src/oidc-surface-server.ts

@@ -0,0 +1,186 @@
+import {
+  createSuiteOidcRelyingParty,
+  type SuiteOidcRelyingParty,
+  type SuiteOidcServerAccountSession,
+  type SuiteOidcServerVerifiedAccountEmail,
+  type SuiteOidcServerSession,
+  type SuiteOidcServerVerifiedEmail,
+} from "./oidc-rp.js";
+import {
+  getSuiteAccountsCurrentConsumerEnvironment,
+  isSuiteAccountsCurrentLinkedOidcConsumerId,
+  type SuiteAccountsCurrentOidcConsumerId,
+  type SuiteAccountsRemoteEnvironment,
+} from "./registry.js";
+
+export type SuiteOidcSurfaceEnvironment = Readonly<{
+  NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN?: string | undefined;
+  NEXT_PUBLIC_SITE_URL?: string | undefined;
+  SUITE_IDENTITY_RECEIPT_KEY_VERSION?: string | undefined;
+  SUITE_OIDC_COOKIE_SECRET?: string | undefined;
+}>;
+
+export function suiteEnvironmentForConsumerOrigin(
+  consumer: SuiteAccountsCurrentOidcConsumerId,
+  siteUrl: string | undefined,
+): SuiteAccountsRemoteEnvironment | null {
+  if (siteUrl === undefined) return null;
+  return getSuiteAccountsCurrentConsumerEnvironment(
+    consumer,
+    "production",
+  )?.siteUrl === siteUrl
+    ? "production"
+    : null;
+}
+
+function processEnvironment(): SuiteOidcSurfaceEnvironment {
+  return {
+    NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN:
+      process.env.NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN,
+    NEXT_PUBLIC_SITE_URL: process.env.NEXT_PUBLIC_SITE_URL,
+    SUITE_IDENTITY_RECEIPT_KEY_VERSION:
+      process.env.SUITE_IDENTITY_RECEIPT_KEY_VERSION,
+    SUITE_OIDC_COOKIE_SECRET: process.env.SUITE_OIDC_COOKIE_SECRET,
+  };
+}
+
+export function createSurfaceSuiteRelyingParty(
+  consumer: SuiteAccountsCurrentOidcConsumerId,
+  injectedEnvironment: SuiteOidcSurfaceEnvironment = processEnvironment(),
+): SuiteOidcRelyingParty | null {
+  const environment = suiteEnvironmentForConsumerOrigin(
+    consumer,
+    injectedEnvironment.NEXT_PUBLIC_SITE_URL,
+  );
+  const cookieSecret = injectedEnvironment.SUITE_OIDC_COOKIE_SECRET;
+  const receiptKeyVersion = isSuiteAccountsCurrentLinkedOidcConsumerId(consumer)
+    ? injectedEnvironment.SUITE_IDENTITY_RECEIPT_KEY_VERSION
+    : "identity-v1";
+  if (
+    injectedEnvironment.NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN !== undefined
+    ||
+    environment === null
+    || cookieSecret === undefined
+    || receiptKeyVersion === undefined
+  ) {
+    return null;
+  }
+  try {
+    return createSuiteOidcRelyingParty({
+      consumer,
+      cookieSecret,
+      environment,
+      receiptKeyVersion,
+    });
+  } catch {
+    return null;
+  }
+}
+
+function unavailable(): Response {
+  return Response.json(
+    {
+      error: {
+        code: "SUITE_OIDC_UNAVAILABLE",
+        message: "Suite sign-in is not configured for this surface.",
+        retryable: false,
+      },
+      schemaVersion: 1,
+    },
+    { headers: { "cache-control": "no-store" }, status: 503 },
+  );
+}
+
+export function suiteOidcSurfaceHandler(
+  consumer: SuiteAccountsCurrentOidcConsumerId,
+  options: Readonly<{
+    createRelyingParty?: (
+      request: Request,
+    ) => Pick<SuiteOidcRelyingParty, "handle"> | null;
+  }> = {},
+): (request: Request) => Promise<Response> {
+  return async (request: Request): Promise<Response> => {
+    if (process.env.NEXT_PUBLIC_VERCEL_SURFACE_ORIGIN !== undefined) {
+      return unavailable();
+    }
+    const relyingParty = options.createRelyingParty?.(request)
+      ?? createSurfaceSuiteRelyingParty(consumer);
+    return relyingParty === null
+      ? unavailable()
+      : await relyingParty.handle(request);
+  };
+}
+
+export async function suiteOidcSurfaceServerSession(
+  consumer: SuiteAccountsCurrentOidcConsumerId,
+  request: Request,
+  injectedEnvironment?: SuiteOidcSurfaceEnvironment,
+): Promise<SuiteOidcServerSession | null> {
+  const relyingParty = createSurfaceSuiteRelyingParty(
+    consumer,
+    injectedEnvironment,
+  );
+  return relyingParty === null ? null : await relyingParty.serverSession(request);
+}
+
+/**
+ * Returns the verified server-held account bearer before username onboarding
+ * completes. Product surfaces that require a permanent username must continue
+ * to use `suiteOidcSurfaceServerSession`.
+ */
+export async function suiteOidcSurfaceServerAccountSession(
+  consumer: SuiteAccountsCurrentOidcConsumerId,
+  request: Request,
+  injectedEnvironment?: SuiteOidcSurfaceEnvironment,
+): Promise<SuiteOidcServerAccountSession | null> {
+  const relyingParty = createSurfaceSuiteRelyingParty(
+    consumer,
+    injectedEnvironment,
+  );
+  return relyingParty === null
+    ? null
+    : await relyingParty.serverAccountSession(request);
+}
+
+/**
+ * Returns a live verified email for a valid Suite account session, including
+ * sessions whose optional username onboarding is incomplete.
+ */
+export async function suiteOidcSurfaceServerVerifiedAccountEmail(
+  consumer: SuiteAccountsCurrentOidcConsumerId,
+  request: Request,
+  injectedEnvironment?: SuiteOidcSurfaceEnvironment,
+  options: Readonly<{
+    createRelyingParty?: (
+      request: Request,
+    ) => Pick<SuiteOidcRelyingParty, "serverVerifiedAccountEmail"> | null;
+  }> = {},
+): Promise<SuiteOidcServerVerifiedAccountEmail | null> {
+  const relyingParty = options.createRelyingParty?.(request)
+    ?? createSurfaceSuiteRelyingParty(consumer, injectedEnvironment);
+  return relyingParty === null
+    ? null
+    : await relyingParty.serverVerifiedAccountEmail(request);
+}
+
+/**
+ * Returns the live verified email together with the Suite account it belongs
+ * to. The email remains a server-only projection and is never copied into the
+ * browser session or relying-party cookie.
+ */
+export async function suiteOidcSurfaceServerVerifiedEmail(
+  consumer: SuiteAccountsCurrentOidcConsumerId,
+  request: Request,
+  injectedEnvironment?: SuiteOidcSurfaceEnvironment,
+  options: Readonly<{
+    createRelyingParty?: (
+      request: Request,
+    ) => Pick<SuiteOidcRelyingParty, "serverVerifiedEmail"> | null;
+  }> = {},
+): Promise<SuiteOidcServerVerifiedEmail | null> {
+  const relyingParty = options.createRelyingParty?.(request)
+    ?? createSurfaceSuiteRelyingParty(consumer, injectedEnvironment);
+  return relyingParty === null
+    ? null
+    : await relyingParty.serverVerifiedEmail(request);
+}

package/src/profile-form.css

@@ -0,0 +1 @@
+@import "../dist/stylex.css";

package/src/profile-form.stylex.ts

@@ -0,0 +1,226 @@
+import * as stylex from "@stylexjs/stylex";
+
+const styles = stylex.create({
+  form: { display: "grid", gap: "1rem", width: "100%" },
+  field: { display: "grid", gap: "0.35rem" },
+  visibility: {
+    borderWidth: 0, marginBottom: 0, marginLeft: 0, marginRight: 0,
+    marginTop: "0.5rem", minWidth: 0, paddingBottom: 0, paddingLeft: 0,
+    paddingRight: 0, paddingTop: "0.5rem",
+  },
+  note: {
+    color: "var(--suite-profile-muted, currentColor)", fontSize: "0.9rem",
+    lineHeight: 1.5, marginBottom: "0.5rem", marginLeft: 0,
+    marginRight: 0, marginTop: 0, overflowWrap: "anywhere",
+  },
+  choice: {
+    alignItems: "center", cursor: "pointer", display: "flex", gap: "0.65rem",
+    minHeight: "2.75rem",
+  },
+  radio: {
+    accentColor: "var(--suite-profile-focus, currentColor)", flexShrink: 0,
+    height: "1.1rem", marginBottom: 0, marginLeft: 0, marginRight: 0,
+    marginTop: 0, width: "1.1rem",
+  },
+  label: { fontSize: "0.9rem", fontWeight: 700 },
+  control: {
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: "var(--suite-profile-input-background, transparent)",
+    backgroundImage: "none",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto auto",
+    borderColor: "var(--suite-profile-line, currentColor)",
+    borderStyle: "solid",
+    borderWidth: "1px",
+    borderImageSource: "none",
+    borderImageSlice: "100%",
+    borderImageWidth: 1,
+    borderImageOutset: 0,
+    borderImageRepeat: "stretch",
+    borderRadius: "0.35rem",
+    color: "inherit",
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    fontStretch: "inherit",
+    fontStyle: "inherit",
+    fontVariant: "inherit",
+    fontWeight: "inherit",
+    fontFeatureSettings: "inherit",
+    fontKerning: "inherit",
+    fontLanguageOverride: "inherit",
+    fontOpticalSizing: "inherit",
+    fontSizeAdjust: "inherit",
+    fontVariationSettings: "inherit",
+    lineHeight: 1.4,
+    minWidth: 0,
+    paddingBottom: "0.7rem",
+    paddingLeft: "0.75rem",
+    paddingRight: "0.75rem",
+    paddingTop: "0.7rem",
+    width: "100%",
+  },
+  textarea: { resize: "vertical" },
+  focus: {
+    outlineColor: { default: null, ":focus-visible": "var(--suite-profile-focus, currentColor)" },
+    outlineOffset: { default: null, ":focus-visible": "2px" },
+    outlineStyle: { default: null, ":focus-visible": "solid" },
+    outlineWidth: { default: null, ":focus-visible": "2px" },
+  },
+  readonly: {
+    color: "var(--suite-profile-muted, currentColor)",
+    cursor: "default",
+    opacity: 0.72,
+  },
+  button: {
+    backgroundAttachment: "scroll",
+    backgroundClip: "border-box",
+    backgroundColor: "var(--suite-profile-button-background, currentColor)",
+    backgroundImage: "none",
+    backgroundOrigin: "padding-box",
+    backgroundPosition: "0% 0%",
+    backgroundRepeat: "repeat",
+    backgroundSize: "auto auto",
+    borderColor: "var(--suite-profile-button-background, currentColor)",
+    borderStyle: "solid",
+    borderWidth: "1px",
+    borderImageSource: "none",
+    borderImageSlice: "100%",
+    borderImageWidth: 1,
+    borderImageOutset: 0,
+    borderImageRepeat: "stretch",
+    borderRadius: "999px",
+    color: "var(--suite-profile-button-foreground, Canvas)",
+    cursor: { default: "pointer", ":disabled": "wait" },
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    fontStretch: "inherit",
+    fontStyle: "inherit",
+    fontVariant: "inherit",
+    fontWeight: 700,
+    fontFeatureSettings: "inherit",
+    fontKerning: "inherit",
+    fontLanguageOverride: "inherit",
+    fontOpticalSizing: "inherit",
+    fontSizeAdjust: "inherit",
+    fontVariationSettings: "inherit",
+    lineHeight: "inherit",
+    justifySelf: "start",
+    opacity: { default: null, ":disabled": 0.6 },
+    paddingBottom: "0.65rem",
+    paddingLeft: "1rem",
+    paddingRight: "1rem",
+    paddingTop: "0.65rem",
+  },
+  error: {
+    color: "var(--suite-profile-error, #a83232)",
+    fontSize: "0.9rem",
+    marginBottom: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    marginTop: 0,
+  },
+  links: {
+    borderColor: "var(--suite-profile-line, currentColor)",
+    borderStyle: "solid",
+    borderTopWidth: "1px",
+    borderBottomWidth: 0,
+    borderLeftWidth: 0,
+    borderRightWidth: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    minWidth: 0,
+    paddingTop: "0.75rem",
+  },
+  linksSummary: {
+    color: "var(--suite-profile-muted, currentColor)",
+    cursor: "pointer",
+    fontSize: "0.9rem",
+    fontWeight: 700,
+    paddingBottom: "0.25rem",
+    paddingTop: "0.25rem",
+  },
+  linksHint: {
+    fontWeight: 400,
+    marginLeft: "0.5rem",
+  },
+  linksBody: {
+    display: "grid",
+    gap: "1rem",
+    paddingTop: "0.75rem",
+  },
+  affix: {
+    alignItems: "center",
+    backgroundColor: "var(--suite-profile-input-background, transparent)",
+    borderColor: "var(--suite-profile-line, currentColor)",
+    borderRadius: "0.35rem",
+    borderStyle: "solid",
+    borderWidth: "1px",
+    display: "flex",
+    minWidth: 0,
+    opacity: { default: null, ":has(:disabled)": 0.6 },
+    outlineColor: { default: null, ":focus-within": "var(--suite-profile-focus, currentColor)" },
+    outlineOffset: { default: null, ":focus-within": "2px" },
+    outlineStyle: { default: null, ":focus-within": "solid" },
+    outlineWidth: { default: null, ":focus-within": "2px" },
+  },
+  affixLead: {
+    alignItems: "center",
+    color: "var(--suite-profile-muted, currentColor)",
+    display: "flex",
+    flexShrink: 0,
+    fontSize: "0.85rem",
+    gap: "0.45rem",
+    paddingLeft: "0.75rem",
+    whiteSpace: "nowrap",
+  },
+  affixInput: {
+    backgroundColor: "transparent",
+    borderWidth: 0,
+    color: "inherit",
+    flexGrow: 1,
+    flexShrink: 1,
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    fontStyle: "inherit",
+    fontWeight: "inherit",
+    lineHeight: 1.4,
+    minWidth: "2rem",
+    outlineStyle: "none",
+    paddingBottom: "0.7rem",
+    paddingLeft: "0.5rem",
+    paddingRight: "0.75rem",
+    paddingTop: "0.7rem",
+  },
+  mark: {
+    display: "block",
+    flexShrink: 0,
+    height: "1.05rem",
+    width: "1.05rem",
+  },
+});
+
+export const profileFormClasses = {
+  affix: stylex.props(styles.affix).className,
+  affixInput: stylex.props(styles.affixInput).className,
+  affixLead: stylex.props(styles.affixLead).className,
+  choice: stylex.props(styles.choice).className,
+  button: stylex.props(styles.button, styles.focus).className,
+  control: stylex.props(styles.control, styles.focus).className,
+  email: stylex.props(styles.control, styles.focus, styles.readonly).className,
+  error: stylex.props(styles.error).className,
+  field: stylex.props(styles.field).className,
+  form: stylex.props(styles.form).className,
+  label: stylex.props(styles.label).className,
+  links: stylex.props(styles.links).className,
+  linksBody: stylex.props(styles.linksBody).className,
+  linksHint: stylex.props(styles.linksHint).className,
+  linksSummary: stylex.props(styles.linksSummary).className,
+  mark: stylex.props(styles.mark).className,
+  note: stylex.props(styles.note).className,
+  radio: stylex.props(styles.radio, styles.focus).className,
+  textarea: stylex.props(styles.control, styles.focus, styles.textarea).className,
+  visibility: stylex.props(styles.visibility).className,
+} as const;