@atlasauth/svelte 0.3.0 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,48 @@
 # @atlasauth/svelte changelog
 
+## 0.5.0
+Requires `@atlasauth/js` 0.9.0.
+- **Server errors render in the app's language.** `<SignIn>` / `<SignUp>` show the catalog string
+  `error.<reason>` for an error's `reason` (placeholders filled from its `meta`), falling back to the server's
+  message, then `error.generic`. With `localization: esES` a refused password reads
+  "Esas credenciales son incorrectas." instead of the server's English sentence.
+- **`Accept-Language`.** The client's and the flows' Frontend API requests carry the `locale` tag of the
+  `localization` bundle, so the server localises `message` too.
+- **Added 38 `error.<reason>` keys** to the built-in `EN_US` catalog (see `@atlasauth/localizations` 0.4.0).
+- `AtlasClient` gains `errorCatalog?: Catalog` and `locale?: string`.
+
+
+## 0.4.0
+- **Safer sign-out.** `signOut(options?)` (on the client, `getAuth()` and the `signOut()` helper) now
+  resolves `SignOutResult` — `{ revoked: boolean; activeSessionId?: string }` — instead of `void`
+  (existing `await signOut()` call sites keep working). The session is revoked on the Frontend API (retried
+  once) even when no token is cached (the session is looked up from the cookies), and is remembered
+  (a tombstone in `localStorage`, per Frontend API) so a reload, a token refresh, a sibling tab or a tab
+  opened later never re-adopts it while the refresh cookie is still valid; a revoke the server did not
+  confirm is re-tried in the background and the tombstone dropped once it lands. A session the server
+  promotes on revoke (`active_session_id`) is adopted. `signOut({ strict: true })` rejects with a
+  `SignOutError` (after the local sign-out) when the revoke was not confirmed. Built on `SignOutGuard`
+  from `@atlasauth/js`.
+- **Sibling-tab sign-out.** A tab signed in to a session another tab signed out of now signs out too.
+- **Popup landing.** On boot the client completes a severed OAuth popup landing
+  (`#atlas_popup_result=…`): it relays the result to the opener and closes when the opener takes it,
+  otherwise exchanges the ticket itself (or follows the continuation URL). After exchanging a redirect
+  ticket inside the Atlas popup window it hands back to the opener and closes the popup.
+- **Email delivery.** The prebuilt components read `settings.emailDelivery`:
+  `<SignUp>` shows a "can't send email" notice (`signUp.emailUnavailable`) instead of the email + password
+  form when `passwordSignUp` is false; `<SignIn>` offers emailed first factors only while `available`.
+- **`<SignIn>` first-factor choice.** When the server offers `email_code` / `email_link`, the first-factor
+  step shows "Email me a code" / "Email me a sign-in link" buttons next to the password field.
+- **Added to `FlowController`:** `prepare(strategy: 'email_code' | 'email_link'): Promise<boolean>`.
+- **Changed types:** `AtlasClient.signOut`, `UseAuth.signOut` and the `signOut()` helper return
+  `Promise<SignOutResult>`.
+- **Added re-exports** from `@atlasauth/js`: `SignOutError` (class), and the types `SignOutResult`,
+  `SignOutOptions`, `EmailDelivery`.
+- **Added catalog keys** (en-US): `signUp.emailUnavailable`, `signIn.emailCodeOption`,
+  `signIn.emailLinkOption`.
+- `destroy()` now also stops the sibling-tab watch and cancels background revoke re-tries.
+- Requires `@atlasauth/js` 0.8.0.
+
 ## 0.3.0
 - **`<SignUp>` now creates accounts.** Its first step is a create-account form (the instance's
   configured sign-up fields, email, password and the legal-consent row) that posts

package/dist/accessors.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from 'svelte/store';
-import { type CaptchaController, type FlowState, type InstanceSettings, type ProviderToken, type SignOutOptions } from '@atlasauth/js';
+import { type CaptchaController, type FlowState, type InstanceSettings, type ProviderToken, type SignOutOptions, type SignOutResult } from '@atlasauth/js';
 import { type AuthStatus } from './context';
 import { type ProtectCondition } from './protect';
 import type { AtlasOrganizationMembership, AtlasSession, AtlasUser } from './types';
@@ -48,7 +48,12 @@ export interface UseAuth {
     getToken(): Promise<string | null>;
     /** §6.6 the user's own live access token at a connected social provider. */
     getProviderToken(provider: string): Promise<ProviderToken | null>;
-    signOut(options?: SignOutOptions): Promise<void>;
+    /**
+     * Revoke the session and drop all in-memory state. Resolves
+     * `{ revoked, activeSessionId? }`; `{ strict: true }` rejects with a
+     * `SignOutError` when the server could not confirm the revoke.
+     */
+    signOut(options?: SignOutOptions): Promise<SignOutResult>;
     /** Mirrors `<Protect>`, for logic that is not a render decision. */
     has(condition: ProtectCondition): boolean;
 }
@@ -63,8 +68,12 @@ export interface UseOrganization {
 export declare function getOrganization(): Readable<UseOrganization>;
 /** Refresh-if-stale, then hand over the JWT. The `useAuth().getToken` shortcut. */
 export declare function getToken(): Promise<string | null>;
-/** Revoke the session and drop all in-memory state. */
-export declare function signOut(options?: SignOutOptions): Promise<void>;
+/**
+ * Revoke the session and drop all in-memory state. Resolves
+ * `{ revoked, activeSessionId? }`; `{ strict: true }` rejects with a
+ * `SignOutError` (after the local sign-out) when the revoke was not confirmed.
+ */
+export declare function signOut(options?: SignOutOptions): Promise<SignOutResult>;
 /**
  * A running sign-in / sign-up attempt: a reactive `state` store plus `submit`.
  *
@@ -84,10 +93,16 @@ export interface FlowController {
      * then posted with {@link submit}.
      */
     create(values: Record<string, string>, consent?: boolean): void;
+    /**
+     * Ask the server to email a sign-in code or link on the first-factor step
+     * (`POST …/prepare_first_factor`). Resolves true once it was sent; the code is
+     * then posted with {@link submit}, a link is collected by polling.
+     */
+    prepare(strategy: 'email_code' | 'email_link'): Promise<boolean>;
     /**
      * The instance's public sign-in / sign-up settings (captcha, sign-up fields,
-     * legal consent) from `GET /v1/appearance`; null until loaded or when the
-     * server could not be reached.
+     * legal consent, email delivery) from `GET /v1/appearance`; null until loaded
+     * or when the server could not be reached.
      */
     settings: Readable<InstanceSettings | null>;
     /** The sign-in captcha (identifier step / `needs_captcha` challenge). */

package/dist/accessors.js

@@ -1,5 +1,5 @@
 import { derived, get, writable } from 'svelte/store';
-import { FapiClient, advanceWithCaptcha, createCaptchaController, createSignUp, fetchInstanceSettings, flowNeedsCaptcha, signInCaptchaOptions, flowFromPending, pollAttempt, shouldKeepPolling, } from '@atlasauth/js';
+import { FapiClient, advanceWithCaptcha, createCaptchaController, createSignUp, fetchInstanceSettings, flowNeedsCaptcha, signInCaptchaOptions, flowFromPending, pollAttempt, prepareFactor, shouldKeepPolling, } from '@atlasauth/js';
 import { useAtlas } from './context';
 import { translate } from './i18n';
 import { evaluate } from './protect';
@@ -54,7 +54,11 @@ export function getOrganization() {
 export function getToken() {
     return useAtlas().getToken();
 }
-/** Revoke the session and drop all in-memory state. */
+/**
+ * Revoke the session and drop all in-memory state. Resolves
+ * `{ revoked, activeSessionId? }`; `{ strict: true }` rejects with a
+ * `SignOutError` (after the local sign-out) when the revoke was not confirmed.
+ */
 export function signOut(options) {
     return useAtlas().signOut(options);
 }
@@ -63,6 +67,7 @@ function createFlow() {
     const client = new FapiClient({
         publishableKey: atlas.publishableKey,
         baseUrl: atlas.frontendApi,
+        locale: atlas.locale,
     });
     // Seeded from a redirect that came back mid-flow (e.g. OAuth needing a second
     // factor), so the user resumes at the demanded step instead of starting over.
@@ -146,6 +151,13 @@ function createFlow() {
             await finish(await createSignUp(client, values, { consent, captcha: signUpCaptcha, t }));
         })();
     }
+    async function prepare(strategy) {
+        state.update((current) => ({ ...current, busy: true, errors: [] }));
+        const next = await prepareFactor(client, get(state), strategy);
+        state.set({ ...next, busy: false });
+        maybeStartPolling();
+        return next.errors.length === 0;
+    }
     function destroy() {
         stopPolling();
         unsubscribeCaptcha();
@@ -156,6 +168,7 @@ function createFlow() {
         state: { subscribe: state.subscribe },
         submit,
         create,
+        prepare,
         settings: { subscribe: settings.subscribe },
         captcha,
         signUpCaptcha,

package/dist/components/AttemptFlow.svelte

@@ -1,4 +1,8 @@
-<script>import { nextStep } from "@atlasauth/js";
+<script>import {
+  localizedErrorMessage,
+  nextStep,
+  offeredFirstFactors
+} from "@atlasauth/js";
 import { useAtlas } from "../context";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
@@ -9,17 +13,34 @@ export let errors = [];
 export let titleKey;
 export let onSubmit;
 export let captcha = null;
+export let emailDelivery = null;
+export let onPrepare = null;
 const atlas = useAtlas();
 const cls = (key, base) => classFor(key, atlas.appearance, base);
 const t = (key, vars) => translate(atlas.catalog, key, vars);
+const errorText = (error) => localizedErrorMessage(error, atlas.errorCatalog ?? atlas.catalog, atlas.catalog);
 let values = {};
 $: step = attempt ? nextStep(attempt) : { kind: "collect_identifier" };
+const strategyName = (s) => typeof s === "string" ? s : String(s?.strategy ?? "");
+$: offered = step.kind === "collect_first_factor" ? offeredFirstFactors(step.strategies.map(strategyName), emailDelivery) : [];
+$: emailOptions = onPrepare ? offered.filter((s) => s === "email_code" || s === "email_link") : [];
+$: showPassword = offered.includes("password") || emailOptions.length === 0;
+let prepared = null;
+$: sent = prepared && prepared.attemptId === (attempt?.id ?? null) ? prepared.strategy : null;
+async function prepare(strategy) {
+  if (!onPrepare) return;
+  const attemptId = attempt?.id ?? null;
+  if (await onPrepare(strategy)) prepared = { strategy, attemptId };
+}
 $: fields = (() => {
   switch (step.kind) {
     case "collect_identifier":
       return [{ name: "identifier", labelKey: "signIn.identifierLabel", type: "email" }];
     case "collect_first_factor":
-      return [{ name: "password", labelKey: "signIn.passwordLabel", type: "password" }];
+      if (sent === "email_code") {
+        return [{ name: "code", labelKey: "signIn.emailCodeLabel", type: "text" }];
+      }
+      return showPassword ? [{ name: "password", labelKey: "signIn.passwordLabel", type: "password" }] : [];
     case "collect_second_factor":
       return [{ name: "code", labelKey: "mfa.codeLabel", type: "text" }];
     case "enroll_second_factor":
@@ -43,9 +64,10 @@ $: message = (() => {
       return t("signIn.checkOtherTab");
     case "restart":
       return t("error.generic");
+    case "collect_first_factor":
+      return sent === "email_link" ? t("signIn.magicLinkSent") : null;
     case "collect_captcha":
     case "collect_identifier":
-    case "collect_first_factor":
     case "collect_second_factor":
     case "enroll_second_factor":
     case "collect_email_code":
@@ -55,7 +77,9 @@ $: message = (() => {
       return t("error.generic");
   }
 })();
-$: showSubmit = step.kind !== "done" && step.kind !== "await_oauth" && message === null;
+$: showSubmit = step.kind !== "done" && step.kind !== "await_oauth" && message === null && // Only emailed factors on offer: the option buttons are the way forward.
+(step.kind !== "collect_first_factor" || fields.length > 0);
+$: showEmailOptions = step.kind === "collect_first_factor" && message === null && sent === null && emailOptions.length > 0;
 $: showCaptcha = !!captcha && (step.kind === "collect_identifier" || step.kind === "collect_captcha");
 function handleSubmit(event) {
   event.preventDefault();
@@ -67,7 +91,7 @@ function handleSubmit(event) {
   <h1 class={cls('headerTitle', 'atlas-title')}>{t(titleKey)}</h1>
 
   {#each errors.filter((e) => !e.param) as error (error.code)}
-    <p class={cls('formFieldError', 'atlas-error')} role="alert">{error.message}</p>
+    <p class={cls('formFieldError', 'atlas-error')} role="alert">{errorText(error)}</p>
   {/each}
 
   <form on:submit={handleSubmit}>
@@ -90,10 +114,23 @@ function handleSubmit(event) {
             on:input={(e) => (values[f.name] = e.currentTarget.value)}
           />
           {#each errors.filter((e) => e.param === f.name) as error (error.code)}
-            <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+            <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
           {/each}
         </label>
       {/each}
+      {#if showEmailOptions}
+        {#each emailOptions as strategy (strategy)}
+          <button
+            class={cls('formButtonSecondary', 'atlas-button-secondary')}
+            type="button"
+            data-strategy={strategy}
+            disabled={busy}
+            on:click={() => void prepare(strategy)}
+          >
+            {t(strategy === 'email_code' ? 'signIn.emailCodeOption' : 'signIn.emailLinkOption')}
+          </button>
+        {/each}
+      {/if}
     {/if}
 
     {#if showCaptcha && captcha}

package/dist/components/AttemptFlow.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type AttemptView, type CaptchaController, type FieldError } from '@atlasauth/js';
+import { type AttemptView, type CaptchaController, type EmailDelivery, type FieldError } from '@atlasauth/js';
 declare const __propDef: {
     props: {
         /**
@@ -19,6 +19,14 @@ declare const __propDef: {
            * (an always-on sign-in captcha) and on the challenge step the server demands
            * with `needs_captcha`. Null when the flow draws none.
            */ captcha?: CaptchaController | null;
+        /**
+           * The instance's email-delivery facts (`settings.emailDelivery`). While the app
+           * cannot send email the first-factor step offers no email code / link option.
+           */ emailDelivery?: EmailDelivery | null;
+        /**
+           * Ask the server to email a sign-in code or link (`FlowController.prepare`).
+           * Without it the first-factor step offers the password only.
+           */ onPrepare?: ((strategy: "email_code" | "email_link") => Promise<boolean>) | null;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/SignIn.svelte

@@ -16,5 +16,7 @@ $: captcha = drawn($settings, $flowState);
   errors={$flowState.errors}
   titleKey="signIn.title"
   onSubmit={flow.submit}
+  onPrepare={flow.prepare}
+  emailDelivery={$settings?.emailDelivery ?? null}
   {captcha}
 />

package/dist/components/SignIn.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
            * server-side attempt status. Contains no decision about what comes next; it
            * renders whatever `status` the server returned. Draws the instance's sign-in
            * captcha when it is required (always-on, or a `needs_captcha` challenge).
+           * Offers emailed first factors (code / link) only while the app can deliver
+           * email (`settings.emailDelivery`).
            */ afterUrl?: string | undefined;
     };
     events: {

package/dist/components/SignUpForm.svelte

@@ -1,4 +1,7 @@
-<script>import { useAtlas } from "../context";
+<script>import {
+  localizedErrorMessage
+} from "@atlasauth/js";
+import { useAtlas } from "../context";
 import { classFor } from "../appearance";
 import { translate } from "../i18n";
 import CaptchaSlot from "./CaptchaSlot.svelte";
@@ -10,12 +13,14 @@ export let onSubmit;
 const atlas = useAtlas();
 const cls = (key, base) => classFor(key, atlas.appearance, base);
 const t = (key, vars) => translate(atlas.catalog, key, vars);
+const errorText = (error) => localizedErrorMessage(error, atlas.errorCatalog ?? atlas.catalog, atlas.catalog);
 let values = {};
 let agreed = false;
 $: legal = settings?.legal;
 $: showLegal = !!legal && (!!legal.termsUrl || !!legal.privacyUrl);
 $: consentOk = !legal?.required || agreed;
 $: fields = settings?.signUpFields ?? [];
+$: emailUnavailable = settings?.emailDelivery?.passwordSignUp === false;
 const label = (f) => f.required ? f.label : t("signUp.optionalField", { label: f.label });
 const inputType = (f) => ["email", "tel", "url", "number", "date"].includes(f.type) ? f.type : "text";
 const picked = (key) => values[key] ? values[key].split(", ") : [];
@@ -37,147 +42,151 @@ function handleSubmit(event) {
   <h1 class={cls('headerTitle', 'atlas-title')}>{t('signUp.title')}</h1>
 
   {#each errors.filter((e) => !e.param) as error (error.code)}
-    <p class={cls('formFieldError', 'atlas-error')} role="alert">{error.message}</p>
+    <p class={cls('formFieldError', 'atlas-error')} role="alert">{errorText(error)}</p>
   {/each}
 
-  <form on:submit={handleSubmit}>
-    {#each fields as f (f.key)}
-      {#if f.type === 'radio' || f.type === 'multiselect'}
-        <!-- A choice group holds several inputs, so it can't sit inside one <label>. -->
-        <div class={cls('formField', 'atlas-field')}>
-          <span class={cls('formFieldLabel', 'atlas-field-label')}>{label(f)}</span>
-          <span class="atlas-choices">
-            {#each f.options as o (o)}
-              <label class="atlas-choice">
-                <input
-                  type={f.type === 'radio' ? 'radio' : 'checkbox'}
-                  name={f.key}
-                  value={o}
-                  checked={picked(f.key).includes(o)}
-                  on:change={(e) => toggle(f, o, e.currentTarget.checked)}
-                />
-                {o}
-              </label>
-            {/each}
-          </span>
-          {#each errors.filter((e) => e.param === f.key) as error (error.code)}
-            <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
-          {/each}
-        </div>
-      {:else}
-        <label class={cls('formField', 'atlas-field')}>
-          <span class={cls('formFieldLabel', 'atlas-field-label')}>{label(f)}</span>
-          {#if f.type === 'checkbox'}
-            <input
-              type="checkbox"
-              name={f.key}
-              checked={values[f.key] === 'true'}
-              on:change={(e) => (values[f.key] = e.currentTarget.checked ? 'true' : '')}
-            />
-          {:else if f.type === 'select'}
-            <select
-              class={cls('formFieldInput', 'atlas-input')}
-              name={f.key}
-              value={values[f.key] ?? ''}
-              required={f.required}
-              on:change={(e) => (values[f.key] = e.currentTarget.value)}
-            >
-              <option value="">{f.placeholder ?? t('signUp.selectPlaceholder')}</option>
+  {#if emailUnavailable}
+    <p class={cls('formFieldError', 'atlas-error')} role="alert">{t('signUp.emailUnavailable')}</p>
+  {:else}
+    <form on:submit={handleSubmit}>
+      {#each fields as f (f.key)}
+        {#if f.type === 'radio' || f.type === 'multiselect'}
+          <!-- A choice group holds several inputs, so it can't sit inside one <label>. -->
+          <div class={cls('formField', 'atlas-field')}>
+            <span class={cls('formFieldLabel', 'atlas-field-label')}>{label(f)}</span>
+            <span class="atlas-choices">
               {#each f.options as o (o)}
-                <option value={o}>{o}</option>
+                <label class="atlas-choice">
+                  <input
+                    type={f.type === 'radio' ? 'radio' : 'checkbox'}
+                    name={f.key}
+                    value={o}
+                    checked={picked(f.key).includes(o)}
+                    on:change={(e) => toggle(f, o, e.currentTarget.checked)}
+                  />
+                  {o}
+                </label>
               {/each}
-            </select>
-          {:else if f.type === 'textarea'}
-            <textarea
-              class={cls('formFieldInput', 'atlas-input')}
-              name={f.key}
-              rows="3"
-              value={values[f.key] ?? ''}
-              required={f.required}
-              placeholder={f.placeholder ?? undefined}
-              on:input={(e) => (values[f.key] = e.currentTarget.value)}
-            />
-          {:else}
-            <input
-              class={cls('formFieldInput', 'atlas-input')}
-              type={inputType(f)}
-              name={f.key}
-              value={values[f.key] ?? ''}
-              required={f.required}
-              placeholder={f.placeholder ?? undefined}
-              on:input={(e) => (values[f.key] = e.currentTarget.value)}
-            />
-          {/if}
-          {#each errors.filter((e) => e.param === f.key) as error (error.code)}
-            <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
-          {/each}
-        </label>
-      {/if}
-    {/each}
-
-    <label class={cls('formField', 'atlas-field')}>
-      <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('signUp.emailLabel')}</span>
-      <input
-        class={cls('formFieldInput', 'atlas-input')}
-        type="email"
-        name="email"
-        autocomplete="email"
-        required
-        value={values.email ?? ''}
-        on:input={(e) => (values.email = e.currentTarget.value)}
-      />
-      {#each errors.filter((e) => e.param === 'email') as error (error.code)}
-        <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+            </span>
+            {#each errors.filter((e) => e.param === f.key) as error (error.code)}
+              <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
+            {/each}
+          </div>
+        {:else}
+          <label class={cls('formField', 'atlas-field')}>
+            <span class={cls('formFieldLabel', 'atlas-field-label')}>{label(f)}</span>
+            {#if f.type === 'checkbox'}
+              <input
+                type="checkbox"
+                name={f.key}
+                checked={values[f.key] === 'true'}
+                on:change={(e) => (values[f.key] = e.currentTarget.checked ? 'true' : '')}
+              />
+            {:else if f.type === 'select'}
+              <select
+                class={cls('formFieldInput', 'atlas-input')}
+                name={f.key}
+                value={values[f.key] ?? ''}
+                required={f.required}
+                on:change={(e) => (values[f.key] = e.currentTarget.value)}
+              >
+                <option value="">{f.placeholder ?? t('signUp.selectPlaceholder')}</option>
+                {#each f.options as o (o)}
+                  <option value={o}>{o}</option>
+                {/each}
+              </select>
+            {:else if f.type === 'textarea'}
+              <textarea
+                class={cls('formFieldInput', 'atlas-input')}
+                name={f.key}
+                rows="3"
+                value={values[f.key] ?? ''}
+                required={f.required}
+                placeholder={f.placeholder ?? undefined}
+                on:input={(e) => (values[f.key] = e.currentTarget.value)}
+              />
+            {:else}
+              <input
+                class={cls('formFieldInput', 'atlas-input')}
+                type={inputType(f)}
+                name={f.key}
+                value={values[f.key] ?? ''}
+                required={f.required}
+                placeholder={f.placeholder ?? undefined}
+                on:input={(e) => (values[f.key] = e.currentTarget.value)}
+              />
+            {/if}
+            {#each errors.filter((e) => e.param === f.key) as error (error.code)}
+              <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
+            {/each}
+          </label>
+        {/if}
       {/each}
-    </label>
 
-    <label class={cls('formField', 'atlas-field')}>
-      <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('signUp.passwordLabel')}</span>
-      <input
-        class={cls('formFieldInput', 'atlas-input')}
-        type="password"
-        name="password"
-        autocomplete="new-password"
-        required
-        value={values.password ?? ''}
-        on:input={(e) => (values.password = e.currentTarget.value)}
-      />
-      {#each errors.filter((e) => e.param === 'password') as error (error.code)}
-        <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
-      {/each}
-    </label>
+      <label class={cls('formField', 'atlas-field')}>
+        <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('signUp.emailLabel')}</span>
+        <input
+          class={cls('formFieldInput', 'atlas-input')}
+          type="email"
+          name="email"
+          autocomplete="email"
+          required
+          value={values.email ?? ''}
+          on:input={(e) => (values.email = e.currentTarget.value)}
+        />
+        {#each errors.filter((e) => e.param === 'email') as error (error.code)}
+          <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
+        {/each}
+      </label>
 
-    {#if showLegal && legal}
-      <label class={cls('formField', 'atlas-consent')}>
-        {#if legal.required}
-          <input type="checkbox" name="consent" bind:checked={agreed} />
-        {/if}
-        <span class="atlas-text">
-          {t(legal.required ? 'signUp.consentAgree' : 'signUp.consentNotice')}
-          {#if legal.termsUrl}
-            <a class="atlas-link" href={legal.termsUrl} target="_blank" rel="noopener noreferrer"
-              >{t('signUp.terms')}</a
-            >{/if}{#if legal.termsUrl && legal.privacyUrl}{' '}{t('signUp.and')}{' '}{/if}{#if legal.privacyUrl}
-            <a class="atlas-link" href={legal.privacyUrl} target="_blank" rel="noopener noreferrer"
-              >{t('signUp.privacy')}</a
-            >{/if}.
-        </span>
-        {#each errors.filter((e) => e.param === 'consent') as error (error.code)}
-          <span class={cls('formFieldError', 'atlas-error')}>{error.message}</span>
+      <label class={cls('formField', 'atlas-field')}>
+        <span class={cls('formFieldLabel', 'atlas-field-label')}>{t('signUp.passwordLabel')}</span>
+        <input
+          class={cls('formFieldInput', 'atlas-input')}
+          type="password"
+          name="password"
+          autocomplete="new-password"
+          required
+          value={values.password ?? ''}
+          on:input={(e) => (values.password = e.currentTarget.value)}
+        />
+        {#each errors.filter((e) => e.param === 'password') as error (error.code)}
+          <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
         {/each}
       </label>
-    {/if}
 
-    {#if captcha}
-      <CaptchaSlot controller={captcha} />
-    {/if}
+      {#if showLegal && legal}
+        <label class={cls('formField', 'atlas-consent')}>
+          {#if legal.required}
+            <input type="checkbox" name="consent" bind:checked={agreed} />
+          {/if}
+          <span class="atlas-text">
+            {t(legal.required ? 'signUp.consentAgree' : 'signUp.consentNotice')}
+            {#if legal.termsUrl}
+              <a class="atlas-link" href={legal.termsUrl} target="_blank" rel="noopener noreferrer"
+                >{t('signUp.terms')}</a
+              >{/if}{#if legal.termsUrl && legal.privacyUrl}{' '}{t('signUp.and')}{' '}{/if}{#if legal.privacyUrl}
+              <a class="atlas-link" href={legal.privacyUrl} target="_blank" rel="noopener noreferrer"
+                >{t('signUp.privacy')}</a
+              >{/if}.
+          </span>
+          {#each errors.filter((e) => e.param === 'consent') as error (error.code)}
+            <span class={cls('formFieldError', 'atlas-error')}>{errorText(error)}</span>
+          {/each}
+        </label>
+      {/if}
+
+      {#if captcha}
+        <CaptchaSlot controller={captcha} />
+      {/if}
 
-    <button
-      class={cls('formButtonPrimary', 'atlas-button')}
-      disabled={busy || !consentOk}
-      type="submit"
-    >
-      {t('signUp.submit')}
-    </button>
-  </form>
+      <button
+        class={cls('formButtonPrimary', 'atlas-button')}
+        disabled={busy || !consentOk}
+        type="submit"
+      >
+        {t('signUp.submit')}
+      </button>
+    </form>
+  {/if}
 </div>

package/dist/components/SignUpForm.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { CaptchaController, FieldError, InstanceSettings } from '@atlasauth/js';
+import { type CaptchaController, type FieldError, type InstanceSettings } from '@atlasauth/js';
 declare const __propDef: {
     props: {
         /**
@@ -7,6 +7,10 @@ declare const __propDef: {
            * fields, email + password, the legal-consent row and — when the instance
            * requires one on sign-up — the captcha widget. Values live in local state so
            * a refused submit never clears them.
+           *
+           * When the app cannot send email (`settings.emailDelivery.passwordSignUp` is
+           * false) an email + password sign-up could never be verified, so the form is
+           * replaced by a "can't send email" notice (`signUp.emailUnavailable`).
            */ settings?: InstanceSettings | null;
         busy?: boolean;
         errors?: FieldError[];

package/dist/context.d.ts

@@ -1,5 +1,5 @@
 import { type Readable } from 'svelte/store';
-import { type ProviderToken, type SignOutOptions } from '@atlasauth/js';
+import { type ProviderToken, type SignOutOptions, type SignOutResult } from '@atlasauth/js';
 import { type Catalog } from './i18n';
 import { type Appearance, type InstanceDesign } from './appearance';
 import type { AtlasOrganizationMembership, AtlasSession, AtlasUser, SessionClaims } from './types';
@@ -62,6 +62,14 @@ export interface AtlasClient extends AtlasStores {
     frontendApi: string;
     appearance?: Appearance;
     catalog: Catalog;
+    /**
+     * The language layer of `catalog` (the `localization` bundle, without the
+     * English defaults underneath; `EN_US` when none is set). Server errors are
+     * looked up here as `error.<reason>`, falling back to the server's message.
+     */
+    errorCatalog?: Catalog;
+    /** Sent to the Frontend API as `Accept-Language`: the `locale` tag of the `localization` bundle. */
+    locale?: string;
     /**
      * §5.3: a sign-in attempt handed back by an OAuth redirect that still needs a
      * second factor (no session was issued). Null in the ordinary case. `<SignIn>`
@@ -78,7 +86,19 @@ export interface AtlasClient extends AtlasStores {
      * exposed; the server refreshes a stale token on read.
      */
     getProviderToken(provider: string): Promise<ProviderToken | null>;
-    signOut(options?: SignOutOptions): Promise<void>;
+    /**
+     * Sign out of the active session: revoke it on the Frontend API (retried
+     * once), run front-channel logout, and drop all in-memory state.
+     *
+     * Resolves `{ revoked, activeSessionId? }`. `revoked: false` means the server
+     * could not confirm the revoke; the user is still signed out locally and this
+     * browser will not re-adopt the session (a reload, a refresh, a sibling tab or
+     * a tab opened later), while the revoke is re-tried in the background. When
+     * the server promotes another session signed in on this browser
+     * (`activeSessionId`), the client adopts it. With `{ strict: true }` a failed
+     * revoke rejects with a `SignOutError` (after the local sign-out).
+     */
+    signOut(options?: SignOutOptions): Promise<SignOutResult>;
     setActiveOrganization(organizationId: string | null): Promise<void>;
     reload(): Promise<void>;
     /**
@@ -92,7 +112,10 @@ export interface AtlasClient extends AtlasStores {
      * when there is none or it cannot be read. `<AtlasProvider>` applies it.
      */
     loadInstanceDesign(): Promise<InstanceDesign | null>;
-    /** Cancel the scheduled refresh — call from a component's `onDestroy`. */
+    /**
+     * Cancel the scheduled refresh, the sibling-tab sign-out watch and any
+     * background revoke re-tries — call from a component's `onDestroy`.
+     */
     destroy(): void;
 }
 /**

package/dist/context.js

@@ -1,6 +1,6 @@
 import { getContext, setContext } from 'svelte';
 import { derived, get, writable } from 'svelte/store';
-import { FapiClient, TokenCache, getProviderToken as fetchProviderToken, msUntilRefresh, readExpiry, readRedirectResult, resolveFrontendApi, stripRedirectParams, runFrontChannelLogoutFromResponse, } from '@atlasauth/js';
+import { FapiClient, SignOutGuard, TokenCache, closeOAuthPopupAfterSignIn, completeOAuthPopupLanding, getProviderToken as fetchProviderToken, mapOAuthPopupPayload, msUntilRefresh, readExpiry, readRedirectResult, resolveFrontendApi, stripRedirectParams, catalogLocale, } from '@atlasauth/js';
 import { EN_US, withFallback } from './i18n';
 import { instanceDesignFrom } from './appearance';
 /** The context key. A `Symbol` so it cannot collide with an app's own context. */
@@ -29,6 +29,8 @@ export function createAtlasClient(options) {
     });
     const doFetch = options.fetchImpl ?? (typeof fetch !== 'undefined' ? fetch : undefined);
     const catalog = options.localization ? withFallback(options.localization) : EN_US;
+    const errorCatalog = options.localization ?? EN_US;
+    const locale = catalogLocale(options.localization);
     const status = writable('loading');
     const user = writable(null);
     const session = writable(null);
@@ -65,7 +67,25 @@ export function createAtlasClient(options) {
             },
         });
     }
+    /**
+     * The sessions this browser signed out of (tombstones, shared by every tab via
+     * localStorage per Frontend API). Nothing here re-adopts one — not a reload, a
+     * refresh, nor a tab opened later — even while the refresh cookie the revoke
+     * did not clear is still valid; the revoke is re-tried in the background.
+     */
+    const guard = new SignOutGuard({ request: call, frontendApi: baseUrl });
+    // Another tab signed out of THIS session (its tombstone reached the shared
+    // store): drop the token and re-check, which refuses the session.
+    const stopWatch = typeof window !== 'undefined'
+        ? guard.watch(() => cache.peek()?.sessionId ?? get(session)?.id, () => {
+            cache.clear();
+            void reload();
+        })
+        : () => undefined;
     function applyToken(jwt, sessionId) {
+        // An in-flight refresh must not resurrect a session this browser signed out of.
+        if (guard.isSignedOut(sessionId))
+            return;
         const expiresAt = readExpiry(jwt);
         if (!expiresAt)
             return;
@@ -99,7 +119,9 @@ export function createAtlasClient(options) {
             if (!response.ok)
                 throw new Error('boot failed');
             const body = (await response.json());
-            if (!body.session || !body.user) {
+            // A session this browser signed out of (the revoke never landed) is
+            // refused: stay signed out; the guard re-tries the revoke in the background.
+            if (!body.session || !body.user || guard.refuse(body.session.id)) {
                 clearSession();
                 return;
             }
@@ -148,25 +170,26 @@ export function createAtlasClient(options) {
         await refresh();
         return cache.get(5_000)?.jwt ?? null;
     }
-    const fapiClient = new FapiClient({ publishableKey, baseUrl, fetchImpl: doFetch });
+    const fapiClient = new FapiClient({ publishableKey, baseUrl, fetchImpl: doFetch, locale });
     function getProviderToken(provider) {
         return fetchProviderToken(fapiClient, provider);
     }
     async function signOut(options) {
-        const current = cache.peek();
-        if (current) {
-            const revoked = await call(`/v1/client/sessions/${current.sessionId}/revoke`, {
-                method: 'POST',
-            }).catch(() => undefined);
-            // OIDC Front-Channel Logout: let the apps signed in through this session
-            // clear theirs in this browser (hidden iframes, capped at 5 s). Best-effort.
-            if (options?.frontchannel !== false)
-                await runFrontChannelLogoutFromResponse(revoked);
-        }
+        // The session to end: from the token cache, else the booted session, else
+        // (no state yet) whatever session the cookies carry — the guard looks it up,
+        // so a missing in-memory token never skips the server-side sign-out. It
+        // tombstones the session first, revokes it (retried once) and runs OIDC
+        // front-channel logout.
+        const attempt = await guard.revoke(cache.peek()?.sessionId ?? get(session)?.id ?? null, options);
         if (timer)
             clearTimeout(timer);
         timer = null;
         clearSession();
+        // The server promoted another session signed in on this browser: adopt it
+        // deliberately (the revoke response already set its cookies).
+        if (guard.promoted(attempt))
+            await reload();
+        return guard.settle(attempt, options);
     }
     async function setActiveOrganization(organizationId) {
         const current = cache.peek();
@@ -194,18 +217,44 @@ export function createAtlasClient(options) {
          * cookies, scrub the URL so a reload can't replay it, THEN boot. A redirect
          * that only carries a `__atlas_status` (a second factor is still owed) has no
          * ticket, so nothing is exchanged and the app boots signed-out.
+         *
+         * §oauth popup mode: this page may also be running INSIDE the sign-in popup.
+         *   - As the landing of a popup whose opener was severed by a
+         *     Cross-Origin-Opener-Policy (`#atlas_popup_result=…`): relay the result
+         *     to the opener over BroadcastChannel and close. If no opener takes it
+         *     (its tab is gone), finish the sign-in here like a redirect.
+         *   - After finishing a sign-in here (the redirect flow ran in the popup):
+         *     tell the waiting opener and close the popup.
          */
-        const result = typeof window !== 'undefined' ? readRedirectResult(window.location.search) : null;
+        const fromUrl = typeof window !== 'undefined' ? readRedirectResult(window.location.search) : null;
+        let result = fromUrl;
+        const landing = typeof window !== 'undefined' ? await completeOAuthPopupLanding().catch(() => null) : null;
+        if (landing && !landing.delivered) {
+            const outcome = mapOAuthPopupPayload(landing.payload);
+            if (outcome?.ticket && outcome.attemptId) {
+                result = { attemptId: outcome.attemptId, ticket: outcome.ticket };
+            }
+            else if (outcome?.continuationUrl) {
+                // A second factor / connect / provider error: the redirect flow's page.
+                window.location.replace(outcome.continuationUrl);
+                return;
+            }
+        }
+        let exchanged = false;
         if (result?.ticket) {
-            await call('/v1/client/tickets/exchange', {
+            const response = await call('/v1/client/tickets/exchange', {
                 method: 'POST',
                 body: JSON.stringify({ attempt_id: result.attemptId, ticket: result.ticket }),
             }).catch(() => undefined);
+            exchanged = !!response?.ok;
         }
-        if (result && typeof window !== 'undefined') {
+        if (fromUrl && typeof window !== 'undefined') {
             window.history.replaceState({}, document.title, stripRedirectParams(window.location.href));
         }
         await reload();
+        // Signed in inside the Atlas popup: hand back to the opener and close.
+        if (exchanged)
+            void closeOAuthPopupAfterSignIn();
     }
     async function loadInstanceDesign() {
         try {
@@ -220,6 +269,8 @@ export function createAtlasClient(options) {
         if (timer)
             clearTimeout(timer);
         timer = null;
+        stopWatch();
+        guard.dispose();
     }
     const isSignedIn = derived(status, ($status) => $status === 'signed_in');
     const isLoaded = derived(status, ($status) => $status !== 'loading');
@@ -228,6 +279,8 @@ export function createAtlasClient(options) {
         frontendApi: baseUrl,
         appearance: options.appearance,
         catalog,
+        errorCatalog,
+        locale,
         pendingAttempt,
         status: { subscribe: status.subscribe },
         user: { subscribe: user.subscribe },

package/dist/i18n.js

@@ -9,6 +9,7 @@
  * A missing key renders the KEY, not an empty string. A blank button is a bug
  * nobody can report; a button reading `signIn.submit` is one anyone can.
  */
+import { EMAIL_UNAVAILABLE_MESSAGE } from '@atlasauth/js';
 export const EN_US = {
     'signIn.title': 'Sign in',
     'signIn.subtitle': 'to continue to {application}',
@@ -21,6 +22,8 @@ export const EN_US = {
     'signIn.orDivider': 'or',
     'signIn.socialButton': 'Continue with {provider}',
     'signIn.emailCodeLabel': 'Verification code',
+    'signIn.emailCodeOption': 'Email me a code',
+    'signIn.emailLinkOption': 'Email me a sign-in link',
     'signIn.magicLinkSent': 'Check your email for a sign-in link.',
     'signIn.checkOtherTab': 'You can close this tab — you are signed in where you started.',
     'signUp.title': 'Create your account',
@@ -36,6 +39,8 @@ export const EN_US = {
     'signUp.terms': 'Terms of Service',
     'signUp.privacy': 'Privacy Policy',
     'signUp.and': 'and',
+    // Shown instead of the email + password form when the app cannot send email.
+    'signUp.emailUnavailable': EMAIL_UNAVAILABLE_MESSAGE,
     'captcha.prompt': 'Complete the security check to continue.',
     'captcha.required': 'Please complete the security check, then try again.',
     'captcha.failed': "The security check didn't pass. Please try again.",
@@ -71,6 +76,46 @@ export const EN_US = {
     'organization.roleLabel': 'Role',
     'error.generic': 'Something went wrong. Please try again.',
     'error.network': 'We could not reach the server. Check your connection.',
+    // Server errors, by the stable `reason` the Frontend API sends. Shown instead
+    // of the server's `message` (see `localizedErrorMessage` in @atlasauth/js).
+    'error.form_password_incorrect': 'Those credentials are incorrect.',
+    'error.form_code_incorrect': 'That code is incorrect.',
+    'error.form_code_already_used': 'That code has already been used. Wait for a new one.',
+    'error.form_code_expired': 'That code has expired. Request a new one.',
+    'error.form_code_max_attempts': 'Too many incorrect codes. Request a new code.',
+    'error.form_link_invalid': 'That sign-in link is invalid or has already been used.',
+    'error.form_identifier_not_found': "We couldn't find an account with those details.",
+    'error.form_identifier_exists': "There's already an account for this email. Sign in with {methods}.",
+    'error.form_password_pwned': 'This password has appeared in a known data breach. Please choose a different one.',
+    'error.form_password_too_short': 'Password must be at least {min_length} characters.',
+    'error.form_password_too_long': 'Password must be at most {max_length} characters.',
+    'error.form_password_requires_uppercase': 'Password must contain an uppercase letter.',
+    'error.form_password_requires_lowercase': 'Password must contain a lowercase letter.',
+    'error.form_password_requires_number': 'Password must contain a number.',
+    'error.form_password_requires_symbol': 'Password must contain a symbol.',
+    'error.form_password_not_allowed': 'That password is not allowed. Choose a different one.',
+    'error.form_password_contains_identifier': 'Password must not contain your email or username.',
+    'error.form_password_same_as_current': 'Your new password must be different from your current one.',
+    'error.form_password_reused': 'Your new password must not match any of your last {history_count} passwords.',
+    'error.password_expired': 'Your password has expired. Reset it to continue.',
+    'error.email_not_verified': 'Your email address is not verified yet. Verify it before signing in with your password.',
+    'error.sign_in_token_invalid': 'That sign-in token is invalid or has expired.',
+    'error.too_many_attempts': 'Too many failed attempts. Try again later.',
+    'error.too_many_requests': 'Too many requests. Please try again later.',
+    'error.captcha_required': 'Please complete the security check, then try again.',
+    'error.captcha_failed': "The security check didn't pass. Please try again.",
+    'error.captcha_unavailable': 'The security check is unavailable right now. Please try again later.',
+    'error.email_delivery_unavailable': "This app can't send email right now. Try another sign-in method or contact the app owner.",
+    'error.strategy_disabled': 'This sign-in method is not available for this app.',
+    'error.sign_up_restricted': 'Sign-up on this app is by invitation only.',
+    'error.waitlisted': "You're on the waitlist. We'll email you when a place opens up.",
+    'error.identifier_not_allowed': 'This email or phone number is not allowed on this app.',
+    'error.disposable_email_blocked': 'Sign-up with a disposable or temporary email address is not allowed.',
+    'error.sso_required': 'This organization requires signing in through single sign-on.',
+    'error.sign_ins_disabled': 'Sign-ins are temporarily disabled.',
+    'error.sign_ups_disabled': 'Sign-ups are temporarily disabled.',
+    'error.high_risk_blocked': 'This sign-in was blocked because it looked unusual.',
+    'error.sms_region_blocked': 'Text messages are not available for this phone number.',
 };
 /**
  * Look up a key and interpolate `{placeholders}`.

package/dist/index.d.ts

@@ -29,4 +29,6 @@ export { default as UserButton } from './components/UserButton.svelte';
 export { default as UserProfile } from './components/UserProfile.svelte';
 export { default as OrganizationSwitcher } from './components/OrganizationSwitcher.svelte';
 export { default as OrganizationProfile } from './components/OrganizationProfile.svelte';
-export type { InstanceSettings, PublicSignUpField, CaptchaController, CaptchaFlowKey, CaptchaWidgetMode, FlowCaptcha, } from '@atlasauth/js';
+export type { InstanceSettings, EmailDelivery, PublicSignUpField, CaptchaController, CaptchaFlowKey, CaptchaWidgetMode, FlowCaptcha, } from '@atlasauth/js';
+export { SignOutError } from '@atlasauth/js';
+export type { SignOutOptions, SignOutResult } from '@atlasauth/js';

package/dist/index.js

@@ -33,3 +33,5 @@ export { default as UserButton } from './components/UserButton.svelte';
 export { default as UserProfile } from './components/UserProfile.svelte';
 export { default as OrganizationSwitcher } from './components/OrganizationSwitcher.svelte';
 export { default as OrganizationProfile } from './components/OrganizationProfile.svelte';
+// What `signOut()` resolves with, and what it rejects with under `{ strict: true }`.
+export { SignOutError } from '@atlasauth/js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlasauth/svelte",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "type": "module",
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -22,10 +22,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@atlasauth/js": "0.6.0",
-    "@atlasauth/backend": "0.7.0",
-    "@atlasauth/design": "0.1.0",
-    "@atlasauth/authz": "0.1.1"
+    "@atlasauth/design": "0.2.0",
+    "@atlasauth/js": "0.9.0",
+    "@atlasauth/authz": "0.1.1",
+    "@atlasauth/backend": "0.7.2"
   },
   "peerDependencies": {
     "svelte": ">=4",