@atlasauth/angular 0.7.0 → 0.9.0

package/dist/fesm2022/atlasauth-angular.mjs

@@ -1,10 +1,10 @@
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, PLATFORM_ID, computed, Injectable, TemplateRef, ViewContainerRef, Directive, Input, ElementRef, Renderer2, EventEmitter, Output, ChangeDetectionStrategy, Component, signal, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, NgModule } from '@angular/core';
+import { InjectionToken, signal, inject, PLATFORM_ID, computed, Injectable, TemplateRef, ViewContainerRef, Directive, Input, ElementRef, Renderer2, EventEmitter, Output, ChangeDetectionStrategy, Component, ChangeDetectorRef, effect, untracked, DestroyRef, makeEnvironmentProviders, ENVIRONMENT_INITIALIZER, NgModule } from '@angular/core';
 import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, Subject, combineLatest, firstValueFrom } from 'rxjs';
 import { map, distinctUntilChanged, filter, take } from 'rxjs/operators';
-import { TokenCache, SignOutNotifier, resolveFrontendApi, catalogLocale, configureReferralCapture, FapiClient, SignOutGuard, localizedErrorMessage, getTemplateToken, getProviderToken, signOutReasonFromClient, readRedirectResult, completeOAuthPopupLanding, mapOAuthPopupPayload, stripRedirectParams, closeOAuthPopupAfterSignIn, SDK_HEADER, sdkHeaderValue, reportSdkAdvisory, readExpiry, msUntilRefresh, nextStep, createCaptchaController, atlasCaptchaLabels, flowFromPending, initialFlow, fetchInstanceSettings, offeredFirstFactors, prepareFactor, signInCaptchaOptions, flowNeedsCaptcha, planFirstFactor, advanceWithCaptcha, createSignUp, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
+import { createOrganizationAuditLog, TokenCache, SignOutNotifier, resolveFrontendApi, withDevBrowser, catalogLocale, configureReferralCapture, FapiClient, SignOutGuard, localizedErrorMessage, reauthenticate, getTemplateToken, getProviderToken, signOutReasonFromClient, readRedirectResult, completeOAuthPopupLanding, mapOAuthPopupPayload, stripRedirectParams, closeOAuthPopupAfterSignIn, SDK_HEADER, sdkHeaderValue, reportSdkAdvisory, readExpiry, msUntilRefresh, groupSetupKey, enrollmentSubmitKey, nextStep, awaitingSignUpLink, canDownloadRecoveryCodes, copyRecoveryCodes, downloadRecoveryCodes, createCaptchaController, atlasCaptchaLabels, flowFromPending, initialFlow, createMfaEnrollment, mfaChoicesFrom, fetchInstanceSettings, fetchLastSignInMethod, offeredFirstFactors, prepareFactor, signInCaptchaOptions, flowNeedsCaptcha, planFirstFactor, advanceWithCaptcha, createSignUp, prepareSecondFactorCode, resendSignUpVerification, createPasskeySignUp, finishPasskeySignUp, pendingRecoveryCodes, acknowledgeRecoveryCodes, shouldKeepPolling, pollAttempt, lastUsedMethodLabel, signUp, passkeysSupported, awaitingPasskey, OrganizationProfileController, describeAuditAction, actorFromClaims } from '@atlasauth/js';
 export { FapiClient, SIGN_OUT_EVENT, SignOutError, advance, flowFromPending, getProviderToken, initialFlow, onAtlasSignOut, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
 import { evaluate } from '@atlasauth/authz';
 export { evaluate, hasFromClaims } from '@atlasauth/authz';
@@ -19,6 +19,43 @@ import { Router } from '@angular/router';
  */
 const ATLAS_OPTIONS = new InjectionToken('ATLAS_OPTIONS');
 
+/**
+ * The active organization's audit trail, for its admins — the engine behind
+ * `<atlas-organization-audit-log>` and `AtlasService.organizationAuditLog()`
+ * (the Angular peer of React's `useOrganizationAuditLog`). `state` is a signal
+ * of `{ entries, loading, forbidden, hasMore }`, one page at a time, newest
+ * first. It follows the active organization until {@link destroy}.
+ */
+class AtlasOrganizationAuditLog {
+    _state;
+    log;
+    unsubscribe;
+    organizationSub;
+    state;
+    constructor(client, organization$, options = {}) {
+        this.log = createOrganizationAuditLog(client, options);
+        this._state = signal(this.log.getState());
+        this.state = this._state.asReadonly();
+        this.unsubscribe = this.log.subscribe((next) => this._state.set(next));
+        this.organizationSub = organization$
+            .pipe(map((membership) => membership?.organization.id ?? null), distinctUntilChanged())
+            .subscribe((id) => void this.log.load(id));
+    }
+    /** Append the next page, when there is one. */
+    loadMore() {
+        return this.log.loadMore();
+    }
+    /** Re-read from the newest entry. */
+    reload() {
+        return this.log.reload();
+    }
+    /** Stop following the active organization. */
+    destroy() {
+        this.organizationSub.unsubscribe();
+        this.unsubscribe();
+    }
+}
+
 /**
  * §10.3 theming.
  *
@@ -163,6 +200,7 @@ const EN_US = {
     'signIn.submit': 'Continue',
     'signIn.forgotPassword': 'Forgot password?',
     'signIn.noAccount': 'No account?',
+    'signIn.lastUsed': 'Last used',
     'signIn.signUpLink': 'Sign up',
     'signIn.orDivider': 'or',
     'signIn.socialButton': 'Continue with {provider}',
@@ -170,7 +208,11 @@ const EN_US = {
     'signIn.useEmailCode': 'Email me a code',
     'signIn.codeSentTo': 'We sent a code to {email}. Enter it below.',
     'signIn.resendCode': 'Resend code',
+    'signIn.sending': 'Sending…',
+    'signIn.emailCodeOption': 'Email me a code instead',
     'signIn.magicLinkSent': 'Check your email for a sign-in link.',
+    'signIn.signedIn': 'You\'re signed in.',
+    'signIn.sessionNotKept': 'You signed in, but this browser didn\'t keep the session. If it blocks third-party cookies, allow cookies for this site and try again.',
     'signIn.checkOtherTab': 'You can close this tab — you are signed in where you started.',
     'signUp.title': 'Create your account',
     'signUp.submit': 'Continue',
@@ -187,6 +229,13 @@ const EN_US = {
     '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.",
+    'signUp.passkeyOption': 'Sign up with a passkey instead',
+    'signUp.passwordOption': 'Sign up with a password instead',
+    'signUp.passkeyIntro': "No password needed: you'll sign in with a passkey saved on this device or in your password manager.",
+    'signUp.passkeyPrompt': 'Create a passkey to finish setting up your account.',
+    'signUp.passkeyCreate': 'Create passkey',
+    'signUp.passkeyCancelled': "The passkey wasn't created. Try again when you're ready.",
+    'signUp.linkSentTo': 'We sent a confirmation link to {email}. Open it on any device; this page continues on its own.',
     '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.",
@@ -204,6 +253,24 @@ const EN_US = {
     'mfa.usePasskey': 'Use a passkey instead',
     'mfa.useBackupCode': 'Use a recovery code',
     'mfa.submit': 'Verify',
+    'mfa.enrollChoose': 'Set up a second step for signing in.',
+    'mfa.enrollTotpOption': 'Use an authenticator app',
+    'mfa.enrollSmsOption': 'Use text messages',
+    'mfa.enrollScan': 'Scan this QR code with your authenticator app, or enter the setup key.',
+    'mfa.enrollQrAlt': 'QR code for your authenticator app',
+    'mfa.enrollSetupKey': 'Setup key',
+    'mfa.enrollPreparing': 'Setting up…',
+    'mfa.phoneLabel': 'Mobile number',
+    'mfa.phoneHint': 'Include the country code, for example +14155550101.',
+    'mfa.sendCode': 'Text me a code',
+    'mfa.codeTextedTo': 'Enter the code we texted to {phone}.',
+    'mfa.smsCodeOption': 'Text me a code instead',
+    'mfa.recoveryCodesTitle': 'Save your recovery codes',
+    'mfa.recoveryCodesHelp': "Each code works once. If you can't use your second step, sign in with one of these. Keep them somewhere safe: they won't be shown again.",
+    'mfa.recoveryCodesCopy': 'Copy codes',
+    'mfa.recoveryCodesCopied': 'Copied.',
+    'mfa.recoveryCodesDownload': 'Download as .txt',
+    'mfa.recoveryCodesSaved': "I've saved my codes",
     'reset.title': 'Reset your password',
     'reset.submit': 'Send reset code',
     'reset.newPasswordLabel': 'New password',
@@ -231,6 +298,35 @@ const EN_US = {
     'organization.members': 'Members',
     'organization.invite': 'Invite member',
     'organization.roleLabel': 'Role',
+    'organization.invitations': 'Invitations',
+    'organization.settings': 'Settings',
+    'organization.emailLabel': 'Email address',
+    'organization.sendInvite': 'Send invitation',
+    'organization.noInvitations': 'No pending invitations.',
+    'organization.remove': 'Remove',
+    'organization.revoke': 'Revoke',
+    'organization.resend': 'Resend',
+    'organization.you': '(you)',
+    'organization.leave': 'Leave organization',
+    'organization.leaveConfirm': 'Leave {name}? You will lose access until you are invited again.',
+    'organization.delete': 'Delete organization',
+    'organization.deleteConfirm': 'Delete {name} for every member? This cannot be undone.',
+    'organization.confirm': 'Confirm',
+    'organization.cancel': 'Cancel',
+    'organization.unnamedMember': 'Unnamed member',
+    'organization.passwordPrompt': 'Enter your password to confirm.',
+    'organization.roles': 'Roles',
+    'organization.roleName': 'Role name',
+    'organization.roleKey': 'Role key (for example org:auditor)',
+    'organization.rolePermissions': 'Permissions',
+    'organization.createRole': 'Create role',
+    'organization.saveRole': 'Save role',
+    'organization.editRole': 'Edit',
+    'organization.deleteRole': 'Delete',
+    'organization.noCustomRoles': 'This organization has no roles of its own yet.',
+    'impersonation.banner': 'You are signed in as {name} on someone else\'s behalf.',
+    'impersonation.returnToAdmin': 'Return to admin',
+    'impersonation.end': 'End impersonation',
     '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
@@ -291,7 +387,7 @@ function withFallback(locale) {
 }
 
 /** This package's version, sent as `X-Atlas-SDK` (kept in step with package.json by a test). */
-const ATLAS_ANGULAR_VERSION = '0.7.0';
+const ATLAS_ANGULAR_VERSION = '0.9.0';
 const ATLAS_ANGULAR_SDK = { name: '@atlasauth/angular', version: ATLAS_ANGULAR_VERSION };
 
 /**
@@ -398,7 +494,8 @@ class AtlasService {
         this.baseUrl = resolveFrontendApi(options.frontendApi, {
             component: 'provideAtlas() / AtlasModule.forRoot()',
         });
-        this.doFetch = options.fetchImpl ?? ((...args) => fetch(...args));
+        // Development instances keep the session in a header where the browser blocks the cookie.
+        this.doFetch = withDevBrowser(options.publishableKey, 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);
@@ -504,6 +601,23 @@ class AtlasService {
             return null;
         }
     }
+    /**
+     * The active organization's audit trail, for its admins: `state` is a signal
+     * of `{ entries, loading, forbidden, hasMore }`, one page at a time with
+     * `loadMore()`. `action` narrows it (exact, or a prefix ending in `.`). It
+     * follows the active organization; call `destroy()` when done. The peer of
+     * React's `useOrganizationAuditLog`.
+     */
+    organizationAuditLog(options = {}) {
+        return new AtlasOrganizationAuditLog(this.createFapiClient(), this.organization$, options);
+    }
+    /**
+     * Re-authenticate the signed-in user with their password (a step-up), for an
+     * action the server answered with STEP_UP_REQUIRED. Rejects when refused.
+     */
+    reauthenticate(password) {
+        return reauthenticate({ strategy: 'password', password }, { api: this.baseUrl, publishableKey: this.publishableKey, fetchImpl: this.doFetch, locale: this.requestLocale });
+    }
     /** A fresh {@link FapiClient} for driving a sign-in/sign-up flow. */
     createFapiClient() {
         return new FapiClient({
@@ -571,6 +685,25 @@ class AtlasService {
             await this.reload();
         return this.guard.settle(attempt, options);
     }
+    /**
+     * End the active impersonation ("return to admin"): the impersonator's own
+     * session on this browser becomes active again with no sign-in
+     * (`resumed: true`); with none, another account signed in here is adopted,
+     * or this browser is signed out.
+     */
+    async endImpersonation() {
+        const outcome = await this.guard.endImpersonation(this.cache.peek()?.sessionId ?? this._session.value?.id ?? null);
+        if (!outcome.ended)
+            return outcome;
+        if (!outcome.activeSessionId) {
+            this.clearLocalState('user');
+            return outcome;
+        }
+        if (outcome.jwt)
+            this.applyToken(outcome.jwt, outcome.activeSessionId);
+        await this.reload();
+        return outcome;
+    }
     /**
      * Switch the active organization (or `null` for the personal account). The
      * new token carries the new org claims, so the app's permission checks update
@@ -591,6 +724,7 @@ class AtlasService {
         await this.reload();
     }
     /** Re-read `/v1/client`: refresh user, session, memberships and status. */
+    /** Re-boot from the Frontend API. Resolves true when a session now exists in this browser. */
     async reload() {
         try {
             const response = await this.call('/v1/client');
@@ -601,7 +735,7 @@ class AtlasService {
             // refresh cookie; the guard re-tries its revoke in the background.
             if (!body.session || !body.user || this.guard.refuse(body.session.id)) {
                 this.clearLocalState(body.session ? 'other_tab' : signOutReasonFromClient(body));
-                return;
+                return false;
             }
             this.notifier.clear();
             this._user.next(body.user);
@@ -611,6 +745,7 @@ class AtlasService {
                 this.applyToken(body.jwt, body.session.id);
             this._status.next('signed_in');
             this.scheduleRefresh();
+            return true;
         }
         catch {
             // A failed boot is NOT signed-out. Rendering a sign-in form because the
@@ -618,6 +753,7 @@ class AtlasService {
             // needless re-authentication. Only promote loading → signed_out.
             if (this._status.value === 'loading')
                 this._status.next('signed_out');
+            return false;
         }
     }
     // --- Internals --------------------------------------------------------------
@@ -1078,6 +1214,8 @@ class AttemptFlowComponent {
     attempt = null;
     busy = false;
     errors = [];
+    /** `FlowState.sessionKept`: whether this browser kept the session the sign-in created. */
+    sessionKept = undefined;
     titleKey = 'signIn.title';
     /**
      * The sign-in captcha, drawn above the submit button on the identifier step
@@ -1097,6 +1235,38 @@ class AttemptFlowComponent {
     submitFlow = new EventEmitter();
     /** Emits when the user picks a first factor the server must send first (an emailed code). */
     chooseFactor = new EventEmitter();
+    /**
+     * Offer "Email me a code instead" at the second factor (the instance's
+     * `account.emailSecondFactor`); `emailSecondFactor` asks for it and
+     * `emailedSecondFactor` reports how it went.
+     */
+    offerEmailSecondFactor = false;
+    /** `AtlasFlowController.emailSecondFactor()`: in flight, where it went, or why not. */
+    emailedSecondFactor = null;
+    emailSecondFactor = new EventEmitter();
+    /**
+     * Offer "Text me a code instead" at the second factor (where the app offers
+     * texted codes, `AtlasFlowController.mfaChoices().sms`); `smsSecondFactor`
+     * asks for it and `textedSecondFactor` reports how it went.
+     */
+    offerSmsSecondFactor = false;
+    /** `AtlasFlowController.smsSecondFactor()`: in flight, where it went, or why not. */
+    textedSecondFactor = null;
+    smsSecondFactor = new EventEmitter();
+    /**
+     * The MFA enrolment step (`AtlasFlowController.enrollment` and
+     * `enrollmentState()`): the authenticator app's QR code and setup key, or a
+     * texted code. Null: the step asks for two authenticator codes only.
+     */
+    enrollment = null;
+    enrollmentState = null;
+    /**
+     * The instance's `account.emailVerification`. On `link` a sign-up's
+     * verification step has nothing to type: it says to open the emailed link
+     * while the flow polls, and offers a resend (`resend`).
+     */
+    emailVerification = 'code';
+    resend = new EventEmitter();
     values = {};
     t(key, vars) {
         return translate(this.atlas.localization, key, vars);
@@ -1115,8 +1285,45 @@ class AttemptFlowComponent {
     }
     onSubmit(event) {
         event.preventDefault();
+        // Enrolment: text the code to the typed number, or confirm the factor.
+        if (this.enrolling() && this.enrollment) {
+            void this.enrollment.submit(this.values).then((next) => {
+                if (next)
+                    this.submitFlow.emit(next);
+            });
+            return;
+        }
         this.submitFlow.emit(this.values);
     }
+    /** The shared enrolment step is drawn (a controller was passed and the flow is enrolling). */
+    enrolling() {
+        return this.step().kind === 'enroll_second_factor' && !!this.enrollment && !!this.enrollmentState;
+    }
+    chooseMethod(method) {
+        this.values = {};
+        void this.enrollment?.choose(method);
+    }
+    resendEnrollment() {
+        void this.enrollment?.resend();
+    }
+    otherMethods(state) {
+        return state.options.filter((m) => m !== state.method);
+    }
+    setupKey(secret) {
+        return groupSetupKey(secret);
+    }
+    /** The submit button's label key (enrolment: "Text me a code" before the number is sent). */
+    submitKey() {
+        return (this.enrolling() && this.enrollmentState && enrollmentSubmitKey(this.enrollmentState)) || 'signIn.submit';
+    }
+    showSmsSecondFactor() {
+        return this.offerSmsSecondFactor && this.step().kind === 'collect_second_factor';
+    }
+    /** Where the texted second-factor code went (masked), once it was sent. */
+    smsSecondFactorSentTo() {
+        const sent = this.textedSecondFactor?.sentTo;
+        return typeof sent === 'string' ? sent || ' ' : null;
+    }
     formErrors() {
         return this.errors.filter((error) => !error.param);
     }
@@ -1137,6 +1344,17 @@ class AttemptFlowComponent {
             return [];
         return this.firstFactors ?? step.strategies;
     }
+    linkOnly() {
+        return awaitingSignUpLink(this.attempt, this.emailVerification);
+    }
+    showEmailSecondFactor() {
+        return this.offerEmailSecondFactor && this.step().kind === 'collect_second_factor';
+    }
+    /** Where the emailed second-factor code went (masked), once it was sent. */
+    emailSecondFactorSentTo() {
+        const sent = this.emailedSecondFactor?.sentTo;
+        return typeof sent === 'string' ? sent || ' ' : null;
+    }
     showEmailCodeOption() {
         // Before the code is sent: the choice (or the retry of a failed automatic
         // send). After: "Resend code".
@@ -1154,6 +1372,11 @@ class AttemptFlowComponent {
         // until that code is sent.
         if (kind === 'collect_first_factor')
             return this.fields().length > 0;
+        if (this.linkOnly())
+            return false;
+        // Enrolment: nothing to submit while choosing a method or fetching the setup.
+        if (this.enrolling() && this.enrollmentState && !enrollmentSubmitKey(this.enrollmentState))
+            return false;
         return kind !== 'done' && kind !== 'await_oauth';
     }
     fields() {
@@ -1175,6 +1398,9 @@ class AttemptFlowComponent {
             case 'collect_second_factor':
                 return [{ kind: 'input', name: 'code', labelKey: 'mfa.codeLabel', type: 'text' }];
             case 'enroll_second_factor':
+                // The shared enrolment step draws its own fields (above).
+                if (this.enrolling())
+                    return [];
                 // Two consecutive codes (§5.6): a phone with a fast clock fails here
                 // rather than on every sign-in afterwards.
                 return [
@@ -1182,7 +1408,7 @@ class AttemptFlowComponent {
                     { kind: 'input', name: 'secondCode', labelKey: 'mfa.enrollSecondCodeLabel', type: 'text' },
                 ];
             case 'collect_email_code':
-                return [{ kind: 'input', name: 'code', labelKey: 'signIn.emailCodeLabel', type: 'text' }];
+                return this.linkOnly() ? [] : [{ 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':
@@ -1192,6 +1418,12 @@ class AttemptFlowComponent {
             case 'await_oauth':
                 return [msg('signIn.magicLinkSent')];
             case 'done':
+                // Signed in only when this browser holds the session; a blocked cookie is said
+                // plainly. "Check the other tab" is for a sign-in completed on another device.
+                if (this.sessionKept === true)
+                    return [msg('signIn.signedIn')];
+                if (this.sessionKept === false)
+                    return [{ kind: 'alert', name: '', labelKey: 'signIn.sessionNotKept', type: 'text' }];
                 return [msg('signIn.checkOtherTab')];
             case 'restart':
                 return [msg('error.generic')];
@@ -1202,7 +1434,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", captcha: "captcha", firstFactors: "firstFactors", preparedFactor: "preparedFactor" }, outputs: { submitFlow: "submitFlow", chooseFactor: "chooseFactor" }, 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", sessionKept: "sessionKept", titleKey: "titleKey", captcha: "captcha", firstFactors: "firstFactors", preparedFactor: "preparedFactor", offerEmailSecondFactor: "offerEmailSecondFactor", emailedSecondFactor: "emailedSecondFactor", offerSmsSecondFactor: "offerSmsSecondFactor", textedSecondFactor: "textedSecondFactor", enrollment: "enrollment", enrollmentState: "enrollmentState", emailVerification: "emailVerification" }, outputs: { submitFlow: "submitFlow", chooseFactor: "chooseFactor", emailSecondFactor: "emailSecondFactor", smsSecondFactor: "smsSecondFactor", resend: "resend" }, ngImport: i0, template: `
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
 
@@ -1214,6 +1446,98 @@ class AttemptFlowComponent {
         @if (codeSentText(); as sentText) {
           <p class="atlas-text" data-atlas-code-sent="">{{ sentText }}</p>
         }
+        @if (linkOnly()) {
+          <!-- Nothing to type: the flow polls until the emailed link is opened (anywhere). -->
+          <p class="atlas-text" data-atlas-link-sent="" aria-live="polite">
+            {{ t('signUp.linkSentTo', { email: attempt?.identifier ?? '' }) }}
+          </p>
+          <button
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            type="button"
+            data-atlas-resend=""
+            [disabled]="busy"
+            (click)="resend.emit()"
+          >
+            {{ t('signIn.resendLink') }}
+          </button>
+        }
+        @if (enrolling() && enrollmentState; as enrol) {
+          @if (enrol.method === null) {
+            <p class="atlas-text">{{ t('mfa.enrollChoose') }}</p>
+            @for (m of enrol.options; track m) {
+              <button
+                [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                type="button"
+                [attr.data-atlas-mfa-method]="m"
+                [disabled]="busy || enrol.busy"
+                (click)="chooseMethod(m)"
+              >
+                {{ t(m === 'totp' ? 'mfa.enrollTotpOption' : 'mfa.enrollSmsOption') }}
+              </button>
+            }
+          } @else if (enrol.method === 'totp') {
+            @if (enrol.enrollment; as setup) {
+              <p class="atlas-text">{{ t('mfa.enrollScan') }}</p>
+              @if (setup.qrCode) {
+                <img class="atlas-mfa-qr" data-atlas="mfa-qr" [src]="setup.qrCode" [alt]="t('mfa.enrollQrAlt')" width="180" height="180" />
+              }
+              @if (setup.secret) {
+                <p class="atlas-text" data-atlas="mfa-setup-key">{{ t('mfa.enrollSetupKey') }}: <code>{{ setupKey(setup.secret) }}</code></p>
+              }
+              <label class="atlas-field">
+                <span>{{ t('mfa.enrollFirstCodeLabel') }}</span>
+                <input [class]="cls('formFieldInput', 'atlas-input')" type="text" name="code" autocomplete="one-time-code" inputmode="numeric" [value]="values['code'] ?? ''" (input)="setValue('code', $any($event.target).value)" />
+              </label>
+              @if (enrol.totpCodes >= 2) {
+                <label class="atlas-field">
+                  <span>{{ t('mfa.enrollSecondCodeLabel') }}</span>
+                  <input [class]="cls('formFieldInput', 'atlas-input')" type="text" name="secondCode" autocomplete="one-time-code" inputmode="numeric" [value]="values['secondCode'] ?? ''" (input)="setValue('secondCode', $any($event.target).value)" />
+                </label>
+              }
+            } @else {
+              <p class="atlas-text" aria-live="polite">{{ enrol.busy ? t('mfa.enrollPreparing') : '' }}</p>
+            }
+          } @else {
+            @if (enrol.enrollment; as texted) {
+              <p class="atlas-text" data-atlas="mfa-code-texted" aria-live="polite">{{ t('mfa.codeTextedTo', { phone: texted.phone ?? '' }) }}</p>
+              <label class="atlas-field">
+                <span>{{ t('mfa.codeLabel') }}</span>
+                <input [class]="cls('formFieldInput', 'atlas-input')" type="text" name="code" autocomplete="one-time-code" inputmode="numeric" [value]="values['code'] ?? ''" (input)="setValue('code', $any($event.target).value)" />
+              </label>
+              <button
+                [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                type="button"
+                data-atlas-resend=""
+                [disabled]="busy || enrol.busy"
+                (click)="resendEnrollment()"
+              >
+                {{ t('signIn.resendCode') }}
+              </button>
+            } @else {
+              <label class="atlas-field">
+                <span>{{ t('mfa.phoneLabel') }}</span>
+                <input [class]="cls('formFieldInput', 'atlas-input')" type="tel" name="phone" autocomplete="tel" [value]="values['phone'] ?? ''" (input)="setValue('phone', $any($event.target).value)" />
+              </label>
+              <p class="atlas-text">{{ t('mfa.phoneHint') }}</p>
+            }
+          }
+          @for (error of enrol.errors; track $index) {
+            <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+          }
+          @if (enrol.method !== null && enrol.options.length > 1) {
+            @for (other of otherMethods(enrol); track other) {
+              <button
+                [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                type="button"
+                [attr.data-atlas-mfa-method]="other"
+                [disabled]="busy || enrol.busy"
+                (click)="chooseMethod(other)"
+              >
+                {{ t(other === 'totp' ? 'mfa.enrollTotpOption' : 'mfa.enrollSmsOption') }}
+              </button>
+            }
+          }
+        }
         @for (f of fields(); track $index) {
           @if (f.kind === 'input') {
             <label class="atlas-field">
@@ -1229,6 +1553,8 @@ class AttemptFlowComponent {
                 <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
+          } @else if (f.kind === 'alert') {
+            <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ t(f.labelKey) }}</p>
           } @else {
             <p>{{ t(f.labelKey) }}</p>
           }
@@ -1239,11 +1565,53 @@ class AttemptFlowComponent {
         }
 
         @if (showSubmit()) {
-          <button [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy" type="submit">
-            {{ t('signIn.submit') }}
+          <button [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy || (enrolling() && !!enrollmentState?.busy)" type="submit">
+            {{ t(submitKey()) }}
           </button>
         }
 
+        @if (showSmsSecondFactor()) {
+          @if (smsSecondFactorSentTo(); as sentTo) {
+            <p class="atlas-text" data-atlas="sms-second-factor-sent" aria-live="polite">
+              {{ t('mfa.codeTextedTo', { phone: sentTo }) }}
+            </p>
+          } @else {
+            <button
+              [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+              type="button"
+              data-atlas="sms-second-factor"
+              [disabled]="busy || !!textedSecondFactor?.busy"
+              (click)="smsSecondFactor.emit()"
+            >
+              {{ textedSecondFactor?.busy ? t('signIn.sending') : t('mfa.smsCodeOption') }}
+            </button>
+            @if (textedSecondFactor?.error; as message) {
+              <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ message }}</p>
+            }
+          }
+        }
+
+        @if (showEmailSecondFactor()) {
+          @if (emailSecondFactorSentTo(); as sentTo) {
+            <p class="atlas-text" data-atlas="email-second-factor-sent" aria-live="polite">
+              {{ t('signIn.codeSentTo', { email: sentTo }) }}
+            </p>
+          } @else {
+            <button
+              [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+              type="button"
+              data-atlas="email-second-factor"
+              [disabled]="busy || !!emailedSecondFactor?.busy"
+              (click)="emailSecondFactor.emit()"
+            >
+              {{ emailedSecondFactor?.busy ? t('signIn.sending') : t('signIn.emailCodeOption') }}
+            </button>
+            @if (emailedSecondFactor?.error; as message) {
+              <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ message }}</p>
+            }
+          }
+        }
+
         @if (showEmailCodeOption()) {
           <button
             [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
@@ -1279,6 +1647,98 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         @if (codeSentText(); as sentText) {
           <p class="atlas-text" data-atlas-code-sent="">{{ sentText }}</p>
         }
+        @if (linkOnly()) {
+          <!-- Nothing to type: the flow polls until the emailed link is opened (anywhere). -->
+          <p class="atlas-text" data-atlas-link-sent="" aria-live="polite">
+            {{ t('signUp.linkSentTo', { email: attempt?.identifier ?? '' }) }}
+          </p>
+          <button
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            type="button"
+            data-atlas-resend=""
+            [disabled]="busy"
+            (click)="resend.emit()"
+          >
+            {{ t('signIn.resendLink') }}
+          </button>
+        }
+        @if (enrolling() && enrollmentState; as enrol) {
+          @if (enrol.method === null) {
+            <p class="atlas-text">{{ t('mfa.enrollChoose') }}</p>
+            @for (m of enrol.options; track m) {
+              <button
+                [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                type="button"
+                [attr.data-atlas-mfa-method]="m"
+                [disabled]="busy || enrol.busy"
+                (click)="chooseMethod(m)"
+              >
+                {{ t(m === 'totp' ? 'mfa.enrollTotpOption' : 'mfa.enrollSmsOption') }}
+              </button>
+            }
+          } @else if (enrol.method === 'totp') {
+            @if (enrol.enrollment; as setup) {
+              <p class="atlas-text">{{ t('mfa.enrollScan') }}</p>
+              @if (setup.qrCode) {
+                <img class="atlas-mfa-qr" data-atlas="mfa-qr" [src]="setup.qrCode" [alt]="t('mfa.enrollQrAlt')" width="180" height="180" />
+              }
+              @if (setup.secret) {
+                <p class="atlas-text" data-atlas="mfa-setup-key">{{ t('mfa.enrollSetupKey') }}: <code>{{ setupKey(setup.secret) }}</code></p>
+              }
+              <label class="atlas-field">
+                <span>{{ t('mfa.enrollFirstCodeLabel') }}</span>
+                <input [class]="cls('formFieldInput', 'atlas-input')" type="text" name="code" autocomplete="one-time-code" inputmode="numeric" [value]="values['code'] ?? ''" (input)="setValue('code', $any($event.target).value)" />
+              </label>
+              @if (enrol.totpCodes >= 2) {
+                <label class="atlas-field">
+                  <span>{{ t('mfa.enrollSecondCodeLabel') }}</span>
+                  <input [class]="cls('formFieldInput', 'atlas-input')" type="text" name="secondCode" autocomplete="one-time-code" inputmode="numeric" [value]="values['secondCode'] ?? ''" (input)="setValue('secondCode', $any($event.target).value)" />
+                </label>
+              }
+            } @else {
+              <p class="atlas-text" aria-live="polite">{{ enrol.busy ? t('mfa.enrollPreparing') : '' }}</p>
+            }
+          } @else {
+            @if (enrol.enrollment; as texted) {
+              <p class="atlas-text" data-atlas="mfa-code-texted" aria-live="polite">{{ t('mfa.codeTextedTo', { phone: texted.phone ?? '' }) }}</p>
+              <label class="atlas-field">
+                <span>{{ t('mfa.codeLabel') }}</span>
+                <input [class]="cls('formFieldInput', 'atlas-input')" type="text" name="code" autocomplete="one-time-code" inputmode="numeric" [value]="values['code'] ?? ''" (input)="setValue('code', $any($event.target).value)" />
+              </label>
+              <button
+                [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                type="button"
+                data-atlas-resend=""
+                [disabled]="busy || enrol.busy"
+                (click)="resendEnrollment()"
+              >
+                {{ t('signIn.resendCode') }}
+              </button>
+            } @else {
+              <label class="atlas-field">
+                <span>{{ t('mfa.phoneLabel') }}</span>
+                <input [class]="cls('formFieldInput', 'atlas-input')" type="tel" name="phone" autocomplete="tel" [value]="values['phone'] ?? ''" (input)="setValue('phone', $any($event.target).value)" />
+              </label>
+              <p class="atlas-text">{{ t('mfa.phoneHint') }}</p>
+            }
+          }
+          @for (error of enrol.errors; track $index) {
+            <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
+          }
+          @if (enrol.method !== null && enrol.options.length > 1) {
+            @for (other of otherMethods(enrol); track other) {
+              <button
+                [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                type="button"
+                [attr.data-atlas-mfa-method]="other"
+                [disabled]="busy || enrol.busy"
+                (click)="chooseMethod(other)"
+              >
+                {{ t(other === 'totp' ? 'mfa.enrollTotpOption' : 'mfa.enrollSmsOption') }}
+              </button>
+            }
+          }
+        }
         @for (f of fields(); track $index) {
           @if (f.kind === 'input') {
             <label class="atlas-field">
@@ -1294,6 +1754,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
+          } @else if (f.kind === 'alert') {
+            <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ t(f.labelKey) }}</p>
           } @else {
             <p>{{ t(f.labelKey) }}</p>
           }
@@ -1304,11 +1766,53 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }
 
         @if (showSubmit()) {
-          <button [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy" type="submit">
-            {{ t('signIn.submit') }}
+          <button [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy || (enrolling() && !!enrollmentState?.busy)" type="submit">
+            {{ t(submitKey()) }}
           </button>
         }
 
+        @if (showSmsSecondFactor()) {
+          @if (smsSecondFactorSentTo(); as sentTo) {
+            <p class="atlas-text" data-atlas="sms-second-factor-sent" aria-live="polite">
+              {{ t('mfa.codeTextedTo', { phone: sentTo }) }}
+            </p>
+          } @else {
+            <button
+              [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+              type="button"
+              data-atlas="sms-second-factor"
+              [disabled]="busy || !!textedSecondFactor?.busy"
+              (click)="smsSecondFactor.emit()"
+            >
+              {{ textedSecondFactor?.busy ? t('signIn.sending') : t('mfa.smsCodeOption') }}
+            </button>
+            @if (textedSecondFactor?.error; as message) {
+              <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ message }}</p>
+            }
+          }
+        }
+
+        @if (showEmailSecondFactor()) {
+          @if (emailSecondFactorSentTo(); as sentTo) {
+            <p class="atlas-text" data-atlas="email-second-factor-sent" aria-live="polite">
+              {{ t('signIn.codeSentTo', { email: sentTo }) }}
+            </p>
+          } @else {
+            <button
+              [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+              type="button"
+              data-atlas="email-second-factor"
+              [disabled]="busy || !!emailedSecondFactor?.busy"
+              (click)="emailSecondFactor.emit()"
+            >
+              {{ emailedSecondFactor?.busy ? t('signIn.sending') : t('signIn.emailCodeOption') }}
+            </button>
+            @if (emailedSecondFactor?.error; as message) {
+              <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ message }}</p>
+            }
+          }
+        }
+
         @if (showEmailCodeOption()) {
           <button
             [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
@@ -1331,6 +1835,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], errors: [{
                 type: Input
+            }], sessionKept: [{
+                type: Input
             }], titleKey: [{
                 type: Input
             }], captcha: [{
@@ -1343,12 +1849,148 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Output
             }], chooseFactor: [{
                 type: Output
+            }], offerEmailSecondFactor: [{
+                type: Input
+            }], emailedSecondFactor: [{
+                type: Input
+            }], emailSecondFactor: [{
+                type: Output
+            }], offerSmsSecondFactor: [{
+                type: Input
+            }], textedSecondFactor: [{
+                type: Input
+            }], smsSecondFactor: [{
+                type: Output
+            }], enrollment: [{
+                type: Input
+            }], enrollmentState: [{
+                type: Input
+            }], emailVerification: [{
+                type: Input
+            }], resend: [{
+                type: Output
             }] } });
 /** A read-only message row: `labelKey` holds the i18n key of the text to show. */
 function msg(labelKey) {
     return { kind: 'message', name: '', labelKey, type: 'text' };
 }
 
+/**
+ * The recovery codes a mid-sign-in MFA enrolment came with, shown once before
+ * the sign-in finishes: copy them, download them as a .txt file, then
+ * "I've saved my codes" (`saved`) exchanges the ticket. The codes live only in
+ * the flow controller's memory and are forgotten once saved.
+ */
+class RecoveryCodesComponent {
+    atlas = inject(AtlasService);
+    cdr = inject(ChangeDetectorRef);
+    codes = [];
+    busy = false;
+    saved = new EventEmitter();
+    canCopy = typeof navigator !== 'undefined' && !!navigator.clipboard?.writeText;
+    canDownload = canDownloadRecoveryCodes();
+    copied = false;
+    ngOnChanges() {
+        this.copied = false;
+    }
+    t(key) {
+        return translate(this.atlas.localization, key);
+    }
+    cls(key, base) {
+        return classFor(key, this.atlas.appearance, base);
+    }
+    copy() {
+        void copyRecoveryCodes(this.codes).then((ok) => {
+            this.copied = ok;
+            this.cdr.markForCheck();
+        });
+    }
+    download() {
+        downloadRecoveryCodes(this.codes);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RecoveryCodesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: RecoveryCodesComponent, isStandalone: true, selector: "atlas-recovery-codes", inputs: { codes: "codes", busy: "busy" }, outputs: { saved: "saved" }, usesOnChanges: true, ngImport: i0, template: `
+    <div [class]="cls('card', 'atlas-card')" data-atlas="recovery-codes">
+      <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('mfa.recoveryCodesTitle') }}</h1>
+      <p class="atlas-text">{{ t('mfa.recoveryCodesHelp') }}</p>
+      <ul
+        class="atlas-recovery-codes"
+        data-atlas="recovery-codes-list"
+        style="list-style:none;padding:0;margin:8px 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center"
+      >
+        @for (code of codes; track code) {
+          <li><code>{{ code }}</code></li>
+        }
+      </ul>
+      <div class="atlas-alternatives">
+        @if (canCopy) {
+          <button [class]="cls('formButtonSecondary', 'atlas-button-secondary')" type="button" data-atlas="recovery-codes-copy" (click)="copy()">
+            {{ t('mfa.recoveryCodesCopy') }}
+          </button>
+        }
+        @if (canDownload) {
+          <button [class]="cls('formButtonSecondary', 'atlas-button-secondary')" type="button" data-atlas="recovery-codes-download" (click)="download()">
+            {{ t('mfa.recoveryCodesDownload') }}
+          </button>
+        }
+      </div>
+      @if (copied) {
+        <p class="atlas-text" aria-live="polite" data-atlas="recovery-codes-copied">{{ t('mfa.recoveryCodesCopied') }}</p>
+      }
+      <button [class]="cls('formButtonPrimary', 'atlas-button')" type="button" data-atlas="recovery-codes-saved" [disabled]="busy" (click)="saved.emit()">
+        {{ t('mfa.recoveryCodesSaved') }}
+      </button>
+    </div>
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: RecoveryCodesComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-recovery-codes',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    <div [class]="cls('card', 'atlas-card')" data-atlas="recovery-codes">
+      <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('mfa.recoveryCodesTitle') }}</h1>
+      <p class="atlas-text">{{ t('mfa.recoveryCodesHelp') }}</p>
+      <ul
+        class="atlas-recovery-codes"
+        data-atlas="recovery-codes-list"
+        style="list-style:none;padding:0;margin:8px 0 12px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;text-align:center"
+      >
+        @for (code of codes; track code) {
+          <li><code>{{ code }}</code></li>
+        }
+      </ul>
+      <div class="atlas-alternatives">
+        @if (canCopy) {
+          <button [class]="cls('formButtonSecondary', 'atlas-button-secondary')" type="button" data-atlas="recovery-codes-copy" (click)="copy()">
+            {{ t('mfa.recoveryCodesCopy') }}
+          </button>
+        }
+        @if (canDownload) {
+          <button [class]="cls('formButtonSecondary', 'atlas-button-secondary')" type="button" data-atlas="recovery-codes-download" (click)="download()">
+            {{ t('mfa.recoveryCodesDownload') }}
+          </button>
+        }
+      </div>
+      @if (copied) {
+        <p class="atlas-text" aria-live="polite" data-atlas="recovery-codes-copied">{{ t('mfa.recoveryCodesCopied') }}</p>
+      }
+      <button [class]="cls('formButtonPrimary', 'atlas-button')" type="button" data-atlas="recovery-codes-saved" [disabled]="busy" (click)="saved.emit()">
+        {{ t('mfa.recoveryCodesSaved') }}
+      </button>
+    </div>
+  `,
+                }]
+        }], propDecorators: { codes: [{
+                type: Input
+            }], busy: [{
+                type: Input
+            }], saved: [{
+                type: Output
+            }] } });
+
 /**
  * The server-driven sign-in / sign-up engine, shared by `<atlas-sign-in>` and
  * `<atlas-sign-up>` — the Angular counterpart of React's `useFlow` hook.
@@ -1374,6 +2016,11 @@ class AtlasFlowController {
      * resolves, or when the server could not be reached.
      */
     settings = signal(null);
+    /**
+     * The method this browser last signed in with (`password`, `oauth_github`, …)
+     * for the "Last used" hint; null when none, or the instance turned it off.
+     */
+    lastMethod = signal(null);
     /** The sign-in captcha (identifier step / `needs_captcha` challenge). */
     captcha = createCaptchaController(undefined, {
         // The Atlas captcha's words follow the form's catalog (read when drawn).
@@ -1393,6 +2040,21 @@ class AtlasFlowController {
      * otherwise.
      */
     preparedFactor = signal(null);
+    /**
+     * "Email me a code instead" at the second factor ({@link sendEmailSecondFactor}):
+     * in flight, where the code went, or why it was not sent. Null until asked,
+     * and again once the flow leaves that step.
+     */
+    emailSecondFactor = signal(null);
+    /** "Text me a code instead" at the second factor ({@link sendSmsSecondFactor}): as {@link emailSecondFactor}. */
+    smsSecondFactor = signal(null);
+    /**
+     * The MFA enrolment step (`needs_mfa_enrollment`): the authenticator app's
+     * setup (QR code, setup key) or a texted code. Started and reset with the flow.
+     */
+    enrollment;
+    /** {@link enrollment}'s state, for templates. */
+    enrollmentState;
     pollTimer = null;
     identifier = '';
     constructor(client, reload, pending, 
@@ -1404,7 +2066,23 @@ class AtlasFlowController {
         // 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.enrollment = createMfaEnrollment(this.client, () => this.mfaChoices());
+        this.enrollmentState = signal(this.enrollment.state);
+        this.enrollment.subscribe((next) => this.enrollmentState.set(next));
         this.syncCaptcha();
+        this.syncEnrollment();
+    }
+    /** What the app lets the MFA steps offer (from {@link settings}). */
+    mfaChoices() {
+        return mfaChoicesFrom(this.settings()?.account);
+    }
+    /** Start the enrolment step for its attempt, or reset it once the flow leaves. */
+    syncEnrollment() {
+        const attempt = this.state().attempt;
+        if (attempt?.status === 'needs_mfa_enrollment' && attempt.id)
+            this.enrollment.start(attempt.id);
+        else
+            this.enrollment.reset();
     }
     /** Fetch the instance's public settings and draw whatever captcha they require. */
     async loadSettings() {
@@ -1412,6 +2090,8 @@ class AtlasFlowController {
         if (loaded) {
             this.settings.set(loaded);
             this.syncCaptcha();
+            if (loaded.account.lastSignInMethod)
+                this.lastMethod.set(await fetchLastSignInMethod(this.client));
         }
     }
     /**
@@ -1466,11 +2146,18 @@ class AtlasFlowController {
         this.signUpCaptchaDrawn.set(this.signUpCaptcha.needed);
     }
     setState(next) {
+        const previousId = this.state().attempt?.id ?? null;
         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);
+        // An emailed second-factor code belongs to the second-factor step of this attempt.
+        if (next.attempt?.status !== 'needs_second_factor' || (next.attempt?.id ?? null) !== previousId) {
+            this.emailSecondFactor.set(null);
+            this.smsSecondFactor.set(null);
+        }
         this.syncCaptcha();
+        this.syncEnrollment();
         this.autoSend();
     }
     autoSentFor = null;
@@ -1519,18 +2206,89 @@ class AtlasFlowController {
         });
         await this.finish(next);
     }
+    /**
+     * "Email me a code instead" at the second factor (the instance's
+     * `account.emailSecondFactor`): mails a code to the account's verified email;
+     * it is then posted with {@link submit} like any 2FA code.
+     */
+    async sendEmailSecondFactor() {
+        await this.sendSecondFactorCode('email_code', this.emailSecondFactor);
+    }
+    /**
+     * "Text me a code instead" at the second factor (where the app offers texted
+     * codes, {@link mfaChoices}`().sms`): texts a code to the account's enrolled
+     * phone; it is then posted with {@link submit} like any 2FA code.
+     */
+    async sendSmsSecondFactor() {
+        await this.sendSecondFactorCode('sms', this.smsSecondFactor);
+    }
+    async sendSecondFactorCode(strategy, out) {
+        const id = this.state().attempt?.id;
+        if (!id)
+            return;
+        out.set({ busy: true });
+        try {
+            const { sentTo } = await prepareSecondFactorCode(this.client, id, strategy);
+            out.set({ sentTo });
+        }
+        catch (error) {
+            out.set({ error: error instanceof Error ? error.message : this.t('error.generic') });
+        }
+    }
+    /** Resend a sign-up's emailed code / link (the earlier one stops working). */
+    async resendSignUp() {
+        this.state.update((current) => ({ ...current, busy: true, errors: [] }));
+        this.state.set(await resendSignUpVerification(this.client, this.state()));
+    }
+    /**
+     * Start a passkey-only sign-up (`POST /v1/client/sign_ups/passkey`) from the
+     * create-account form's values — no password. Offered when the instance's
+     * `account.passkeySignUp` is set.
+     */
+    async createWithPasskey(values, consent = true) {
+        this.state.update((current) => ({ ...current, busy: true, errors: [] }));
+        await this.finish(await createPasskeySignUp(this.client, values, { consent, captcha: this.signUpCaptcha, t: this.t }));
+    }
+    /** The passkey-only sign-up's last step: create the passkey, and with it the account. */
+    async createPasskey() {
+        this.state.update((current) => ({ ...current, busy: true, errors: [] }));
+        await this.finish(await finishPasskeySignUp(this.client, this.state(), { t: this.t }));
+    }
+    /**
+     * The recovery codes an MFA enrolment just completed the sign-in with, shown
+     * once before it finishes ({@link saveRecoveryCodes}); null otherwise. They
+     * live only in this controller's memory.
+     */
+    recoveryCodes() {
+        return pendingRecoveryCodes(this.state());
+    }
+    /** "I've saved my codes": forget the recovery codes and finish the sign-in. */
+    async saveRecoveryCodes() {
+        await this.finish(acknowledgeRecoveryCodes(this.state()));
+    }
     async finish(next) {
-        this.setState(next);
+        // An enrolment's recovery codes are shown first; `saveRecoveryCodes` finishes.
+        if (pendingRecoveryCodes(next)) {
+            this.setState({ ...next, busy: false });
+            return;
+        }
         if (next.attempt?.status === 'complete') {
+            // Stays busy until this browser actually holds the session: the completion
+            // alone says nothing about whether the cookie was kept.
+            this.setState({ ...next, busy: true });
+            let exchanged = true;
             if (next.ticket) {
-                await this.client.post('/v1/client/tickets/exchange', {
+                const res = await this.client.post('/v1/client/tickets/exchange', {
                     attempt_id: next.attempt.id,
                     ticket: next.ticket,
                 });
+                exchanged = res.ok;
             }
-            await this.reload();
+            const kept = exchanged && (await this.reload());
+            this.setState({ ...next, busy: false, sessionKept: kept });
         }
         else {
+            this.setState(next);
             // A magic-link step may now be pollable (a link opened on another device).
             this.syncPolling();
         }
@@ -1551,15 +2309,19 @@ class AtlasFlowController {
             void (async () => {
                 const { state: next, ticket } = await pollAttempt(this.client, this.state());
                 this.setState(next);
+                // e.g. a passkey sign-up whose email was just proven: only this tab can go on.
+                if (!ticket && !shouldKeepPolling(next))
+                    this.stopPolling();
                 if (!ticket || !next.attempt)
                     return;
                 // The ticket is exchanged by a normal request, so no session token ever
                 // appears in a URL.
-                await this.client.post('/v1/client/tickets/exchange', {
+                const res = await this.client.post('/v1/client/tickets/exchange', {
                     attempt_id: next.attempt.id,
                     ticket,
                 });
-                await this.reload();
+                const kept = res.ok && (await this.reload());
+                this.setState({ ...this.state(), sessionKept: kept });
                 this.stopPolling();
             })();
         }, 2_000);
@@ -1592,6 +2354,37 @@ class SignInComponent {
     atlas = inject(AtlasService);
     /** Where to send the user once the flow completes. Reserved for host routing. */
     afterUrl;
+    /**
+     * Where "No account? Sign up" goes. Default: the instance's hosted sign-up
+     * page (carrying the visitor's referral). `null` hides it. Always shown, never
+     * only after a failed sign-in, so it says nothing about whether an email has an account.
+     */
+    signUpUrl;
+    t(key) {
+        return translate(this.atlas.localization, key);
+    }
+    /** "Last used: Password" on the identifier step, when the instance shows the hint. */
+    lastUsedLabel() {
+        if (this.flow.state().attempt)
+            return null;
+        return lastUsedMethodLabel(this.flow.lastMethod(), (key) => this.t(key));
+    }
+    signUpHref() {
+        if (this.signUpUrl === null)
+            return null;
+        if (this.signUpUrl)
+            return this.signUpUrl;
+        try {
+            return signUp({
+                frontendApi: this.atlas.frontendApi,
+                redirectUrl: this.afterUrl ?? (typeof window !== 'undefined' ? window.location.href : undefined),
+                navigate: false,
+            });
+        }
+        catch {
+            return null;
+        }
+    }
     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, (key) => translate(this.atlas.localization, key));
@@ -1608,19 +2401,42 @@ class SignInComponent {
         this.flow.destroy();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignInComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.12", type: SignInComponent, isStandalone: true, selector: "atlas-sign-in", inputs: { afterUrl: "afterUrl" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SignInComponent, isStandalone: true, selector: "atlas-sign-in", inputs: { afterUrl: "afterUrl", signUpUrl: "signUpUrl" }, ngImport: i0, template: `
+    @if (lastUsedLabel(); as label) {
+      <p class="atlas-text atlas-last-used-hint" data-atlas="last-used" [attr.data-atlas-method]="flow.lastMethod()">
+        {{ t('signIn.lastUsed') }}: {{ label }}
+      </p>
+    }
+    @if (flow.recoveryCodes(); as codes) {
+      <atlas-recovery-codes [codes]="codes" [busy]="flow.state().busy" (saved)="flow.saveRecoveryCodes()"></atlas-recovery-codes>
+    } @else {
     <atlas-attempt-flow
       [attempt]="flow.state().attempt"
       [busy]="flow.state().busy"
       [errors]="flow.state().errors"
+      [sessionKept]="flow.state().sessionKept"
       titleKey="signIn.title"
       [captcha]="flow.captchaDrawn() ? flow.captcha : null"
       [firstFactors]="flow.firstFactors()"
       [preparedFactor]="flow.preparedFactor()"
+      [offerEmailSecondFactor]="flow.settings()?.account?.emailSecondFactor === true"
+      [emailedSecondFactor]="flow.emailSecondFactor()"
       (submitFlow)="flow.submit($event)"
       (chooseFactor)="flow.prepare($event)"
+      [offerSmsSecondFactor]="flow.settings() !== null && flow.mfaChoices().sms"
+      [textedSecondFactor]="flow.smsSecondFactor()"
+      [enrollment]="flow.enrollment"
+      [enrollmentState]="flow.enrollmentState()"
+      (emailSecondFactor)="flow.sendEmailSecondFactor()"
+      (smsSecondFactor)="flow.sendSmsSecondFactor()"
     ></atlas-attempt-flow>
-  `, 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 });
+    }
+    @if (flow.state().attempt?.status !== 'complete' && signUpHref(); as href) {
+      <p class="atlas-footer" data-atlas-sign-up-prompt="">
+        {{ t('signIn.noAccount') }} <a class="atlas-link" [href]="href">{{ t('signIn.signUpLink') }}</a>
+      </p>
+    }
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "sessionKept", "titleKey", "captcha", "firstFactors", "preparedFactor", "offerEmailSecondFactor", "emailedSecondFactor", "offerSmsSecondFactor", "textedSecondFactor", "enrollment", "enrollmentState", "emailVerification"], outputs: ["submitFlow", "chooseFactor", "emailSecondFactor", "smsSecondFactor", "resend"] }, { kind: "component", type: RecoveryCodesComponent, selector: "atlas-recovery-codes", inputs: ["codes", "busy"], outputs: ["saved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
@@ -1628,23 +2444,48 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'atlas-sign-in',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AttemptFlowComponent],
+                    imports: [AttemptFlowComponent, RecoveryCodesComponent],
                     template: `
+    @if (lastUsedLabel(); as label) {
+      <p class="atlas-text atlas-last-used-hint" data-atlas="last-used" [attr.data-atlas-method]="flow.lastMethod()">
+        {{ t('signIn.lastUsed') }}: {{ label }}
+      </p>
+    }
+    @if (flow.recoveryCodes(); as codes) {
+      <atlas-recovery-codes [codes]="codes" [busy]="flow.state().busy" (saved)="flow.saveRecoveryCodes()"></atlas-recovery-codes>
+    } @else {
     <atlas-attempt-flow
       [attempt]="flow.state().attempt"
       [busy]="flow.state().busy"
       [errors]="flow.state().errors"
+      [sessionKept]="flow.state().sessionKept"
       titleKey="signIn.title"
       [captcha]="flow.captchaDrawn() ? flow.captcha : null"
       [firstFactors]="flow.firstFactors()"
       [preparedFactor]="flow.preparedFactor()"
+      [offerEmailSecondFactor]="flow.settings()?.account?.emailSecondFactor === true"
+      [emailedSecondFactor]="flow.emailSecondFactor()"
       (submitFlow)="flow.submit($event)"
       (chooseFactor)="flow.prepare($event)"
+      [offerSmsSecondFactor]="flow.settings() !== null && flow.mfaChoices().sms"
+      [textedSecondFactor]="flow.smsSecondFactor()"
+      [enrollment]="flow.enrollment"
+      [enrollmentState]="flow.enrollmentState()"
+      (emailSecondFactor)="flow.sendEmailSecondFactor()"
+      (smsSecondFactor)="flow.sendSmsSecondFactor()"
     ></atlas-attempt-flow>
+    }
+    @if (flow.state().attempt?.status !== 'complete' && signUpHref(); as href) {
+      <p class="atlas-footer" data-atlas-sign-up-prompt="">
+        {{ t('signIn.noAccount') }} <a class="atlas-link" [href]="href">{{ t('signIn.signUpLink') }}</a>
+      </p>
+    }
   `,
                 }]
         }], propDecorators: { afterUrl: [{
                 type: Input
+            }], signUpUrl: [{
+                type: Input
             }] } });
 
 /**
@@ -1661,6 +2502,12 @@ class SignUpFormComponent {
     busy = false;
     errors = [];
     captcha = null;
+    /** Passkey-only sign-up: no password field; the email per the instance's mode. */
+    passkey = null;
+    /** Whether the password / passkey toggle is shown (both are offered). */
+    switchable = false;
+    /** The user asked for the other sign-up method. */
+    switchMode = new EventEmitter();
     /** Emits the typed values and the consent tick when the form is submitted. */
     submitSignUp = new EventEmitter();
     values = {};
@@ -1682,8 +2529,17 @@ class SignUpFormComponent {
     }
     /** Email + password sign-up cannot complete: the app cannot send the verification email. */
     emailUnavailable() {
+        // A passkey sign-up that collects no email (or an unproven one) sends no mail.
+        if (this.passkey && this.passkey.email !== 'required')
+            return false;
         return this.settings?.emailDelivery?.passwordSignUp === false;
     }
+    showEmail() {
+        return !this.passkey || this.passkey.email !== 'off';
+    }
+    emailRequired() {
+        return !this.passkey || this.passkey.email === 'required';
+    }
     fields() {
         return this.settings?.signUpFields ?? [];
     }
@@ -1730,7 +2586,7 @@ class SignUpFormComponent {
         });
     }
     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: `
+    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", passkey: "passkey", switchable: "switchable" }, outputs: { switchMode: "switchMode", submitSignUp: "submitSignUp" }, ngImport: i0, template: `
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('signUp.title') }}</h1>
 
@@ -1819,14 +2675,17 @@ class SignUpFormComponent {
           }
         }
 
+        @if (showEmail()) {
         <label [class]="cls('formField', 'atlas-field')">
-          <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('signUp.emailLabel') }}</span>
+          <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{
+            emailRequired() ? t('signUp.emailLabel') : t('signUp.optionalField', { label: t('signUp.emailLabel') })
+          }}</span>
           <input
             [class]="cls('formFieldInput', 'atlas-input')"
             type="email"
             name="email"
             autocomplete="email"
-            required
+            [required]="emailRequired()"
             [value]="values['email'] ?? ''"
             (input)="setValue('email', $any($event.target).value)"
           />
@@ -1834,7 +2693,11 @@ class SignUpFormComponent {
             <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
+        }
 
+        @if (passkey) {
+          <p class="atlas-text">{{ t('signUp.passkeyIntro') }}</p>
+        } @else {
         <label [class]="cls('formField', 'atlas-field')">
           <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('signUp.passwordLabel') }}</span>
           <input
@@ -1850,6 +2713,7 @@ class SignUpFormComponent {
             <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
+        }
 
         @if (showLegal()) {
           <label [class]="cls('formField', 'atlas-consent')">
@@ -1890,6 +2754,19 @@ class SignUpFormComponent {
         >
           {{ t('signUp.submit') }}
         </button>
+        @if (switchable) {
+          <div class="atlas-alternatives">
+            <button
+              type="button"
+              [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+              [attr.data-atlas-sign-up-mode]="passkey ? 'password' : 'passkey'"
+              [disabled]="busy"
+              (click)="switchMode.emit()"
+            >
+              {{ t(passkey ? 'signUp.passwordOption' : 'signUp.passkeyOption') }}
+            </button>
+          </div>
+        }
       </form>
       }
     </div>
@@ -1991,14 +2868,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           }
         }
 
+        @if (showEmail()) {
         <label [class]="cls('formField', 'atlas-field')">
-          <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('signUp.emailLabel') }}</span>
+          <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{
+            emailRequired() ? t('signUp.emailLabel') : t('signUp.optionalField', { label: t('signUp.emailLabel') })
+          }}</span>
           <input
             [class]="cls('formFieldInput', 'atlas-input')"
             type="email"
             name="email"
             autocomplete="email"
-            required
+            [required]="emailRequired()"
             [value]="values['email'] ?? ''"
             (input)="setValue('email', $any($event.target).value)"
           />
@@ -2006,7 +2886,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
+        }
 
+        @if (passkey) {
+          <p class="atlas-text">{{ t('signUp.passkeyIntro') }}</p>
+        } @else {
         <label [class]="cls('formField', 'atlas-field')">
           <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('signUp.passwordLabel') }}</span>
           <input
@@ -2022,6 +2906,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
           }
         </label>
+        }
 
         @if (showLegal()) {
           <label [class]="cls('formField', 'atlas-consent')">
@@ -2062,6 +2947,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         >
           {{ t('signUp.submit') }}
         </button>
+        @if (switchable) {
+          <div class="atlas-alternatives">
+            <button
+              type="button"
+              [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+              [attr.data-atlas-sign-up-mode]="passkey ? 'password' : 'passkey'"
+              [disabled]="busy"
+              (click)="switchMode.emit()"
+            >
+              {{ t(passkey ? 'signUp.passwordOption' : 'signUp.passkeyOption') }}
+            </button>
+          </div>
+        }
       </form>
       }
     </div>
@@ -2075,6 +2973,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], captcha: [{
                 type: Input
+            }], passkey: [{
+                type: Input
+            }], switchable: [{
+                type: Input
+            }], switchMode: [{
+                type: Output
             }], submitSignUp: [{
                 type: Output
             }] } });
@@ -2096,23 +3000,68 @@ class SignUpComponent {
     /** 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, (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();
+    /** Password or passkey-only sign-up (the latter when the instance offers it). */
+    mode = signal('password');
+    canPasskey() {
+        return !!this.flow.settings()?.account.passkeySignUp && passkeysSupported();
     }
-    ngOnDestroy() {
-        this.flow.destroy();
+    passkeyForm() {
+        const offer = this.flow.settings()?.account.passkeySignUp ?? null;
+        return this.mode() === 'passkey' && offer && this.canPasskey() ? { email: offer.email } : null;
     }
-    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: "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"
+    toggleMode() {
+        this.flow.state.update((current) => ({ ...current, errors: [] }));
+        this.mode.set(this.passkeyForm() ? 'password' : 'passkey');
+    }
+    awaitingPasskey() {
+        return awaitingPasskey(this.flow.state().attempt);
+    }
+    t(key) {
+        return translate(this.atlas.localization, key);
+    }
+    cls(key, base) {
+        return classFor(key, this.atlas.appearance, base);
+    }
+    errorText(error) {
+        const layer = this.atlas.errorLocalization;
+        return localizedErrorMessage(error, layer ?? this.atlas.localization, this.atlas.localization);
+    }
+    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: "17.0.0", version: "17.3.12", type: SignUpComponent, isStandalone: true, selector: "atlas-sign-up", inputs: { afterUrl: "afterUrl" }, ngImport: i0, template: `
+    @if (awaitingPasskey()) {
+      <div [class]="cls('card', 'atlas-card')" data-atlas-passkey-sign-up="">
+        <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('signUp.title') }}</h1>
+        @for (error of flow.state().errors; track error.code) {
+          <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ errorText(error) }}</p>
+        }
+        <p class="atlas-text">{{ t('signUp.passkeyPrompt') }}</p>
+        <button
+          [class]="cls('formButtonPrimary', 'atlas-button')"
+          type="button"
+          [disabled]="flow.state().busy"
+          (click)="flow.createPasskey()"
+        >
+          {{ t('signUp.passkeyCreate') }}
+        </button>
+      </div>
+    } @else if (flow.state().attempt) {
+      <atlas-attempt-flow
+        [attempt]="flow.state().attempt"
+        [busy]="flow.state().busy"
         [errors]="flow.state().errors"
+        [sessionKept]="flow.state().sessionKept"
         titleKey="signUp.title"
+        [emailVerification]="flow.settings()?.account?.emailVerification ?? 'code'"
         (submitFlow)="flow.submit($event)"
+        (resend)="flow.resendSignUp()"
       ></atlas-attempt-flow>
     } @else {
       <atlas-sign-up-form
@@ -2120,10 +3069,15 @@ class SignUpComponent {
         [busy]="flow.state().busy"
         [errors]="flow.state().errors"
         [captcha]="flow.signUpCaptchaDrawn() ? flow.signUpCaptcha : null"
-        (submitSignUp)="flow.create($event.values, $event.consent)"
+        [passkey]="passkeyForm()"
+        [switchable]="canPasskey()"
+        (switchMode)="toggleMode()"
+        (submitSignUp)="
+          passkeyForm() ? flow.createWithPasskey($event.values, $event.consent) : 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 });
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "sessionKept", "titleKey", "captcha", "firstFactors", "preparedFactor", "offerEmailSecondFactor", "emailedSecondFactor", "offerSmsSecondFactor", "textedSecondFactor", "enrollment", "enrollmentState", "emailVerification"], outputs: ["submitFlow", "chooseFactor", "emailSecondFactor", "smsSecondFactor", "resend"] }, { kind: "component", type: SignUpFormComponent, selector: "atlas-sign-up-form", inputs: ["settings", "busy", "errors", "captcha", "passkey", "switchable"], outputs: ["switchMode", "submitSignUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpComponent, decorators: [{
             type: Component,
@@ -2133,13 +3087,32 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AttemptFlowComponent, SignUpFormComponent],
                     template: `
-    @if (flow.state().attempt) {
+    @if (awaitingPasskey()) {
+      <div [class]="cls('card', 'atlas-card')" data-atlas-passkey-sign-up="">
+        <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('signUp.title') }}</h1>
+        @for (error of flow.state().errors; track error.code) {
+          <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ errorText(error) }}</p>
+        }
+        <p class="atlas-text">{{ t('signUp.passkeyPrompt') }}</p>
+        <button
+          [class]="cls('formButtonPrimary', 'atlas-button')"
+          type="button"
+          [disabled]="flow.state().busy"
+          (click)="flow.createPasskey()"
+        >
+          {{ t('signUp.passkeyCreate') }}
+        </button>
+      </div>
+    } @else if (flow.state().attempt) {
       <atlas-attempt-flow
         [attempt]="flow.state().attempt"
         [busy]="flow.state().busy"
         [errors]="flow.state().errors"
+        [sessionKept]="flow.state().sessionKept"
         titleKey="signUp.title"
+        [emailVerification]="flow.settings()?.account?.emailVerification ?? 'code'"
         (submitFlow)="flow.submit($event)"
+        (resend)="flow.resendSignUp()"
       ></atlas-attempt-flow>
     } @else {
       <atlas-sign-up-form
@@ -2147,7 +3120,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         [busy]="flow.state().busy"
         [errors]="flow.state().errors"
         [captcha]="flow.signUpCaptchaDrawn() ? flow.signUpCaptcha : null"
-        (submitSignUp)="flow.create($event.values, $event.consent)"
+        [passkey]="passkeyForm()"
+        [switchable]="canPasskey()"
+        (switchMode)="toggleMode()"
+        (submitSignUp)="
+          passkeyForm() ? flow.createWithPasskey($event.values, $event.consent) : flow.create($event.values, $event.consent)
+        "
       ></atlas-sign-up-form>
     }
   `,
@@ -2481,32 +3459,392 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         }] });
 
 /**
- * `<atlas-organization-profile>` — the active organization's surface. The
- * Angular peer of React's `<OrganizationProfile/>`. Management controls are
- * gated on the ACTIVE org role via `*atlasProtect`, matching the server's rule
- * rather than duplicating a looser one. Renders nothing with no active org.
+ * `<atlas-organization-profile>` — the active organization's members (admins
+ * change roles and remove), invitations (admins invite, revoke and resend) and
+ * settings (leave; an admin deletes after confirming their password). The
+ * Angular peer of React's `<OrganizationProfile/>`, on the same headless
+ * controller. Every control is gated on the ACTIVE org role, matching the
+ * server's rule. Renders nothing with no active org. Emits `exit` with `left`
+ * or `deleted`.
  */
 class OrganizationProfileComponent {
     atlas = inject(AtlasService);
-    t(key) {
-        return translate(this.atlas.localization, key);
+    exit = new EventEmitter();
+    client = this.atlas.createFapiClient();
+    controller = null;
+    unsubscribe = null;
+    state = signal(null);
+    tab = signal('members');
+    email = signal('');
+    inviteRole = signal('org:member');
+    confirm = signal(null);
+    needsPassword = signal(false);
+    password = signal('');
+    // The custom-role editor: null = creating, else the id of the role being edited.
+    editingRole = signal(null);
+    roleKey = signal('');
+    roleName = signal('');
+    rolePerms = signal([]);
+    customRoles = computed(() => (this.state()?.roles ?? []).filter((r) => Boolean(r.organization_id)));
+    userId = computed(() => this.atlas.claims()?.sub ?? null);
+    canManage = computed(() => {
+        this.atlas.claims();
+        return this.atlas.has({ permission: 'org:sys_memberships:manage' });
+    });
+    isAdmin = computed(() => this.atlas.organization()?.role === 'org:admin');
+    tabs = computed(() => ['members', ...(this.canManage() ? ['invitations', 'roles'] : []), 'settings']);
+    roles = computed(() => {
+        const roles = this.state()?.roles ?? [];
+        return roles.length > 0 ? roles : [{ key: 'org:member', name: 'org:member' }];
+    });
+    errorMessage = computed(() => {
+        const err = this.state()?.error;
+        if (!err || err.needsReverification)
+            return null;
+        return localizedErrorMessage(err, this.atlas.errorLocalization, this.atlas.localization);
+    });
+    constructor() {
+        effect(() => {
+            const id = this.atlas.organization()?.organization.id ?? null;
+            untracked(() => this.bind(id));
+        });
+        inject(DestroyRef).onDestroy(() => this.unsubscribe?.());
+    }
+    bind(id) {
+        if (this.controller?.organizationId === id)
+            return;
+        this.unsubscribe?.();
+        this.controller = null;
+        this.state.set(null);
+        if (!id)
+            return;
+        const controller = new OrganizationProfileController(this.client, id, {
+            canManage: this.canManage(),
+            onChange: async () => {
+                await this.atlas.reload();
+            },
+        });
+        this.controller = controller;
+        this.unsubscribe = controller.subscribe((next) => this.state.set(next));
+        this.state.set(controller.getState());
+        void controller.load();
+    }
+    t(key, vars) {
+        return translate(this.atlas.localization, key, vars);
     }
     cls(key, base) {
         return classFor(key, this.atlas.appearance, base);
     }
+    memberName(m) {
+        return [m.user?.first_name, m.user?.last_name].filter(Boolean).join(' ') || this.t('organization.unnamedMember');
+    }
+    changeRole(userId, role) {
+        void this.controller?.changeRole(userId, role);
+    }
+    removeMember(userId) {
+        void this.controller?.removeMember(userId);
+    }
+    async sendInvite() {
+        const address = this.email().trim();
+        if (this.controller && address && (await this.controller.invite(address, this.inviteRole())))
+            this.email.set('');
+    }
+    resend(id) {
+        void this.controller?.resendInvitation(id);
+    }
+    revoke(id) {
+        void this.controller?.revokeInvitation(id);
+    }
+    async leave() {
+        if (this.controller && (await this.controller.leave()))
+            this.exit.emit('left');
+        this.confirm.set(null);
+    }
+    async remove() {
+        const controller = this.controller;
+        if (!controller)
+            return;
+        if (this.needsPassword()) {
+            try {
+                await this.atlas.reauthenticate(this.password());
+            }
+            catch {
+                return;
+            }
+            this.password.set('');
+            this.needsPassword.set(false);
+        }
+        if (await controller.deleteOrganization()) {
+            this.exit.emit('deleted');
+            this.confirm.set(null);
+            return;
+        }
+        const err = controller.getState().error;
+        if (err?.needsReverification)
+            this.needsPassword.set(true);
+    }
+    editRole(role) {
+        this.editingRole.set(role.id ?? null);
+        this.roleKey.set(role.key);
+        this.roleName.set(role.name);
+        this.rolePerms.set([...(role.permissions ?? [])]);
+    }
+    resetRoleForm() {
+        this.editingRole.set(null);
+        this.roleKey.set('');
+        this.roleName.set('');
+        this.rolePerms.set([]);
+    }
+    togglePermission(key, on) {
+        this.rolePerms.update((current) => (on ? [...current, key] : current.filter((k) => k !== key)));
+    }
+    async saveRole() {
+        const controller = this.controller;
+        if (!controller)
+            return;
+        const editing = this.editingRole();
+        const out = editing
+            ? await controller.updateRole(editing, { name: this.roleName().trim(), permissions: this.rolePerms() })
+            : await controller.createRole({ key: this.roleKey().trim(), name: this.roleName().trim(), permissions: this.rolePerms() });
+        if (out)
+            this.resetRoleForm();
+    }
+    deleteRole(role) {
+        if (role.id)
+            void this.controller?.deleteRole(role.id);
+    }
+    cancel() {
+        this.confirm.set(null);
+        this.needsPassword.set(false);
+        this.password.set('');
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrganizationProfileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OrganizationProfileComponent, isStandalone: true, selector: "atlas-organization-profile", ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OrganizationProfileComponent, isStandalone: true, selector: "atlas-organization-profile", outputs: { exit: "exit" }, ngImport: i0, template: `
     @if (atlas.organization(); as membership) {
-      <div [class]="cls('card', 'atlas-card')">
-        <h1>{{ membership.organization.name }}</h1>
-        <p>{{ t('organization.roleLabel') }}: {{ membership.role }}</p>
+      @if (state(); as st) {
+        <div [class]="cls('card', 'atlas-card')" data-atlas="organization-profile">
+          <h1>{{ membership.organization.name }}</h1>
+          <p>{{ t('organization.roleLabel') }}: {{ membership.role }}</p>
 
-        <button *atlasProtect="{ permission: 'org:sys_memberships:manage' }">
-          {{ t('organization.invite') }}
-        </button>
-      </div>
+          <div [class]="cls('menu', 'atlas-menu')" role="tablist">
+            @for (key of tabs(); track key) {
+              <button
+                type="button"
+                role="tab"
+                [attr.aria-selected]="tab() === key"
+                [class]="cls('menuItem', 'atlas-menu-item')"
+                [attr.data-atlas]="'organization-tab-' + key"
+                (click)="tab.set(key)"
+              >
+                {{ t('organization.' + key) }}
+              </button>
+            }
+          </div>
+
+          @if (errorMessage(); as message) {
+            <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ message }}</p>
+          }
+
+          @if (tab() === 'members') {
+            <ul class="atlas-list" data-atlas="organization-members">
+              @for (m of st.members; track m.id) {
+                <li data-atlas="organization-member">
+                  <span>{{ memberName(m) }}{{ m.user?.id === userId() ? ' ' + t('organization.you') : '' }}</span>
+                  @if (canManage() && m.user && m.user.id !== userId()) {
+                    <select
+                      [attr.aria-label]="t('organization.roleLabel')"
+                      [class]="cls('formFieldInput', 'atlas-input')"
+                      [disabled]="st.busy === 'role:' + m.user.id"
+                      (change)="changeRole(m.user.id, $any($event.target).value)"
+                    >
+                      @for (r of roles(); track r.key) {
+                        <option [value]="r.key" [selected]="r.key === m.role">{{ r.name }}</option>
+                      }
+                    </select>
+                    <button
+                      type="button"
+                      [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                      [disabled]="st.busy === 'remove:' + m.user.id"
+                      (click)="removeMember(m.user.id)"
+                    >
+                      {{ t('organization.remove') }}
+                    </button>
+                  } @else {
+                    <span> · {{ m.role }}</span>
+                  }
+                </li>
+              }
+            </ul>
+          }
+
+          @if (tab() === 'invitations' && canManage()) {
+            <div data-atlas="organization-invitations">
+              <form (submit)="$event.preventDefault(); sendInvite()">
+                <label [class]="cls('formField', 'atlas-field')">
+                  <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.emailLabel') }}</span>
+                  <input
+                    type="email"
+                    [class]="cls('formFieldInput', 'atlas-input')"
+                    [value]="email()"
+                    (input)="email.set($any($event.target).value)"
+                  />
+                </label>
+                <label [class]="cls('formField', 'atlas-field')">
+                  <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.roleLabel') }}</span>
+                  <select [class]="cls('formFieldInput', 'atlas-input')" (change)="inviteRole.set($any($event.target).value)">
+                    @for (r of roles(); track r.key) {
+                      <option [value]="r.key" [selected]="r.key === inviteRole()">{{ r.name }}</option>
+                    }
+                  </select>
+                </label>
+                <button
+                  type="submit"
+                  [class]="cls('formButtonPrimary', 'atlas-button')"
+                  [disabled]="st.busy === 'invite' || !email().trim()"
+                >
+                  {{ t('organization.sendInvite') }}
+                </button>
+              </form>
+              @if (st.invitations.length === 0) {
+                <p class="atlas-text">{{ t('organization.noInvitations') }}</p>
+              } @else {
+                <ul class="atlas-list">
+                  @for (inv of st.invitations; track inv.id) {
+                    <li data-atlas="organization-invitation">
+                      <span>{{ inv.email_address }} · {{ inv.role }}</span>
+                      <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="resend(inv.id)">
+                        {{ t('organization.resend') }}
+                      </button>
+                      <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="revoke(inv.id)">
+                        {{ t('organization.revoke') }}
+                      </button>
+                    </li>
+                  }
+                </ul>
+              }
+            </div>
+          }
+
+          @if (tab() === 'roles' && canManage()) {
+            <div data-atlas="organization-roles">
+              @if (customRoles().length === 0) {
+                <p class="atlas-text">{{ t('organization.noCustomRoles') }}</p>
+              } @else {
+                <ul class="atlas-list">
+                  @for (role of customRoles(); track role.key) {
+                    <li data-atlas="organization-role">
+                      <span>{{ role.name }} · {{ role.key }}</span>
+                      <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="editRole(role)">
+                        {{ t('organization.editRole') }}
+                      </button>
+                      <button
+                        type="button"
+                        [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                        [disabled]="!role.id || st.busy === 'role:delete:' + role.id"
+                        (click)="deleteRole(role)"
+                      >
+                        {{ t('organization.deleteRole') }}
+                      </button>
+                    </li>
+                  }
+                </ul>
+              }
+              <form data-atlas="organization-role-form" (submit)="$event.preventDefault(); saveRole()">
+                @if (!editingRole()) {
+                  <label [class]="cls('formField', 'atlas-field')">
+                    <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.roleKey') }}</span>
+                    <input
+                      name="role_key"
+                      [class]="cls('formFieldInput', 'atlas-input')"
+                      [value]="roleKey()"
+                      (input)="roleKey.set($any($event.target).value)"
+                    />
+                  </label>
+                }
+                <label [class]="cls('formField', 'atlas-field')">
+                  <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.roleName') }}</span>
+                  <input
+                    name="role_name"
+                    [class]="cls('formFieldInput', 'atlas-input')"
+                    [value]="roleName()"
+                    (input)="roleName.set($any($event.target).value)"
+                  />
+                </label>
+                <fieldset [class]="cls('formField', 'atlas-field')">
+                  <legend [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.rolePermissions') }}</legend>
+                  @for (p of st.permissions; track p.key) {
+                    <label data-atlas="organization-role-permission">
+                      <input
+                        type="checkbox"
+                        [value]="p.key"
+                        [checked]="rolePerms().includes(p.key)"
+                        (change)="togglePermission(p.key, $any($event.target).checked)"
+                      />
+                      {{ p.name }}
+                    </label>
+                  }
+                </fieldset>
+                <button
+                  type="submit"
+                  [class]="cls('formButtonPrimary', 'atlas-button')"
+                  [disabled]="!roleName().trim() || (!editingRole() && !roleKey().trim()) || (st.busy ?? '').startsWith('role:')"
+                >
+                  {{ editingRole() ? t('organization.saveRole') : t('organization.createRole') }}
+                </button>
+                @if (editingRole()) {
+                  <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="resetRoleForm()">
+                    {{ t('organization.cancel') }}
+                  </button>
+                }
+              </form>
+            </div>
+          }
+
+          @if (tab() === 'settings') {
+            <div data-atlas="organization-settings">
+              @if (confirm(); as action) {
+                <p class="atlas-text">
+                  {{ t(action === 'leave' ? 'organization.leaveConfirm' : 'organization.deleteConfirm', { name: membership.organization.name }) }}
+                </p>
+                @if (needsPassword()) {
+                  <label [class]="cls('formField', 'atlas-field')">
+                    <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.passwordPrompt') }}</span>
+                    <input
+                      type="password"
+                      autocomplete="current-password"
+                      [class]="cls('formFieldInput', 'atlas-input')"
+                      [value]="password()"
+                      (input)="password.set($any($event.target).value)"
+                    />
+                  </label>
+                }
+                <button
+                  type="button"
+                  [class]="cls('formButtonPrimary', 'atlas-button')"
+                  [disabled]="st.busy === 'leave' || st.busy === 'delete'"
+                  (click)="action === 'leave' ? leave() : remove()"
+                >
+                  {{ t('organization.confirm') }}
+                </button>
+                <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="cancel()">
+                  {{ t('organization.cancel') }}
+                </button>
+              } @else {
+                <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="confirm.set('leave')">
+                  {{ t('organization.leave') }}
+                </button>
+                @if (isAdmin()) {
+                  <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="confirm.set('delete')">
+                    {{ t('organization.delete') }}
+                  </button>
+                }
+              }
+            </div>
+          }
+        </div>
+      }
     }
-  `, isInline: true, dependencies: [{ kind: "directive", type: AtlasProtectDirective, selector: "[atlasProtect]", inputs: ["atlasProtect", "atlasProtectElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrganizationProfileComponent, decorators: [{
             type: Component,
@@ -2514,21 +3852,346 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     selector: 'atlas-organization-profile',
                     standalone: true,
                     changeDetection: ChangeDetectionStrategy.OnPush,
-                    imports: [AtlasProtectDirective],
                     template: `
     @if (atlas.organization(); as membership) {
-      <div [class]="cls('card', 'atlas-card')">
-        <h1>{{ membership.organization.name }}</h1>
-        <p>{{ t('organization.roleLabel') }}: {{ membership.role }}</p>
+      @if (state(); as st) {
+        <div [class]="cls('card', 'atlas-card')" data-atlas="organization-profile">
+          <h1>{{ membership.organization.name }}</h1>
+          <p>{{ t('organization.roleLabel') }}: {{ membership.role }}</p>
 
-        <button *atlasProtect="{ permission: 'org:sys_memberships:manage' }">
-          {{ t('organization.invite') }}
-        </button>
+          <div [class]="cls('menu', 'atlas-menu')" role="tablist">
+            @for (key of tabs(); track key) {
+              <button
+                type="button"
+                role="tab"
+                [attr.aria-selected]="tab() === key"
+                [class]="cls('menuItem', 'atlas-menu-item')"
+                [attr.data-atlas]="'organization-tab-' + key"
+                (click)="tab.set(key)"
+              >
+                {{ t('organization.' + key) }}
+              </button>
+            }
+          </div>
+
+          @if (errorMessage(); as message) {
+            <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ message }}</p>
+          }
+
+          @if (tab() === 'members') {
+            <ul class="atlas-list" data-atlas="organization-members">
+              @for (m of st.members; track m.id) {
+                <li data-atlas="organization-member">
+                  <span>{{ memberName(m) }}{{ m.user?.id === userId() ? ' ' + t('organization.you') : '' }}</span>
+                  @if (canManage() && m.user && m.user.id !== userId()) {
+                    <select
+                      [attr.aria-label]="t('organization.roleLabel')"
+                      [class]="cls('formFieldInput', 'atlas-input')"
+                      [disabled]="st.busy === 'role:' + m.user.id"
+                      (change)="changeRole(m.user.id, $any($event.target).value)"
+                    >
+                      @for (r of roles(); track r.key) {
+                        <option [value]="r.key" [selected]="r.key === m.role">{{ r.name }}</option>
+                      }
+                    </select>
+                    <button
+                      type="button"
+                      [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                      [disabled]="st.busy === 'remove:' + m.user.id"
+                      (click)="removeMember(m.user.id)"
+                    >
+                      {{ t('organization.remove') }}
+                    </button>
+                  } @else {
+                    <span> · {{ m.role }}</span>
+                  }
+                </li>
+              }
+            </ul>
+          }
+
+          @if (tab() === 'invitations' && canManage()) {
+            <div data-atlas="organization-invitations">
+              <form (submit)="$event.preventDefault(); sendInvite()">
+                <label [class]="cls('formField', 'atlas-field')">
+                  <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.emailLabel') }}</span>
+                  <input
+                    type="email"
+                    [class]="cls('formFieldInput', 'atlas-input')"
+                    [value]="email()"
+                    (input)="email.set($any($event.target).value)"
+                  />
+                </label>
+                <label [class]="cls('formField', 'atlas-field')">
+                  <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.roleLabel') }}</span>
+                  <select [class]="cls('formFieldInput', 'atlas-input')" (change)="inviteRole.set($any($event.target).value)">
+                    @for (r of roles(); track r.key) {
+                      <option [value]="r.key" [selected]="r.key === inviteRole()">{{ r.name }}</option>
+                    }
+                  </select>
+                </label>
+                <button
+                  type="submit"
+                  [class]="cls('formButtonPrimary', 'atlas-button')"
+                  [disabled]="st.busy === 'invite' || !email().trim()"
+                >
+                  {{ t('organization.sendInvite') }}
+                </button>
+              </form>
+              @if (st.invitations.length === 0) {
+                <p class="atlas-text">{{ t('organization.noInvitations') }}</p>
+              } @else {
+                <ul class="atlas-list">
+                  @for (inv of st.invitations; track inv.id) {
+                    <li data-atlas="organization-invitation">
+                      <span>{{ inv.email_address }} · {{ inv.role }}</span>
+                      <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="resend(inv.id)">
+                        {{ t('organization.resend') }}
+                      </button>
+                      <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="revoke(inv.id)">
+                        {{ t('organization.revoke') }}
+                      </button>
+                    </li>
+                  }
+                </ul>
+              }
+            </div>
+          }
+
+          @if (tab() === 'roles' && canManage()) {
+            <div data-atlas="organization-roles">
+              @if (customRoles().length === 0) {
+                <p class="atlas-text">{{ t('organization.noCustomRoles') }}</p>
+              } @else {
+                <ul class="atlas-list">
+                  @for (role of customRoles(); track role.key) {
+                    <li data-atlas="organization-role">
+                      <span>{{ role.name }} · {{ role.key }}</span>
+                      <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="editRole(role)">
+                        {{ t('organization.editRole') }}
+                      </button>
+                      <button
+                        type="button"
+                        [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+                        [disabled]="!role.id || st.busy === 'role:delete:' + role.id"
+                        (click)="deleteRole(role)"
+                      >
+                        {{ t('organization.deleteRole') }}
+                      </button>
+                    </li>
+                  }
+                </ul>
+              }
+              <form data-atlas="organization-role-form" (submit)="$event.preventDefault(); saveRole()">
+                @if (!editingRole()) {
+                  <label [class]="cls('formField', 'atlas-field')">
+                    <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.roleKey') }}</span>
+                    <input
+                      name="role_key"
+                      [class]="cls('formFieldInput', 'atlas-input')"
+                      [value]="roleKey()"
+                      (input)="roleKey.set($any($event.target).value)"
+                    />
+                  </label>
+                }
+                <label [class]="cls('formField', 'atlas-field')">
+                  <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.roleName') }}</span>
+                  <input
+                    name="role_name"
+                    [class]="cls('formFieldInput', 'atlas-input')"
+                    [value]="roleName()"
+                    (input)="roleName.set($any($event.target).value)"
+                  />
+                </label>
+                <fieldset [class]="cls('formField', 'atlas-field')">
+                  <legend [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.rolePermissions') }}</legend>
+                  @for (p of st.permissions; track p.key) {
+                    <label data-atlas="organization-role-permission">
+                      <input
+                        type="checkbox"
+                        [value]="p.key"
+                        [checked]="rolePerms().includes(p.key)"
+                        (change)="togglePermission(p.key, $any($event.target).checked)"
+                      />
+                      {{ p.name }}
+                    </label>
+                  }
+                </fieldset>
+                <button
+                  type="submit"
+                  [class]="cls('formButtonPrimary', 'atlas-button')"
+                  [disabled]="!roleName().trim() || (!editingRole() && !roleKey().trim()) || (st.busy ?? '').startsWith('role:')"
+                >
+                  {{ editingRole() ? t('organization.saveRole') : t('organization.createRole') }}
+                </button>
+                @if (editingRole()) {
+                  <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="resetRoleForm()">
+                    {{ t('organization.cancel') }}
+                  </button>
+                }
+              </form>
+            </div>
+          }
+
+          @if (tab() === 'settings') {
+            <div data-atlas="organization-settings">
+              @if (confirm(); as action) {
+                <p class="atlas-text">
+                  {{ t(action === 'leave' ? 'organization.leaveConfirm' : 'organization.deleteConfirm', { name: membership.organization.name }) }}
+                </p>
+                @if (needsPassword()) {
+                  <label [class]="cls('formField', 'atlas-field')">
+                    <span [class]="cls('formFieldLabel', 'atlas-field-label')">{{ t('organization.passwordPrompt') }}</span>
+                    <input
+                      type="password"
+                      autocomplete="current-password"
+                      [class]="cls('formFieldInput', 'atlas-input')"
+                      [value]="password()"
+                      (input)="password.set($any($event.target).value)"
+                    />
+                  </label>
+                }
+                <button
+                  type="button"
+                  [class]="cls('formButtonPrimary', 'atlas-button')"
+                  [disabled]="st.busy === 'leave' || st.busy === 'delete'"
+                  (click)="action === 'leave' ? leave() : remove()"
+                >
+                  {{ t('organization.confirm') }}
+                </button>
+                <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="cancel()">
+                  {{ t('organization.cancel') }}
+                </button>
+              } @else {
+                <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="confirm.set('leave')">
+                  {{ t('organization.leave') }}
+                </button>
+                @if (isAdmin()) {
+                  <button type="button" [class]="cls('formButtonSecondary', 'atlas-button-secondary')" (click)="confirm.set('delete')">
+                    {{ t('organization.delete') }}
+                  </button>
+                }
+              }
+            </div>
+          }
+        </div>
+      }
+    }
+  `,
+                }]
+        }], ctorParameters: () => [], propDecorators: { exit: [{
+                type: Output
+            }] } });
+
+/**
+ * `<atlas-organization-audit-log>` — the active organization's audit trail for
+ * its admins, next to `<atlas-organization-profile>`. The Angular peer of
+ * React's `<OrganizationAuditLog/>`. Renders nothing for a member who may not
+ * read it (the server is the authority; the component just follows it). Labels
+ * are inputs so an app can localise them.
+ */
+class OrganizationAuditLogComponent {
+    /** Entries per page (the server caps it). */
+    pageSize;
+    /** Narrow to one action, or a prefix ending in `.`. */
+    action;
+    labels = {};
+    formatDate = (ms) => new Date(ms).toLocaleString();
+    atlas = inject(AtlasService);
+    /** Created in ngOnInit, once the inputs are set (templates render after it). */
+    log;
+    ngOnInit() {
+        this.log = this.atlas.organizationAuditLog({ pageSize: this.pageSize, action: this.action });
+    }
+    ngOnDestroy() {
+        this.log.destroy();
+    }
+    describe(action) {
+        return describeAuditAction(action);
+    }
+    cls(key, base) {
+        return classFor(key, this.atlas.appearance, base);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrganizationAuditLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: OrganizationAuditLogComponent, isStandalone: true, selector: "atlas-organization-audit-log", inputs: { pageSize: "pageSize", action: "action", labels: "labels", formatDate: "formatDate" }, ngImport: i0, template: `
+    @if (atlas.organization() && !log.state().forbidden) {
+      <div [class]="cls('card', 'atlas-card')" data-atlas="organization-audit-log">
+        <h2 [class]="cls('headerTitle', 'atlas-title')">{{ labels.title ?? 'Audit log' }}</h2>
+        @if (log.state().entries.length === 0 && !log.state().loading) {
+          <p [class]="cls('headerSubtitle', 'atlas-subtitle')">{{ labels.empty ?? 'No activity recorded yet.' }}</p>
+        } @else {
+          <ul [class]="cls('list', 'atlas-audit-list')">
+            @for (entry of log.state().entries; track entry.id) {
+              <li [class]="cls('listItem', 'atlas-audit-item')" [attr.data-action]="entry.action">
+                <strong>{{ describe(entry.action) }}</strong>
+                <span class="atlas-audit-meta">
+                  · {{ formatDate(entry.created_at) }}{{ entry.actor.id ? ' · ' + (labels.actor ?? 'by') + ' ' + entry.actor.type + ' ' + entry.actor.id : '' }}
+                </span>
+              </li>
+            }
+          </ul>
+        }
+        @if (log.state().hasMore) {
+          <button
+            type="button"
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            [disabled]="log.state().loading"
+            (click)="log.loadMore()"
+          >
+            {{ labels.loadMore ?? 'Load more' }}
+          </button>
+        }
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: OrganizationAuditLogComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-organization-audit-log',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (atlas.organization() && !log.state().forbidden) {
+      <div [class]="cls('card', 'atlas-card')" data-atlas="organization-audit-log">
+        <h2 [class]="cls('headerTitle', 'atlas-title')">{{ labels.title ?? 'Audit log' }}</h2>
+        @if (log.state().entries.length === 0 && !log.state().loading) {
+          <p [class]="cls('headerSubtitle', 'atlas-subtitle')">{{ labels.empty ?? 'No activity recorded yet.' }}</p>
+        } @else {
+          <ul [class]="cls('list', 'atlas-audit-list')">
+            @for (entry of log.state().entries; track entry.id) {
+              <li [class]="cls('listItem', 'atlas-audit-item')" [attr.data-action]="entry.action">
+                <strong>{{ describe(entry.action) }}</strong>
+                <span class="atlas-audit-meta">
+                  · {{ formatDate(entry.created_at) }}{{ entry.actor.id ? ' · ' + (labels.actor ?? 'by') + ' ' + entry.actor.type + ' ' + entry.actor.id : '' }}
+                </span>
+              </li>
+            }
+          </ul>
+        }
+        @if (log.state().hasMore) {
+          <button
+            type="button"
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            [disabled]="log.state().loading"
+            (click)="log.loadMore()"
+          >
+            {{ labels.loadMore ?? 'Load more' }}
+          </button>
+        }
       </div>
     }
   `,
                 }]
-        }] });
+        }], propDecorators: { pageSize: [{
+                type: Input
+            }], action: [{
+                type: Input
+            }], labels: [{
+                type: Input
+            }], formatDate: [{
+                type: Input
+            }] } });
 
 /**
  * Every standalone directive and component the SDK ships. Import the array in a
@@ -2552,6 +4215,7 @@ const ATLAS_UI = [
     OrganizationSwitcherComponent,
     UserProfileComponent,
     OrganizationProfileComponent,
+    OrganizationAuditLogComponent,
 ];
 
 /**
@@ -2609,7 +4273,7 @@ class AtlasModule {
         return { ngModule: AtlasModule, providers };
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: AtlasModule, imports: [AtlasSignedInDirective, AtlasSignedOutDirective, AtlasLoadingDirective, AtlasLoadedDirective, AtlasProtectDirective, AtlasRootDirective, SignInComponent, SignUpComponent, UserButtonComponent, OrganizationSwitcherComponent, UserProfileComponent, OrganizationProfileComponent], exports: [AtlasSignedInDirective, AtlasSignedOutDirective, AtlasLoadingDirective, AtlasLoadedDirective, AtlasProtectDirective, AtlasRootDirective, SignInComponent, SignUpComponent, UserButtonComponent, OrganizationSwitcherComponent, UserProfileComponent, OrganizationProfileComponent] });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.12", ngImport: i0, type: AtlasModule, imports: [AtlasSignedInDirective, AtlasSignedOutDirective, AtlasLoadingDirective, AtlasLoadedDirective, AtlasProtectDirective, AtlasRootDirective, SignInComponent, SignUpComponent, UserButtonComponent, OrganizationSwitcherComponent, UserProfileComponent, OrganizationProfileComponent, OrganizationAuditLogComponent], exports: [AtlasSignedInDirective, AtlasSignedOutDirective, AtlasLoadingDirective, AtlasLoadedDirective, AtlasProtectDirective, AtlasRootDirective, SignInComponent, SignUpComponent, UserButtonComponent, OrganizationSwitcherComponent, UserProfileComponent, OrganizationProfileComponent, OrganizationAuditLogComponent] });
     static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasModule });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AtlasModule, decorators: [{
@@ -2622,6 +4286,75 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }] });
 
+/**
+ * `<atlas-impersonation-banner>` — shown only while the active session is an
+ * impersonation, naming the user acted as, with "Return to admin" (or "End
+ * impersonation" when there is no session of the impersonator's to resume).
+ * Emits `ended` with the outcome. The Angular peer of React's
+ * `<ImpersonationBanner/>`.
+ */
+class ImpersonationBannerComponent {
+    atlas = inject(AtlasService);
+    ended = new EventEmitter();
+    busy = signal(false);
+    actor = computed(() => actorFromClaims(this.atlas.claims()) ?? this.atlas.session()?.actor ?? null);
+    canReturn = computed(() => this.actor() !== null && Boolean(this.atlas.session()?.actor_session_id));
+    name = computed(() => {
+        const u = this.atlas.user();
+        return ([u?.first_name, u?.last_name].filter(Boolean).join(' ') ||
+            u?.username ||
+            u?.email_addresses?.find((e) => e.primary)?.email_address ||
+            u?.id ||
+            '');
+    });
+    t(key, vars) {
+        return translate(this.atlas.localization, key, vars);
+    }
+    cls(key, base) {
+        return classFor(key, this.atlas.appearance, base);
+    }
+    async end() {
+        this.busy.set(true);
+        try {
+            this.ended.emit(await this.atlas.endImpersonation());
+        }
+        finally {
+            this.busy.set(false);
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImpersonationBannerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: ImpersonationBannerComponent, isStandalone: true, selector: "atlas-impersonation-banner", outputs: { ended: "ended" }, ngImport: i0, template: `
+    @if (actor()) {
+      <div [class]="cls('card', 'atlas-alert atlas-impersonation-banner')" role="status">
+        <span [class]="cls('headerSubtitle', 'atlas-text')">{{ t('impersonation.banner', { name: name() }) }}</span>
+        <button type="button" [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy()" (click)="end()">
+          {{ canReturn() ? t('impersonation.returnToAdmin') : t('impersonation.end') }}
+        </button>
+      </div>
+    }
+  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: ImpersonationBannerComponent, decorators: [{
+            type: Component,
+            args: [{
+                    selector: 'atlas-impersonation-banner',
+                    standalone: true,
+                    changeDetection: ChangeDetectionStrategy.OnPush,
+                    template: `
+    @if (actor()) {
+      <div [class]="cls('card', 'atlas-alert atlas-impersonation-banner')" role="status">
+        <span [class]="cls('headerSubtitle', 'atlas-text')">{{ t('impersonation.banner', { name: name() }) }}</span>
+        <button type="button" [class]="cls('formButtonPrimary', 'atlas-button')" [disabled]="busy()" (click)="end()">
+          {{ canReturn() ? t('impersonation.returnToAdmin') : t('impersonation.end') }}
+        </button>
+      </div>
+    }
+  `,
+                }]
+        }], propDecorators: { ended: [{
+                type: Output
+            }] } });
+
 /**
  * Route guard factory that gates a route on session — and optionally on a
  * permission/role. The Angular peer of using `<SignedIn>` / `<Protect>` to fence
@@ -2701,5 +4434,5 @@ function atlasChildGuard(options = {}) {
  * Generated bundle index. Do not edit.
  */
 
-export { ATLAS_ANGULAR_SDK, ATLAS_ANGULAR_VERSION, 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 };
+export { ATLAS_ANGULAR_SDK, ATLAS_ANGULAR_VERSION, ATLAS_OPTIONS, ATLAS_UI, AtlasCaptchaSlotDirective, AtlasFlowController, AtlasLoadedDirective, AtlasLoadingDirective, AtlasModule, AtlasOrganizationAuditLog, AtlasProtectDirective, AtlasRootDirective, AtlasService, AtlasSignedInDirective, AtlasSignedOutDirective, AttemptFlowComponent, DEFAULT_TOKENS, EN_US, ImpersonationBannerComponent, OrganizationAuditLogComponent, OrganizationProfileComponent, OrganizationSwitcherComponent, SignInComponent, SignUpComponent, SignUpFormComponent, THEMES, UserButtonComponent, UserProfileComponent, atlasChildGuard, atlasGuard, classFor, cssVariables, explicitTokens, provideAtlas, renderAppearance, resolveTokens, translate, withFallback };
 //# sourceMappingURL=atlasauth-angular.mjs.map