@atlasauth/angular 0.2.1 → 0.4.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, FapiClient, getProviderToken, runFrontChannelLogoutFromResponse, readRedirectResult, stripRedirectParams, readExpiry, msUntilRefresh, nextStep, flowFromPending, initialFlow, advance, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
-export { FapiClient, advance, flowFromPending, getProviderToken, initialFlow, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
+import { TokenCache, resolveFrontendApi, FapiClient, SignOutGuard, 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,12 +167,27 @@ 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',
     'signUp.submit': 'Continue',
     'signUp.haveAccount': 'Already have an account?',
     'signUp.signInLink': 'Sign in',
+    'signUp.emailLabel': 'Email address',
+    'signUp.passwordLabel': 'Password',
+    'signUp.optionalField': '{label} (optional)',
+    'signUp.selectPlaceholder': 'Select…',
+    'signUp.consentAgree': 'I agree to the',
+    'signUp.consentNotice': 'By continuing you agree to the',
+    '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.",
     'mfa.title': 'Two-step verification',
     'mfa.subtitle': 'Enter the code from your authenticator app.',
     'mfa.codeLabel': 'Code',
@@ -250,6 +265,14 @@ 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;
     /**
      * A sign-in attempt handed back by an OAuth redirect that still needs a second
@@ -299,7 +322,11 @@ class AtlasService {
     constructor() {
         const options = this.options;
         this.publishableKey = options.publishableKey;
-        this.baseUrl = options.frontendApi ?? '';
+        // Throws an `AtlasConfigError` on a missing/invalid value rather than quietly
+        // sending every request to a relative path on the app's origin.
+        this.baseUrl = resolveFrontendApi(options.frontendApi, {
+            component: 'provideAtlas() / AtlasModule.forRoot()',
+        });
         this.doFetch = options.fetchImpl ?? ((...args) => fetch(...args));
         this.catalog = options.localization ? withFallback(options.localization) : EN_US;
         this.fapiClient = new FapiClient({
@@ -307,6 +334,10 @@ class AtlasService {
             baseUrl: this.baseUrl,
             fetchImpl: this.doFetch,
         });
+        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
         // no ticket, and that is what the 2FA resume seeds from.
@@ -314,10 +345,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();
@@ -396,25 +436,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
@@ -442,14 +484,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);
@@ -477,17 +515,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);
@@ -509,6 +571,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;
@@ -534,6 +599,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();
@@ -823,6 +897,46 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+/**
+ * `[atlasCaptchaSlot]="controller"` — the element a flow's captcha widget draws
+ * into (see `createCaptchaController` in `@atlasauth/js`). Attaches the
+ * controller to the host element while it is rendered and detaches it (removing
+ * the widget) when it goes away.
+ */
+class AtlasCaptchaSlotDirective {
+    host = inject(ElementRef);
+    current = null;
+    initialized = false;
+    set controller(next) {
+        if (next === this.current)
+            return;
+        if (this.initialized)
+            this.current?.attach(null);
+        this.current = next;
+        if (this.initialized)
+            this.current?.attach(this.host.nativeElement);
+    }
+    ngOnInit() {
+        this.initialized = true;
+        this.current?.attach(this.host.nativeElement);
+    }
+    ngOnDestroy() {
+        this.current?.attach(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasCaptchaSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.12", type: AtlasCaptchaSlotDirective, isStandalone: true, selector: "[atlasCaptchaSlot]", inputs: { controller: ["atlasCaptchaSlot", "controller"] }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasCaptchaSlotDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[atlasCaptchaSlot]',
+                    standalone: true,
+                }]
+        }], propDecorators: { controller: [{
+                type: Input,
+                args: ['atlasCaptchaSlot']
+            }] } });
+
 /**
  * The server-driven flow shell, shared by `<atlas-sign-in>` and
  * `<atlas-sign-up>`. The Angular peer of React's internal `AttemptFlow`.
@@ -839,8 +953,24 @@ class AttemptFlowComponent {
     busy = false;
     errors = [];
     titleKey = 'signIn.title';
+    /**
+     * The sign-in captcha, drawn above the submit button on the identifier step
+     * (an always-on sign-in captcha) and on the challenge step the server demands
+     * 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);
@@ -864,8 +994,26 @@ class AttemptFlowComponent {
     step() {
         return this.attempt ? nextStep(this.attempt) : { kind: 'collect_identifier' };
     }
+    showCaptcha() {
+        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() {
@@ -873,8 +1021,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':
@@ -888,6 +1045,10 @@ class AttemptFlowComponent {
                 return [{ kind: 'input', name: 'code', labelKey: 'signIn.emailCodeLabel', type: 'text' }];
             case 'collect_new_password':
                 return [{ kind: 'input', name: 'password', labelKey: 'reset.newPasswordLabel', type: 'password' }];
+            case 'collect_captcha':
+                // §5 the server withheld the attempt until a captcha clears. Solving the
+                // widget resubmits the identifier on its own; the button retries.
+                return [msg('captcha.prompt')];
             case 'await_oauth':
                 return [msg('signIn.magicLinkSent')];
             case 'done':
@@ -901,7 +1062,7 @@ 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" }, 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>
 
@@ -917,6 +1078,7 @@ class AttemptFlowComponent {
               <input
                 [class]="cls('formFieldInput', 'atlas-input')"
                 [type]="f.type"
+                [attr.name]="f.name"
                 [value]="values[f.name] ?? ''"
                 (input)="setValue(f.name, $any($event.target).value)"
               />
@@ -929,14 +1091,29 @@ class AttemptFlowComponent {
           }
         }
 
+        @if (showCaptcha()) {
+          <div class="atlas-captcha" data-atlas-captcha="" [atlasCaptchaSlot]="captcha"></div>
+        }
+
         @if (showSubmit()) {
           <button [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy" type="submit">
             {{ 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, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "directive", type: AtlasCaptchaSlotDirective, selector: "[atlasCaptchaSlot]", inputs: ["atlasCaptchaSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttemptFlowComponent, decorators: [{
             type: Component,
@@ -944,6 +1121,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'atlas-attempt-flow',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AtlasCaptchaSlotDirective],
                     template: `
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
@@ -960,6 +1138,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
               <input
                 [class]="cls('formFieldInput', 'atlas-input')"
                 [type]="f.type"
+                [attr.name]="f.name"
                 [value]="values[f.name] ?? ''"
                 (input)="setValue(f.name, $any($event.target).value)"
               />
@@ -972,11 +1151,26 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           }
         }
 
+        @if (showCaptcha()) {
+          <div class="atlas-captcha" data-atlas-captcha="" [atlasCaptchaSlot]="captcha"></div>
+        }
+
         @if (showSubmit()) {
           <button [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy" type="submit">
             {{ 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>
   `,
@@ -989,8 +1183,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], titleKey: [{
                 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) {
@@ -1005,18 +1207,115 @@ function msg(labelKey) {
  * server via `advance`, and this controller only posts whatever the current step
  * needs and re-renders the returned status. State lives in a signal so templates
  * update whether the app runs zoned or zoneless.
+ *
+ * `<atlas-sign-up>` starts the attempt with {@link create}
+ * (`POST /v1/client/sign_ups`); the emailed-code step then runs through the same
+ * {@link submit}. Both flows draw the instance's captcha (from
+ * {@link loadSettings}) when it is required.
  */
 class AtlasFlowController {
     client;
     reload;
+    t;
     state;
+    /**
+     * The instance's public sign-in / sign-up settings (captcha, sign-up fields,
+     * legal consent) from `GET /v1/appearance`; null until {@link loadSettings}
+     * resolves, or when the server could not be reached.
+     */
+    settings = signal(null);
+    /** The sign-in captcha (identifier step / `needs_captcha` challenge). */
+    captcha = createCaptchaController();
+    /** The sign-up captcha (the create-account step). */
+    signUpCaptcha = createCaptchaController();
+    /** Whether {@link captcha} currently draws a widget (for templates). */
+    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;
-    constructor(client, reload, pending) {
+    identifier = '';
+    constructor(client, reload, pending, 
+    /** Resolves the captcha messages' catalog keys. Defaults to en-US. */
+    t = (key) => translate(EN_US, key)) {
         this.client = client;
         this.reload = reload;
+        this.t = t;
         // 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.
         this.state = signal(pending ? flowFromPending(pending) : initialFlow);
+        this.syncCaptcha();
+    }
+    /** Fetch the instance's public settings and draw whatever captcha they require. */
+    async loadSettings() {
+        const loaded = await fetchInstanceSettings(this.client);
+        if (loaded) {
+            this.settings.set(loaded);
+            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();
+        const state = this.state();
+        this.captcha.configure(signInCaptchaOptions(settings?.captchaFlows.signIn, state, () => void this.submit({})));
+        const signUpFlow = settings?.captchaFlows.signUp;
+        this.signUpCaptcha.configure({
+            flow: signUpFlow,
+            active: !state.attempt && flowNeedsCaptcha(signUpFlow),
+        });
+        this.captchaDrawn.set(this.captcha.needed);
+        this.signUpCaptchaDrawn.set(this.signUpCaptcha.needed);
+    }
+    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();
     }
     /**
      * Advance the flow with the values the user typed. On completion, exchange the
@@ -1026,8 +1325,31 @@ class AtlasFlowController {
      */
     async submit(values) {
         this.state.update((current) => ({ ...current, busy: true, errors: [] }));
-        const next = await advance(this.client, this.state(), values);
-        this.state.set(next);
+        const out = await advanceWithCaptcha(this.client, this.state(), values, {
+            captcha: this.captcha,
+            identifier: this.identifier,
+            t: this.t,
+        });
+        this.identifier = out.identifier;
+        await this.finish(out.state);
+    }
+    /**
+     * Create an account (`POST /v1/client/sign_ups`) from a create-account form's
+     * values — email, password and any configured sign-up fields — carrying the
+     * sign-up captcha's token when the instance requires one. The emailed code is
+     * then posted with {@link submit}.
+     */
+    async create(values, consent = true) {
+        this.state.update((current) => ({ ...current, busy: true, errors: [] }));
+        const next = await createSignUp(this.client, values, {
+            consent,
+            captcha: this.signUpCaptcha,
+            t: this.t,
+        });
+        await this.finish(next);
+    }
+    async finish(next) {
+        this.setState(next);
         if (next.attempt?.status === 'complete') {
             if (next.ticket) {
                 await this.client.post('/v1/client/tickets/exchange', {
@@ -1057,7 +1379,7 @@ class AtlasFlowController {
         this.pollTimer = setInterval(() => {
             void (async () => {
                 const { state: next, ticket } = await pollAttempt(this.client, this.state());
-                this.state.set(next);
+                this.setState(next);
                 if (!ticket || !next.attempt)
                     return;
                 // The ticket is exchanged by a normal request, so no session token ever
@@ -1077,15 +1399,19 @@ class AtlasFlowController {
             this.pollTimer = null;
         }
     }
-    /** Release the poll timer — call from the component's `ngOnDestroy`. */
+    /** Release the poll timer and the captcha widgets — call from the component's `ngOnDestroy`. */
     destroy() {
         this.stopPolling();
+        this.captcha.destroy();
+        this.signUpCaptcha.destroy();
     }
 }
 
 /**
  * `<atlas-sign-in>` — the full, multi-step sign-in flow driven entirely by the
- * server-side attempt status. The Angular peer of React's `<SignIn/>`.
+ * server-side attempt status. The Angular peer of React's `<SignIn/>`. Draws the
+ * instance's sign-in captcha when it is required (always-on, or a
+ * `needs_captcha` challenge).
  *
  * ```html
  * <atlas-sign-in *atlasSignedOut afterUrl="/dashboard"></atlas-sign-in>
@@ -1097,10 +1423,15 @@ class SignInComponent {
     afterUrl;
     flow = new AtlasFlowController(this.atlas.createFapiClient(), () => this.atlas.reload(), 
     // Resume mid-flow if an OAuth redirect came back owing a second factor.
-    this.atlas.pendingAttempt);
+    this.atlas.pendingAttempt, (key) => translate(this.atlas.localization, key));
     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) and email delivery (no emailed-code
+        // option while the app cannot send email).
+        if (typeof window !== 'undefined')
+            void this.flow.loadSettings();
     }
     ngOnDestroy() {
         this.flow.destroy();
@@ -1112,9 +1443,13 @@ class SignInComponent {
       [busy]="flow.state().busy"
       [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"], 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,
@@ -1129,7 +1464,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       [busy]="flow.state().busy"
       [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>
   `,
                 }]
@@ -1138,9 +1477,438 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             }] } });
 
 /**
- * `<atlas-sign-up>` — the full, server-driven sign-up flow. The Angular peer of
- * React's `<SignUp/>`. It shares the exact flow engine with `<atlas-sign-in>`;
- * only the title differs, because the sequence of steps is decided by the server.
+ * 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. 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);
+    settings = null;
+    busy = false;
+    errors = [];
+    captcha = null;
+    /** Emits the typed values and the consent tick when the form is submitted. */
+    submitSignUp = new EventEmitter();
+    values = {};
+    agreed = false;
+    t(key, vars) {
+        return translate(this.atlas.localization, key, vars);
+    }
+    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 ?? [];
+    }
+    label(f) {
+        return f.required ? f.label : this.t('signUp.optionalField', { label: f.label });
+    }
+    inputType(f) {
+        return ['email', 'tel', 'url', 'number', 'date'].includes(f.type) ? f.type : 'text';
+    }
+    /** Same encoding as React, the embed widget and the hosted page: one value,
+     *  or a comma-joined list for multiselect. */
+    picked(key) {
+        const value = this.values[key];
+        return value ? value.split(', ') : [];
+    }
+    toggle(f, option, on) {
+        if (f.type === 'radio') {
+            this.setValue(f.key, option);
+            return;
+        }
+        const current = this.picked(f.key);
+        this.setValue(f.key, (on ? [...current, option] : current.filter((p) => p !== option)).join(', '));
+    }
+    showLegal() {
+        const legal = this.settings?.legal;
+        return !!legal && (!!legal.termsUrl || !!legal.privacyUrl);
+    }
+    consentOk() {
+        return !this.settings?.legal?.required || this.agreed;
+    }
+    formErrors() {
+        return this.errors.filter((error) => !error.param);
+    }
+    fieldErrorsFor(name) {
+        return this.errors.filter((error) => error.param === name);
+    }
+    onSubmit(event) {
+        event.preventDefault();
+        if (this.emailUnavailable() || !this.consentOk())
+            return;
+        this.submitSignUp.emit({
+            values: { ...this.values },
+            consent: this.settings?.legal?.required ? this.agreed : true,
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SignUpFormComponent, isStandalone: true, selector: "atlas-sign-up-form", inputs: { settings: "settings", busy: "busy", errors: "errors", captcha: "captcha" }, outputs: { submitSignUp: "submitSignUp" }, ngImport: i0, template: `
+    <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>
+      }
+
+      <form (submit)="onSubmit($event)">
+        @for (f of fields(); track f.key) {
+          @if (f.type === 'radio' || f.type === 'multiselect') {
+            <div [class]="cls('formField', 'atlas-field')">
+              <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ label(f) }}</span>
+              <span class="atlas-choices">
+                @for (o of f.options; track o) {
+                  <label class="atlas-choice">
+                    <input
+                      [type]="f.type === 'radio' ? 'radio' : 'checkbox'"
+                      [attr.name]="f.key"
+                      [value]="o"
+                      [checked]="picked(f.key).includes(o)"
+                      (change)="toggle(f, o, $any($event.target).checked)"
+                    />
+                    {{ o }}
+                  </label>
+                }
+              </span>
+              @for (error of fieldErrorsFor(f.key); track error.code) {
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              }
+            </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"
+                  [attr.name]="f.key"
+                  [checked]="values[f.key] === 'true'"
+                  (change)="setValue(f.key, $any($event.target).checked ? 'true' : '')"
+                />
+              } @else if (f.type === 'select') {
+                <select
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [attr.name]="f.key"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  (change)="setValue(f.key, $any($event.target).value)"
+                >
+                  <option value="">{{ f.placeholder ?? t('signUp.selectPlaceholder') }}</option>
+                  @for (o of f.options; track o) {
+                    <option [value]="o">{{ o }}</option>
+                  }
+                </select>
+              } @else if (f.type === 'textarea') {
+                <textarea
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [attr.name]="f.key"
+                  rows="3"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  [attr.placeholder]="f.placeholder"
+                  (input)="setValue(f.key, $any($event.target).value)"
+                ></textarea>
+              } @else {
+                <input
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [type]="inputType(f)"
+                  [attr.name]="f.key"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  [attr.placeholder]="f.placeholder"
+                  (input)="setValue(f.key, $any($event.target).value)"
+                />
+              }
+              @for (error of fieldErrorsFor(f.key); track error.code) {
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              }
+            </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'] ?? ''"
+            (input)="setValue('email', $any($event.target).value)"
+          />
+          @for (error of fieldErrorsFor('email'); track error.code) {
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+          }
+        </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'] ?? ''"
+            (input)="setValue('password', $any($event.target).value)"
+          />
+          @for (error of fieldErrorsFor('password'); track error.code) {
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+          }
+        </label>
+
+        @if (showLegal()) {
+          <label [class]="cls('formField', 'atlas-consent')">
+            @if (settings?.legal?.required) {
+              <input
+                type="checkbox"
+                name="consent"
+                [checked]="agreed"
+                (change)="agreed = $any($event.target).checked"
+              />
+            }
+            <span class="atlas-text">
+              {{ t(settings?.legal?.required ? 'signUp.consentAgree' : 'signUp.consentNotice') }}
+              @if (settings?.legal?.termsUrl; as terms) {
+                <a class="atlas-link" [href]="terms" target="_blank" rel="noopener noreferrer">{{ t('signUp.terms') }}</a>
+              }
+              @if (settings?.legal?.termsUrl && settings?.legal?.privacyUrl) {
+                {{ t('signUp.and') }}
+              }
+              @if (settings?.legal?.privacyUrl; as privacy) {
+                <a class="atlas-link" [href]="privacy" target="_blank" rel="noopener noreferrer">{{ t('signUp.privacy') }}</a>
+              }.
+            </span>
+            @for (error of fieldErrorsFor('consent'); track error.code) {
+              <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            }
+          </label>
+        }
+
+        @if (captcha) {
+          <div class="atlas-captcha" data-atlas-captcha="" [atlasCaptchaSlot]="captcha"></div>
+        }
+
+        <button
+          [class]="cls('formButtonPrimary', 'atlas-button')"
+          [disabled]="busy || !consentOk()"
+          type="submit"
+        >
+          {{ t('signUp.submit') }}
+        </button>
+      </form>
+      }
+    </div>
+  `, isInline: true, dependencies: [{ kind: "directive", type: AtlasCaptchaSlotDirective, selector: "[atlasCaptchaSlot]", inputs: ["atlasCaptchaSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpFormComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-sign-up-form',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    imports: [AtlasCaptchaSlotDirective],
+                    template: `
+    <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>
+      }
+
+      <form (submit)="onSubmit($event)">
+        @for (f of fields(); track f.key) {
+          @if (f.type === 'radio' || f.type === 'multiselect') {
+            <div [class]="cls('formField', 'atlas-field')">
+              <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ label(f) }}</span>
+              <span class="atlas-choices">
+                @for (o of f.options; track o) {
+                  <label class="atlas-choice">
+                    <input
+                      [type]="f.type === 'radio' ? 'radio' : 'checkbox'"
+                      [attr.name]="f.key"
+                      [value]="o"
+                      [checked]="picked(f.key).includes(o)"
+                      (change)="toggle(f, o, $any($event.target).checked)"
+                    />
+                    {{ o }}
+                  </label>
+                }
+              </span>
+              @for (error of fieldErrorsFor(f.key); track error.code) {
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              }
+            </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"
+                  [attr.name]="f.key"
+                  [checked]="values[f.key] === 'true'"
+                  (change)="setValue(f.key, $any($event.target).checked ? 'true' : '')"
+                />
+              } @else if (f.type === 'select') {
+                <select
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [attr.name]="f.key"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  (change)="setValue(f.key, $any($event.target).value)"
+                >
+                  <option value="">{{ f.placeholder ?? t('signUp.selectPlaceholder') }}</option>
+                  @for (o of f.options; track o) {
+                    <option [value]="o">{{ o }}</option>
+                  }
+                </select>
+              } @else if (f.type === 'textarea') {
+                <textarea
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [attr.name]="f.key"
+                  rows="3"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  [attr.placeholder]="f.placeholder"
+                  (input)="setValue(f.key, $any($event.target).value)"
+                ></textarea>
+              } @else {
+                <input
+                  [class]="cls('formFieldInput', 'atlas-input')"
+                  [type]="inputType(f)"
+                  [attr.name]="f.key"
+                  [value]="values[f.key] ?? ''"
+                  [required]="f.required"
+                  [attr.placeholder]="f.placeholder"
+                  (input)="setValue(f.key, $any($event.target).value)"
+                />
+              }
+              @for (error of fieldErrorsFor(f.key); track error.code) {
+                <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+              }
+            </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'] ?? ''"
+            (input)="setValue('email', $any($event.target).value)"
+          />
+          @for (error of fieldErrorsFor('email'); track error.code) {
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+          }
+        </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'] ?? ''"
+            (input)="setValue('password', $any($event.target).value)"
+          />
+          @for (error of fieldErrorsFor('password'); track error.code) {
+            <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+          }
+        </label>
+
+        @if (showLegal()) {
+          <label [class]="cls('formField', 'atlas-consent')">
+            @if (settings?.legal?.required) {
+              <input
+                type="checkbox"
+                name="consent"
+                [checked]="agreed"
+                (change)="agreed = $any($event.target).checked"
+              />
+            }
+            <span class="atlas-text">
+              {{ t(settings?.legal?.required ? 'signUp.consentAgree' : 'signUp.consentNotice') }}
+              @if (settings?.legal?.termsUrl; as terms) {
+                <a class="atlas-link" [href]="terms" target="_blank" rel="noopener noreferrer">{{ t('signUp.terms') }}</a>
+              }
+              @if (settings?.legal?.termsUrl && settings?.legal?.privacyUrl) {
+                {{ t('signUp.and') }}
+              }
+              @if (settings?.legal?.privacyUrl; as privacy) {
+                <a class="atlas-link" [href]="privacy" target="_blank" rel="noopener noreferrer">{{ t('signUp.privacy') }}</a>
+              }.
+            </span>
+            @for (error of fieldErrorsFor('consent'); track error.code) {
+              <span [class]="cls('formFieldError', 'atlas-error')">{{ error.message }}</span>
+            }
+          </label>
+        }
+
+        @if (captcha) {
+          <div class="atlas-captcha" data-atlas-captcha="" [atlasCaptchaSlot]="captcha"></div>
+        }
+
+        <button
+          [class]="cls('formButtonPrimary', 'atlas-button')"
+          [disabled]="busy || !consentOk()"
+          type="submit"
+        >
+          {{ t('signUp.submit') }}
+        </button>
+      </form>
+      }
+    </div>
+  `,
+                }]
+        }], propDecorators: { settings: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], errors: [{
+                type: Input
+            }], captcha: [{
+                type: Input
+            }], submitSignUp: [{
+                type: Output
+            }] } });
+
+/**
+ * `<atlas-sign-up>` — creates an account. The Angular peer of React's
+ * `<SignUp/>`. The first step is the create-account form (the instance's
+ * configured fields, email, password, legal consent and — when required — the
+ * captcha), which POSTs `/v1/client/sign_ups`; from there it shares the flow
+ * engine with `<atlas-sign-in>` (the emailed-code step, then the ticket
+ * exchange), because the sequence of steps is decided by the server.
  *
  * ```html
  * <atlas-sign-up *atlasSignedOut></atlas-sign-up>
@@ -1150,20 +1918,35 @@ class SignUpComponent {
     atlas = inject(AtlasService);
     /** Where to send the user once the flow completes. Reserved for host routing. */
     afterUrl;
-    flow = new AtlasFlowController(this.atlas.createFapiClient(), () => this.atlas.reload(), this.atlas.pendingAttempt);
+    flow = new AtlasFlowController(this.atlas.createFapiClient(), () => this.atlas.reload(), this.atlas.pendingAttempt, (key) => translate(this.atlas.localization, key));
+    ngOnInit() {
+        // §5 the instance's sign-up fields, consent policy and captcha settings.
+        if (typeof window !== 'undefined')
+            void this.flow.loadSettings();
+    }
     ngOnDestroy() {
         this.flow.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SignUpComponent, isStandalone: true, selector: "atlas-sign-up", inputs: { afterUrl: "afterUrl" }, ngImport: i0, template: `
-    <atlas-attempt-flow
-      [attempt]="flow.state().attempt"
-      [busy]="flow.state().busy"
-      [errors]="flow.state().errors"
-      titleKey="signUp.title"
-      (submitFlow)="flow.submit($event)"
-    ></atlas-attempt-flow>
-  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey"], outputs: ["submitFlow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SignUpComponent, isStandalone: true, selector: "atlas-sign-up", inputs: { afterUrl: "afterUrl" }, ngImport: i0, template: `
+    @if (flow.state().attempt) {
+      <atlas-attempt-flow
+        [attempt]="flow.state().attempt"
+        [busy]="flow.state().busy"
+        [errors]="flow.state().errors"
+        titleKey="signUp.title"
+        (submitFlow)="flow.submit($event)"
+      ></atlas-attempt-flow>
+    } @else {
+      <atlas-sign-up-form
+        [settings]="flow.settings()"
+        [busy]="flow.state().busy"
+        [errors]="flow.state().errors"
+        [captcha]="flow.signUpCaptchaDrawn() ? flow.signUpCaptcha : null"
+        (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", "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,
@@ -1171,15 +1954,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'atlas-sign-up',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AttemptFlowComponent],
+                    imports: [AttemptFlowComponent, SignUpFormComponent],
                     template: `
-    <atlas-attempt-flow
-      [attempt]="flow.state().attempt"
-      [busy]="flow.state().busy"
-      [errors]="flow.state().errors"
-      titleKey="signUp.title"
-      (submitFlow)="flow.submit($event)"
-    ></atlas-attempt-flow>
+    @if (flow.state().attempt) {
+      <atlas-attempt-flow
+        [attempt]="flow.state().attempt"
+        [busy]="flow.state().busy"
+        [errors]="flow.state().errors"
+        titleKey="signUp.title"
+        (submitFlow)="flow.submit($event)"
+      ></atlas-attempt-flow>
+    } @else {
+      <atlas-sign-up-form
+        [settings]="flow.settings()"
+        [busy]="flow.state().busy"
+        [errors]="flow.state().errors"
+        [captcha]="flow.signUpCaptchaDrawn() ? flow.signUpCaptcha : null"
+        (submitSignUp)="flow.create($event.values, $event.consent)"
+      ></atlas-sign-up-form>
+    }
   `,
                 }]
         }], propDecorators: { afterUrl: [{
@@ -1630,5 +2423,5 @@ function atlasChildGuard(options = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { ATLAS_OPTIONS, ATLAS_UI, AtlasFlowController, AtlasLoadedDirective, AtlasLoadingDirective, AtlasModule, AtlasProtectDirective, AtlasRootDirective, AtlasService, AtlasSignedInDirective, AtlasSignedOutDirective, AttemptFlowComponent, DEFAULT_TOKENS, EN_US, OrganizationProfileComponent, OrganizationSwitcherComponent, SignInComponent, SignUpComponent, THEMES, UserButtonComponent, UserProfileComponent, atlasChildGuard, atlasGuard, classFor, cssVariables, explicitTokens, provideAtlas, renderAppearance, resolveTokens, translate, withFallback };
+export { ATLAS_OPTIONS, ATLAS_UI, AtlasCaptchaSlotDirective, AtlasFlowController, AtlasLoadedDirective, AtlasLoadingDirective, AtlasModule, AtlasProtectDirective, AtlasRootDirective, AtlasService, AtlasSignedInDirective, AtlasSignedOutDirective, AttemptFlowComponent, DEFAULT_TOKENS, EN_US, OrganizationProfileComponent, OrganizationSwitcherComponent, SignInComponent, SignUpComponent, SignUpFormComponent, THEMES, UserButtonComponent, UserProfileComponent, atlasChildGuard, atlasGuard, classFor, cssVariables, explicitTokens, provideAtlas, renderAppearance, resolveTokens, translate, withFallback };
 //# sourceMappingURL=atlasauth-angular.mjs.map