@atlasauth/angular 0.3.0 → 0.5.0

package/dist/fesm2022/atlasauth-angular.mjs

@@ -4,8 +4,8 @@ import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, combineLatest, firstValueFrom } from 'rxjs';
 import { map, distinctUntilChanged, filter, take } from 'rxjs/operators';
-import { TokenCache, resolveFrontendApi, FapiClient, getProviderToken, runFrontChannelLogoutFromResponse, readRedirectResult, stripRedirectParams, readExpiry, msUntilRefresh, nextStep, createCaptchaController, flowFromPending, initialFlow, fetchInstanceSettings, signInCaptchaOptions, flowNeedsCaptcha, advanceWithCaptcha, createSignUp, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
-export { FapiClient, advance, flowFromPending, getProviderToken, initialFlow, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
+import { TokenCache, resolveFrontendApi, catalogLocale, FapiClient, SignOutGuard, localizedErrorMessage, getProviderToken, readRedirectResult, completeOAuthPopupLanding, mapOAuthPopupPayload, stripRedirectParams, closeOAuthPopupAfterSignIn, readExpiry, msUntilRefresh, nextStep, createCaptchaController, flowFromPending, initialFlow, fetchInstanceSettings, offeredFirstFactors, prepareFactor, signInCaptchaOptions, flowNeedsCaptcha, advanceWithCaptcha, createSignUp, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
+export { FapiClient, SignOutError, advance, flowFromPending, getProviderToken, initialFlow, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
 import { evaluate } from '@atlasauth/authz';
 export { evaluate, hasFromClaims } from '@atlasauth/authz';
 import { renderDesignAppearance, instanceDesignFrom, applyAppearanceToDom } from '@atlasauth/design/runtime';
@@ -167,6 +167,7 @@ const EN_US = {
     'signIn.orDivider': 'or',
     'signIn.socialButton': 'Continue with {provider}',
     'signIn.emailCodeLabel': 'Verification code',
+    'signIn.useEmailCode': 'Email me a code',
     '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',
@@ -182,6 +183,8 @@ const EN_US = {
     'signUp.terms': 'Terms of Service',
     'signUp.privacy': 'Privacy Policy',
     'signUp.and': 'and',
+    // = EMAIL_UNAVAILABLE_MESSAGE from @atlasauth/js.
+    'signUp.emailUnavailable': "This app can't send email right now. Try another sign-in method or contact the app owner.",
     '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.",
@@ -217,6 +220,46 @@ 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}`.
@@ -262,7 +305,19 @@ class AtlasService {
     cache = new TokenCache();
     fapiClient;
     refreshTimer = null;
+    /**
+     * The sessions this browser signed out of (tombstones in localStorage, per
+     * Frontend API origin), the revoke and its background re-tries. Every reload /
+     * refresh asks it before adopting a session, so a sign-out the server never
+     * confirmed is not undone by the still-valid refresh cookie.
+     */
+    guard;
+    stopWatchingSignOut = null;
     catalog;
+    /** The language layer of `catalog` (the `localization` bundle alone; `EN_US` when none). */
+    errorCatalog;
+    /** Sent to the Frontend API as `Accept-Language`: the `localization` bundle's `locale` tag. */
+    requestLocale;
     /**
      * 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; the `<atlas-sign-in>`
@@ -318,10 +373,17 @@ class AtlasService {
         });
         this.doFetch = options.fetchImpl ?? ((...args) => fetch(...args));
         this.catalog = options.localization ? withFallback(options.localization) : EN_US;
+        this.errorCatalog = options.localization ?? EN_US;
+        this.requestLocale = catalogLocale(options.localization);
         this.fapiClient = new FapiClient({
             publishableKey: this.publishableKey,
             baseUrl: this.baseUrl,
             fetchImpl: this.doFetch,
+            locale: this.requestLocale,
+        });
+        this.guard = new SignOutGuard({
+            request: (path, init) => this.call(path, init),
+            frontendApi: this.baseUrl,
         });
         // Captured synchronously (not in an async init) so it is available before any
         // flow component reads it: a needs_second_factor redirect carries a status but
@@ -330,10 +392,19 @@ class AtlasService {
         // Boot once, browser only. On the server there is no cookie jar to read a
         // session from, so we leave the state at `loading` and let hydration boot it.
         if (this.isBrowser) {
+            // Another tab signed out of THIS session (its tombstone reached the shared
+            // store): drop the token and re-check, which then refuses the session.
+            this.stopWatchingSignOut = this.guard.watch(() => this.cache.peek()?.sessionId ?? this._session.value?.id, () => {
+                this.cache.clear();
+                void this.reload();
+            });
             void this.boot();
         }
     }
     ngOnDestroy() {
+        this.stopWatchingSignOut?.();
+        this.stopWatchingSignOut = null;
+        this.guard.dispose();
         this.clearRefreshTimer();
         this._status.complete();
         this._user.complete();
@@ -351,6 +422,22 @@ class AtlasService {
     get frontendApi() {
         return this.baseUrl;
     }
+    /** The `Accept-Language` sent to the Frontend API: the `localization` bundle's `locale` tag, if any. */
+    get locale() {
+        return this.requestLocale;
+    }
+    /**
+     * The text to show for a server error, in the app's language: the catalog's
+     * `error.<reason>` (looked up in the `localization` bundle, or `EN_US` when
+     * none is set), else the server's message, else `error.generic`.
+     */
+    errorText(error) {
+        return localizedErrorMessage(error, this.errorCatalog, this.catalog);
+    }
+    /** The catalog server errors are looked up in (see {@link errorText}). */
+    get errorLocalization() {
+        return this.errorCatalog;
+    }
     /** Tokens as CSS custom properties, for a host element to inherit. */
     appearanceVariables() {
         return cssVariables(resolveTokens(this.options.appearance));
@@ -384,7 +471,11 @@ class AtlasService {
     }
     /** A fresh {@link FapiClient} for driving a sign-in/sign-up flow. */
     createFapiClient() {
-        return new FapiClient({ publishableKey: this.publishableKey, baseUrl: this.baseUrl });
+        return new FapiClient({
+            publishableKey: this.publishableKey,
+            baseUrl: this.baseUrl,
+            locale: this.requestLocale,
+        });
     }
     // --- Imperative API (mirrors the React hooks' actions) ----------------------
     /**
@@ -412,25 +503,27 @@ class AtlasService {
     has(condition) {
         return evaluate(this._claims.value, condition).allowed;
     }
-    /** Revoke the current session server-side and drop all local auth state. */
-    async signOut(options) {
-        const current = this.cache.peek();
-        if (current) {
-            const revoked = await this.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);
-        }
-        this.clearRefreshTimer();
-        this.cache.clear();
-        this._status.next('signed_out');
-        this._user.next(null);
-        this._session.next(null);
-        this._claims.next(null);
-        this._memberships.next([]);
+    /**
+     * Revoke the current session server-side and drop all local auth state.
+     *
+     * The session id is remembered before the revoke (a tombstone shared by every
+     * tab), so a reload, a token refresh, a sibling tab or a tab opened later never
+     * re-adopts it — even when the revoke failed (it is retried once, then again in
+     * the background) and the refresh cookie is still valid. Resolves
+     * `{ revoked, activeSessionId? }`; with `{ strict: true }` an unconfirmed revoke
+     * rejects with a `SignOutError` instead (after the local sign-out). A parked
+     * session the server promoted on revoke is adopted. Front-channel logout runs
+     * unless `{ frontchannel: false }`.
+     */
+    async signOut(options = {}) {
+        // With no cached token the guard finds the cookie session itself
+        // (GET /v1/client), so a missing JWT never skips the revoke.
+        const sessionId = this.cache.peek()?.sessionId ?? this._session.value?.id ?? null;
+        const attempt = await this.guard.revoke(sessionId, options);
+        this.clearLocalState();
+        if (this.guard.promoted(attempt))
+            await this.reload();
+        return this.guard.settle(attempt, options);
     }
     /**
      * Switch the active organization (or `null` for the personal account). The
@@ -458,14 +551,10 @@ class AtlasService {
             if (!response.ok)
                 throw new Error('boot failed');
             const body = (await response.json());
-            if (!body.session || !body.user) {
-                this.clearRefreshTimer();
-                this.cache.clear();
-                this._status.next('signed_out');
-                this._user.next(null);
-                this._session.next(null);
-                this._claims.next(null);
-                this._memberships.next([]);
+            // A session this browser signed out of is never re-adopted from the
+            // refresh cookie; the guard re-tries its revoke in the background.
+            if (!body.session || !body.user || this.guard.refuse(body.session.id)) {
+                this.clearLocalState();
                 return;
             }
             this._user.next(body.user);
@@ -493,17 +582,41 @@ class AtlasService {
      * has no ticket, so nothing is exchanged and the app boots signed-out.
      */
     async boot() {
-        const result = readRedirectResult(window.location.search);
+        const fromUrl = readRedirectResult(window.location.search);
+        let result = fromUrl;
+        // §oauth popup mode: this page may be the landing of a sign-in popup whose
+        // opener a Cross-Origin-Opener-Policy severed (`#atlas_popup_result=…`).
+        // The result is relayed to the opener, which redeems the ticket, and this
+        // window closes. If no opener takes it (its tab is gone), finish here like
+        // a redirect.
+        const landing = await completeOAuthPopupLanding().catch(() => 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 step / provider error: the redirect flow's page.
+                window.location.replace(outcome.continuationUrl);
+                return;
+            }
+        }
+        let exchanged = false;
         if (result?.ticket) {
-            await this.call('/v1/client/tickets/exchange', {
+            const response = await this.call('/v1/client/tickets/exchange', {
                 method: 'POST',
                 body: JSON.stringify({ attempt_id: result.attemptId, ticket: result.ticket }),
             }).catch(() => undefined);
+            exchanged = !!response?.ok;
         }
-        if (result) {
+        if (fromUrl) {
             window.history.replaceState({}, document.title, stripRedirectParams(window.location.href));
         }
         await this.reload();
+        // Signed in inside the Atlas popup (the redirect flow ran in it): hand back
+        // to the waiting opener and close. A no-op in an ordinary tab.
+        if (exchanged)
+            void closeOAuthPopupAfterSignIn();
     }
     readPendingAttempt() {
         const result = readRedirectResult(window.location.search);
@@ -525,6 +638,9 @@ class AtlasService {
         });
     }
     applyToken(jwt, sessionId) {
+        // An in-flight refresh must not resurrect a session signed out meanwhile.
+        if (this.guard.isSignedOut(sessionId))
+            return;
         const expiresAt = readExpiry(jwt);
         if (!expiresAt)
             return;
@@ -550,6 +666,15 @@ class AtlasService {
             await this.reload();
         }
     }
+    clearLocalState() {
+        this.clearRefreshTimer();
+        this.cache.clear();
+        this._status.next('signed_out');
+        this._user.next(null);
+        this._session.next(null);
+        this._claims.next(null);
+        this._memberships.next([]);
+    }
     /** §7.4: proactive, jittered refresh scheduled from the token's own expiry. */
     scheduleRefresh() {
         this.clearRefreshTimer();
@@ -901,12 +1026,28 @@ class AttemptFlowComponent {
      * with `needs_captcha`. Null when the flow draws none.
      */
     captcha = null;
+    /**
+     * The first factors to offer on the `needs_first_factor` step — pass
+     * `AtlasFlowController.firstFactors()`, which drops email code / link while the
+     * app cannot deliver email. Null uses the server's list as-is.
+     */
+    firstFactors = null;
+    /** The first factor already sent (`AtlasFlowController.preparedFactor()`): its code is collected. */
+    preparedFactor = null;
     /** Emits the collected field values when the form is submitted. */
     submitFlow = new EventEmitter();
+    /** Emits when the user picks a first factor the server must send first (an emailed code). */
+    chooseFactor = new EventEmitter();
     values = {};
     t(key, vars) {
         return translate(this.atlas.localization, key, vars);
     }
+    /** A server error in the app's language (`error.<reason>`, else the server's message). */
+    errorText(error) {
+        // `errorLocalization` is read defensively: a stand-in service may lack it.
+        const layer = this.atlas.errorLocalization;
+        return localizedErrorMessage(error, layer ?? this.atlas.localization, this.atlas.localization);
+    }
     cls(key, base) {
         return classFor(key, this.atlas.appearance, base);
     }
@@ -930,8 +1071,22 @@ class AttemptFlowComponent {
         const kind = this.step().kind;
         return !!this.captcha && (kind === 'collect_identifier' || kind === 'collect_captcha');
     }
+    /** The first factors on offer at a `needs_first_factor` step (empty on any other). */
+    offered() {
+        const step = this.step();
+        if (step.kind !== 'collect_first_factor')
+            return [];
+        return this.firstFactors ?? step.strategies;
+    }
+    showEmailCodeOption() {
+        return this.preparedFactor !== 'email_code' && this.offered().includes('email_code');
+    }
     showSubmit() {
         const kind = this.step().kind;
+        // Nothing to submit on a first-factor step that only offers an emailed code
+        // until that code is sent.
+        if (kind === 'collect_first_factor')
+            return this.fields().length > 0;
         return kind !== 'done' && kind !== 'await_oauth';
     }
     fields() {
@@ -939,8 +1094,17 @@ class AttemptFlowComponent {
         switch (step.kind) {
             case 'collect_identifier':
                 return [{ kind: 'input', name: 'identifier', labelKey: 'signIn.identifierLabel', type: 'email' }];
-            case 'collect_first_factor':
-                return [{ kind: 'input', name: 'password', labelKey: 'signIn.passwordLabel', type: 'password' }];
+            case 'collect_first_factor': {
+                if (this.preparedFactor === 'email_code') {
+                    return [{ kind: 'input', name: 'code', labelKey: 'signIn.emailCodeLabel', type: 'text' }];
+                }
+                // The password field unless the only offer is an emailed code (chosen
+                // with the button below the form).
+                const offered = this.offered();
+                return offered.includes('email_code') && !offered.includes('password')
+                    ? []
+                    : [{ kind: 'input', name: 'password', labelKey: 'signIn.passwordLabel', type: 'password' }];
+            }
             case 'collect_second_factor':
                 return [{ kind: 'input', name: 'code', labelKey: 'mfa.codeLabel', type: 'text' }];
             case 'enroll_second_factor':
@@ -971,12 +1135,12 @@ class AttemptFlowComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttemptFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AttemptFlowComponent, isStandalone: true, selector: "atlas-attempt-flow", inputs: { attempt: "attempt", busy: "busy", errors: "errors", titleKey: "titleKey", captcha: "captcha" }, outputs: { submitFlow: "submitFlow" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AttemptFlowComponent, isStandalone: true, selector: "atlas-attempt-flow", inputs: { attempt: "attempt", busy: "busy", errors: "errors", titleKey: "titleKey", captcha: "captcha", firstFactors: "firstFactors", preparedFactor: "preparedFactor" }, outputs: { submitFlow: "submitFlow", chooseFactor: "chooseFactor" }, ngImport: i0, template: `
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
 
       @for (error of formErrors(); track error.code) {
-        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ errorText(error) }}</p>
       }
 
       <form (submit)="onSubmit($event)">
@@ -992,7 +1156,7 @@ class AttemptFlowComponent {
                 (input)="setValue(f.name, $any($event.target).value)"
               />
               @for (error of fieldErrorsFor(f.name); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
           } @else {
@@ -1009,6 +1173,17 @@ class AttemptFlowComponent {
             {{ t('signIn.submit') }}
           </button>
         }
+
+        @if (showEmailCodeOption()) {
+          <button
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            [disabled]="busy"
+            type="button"
+            (click)="chooseFactor.emit('email_code')"
+          >
+            {{ t('signIn.useEmailCode') }}
+          </button>
+        }
       </form>
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: AtlasCaptchaSlotDirective, selector: "[atlasCaptchaSlot]", inputs: ["atlasCaptchaSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1025,7 +1200,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
 
       @for (error of formErrors(); track error.code) {
-        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ errorText(error) }}</p>
       }
 
       <form (submit)="onSubmit($event)">
@@ -1041,7 +1216,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 (input)="setValue(f.name, $any($event.target).value)"
               />
               @for (error of fieldErrorsFor(f.name); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
           } @else {
@@ -1058,6 +1233,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             {{ t('signIn.submit') }}
           </button>
         }
+
+        @if (showEmailCodeOption()) {
+          <button
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            [disabled]="busy"
+            type="button"
+            (click)="chooseFactor.emit('email_code')"
+          >
+            {{ t('signIn.useEmailCode') }}
+          </button>
+        }
       </form>
     </div>
   `,
@@ -1072,8 +1258,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], captcha: [{
                 type: Input
+            }], firstFactors: [{
+                type: Input
+            }], preparedFactor: [{
+                type: Input
             }], submitFlow: [{
                 type: Output
+            }], chooseFactor: [{
+                type: Output
             }] } });
 /** A read-only message row: `labelKey` holds the i18n key of the text to show. */
 function msg(labelKey) {
@@ -1113,6 +1305,12 @@ class AtlasFlowController {
     captchaDrawn = signal(false);
     /** Whether {@link signUpCaptcha} currently draws a widget (for templates). */
     signUpCaptchaDrawn = signal(false);
+    /**
+     * The first factor the server was asked to send ({@link prepare}) on the
+     * current `needs_first_factor` step — the form then collects its code. Null
+     * otherwise.
+     */
+    preparedFactor = signal(null);
     pollTimer = null;
     identifier = '';
     constructor(client, reload, pending, 
@@ -1134,6 +1332,44 @@ class AtlasFlowController {
             this.syncCaptcha();
         }
     }
+    /**
+     * The first factors to offer on a `needs_first_factor` step: the server's list
+     * without email code / link while the app cannot deliver email
+     * (`settings.emailDelivery.available === false`). Empty on any other step.
+     */
+    firstFactors() {
+        const attempt = this.state().attempt;
+        const step = attempt ? nextStep(attempt) : null;
+        return step?.kind === 'collect_first_factor'
+            ? offeredFirstFactors(step.strategies, this.settings()?.emailDelivery)
+            : [];
+    }
+    /**
+     * True when email + password sign-up cannot complete because the app cannot
+     * send the verification email (`settings.emailDelivery.passwordSignUp === false`):
+     * `<atlas-sign-up>` shows the "can't send email" notice instead of the form.
+     */
+    signUpEmailUnavailable() {
+        return this.settings()?.emailDelivery.passwordSignUp === false;
+    }
+    /** False when a password reset email cannot be delivered — hide "Forgot password?". */
+    passwordResetAvailable() {
+        return this.settings()?.emailDelivery.passwordReset !== false;
+    }
+    /**
+     * Ask the server to email a sign-in code for the current `needs_first_factor`
+     * step (`POST …/prepare_first_factor`); the form then collects the code, which
+     * {@link submit} posts as the `email_code` strategy.
+     */
+    async prepare(strategy) {
+        if (!this.firstFactors().includes(strategy))
+            return;
+        this.state.update((current) => ({ ...current, busy: true, errors: [] }));
+        const next = await prepareFactor(this.client, this.state(), strategy);
+        this.setState(next);
+        if (!next.errors.length)
+            this.preparedFactor.set(strategy);
+    }
     /** Keep both captchas in step with the settings and the flow's current step. */
     syncCaptcha() {
         const settings = this.settings();
@@ -1149,6 +1385,9 @@ class AtlasFlowController {
     }
     setState(next) {
         this.state.set(next);
+        // A prepared factor belongs to the first-factor step it was sent for.
+        if (next.attempt?.status !== 'needs_first_factor')
+            this.preparedFactor.set(null);
         this.syncCaptcha();
     }
     /**
@@ -1261,8 +1500,9 @@ class SignInComponent {
     ngOnInit() {
         // If seeded from a pending attempt that is already pollable, start polling.
         this.flow.syncPolling();
-        // §5 the instance's captcha settings: switching captcha on in the dashboard
-        // draws it here with no code change.
+        // §5 the instance's captcha settings (switching captcha on in the dashboard
+        // draws it here with no code change) and email delivery (no emailed-code
+        // option while the app cannot send email).
         if (typeof window !== 'undefined')
             void this.flow.loadSettings();
     }
@@ -1277,9 +1517,12 @@ class SignInComponent {
       [errors]="flow.state().errors"
       titleKey="signIn.title"
       [captcha]="flow.captchaDrawn() ? flow.captcha : null"
+      [firstFactors]="flow.firstFactors()"
+      [preparedFactor]="flow.preparedFactor()"
       (submitFlow)="flow.submit($event)"
+      (chooseFactor)="flow.prepare($event)"
     ></atlas-attempt-flow>
-  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha"], outputs: ["submitFlow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha", "firstFactors", "preparedFactor"], outputs: ["submitFlow", "chooseFactor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
@@ -1295,7 +1538,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       [errors]="flow.state().errors"
       titleKey="signIn.title"
       [captcha]="flow.captchaDrawn() ? flow.captcha : null"
+      [firstFactors]="flow.firstFactors()"
+      [preparedFactor]="flow.preparedFactor()"
       (submitFlow)="flow.submit($event)"
+      (chooseFactor)="flow.prepare($event)"
     ></atlas-attempt-flow>
   `,
                 }]
@@ -1307,7 +1553,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * The create-account step of `<atlas-sign-up>`: the instance's configured extra
  * fields, email + password, the legal-consent row and — when the instance
  * requires one on sign-up — the captcha widget. Values live on the component so
- * a refused submit never clears them.
+ * a refused submit never clears them. When the app cannot send the verification
+ * email (`settings.emailDelivery.passwordSignUp === false`) it shows the
+ * `signUp.emailUnavailable` notice instead of the form.
  */
 class SignUpFormComponent {
     atlas = inject(AtlasService);
@@ -1322,12 +1570,22 @@ class SignUpFormComponent {
     t(key, vars) {
         return translate(this.atlas.localization, key, vars);
     }
+    /** A server error in the app's language (`error.<reason>`, else the server's message). */
+    errorText(error) {
+        // `errorLocalization` is read defensively: a stand-in service may lack it.
+        const layer = this.atlas.errorLocalization;
+        return localizedErrorMessage(error, layer ?? this.atlas.localization, this.atlas.localization);
+    }
     cls(key, base) {
         return classFor(key, this.atlas.appearance, base);
     }
     setValue(name, value) {
         this.values = { ...this.values, [name]: value };
     }
+    /** Email + password sign-up cannot complete: the app cannot send the verification email. */
+    emailUnavailable() {
+        return this.settings?.emailDelivery?.passwordSignUp === false;
+    }
     fields() {
         return this.settings?.signUpFields ?? [];
     }
@@ -1366,7 +1624,7 @@ class SignUpFormComponent {
     }
     onSubmit(event) {
         event.preventDefault();
-        if (!this.consentOk())
+        if (this.emailUnavailable() || !this.consentOk())
             return;
         this.submitSignUp.emit({
             values: { ...this.values },
@@ -1378,8 +1636,15 @@ class SignUpFormComponent {
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('signUp.title') }}</h1>
 
+      @if (emailUnavailable()) {
+        <!-- The app cannot send the verification email, so an email + password
+             sign-up could never complete: say so instead of offering the form. -->
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert" data-atlas-email-unavailable="">
+          {{ t('signUp.emailUnavailable') }}
+        </p>
+      } @else {
       @for (error of formErrors(); track error.code) {
-        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ errorText(error) }}</p>
       }
 
       <form (submit)="onSubmit($event)">
@@ -1402,7 +1667,7 @@ class SignUpFormComponent {
                 }
               </span>
               @for (error of fieldErrorsFor(f.key); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </div>
           } @else {
@@ -1450,7 +1715,7 @@ class SignUpFormComponent {
                 />
               }
               @for (error of fieldErrorsFor(f.key); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
           }
@@ -1468,7 +1733,7 @@ class SignUpFormComponent {
             (input)="setValue('email', $any($event.target).value)"
           />
           @for (error of fieldErrorsFor('email'); track error.code) {
-            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
 
@@ -1484,7 +1749,7 @@ class SignUpFormComponent {
             (input)="setValue('password', $any($event.target).value)"
           />
           @for (error of fieldErrorsFor('password'); track error.code) {
-            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
 
@@ -1511,7 +1776,7 @@ class SignUpFormComponent {
               }.
             </span>
             @for (error of fieldErrorsFor('consent'); track error.code) {
-              <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
             }
           </label>
         }
@@ -1528,6 +1793,7 @@ class SignUpFormComponent {
           {{ t('signUp.submit') }}
         </button>
       </form>
+      }
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: AtlasCaptchaSlotDirective, selector: "[atlasCaptchaSlot]", inputs: ["atlasCaptchaSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1542,8 +1808,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('signUp.title') }}</h1>
 
+      @if (emailUnavailable()) {
+        <!-- The app cannot send the verification email, so an email + password
+             sign-up could never complete: say so instead of offering the form. -->
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert" data-atlas-email-unavailable="">
+          {{ t('signUp.emailUnavailable') }}
+        </p>
+      } @else {
       @for (error of formErrors(); track error.code) {
-        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ errorText(error) }}</p>
       }
 
       <form (submit)="onSubmit($event)">
@@ -1566,7 +1839,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }
               </span>
               @for (error of fieldErrorsFor(f.key); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </div>
           } @else {
@@ -1614,7 +1887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 />
               }
               @for (error of fieldErrorsFor(f.key); track error.code) {
-                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
           }
@@ -1632,7 +1905,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             (input)="setValue('email', $any($event.target).value)"
           />
           @for (error of fieldErrorsFor('email'); track error.code) {
-            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
 
@@ -1648,7 +1921,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             (input)="setValue('password', $any($event.target).value)"
           />
           @for (error of fieldErrorsFor('password'); track error.code) {
-            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
 
@@ -1675,7 +1948,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
               }.
             </span>
             @for (error of fieldErrorsFor('consent'); track error.code) {
-              <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
             }
           </label>
         }
@@ -1692,6 +1965,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           {{ t('signUp.submit') }}
         </button>
       </form>
+      }
     </div>
   `,
                 }]
@@ -1751,7 +2025,7 @@ class SignUpComponent {
         (submitSignUp)="flow.create($event.values, $event.consent)"
       ></atlas-sign-up-form>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha"], outputs: ["submitFlow"] }, { kind: "component", type: SignUpFormComponent, selector: "atlas-sign-up-form", inputs: ["settings", "busy", "errors", "captcha"], outputs: ["submitSignUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha", "firstFactors", "preparedFactor"], outputs: ["submitFlow", "chooseFactor"] }, { kind: "component", type: SignUpFormComponent, selector: "atlas-sign-up-form", inputs: ["settings", "busy", "errors", "captcha"], outputs: ["submitSignUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpComponent, decorators: [{
             type: Component,