@antelopejs/dms-frontend 0.4.0 → 0.5.1

package/README.md

@@ -188,17 +188,28 @@ The SDK also exposes `use` for Vue plugins. Entries execute by descending manife
 
 Within one setup, the first module to register a name keeps it. `ajs-dms dev` sets every module up again each time a change to a layer reaches the server renderer, into empty registries, so the next server render uses the edited component without a restart. A `setup` may therefore run more than once in a process: it should only register, and keep no state of its own between runs.
 
-### Private components
+### Component prefix
 
-A component registers as public by default: it joins the application's global components and resolves by name anywhere. A component that only exists to render the module's own backend pages registers as private instead:
+Every registered component joins the application's global components and resolves by name anywhere, in templates and in backend page trees. To keep the components of two modules from colliding, a module declares a `componentPrefix`, put in front of the name of every component it registers:
 
 ```ts
-sdk.registerComponent("BillingTotals", BillingTotals, { private: true });
+const frontendModule: DmsFrontendModule = {
+  componentPrefix: "Acme",
+  setup(sdk) {
+    sdk.registerComponent("Banner", Banner); // registered as AcmeBanner
+  },
+};
 ```
 
-A private component is not registered with `app.component`, so no template or other module reaches it by name. `resolveDmsComponent(name, owner)` returns it only when `owner` is the registering module, and then ahead of a public component of the same name; without an owner, only public components resolve. The generic page renderer passes the page's owner, so a backend page tree naming the component renders it, and the page preloader and the server render's hydration handover cover it too.
+The full name, prefix included, is the one a template uses (`<AcmeBanner>`) and a backend sends (`CustomComponent("AcmeBanner")`, or `acme-banner`). Names are compared ignoring case, a leading `lazy` and non-alphanumeric characters; a leading `Dms` is no longer dropped, since it is the DMS module's own prefix.
+
+When two modules register the same name, the module of higher priority keeps it and a warning names both. A module that means to replace another's component registers its full name without its own prefix, which is not reported:
+
+```ts
+sdk.registerComponent("AcmeBanner", MyBanner, { prefix: false });
+```
 
-The owner is the page payload's `module` field: the name of the frontend module that owns the page's component tree, as the backend added it (the module's `name` in the frontend manifest, which the generated loader hands each module's setup). A backend that does not send `module` reaches no private component, whatever the tree names.
+A module's `app/build/` directory is never auto-imported (see below): its components are registered so backend pages can name them, but they are the module's internals, not a surface other modules should build on.
 
 ### Auto-imports (`dms.frontend.build.ts`)
 
@@ -241,7 +252,7 @@ It stays `false` on the server and during hydration, which render the page resol
 
 ### Interface language
 
-The interface language follows the session (`useUserSession().user.language`), not the props of the page on screen: the first render takes it from the session the page arrived with, and it changes when the session's language does, after `useUserSession().fetch()` or a visit with a newer session. A page Inertia restores from history or serves from its prefetch cache carries the session it was fetched with: the frontend server stamps every session it writes (`session.updatedAt`), and a page carrying an older stamp of the same account updates neither the session nor the language. A session without a language, such as a signed-out one, keeps the language on screen; `$i18n.setLocale()` still switches it at any time.
+The interface language follows the session (`useUserSession().user.language`), not the props of the page on screen: the first render takes it from the session the page arrived with, and it changes when the session's language does, after `useUserSession().fetch()` or a visit with a newer session. A page Inertia restores from history or serves from its prefetch cache carries the session it was fetched with: the frontend server stamps every session it writes (`session.updatedAt`), and a page carrying an older stamp of the same account updates neither the session nor the language. A session without a language, such as a signed-out one, keeps the language on screen; `$i18n.setLocale()` still switches it at any time. It also remembers a language the application offers in the `dms_locale` cookie (one year, `SameSite=Lax`), and a page without a signed-in user's language, such as a public sign-in page, first renders in that one: a visitor's choice survives a reload, while a signed-in user's own language still comes first.
 
 ### Declaring the loader releases a module supports
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms-frontend",
-  "version": "0.4.0",
+  "version": "0.5.1",
   "description": "Frontend-agnostic loader for AntelopeJS DMS, shipping the Vue 3 renderer (Vite, Inertia, SSR)",
   "keywords": [
     "antelope",

package/templates/vue/DmsDynamicPage.vue

@@ -37,7 +37,6 @@ interface PageRoute {
 interface PagePayload {
   layout?: PageLayout;
   route?: PageRoute;
-  module?: string;
 }
 
 interface DynamicPageProps {
@@ -56,8 +55,7 @@ function resolveDefinition(
   return {
     id,
     component: definition.componentName
-      ? resolveDmsComponent(definition.componentName, props.page.module) ||
-        "div"
+      ? resolveDmsComponent(definition.componentName) || "div"
       : "div",
     componentName: definition.componentName,
     options: definition.options,

package/templates/vue/app-runtime.ts

@@ -35,6 +35,7 @@ import {
   installDmsPlugins,
   preloadDmsPage,
   provideDmsFrontendRuntime,
+  readDmsLocaleCookie,
   resolveDmsAsyncComponents,
   resolveDmsComponent,
   serializeDmsAsyncData,
@@ -260,7 +261,12 @@ export async function configureDmsApp(
       options.serverFetch as typeof import("ofetch").ofetch,
       readServerRendered<Record<string, unknown>>(SSR_ASYNC_DATA_ID, {}),
     );
-  const locale = userLocale(options.initialPageProps.user) ?? DEFAULT_LOCALE;
+  // The signed-in user's language, else the one this browser picked, which is
+  // how a visitor's choice on a public page survives a reload.
+  const locale =
+    userLocale(options.initialPageProps.user) ??
+    readDmsLocaleCookie(runtime, supportedLocales) ??
+    DEFAULT_LOCALE;
   const messages = await loadLocaleMessages(locale);
   const i18n = createI18n({
     legacy: false,

package/templates/vue/frontend-module.ts

@@ -15,6 +15,8 @@ import {
   type Component,
   type ComponentPublicInstance,
   type ComputedRef,
+  camelize,
+  capitalize,
   computed,
   defineComponent,
   type EffectScope,
@@ -51,12 +53,6 @@ export interface DmsPagePayload {
   layoutUrl?: string;
   layout?: DmsPageLayout;
   shared?: DmsSharedPagePayload;
-  /**
-   * The frontend module that owns the page's component tree, by the name the
-   * backend added it under (its manifest name). Components that module
-   * registered with `{ private: true }` resolve in this page's tree only.
-   */
-  module?: string;
   [key: string]: unknown;
 }
 export interface DmsSharedPagePayload {
@@ -236,12 +232,11 @@ export interface DmsPluginRegistrationOptions {
 export type DmsComponentPreloader = () => Promise<unknown>;
 export interface DmsComponentRegistrationOptions {
   /**
-   * Keeps the component out of the application's global components: it
-   * resolves by name only in the component trees of the backend pages the
-   * registering module owns (see `DmsPagePayload.module`), where it takes
-   * precedence over a public component of the same name. Defaults to `false`.
+   * Registers the component under `name` as given, without the module's
+   * `componentPrefix`: the way to replace a component another module
+   * registers, from a module of higher priority. Defaults to `true`.
    */
-  private?: boolean;
+  prefix?: boolean;
 }
 export interface DmsFrontendSdk {
   options: DmsModuleOptions;
@@ -288,13 +283,17 @@ export interface DmsFrontendSdk {
   use(plugin: Plugin): void;
 }
 export interface DmsFrontendModule {
+  /**
+   * Put in front of the name of every component the module registers, so
+   * the components of two modules never collide: with `"Acme"`,
+   * `registerComponent("Banner", ...)` registers `AcmeBanner`, the name the
+   * backend sends and templates use.
+   */
+  componentPrefix?: string;
   setup(sdk: DmsFrontendSdk): void | Promise<void>;
 }
 export interface DmsFrontendModuleRegistration {
-  /**
-   * The module's manifest name, which its backend pages carry as their
-   * `module`. Without it, the module's private components never resolve.
-   */
+  /** The module's manifest name, which collision warnings name it by. */
   name?: string;
   module: DmsFrontendModule;
   options: DmsModuleOptions;
@@ -315,8 +314,10 @@ export interface DmsRuntimeHooks {
 interface DmsComponentRegistration {
   name: string;
   component: Component;
-  /** The registering module, for a private component. */
+  /** The registering module, for a collision warning. */
   module?: string;
+  /** Registered without the module's prefix, to replace another module's. */
+  unprefixed?: boolean;
 }
 
 interface DmsFrontendEntry {
@@ -339,8 +340,6 @@ interface DmsPluginRegistration {
  */
 interface DmsFrontendRegistry {
   components: Map<string, DmsComponentRegistration>;
-  /** Private components, by registering module, then by normalized name. */
-  privateComponents: Map<string, Map<string, DmsComponentRegistration>>;
   pages: Map<string, DmsFrontendEntry>;
   dynamicPages: Map<string, DmsFrontendEntry>;
   layouts: Map<string, DmsFrontendEntry>;
@@ -389,7 +388,6 @@ export interface DmsFrontendRuntime {
 function createDmsFrontendRegistry(): DmsFrontendRegistry {
   return {
     components: new Map(),
-    privateComponents: new Map(),
     pages: new Map(),
     dynamicPages: new Map(),
     layouts: new Map(),
@@ -1145,6 +1143,35 @@ function createCookieRef<T>(
   });
 }
 
+// The language a visitor picks, kept by the browser so that a reload renders
+// in it. A signed-in user's own language still comes first.
+const LOCALE_COOKIE = "dms_locale";
+const LOCALE_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;
+
+/**
+ * The language this browser picked: read from `document.cookie`, or in a
+ * server render from the request. Only one of `supportedLocales` counts.
+ */
+export function readDmsLocaleCookie(
+  runtime: DmsFrontendRuntime,
+  supportedLocales: string[],
+): string | undefined {
+  const source =
+    typeof document === "undefined" ? runtime.requestCookies : document.cookie;
+  try {
+    const locale = parseCookieValue<unknown>(
+      readCookie(source, LOCALE_COOKIE),
+      {},
+    );
+    return typeof locale === "string" && supportedLocales.includes(locale)
+      ? locale
+      : undefined;
+  } catch {
+    // A value that is not URI-encoded: as if the browser had picked none.
+    return undefined;
+  }
+}
+
 /**
  * A cookie as a ref, shared by every caller of the same name — so a plugin and
  * a page reading one preference see each other's writes — and read on the
@@ -1256,53 +1283,60 @@ export function dmsPageSuspenseProps(): Record<string, () => void> {
   };
 }
 
+/**
+ * The key a component name is registered and resolved under: case, a leading
+ * `lazy` and every non-alphanumeric character ignored, so PascalCase,
+ * kebab-case and lowercase spellings match. Unlike `normalizeDmsName`, a
+ * leading `Dms` is kept: it is the DMS module's prefix, and dropping it would
+ * make `DmsBanner` and another module's `Banner` the same component.
+ */
+function normalizeDmsComponentName(name: string): string {
+  return name
+    .replace(/^lazy/i, "")
+    .replace(/[^a-z0-9]/gi, "")
+    .toLowerCase();
+}
+
+function moduleLabel(module: string | undefined): string {
+  return module ? `module "${module}"` : "an unnamed module";
+}
+
+/**
+ * A component registered under a name already taken is ignored: the first
+ * registration, from the module of higher priority, keeps the name. That is
+ * how a module replaces another's component, by registering its full name
+ * without a prefix, and only a collision neither side asked for is reported.
+ */
 function registerDmsComponentEntry(
   entries: Map<string, DmsComponentRegistration>,
   registration: DmsComponentRegistration,
 ): void {
-  const key = normalizeDmsName(registration.name);
-  if (!entries.has(key)) entries.set(key, registration);
+  const key = normalizeDmsComponentName(registration.name);
+  const existing = entries.get(key);
+  if (!existing) {
+    entries.set(key, registration);
+    return;
+  }
+  if (existing.unprefixed || registration.unprefixed) return;
+  console.warn(
+    `[dms] Component "${registration.name}" from ${moduleLabel(registration.module)} is ignored: ` +
+      `${moduleLabel(existing.module)} already registers "${existing.name}". ` +
+      "Give the modules different component prefixes.",
+  );
 }
 /** Registers a component unless a higher-priority module already owns its name. */
 export function registerDmsComponent(name: string, component: Component): void {
   registerDmsComponentEntry(registry.components, { name, component });
 }
 /**
- * Resolves a registered component by name. `owner` is the `module` of the
- * backend page whose component tree is rendered: the private components that
- * module registered resolve there, ahead of a public one of the same name.
- * Without it, only public components resolve.
+ * Resolves a registered component by its full name, prefix included. Case,
+ * a leading `lazy` and non-alphanumeric characters are ignored.
  */
-export function resolveDmsComponent(
-  name: string,
-  owner?: string,
-): Component | undefined {
-  const key = normalizeDmsName(name);
-  const own = owner
-    ? registry.privateComponents.get(owner)?.get(key)
-    : undefined;
-  return (own ?? registry.components.get(key))?.component;
+export function resolveDmsComponent(name: string): Component | undefined {
+  return registry.components.get(normalizeDmsComponentName(name))?.component;
 }
 export const getDmsComponent = resolveDmsComponent;
 
-const PRIVATE_COMPONENT_SEPARATOR = "::";
-
-function registeredComponents(): DmsComponentRegistration[] {
-  return [
-    ...registry.components.values(),
-    ...[...registry.privateComponents.values()].flatMap((entries) => [
-      ...entries.values(),
-    ]),
-  ];
-}
-
-/** Names a registered component across the server render and hydration. */
-function componentReference({ name, module }: DmsComponentRegistration) {
-  return module === undefined
-    ? name
-    : `${module}${PRIVATE_COMPONENT_SEPARATOR}${name}`;
-}
-
 /**
  * Records, by registered name, every registered async component a server
  * render reaches, so the client can resolve the same ones before hydrating.
@@ -1312,9 +1346,9 @@ function componentReference({ name, module }: DmsComponentRegistration) {
  */
 export function trackDmsAsyncComponents(app: App): Set<string> {
   const names = new Map<Component, string>();
-  registeredComponents().forEach((registration) => {
-    if ((registration.component as DmsAsyncComponent).__asyncLoader)
-      names.set(registration.component, componentReference(registration));
+  registry.components.forEach(({ component, name }) => {
+    if ((component as DmsAsyncComponent).__asyncLoader)
+      names.set(component, name);
   });
   const rendered = new Set<string>();
   app.mixin({
@@ -1357,18 +1391,10 @@ export function trackDmsServerScopes(app: App): () => void {
 export async function resolveDmsAsyncComponents(
   names: readonly string[],
 ): Promise<void> {
-  const components = new Map(
-    registeredComponents().map((registration) => [
-      componentReference(registration),
-      registration.component,
-    ]),
-  );
   await Promise.all(
     names.map((name) =>
       (
-        (components.get(name) ?? resolveDmsComponent(name)) as
-          | DmsAsyncComponent
-          | undefined
+        resolveDmsComponent(name) as DmsAsyncComponent | undefined
       )?.__asyncLoader?.(),
     ),
   );
@@ -1410,7 +1436,6 @@ function collectRenderedComponentNames(
 
 async function preloadDmsLayoutComponents(
   layout: DmsPageLayout | undefined,
-  owner: string | undefined,
 ): Promise<void> {
   const names = new Set<string>();
   collectRenderedComponentNames(layout?.layout, names);
@@ -1419,7 +1444,7 @@ async function preloadDmsLayoutComponents(
   });
   await Promise.all(
     [...names].map((name) => {
-      const component = resolveDmsComponent(name, owner) as
+      const component = resolveDmsComponent(name) as
         | DmsAsyncComponent
         | undefined;
       return component?.__asyncLoader?.();
@@ -1561,8 +1586,7 @@ export async function preloadDmsPage(props: DmsPageProps): Promise<void> {
       (entry?.component as DmsAsyncComponent | undefined)?.__asyncLoader?.(),
     ]),
   );
-  if (!props.error)
-    await preloadDmsLayoutComponents(props.page.layout, props.page.module);
+  if (!props.error) await preloadDmsLayoutComponents(props.page.layout);
 }
 
 export function useDmsInjection<T>(
@@ -1580,29 +1604,28 @@ function registerDmsFrontendEntry(
   if (!entries.has(name)) entries.set(name, { component, preload });
 }
 
-function privateComponentsOf(
-  target: DmsFrontendRegistry,
-  owner: string,
-): Map<string, DmsComponentRegistration> {
-  const entries = target.privateComponents.get(owner) ?? new Map();
-  target.privateComponents.set(owner, entries);
-  return entries;
+/** `name` behind `prefix`, as a PascalCase component name. */
+function prefixedComponentName(prefix: string, name: string): string {
+  return prefix ? `${prefix}${capitalize(camelize(name))}` : name;
 }
 
 function createSdk(
   target: DmsFrontendRegistry,
-  { name: owner = "", options }: DmsFrontendModuleRegistration,
+  {
+    name: module,
+    module: { componentPrefix = "" },
+    options,
+  }: DmsFrontendModuleRegistration,
 ): DmsFrontendSdk {
   return {
     options,
-    registerComponent: (name, component, registration = {}) =>
-      registration.private
-        ? registerDmsComponentEntry(privateComponentsOf(target, owner), {
-            name,
-            component,
-            module: owner,
-          })
-        : registerDmsComponentEntry(target.components, { name, component }),
+    registerComponent: (name, component, { prefix = true } = {}) =>
+      registerDmsComponentEntry(target.components, {
+        name: prefix ? prefixedComponentName(componentPrefix, name) : name,
+        component,
+        module,
+        unprefixed: !prefix,
+      }),
     registerPage: (name, component, preload) => {
       const key = normalizeDmsPageKey(name);
       registerDmsFrontendEntry(target.pages, key, component, preload);
@@ -1713,6 +1736,12 @@ export async function installDmsPlugins(
     const messages = await loadLocaleMessages(locale);
     i18n.setLocaleMessage(locale, messages);
     i18n.locale.value = locale;
+    if (typeof document !== "undefined" && supportedLocales.includes(locale))
+      writeCookie(LOCALE_COOKIE, locale, {
+        maxAge: LOCALE_COOKIE_MAX_AGE,
+        sameSite: "lax",
+        secure: globalThis.location?.protocol === "https:",
+      });
   };
   dmsI18n.locales = computed(() =>
     supportedLocales.map((code) => ({

package/templates/vue/server/auth/oauth.mjs

@@ -197,7 +197,13 @@ export function oauthHandoff(request, response) {
   json(response, 200, handoff);
 }
 
-export function sessionFrom(result) {
+/**
+ * The session a token pair opens.
+ *
+ * @param result Backend answer carrying the tokens and the user
+ * @param persistent Whether the session outlives the browser
+ */
+export function sessionFrom(result, persistent = true) {
   const payload = JSON.parse(
     Buffer.from(
       result.access_token.split(".")[1] ?? "",
@@ -209,5 +215,6 @@ export function sessionFrom(result) {
     accessToken: result.access_token,
     refreshToken: result.refresh_token,
     activeTenantId: payload.tenantId ?? "default",
+    persistent,
   };
 }

package/templates/vue/server/auth/routes.mjs

@@ -9,17 +9,28 @@ import {
   sessionFrom,
 } from "./oauth.mjs";
 import {
+  clearSealedCookie,
   clearSession,
+  isPersistent,
   persistAccountSession,
   readAccount,
+  readSealedCookie,
   readSession,
   removeAccount,
   setRequestSession,
+  storeAccount,
+  writeSealedCookie,
 } from "./session.mjs";
 
 const REFRESH_TTL_MS = 15_000;
 const refreshes = new Map();
 
+// Carries the "keep me signed in" choice of a login across its 2FA step, whose
+// request names only the challenge. Lives as long as the challenge token.
+const PENDING_LOGIN = "dms_pending_login";
+const PENDING_LOGIN_PATH = "/auth/verify-2fa";
+const PENDING_LOGIN_LIFETIME_S = 300;
+
 const PASSTHROUGH = new Map([
   ["/auth/request-2fa-email", "/api/auth/request-2fa-email"],
 ]);
@@ -101,14 +112,30 @@ function singleFlight(token, operation) {
   return promise;
 }
 
-async function establishWith(request, response, endpoint, payload) {
+async function establishWith(
+  request,
+  response,
+  endpoint,
+  payload,
+  persistent = true,
+) {
   const result = await backend(endpoint, request, {
     method: "POST",
     body: payload,
   });
+  if (result.requires_2fa && typeof result.two_factor_token === "string")
+    writeSealedCookie(
+      response,
+      PENDING_LOGIN,
+      { token: result.two_factor_token, persistent },
+      PENDING_LOGIN_LIFETIME_S,
+      PENDING_LOGIN_PATH,
+    );
   if (result.requires_2fa || result.requires_tenant_assignment)
     return json(response, 200, result);
-  const session = sessionFrom(result);
+  if (readSealedCookie(request, PENDING_LOGIN))
+    clearSealedCookie(response, PENDING_LOGIN, PENDING_LOGIN_PATH);
+  const session = sessionFrom(result, persistent);
   const account = persistAccountSession(request, response, session);
   json(response, 200, { user: result.user, account });
 }
@@ -117,6 +144,42 @@ async function establish(request, response, endpoint) {
   return establishWith(request, response, endpoint, await body(request));
 }
 
+/**
+ * Sign in with a password. Only a login that asked to be kept signed in
+ * outlives the browser; any other ends when the browser closes.
+ */
+async function login(request, response) {
+  const input = await body(request);
+  return establishWith(
+    request,
+    response,
+    "/api/auth/login",
+    input,
+    input.keep_login === true,
+  );
+}
+
+/**
+ * Finish a login on its 2FA step, with the lifetime the login chose. A
+ * challenge that no login of this browser left a choice for, such as the one
+ * an OAuth sign-in hands over, keeps the default.
+ */
+async function verifyTwoFactor(request, response) {
+  const input = await body(request);
+  const pending = readSealedCookie(request, PENDING_LOGIN);
+  const persistent =
+    typeof input.token === "string" && pending?.token === input.token
+      ? isPersistent(pending)
+      : true;
+  return establishWith(
+    request,
+    response,
+    "/api/auth/verify-2fa",
+    input,
+    persistent,
+  );
+}
+
 /**
  * Backend endpoints this deployment lets a module open a session from.
  *
@@ -196,7 +259,7 @@ export async function refreshSession(request, response) {
     const user = await backend("/api/auth/me", request, {
       token: tokens.access_token,
     });
-    const refreshed = sessionFrom({ ...tokens, user });
+    const refreshed = sessionFrom({ ...tokens, user }, isPersistent(session));
     persistAccountSession(request, response, refreshed, session.accountId);
     setRequestSession(request, refreshed);
     return refreshed;
@@ -246,7 +309,7 @@ async function switchTenant(request, response) {
   const user = await backend("/api/auth/me", request, {
     token: tokens.access_token,
   });
-  const switched = sessionFrom({ ...tokens, user });
+  const switched = sessionFrom({ ...tokens, user }, isPersistent(session));
   persistAccountSession(request, response, switched, session.accountId);
   json(response, 200, { success: true, user });
 }
@@ -263,7 +326,7 @@ async function switchAccount(request, response) {
     const user = await backend("/api/auth/me", request, {
       token: tokens.access_token,
     });
-    const session = sessionFrom({ ...tokens, user });
+    const session = sessionFrom({ ...tokens, user }, isPersistent(account));
     const descriptor = persistAccountSession(
       request,
       response,
@@ -281,6 +344,36 @@ async function switchAccount(request, response) {
   }
 }
 
+/**
+ * Keep the tokens a validation refreshed, without changing which account is
+ * signed in. Another account only has its own cookie updated. The current one
+ * also has the session updated, since a refresh may have rotated the token the
+ * session holds; it keeps its user as the backend gave it.
+ */
+function storeValidatedAccount(request, response, account, accountId, tokens) {
+  const current = readSession(request);
+  if (current?.accountId === accountId) {
+    persistAccountSession(
+      request,
+      response,
+      sessionFrom({ ...tokens, user: current.user }, isPersistent(current)),
+      accountId,
+    );
+    return;
+  }
+  const user = {
+    _id: account.userId,
+    email: account.email,
+    name: account.name,
+  };
+  storeAccount(
+    request,
+    response,
+    sessionFrom({ ...tokens, user }, isPersistent(account)),
+    accountId,
+  );
+}
+
 async function validateAccount(request, response) {
   const input = await body(request);
   const account = readAccount(request, input.accountId);
@@ -290,15 +383,7 @@ async function validateAccount(request, response) {
       method: "POST",
       body: { token: account.refreshToken },
     });
-    persistAccountSession(
-      request,
-      response,
-      sessionFrom({
-        ...tokens,
-        user: { id: account.userId, email: account.email, name: account.name },
-      }),
-      input.accountId,
-    );
+    storeValidatedAccount(request, response, account, input.accountId, tokens);
     json(response, 200, { valid: true });
   } catch (error) {
     const rejected =
@@ -309,12 +394,10 @@ async function validateAccount(request, response) {
 }
 
 const actions = {
-  "/auth/login": (request, response) =>
-    establish(request, response, "/api/auth/login"),
+  "/auth/login": login,
   "/auth/signup": (request, response) =>
     establish(request, response, "/api/auth/signup"),
-  "/auth/verify-2fa": (request, response) =>
-    establish(request, response, "/api/auth/verify-2fa"),
+  "/auth/verify-2fa": verifyTwoFactor,
   "/auth/establish": establishFromEndpoint,
   "/auth/switch-account": switchAccount,
   "/auth/switch-tenant": switchTenant,

package/templates/vue/server/auth/session.mjs

@@ -60,9 +60,27 @@ function cookieValue(request, name) {
     .find(([key]) => key === name)?.[1];
 }
 
+/**
+ * Cookie attributes. Without a `maxAge` the cookie lasts as long as the
+ * browser session: it is gone once the browser is closed.
+ */
 function attributes(maxAge, path = "/") {
   const secure = process.env.DMS_COOKIE_SECURE !== "false" ? "; Secure" : "";
-  return `Path=${path}; HttpOnly; SameSite=Lax; Max-Age=${maxAge}${secure}`;
+  const lifetime = maxAge === undefined ? "" : `; Max-Age=${maxAge}`;
+  return `Path=${path}; HttpOnly; SameSite=Lax${lifetime}${secure}`;
+}
+
+/**
+ * Whether a session, or a stored account, outlives the browser. Only a login
+ * that left "keep me signed in" unchecked says no; a cookie written before
+ * the flag existed carries none, and keeps the lifetime it was given then.
+ */
+export function isPersistent(session) {
+  return session?.persistent !== false;
+}
+
+function lifetime(persistent) {
+  return persistent ? MAX_AGE : undefined;
 }
 
 function appendCookie(response, cookie) {
@@ -87,6 +105,7 @@ function descriptor(session, accountId) {
     email: session.user?.email,
     name: session.user?.name,
     activeTenantId: session.activeTenantId,
+    persistent: isPersistent(session),
   };
 }
 
@@ -103,7 +122,7 @@ export function setRequestSession(request, session) {
 export function writeSession(response, session) {
   appendCookie(
     response,
-    `${SESSION_COOKIE}=${encode(session)}; ${attributes(MAX_AGE)}`,
+    `${SESSION_COOKIE}=${encode(session)}; ${attributes(lifetime(isPersistent(session)))}`,
   );
 }
 
@@ -117,9 +136,10 @@ export function readAccounts(request) {
 }
 
 function writeAccountIndex(response, accounts) {
+  const persistent = Object.values(accounts).some(isPersistent);
   appendCookie(
     response,
-    `${ACCOUNT_INDEX_COOKIE}=${encode(accounts)}; ${attributes(MAX_AGE)}`,
+    `${ACCOUNT_INDEX_COOKIE}=${encode(accounts)}; ${attributes(lifetime(persistent))}`,
   );
 }
 
@@ -136,7 +156,7 @@ export function storeAccount(request, response, session, accountId) {
   writeAccountIndex(response, accounts);
   appendCookie(
     response,
-    `${accountCookieName(id)}=${encode({ refreshToken: session.refreshToken, ...accountDescriptor })}; ${attributes(MAX_AGE)}`,
+    `${accountCookieName(id)}=${encode({ refreshToken: session.refreshToken, ...accountDescriptor })}; ${attributes(lifetime(accountDescriptor.persistent))}`,
   );
   return accountDescriptor;
 }
@@ -177,13 +197,19 @@ export function readSealedCookie(request, name) {
   return value ? decode(value) : undefined;
 }
 
-export function writeSealedCookie(response, name, value, maxAge) {
+export function writeSealedCookie(
+  response,
+  name,
+  value,
+  maxAge,
+  path = "/auth/oauth",
+) {
   appendCookie(
     response,
-    `${name}=${encode(value)}; ${attributes(maxAge, "/auth/oauth")}`,
+    `${name}=${encode(value)}; ${attributes(maxAge, path)}`,
   );
 }
 
-export function clearSealedCookie(response, name) {
-  appendCookie(response, `${name}=; ${attributes(0, "/auth/oauth")}`);
+export function clearSealedCookie(response, name, path = "/auth/oauth") {
+  appendCookie(response, `${name}=; ${attributes(0, path)}`);
 }