@atlasauth/angular 0.12.0 → 0.14.0

package/dist/fesm2022/atlasauth-angular.mjs

@@ -4,7 +4,7 @@ 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 { createOrganizationAuditLog, POLICY_STRINGS, TokenCache, SignOutNotifier, resolveFrontendApi, withDevBrowser, catalogLocale, configureReferralCapture, FapiClient, SignOutGuard, localizedErrorMessage, reauthenticate, getTemplateToken, getProviderToken, signOutReasonFromClient, readRedirectResult, completeOAuthPopupLanding, mapOAuthPopupPayload, stripRedirectParams, closeOAuthPopupAfterSignIn, SDK_HEADER, sdkHeaderValue, reportSdkAdvisory, readExpiry, msUntilRefresh, policyTranslator, injectPolicyStyles, mountPolicyClickwrap, mountPolicyConsent, controllerForPending, mountPolicyAcceptStep, joinTitles, formatPolicyDate, PolicyGateController, groupSetupKey, enrollmentSubmitKey, nextStep, awaitingSignUpLink, canDownloadRecoveryCodes, copyRecoveryCodes, downloadRecoveryCodes, createCaptchaController, atlasCaptchaLabels, PolicyAcceptanceController, flowFromPending, initialFlow, createMfaEnrollment, mfaChoicesFrom, fetchInstanceSettings, fetchLastSignInMethod, offeredFirstFactors, prepareFactor, signInCaptchaOptions, flowNeedsCaptcha, planFirstFactor, advanceWithCaptcha, loadPolicies, createSignUp, prepareSecondFactorCode, resendSignUpVerification, createPasskeySignUp, finishPasskeySignUp, pendingRecoveryCodes, acknowledgeRecoveryCodes, shouldKeepPolling, pollAttempt, lastUsedMethodLabel, signUp, confirmPolicies, passkeysSupported, awaitingPasskey, listCibaRequests, getCibaPin, decideCibaRequest, setCibaPin, clearCibaPin, OrganizationProfileController, describeAuditAction, actorFromClaims } from '@atlasauth/js';
+import { createOrganizationAuditLog, POLICY_STRINGS, TokenCache, SignOutNotifier, resolveFrontendApi, withDevBrowser, catalogLocale, configureReferralCapture, FapiClient, SignOutGuard, localizedErrorMessage, reauthenticate, getTemplateToken, getProviderToken, signOutReasonFromClient, readRedirectResult, completeOAuthPopupLanding, mapOAuthPopupPayload, stripRedirectParams, closeOAuthPopupAfterSignIn, SDK_HEADER, sdkHeaderValue, reportSdkAdvisory, readExpiry, msUntilRefresh, policyTranslator, injectPolicyStyles, mountPolicyClickwrap, mountPolicyConsent, controllerForPending, mountPolicyAcceptStep, joinTitles, formatPolicyDate, PolicyGateController, groupSetupKey, enrollmentSubmitKey, nextStep, awaitingSignUpLink, canDownloadRecoveryCodes, copyRecoveryCodes, downloadRecoveryCodes, createCaptchaController, atlasCaptchaLabels, PolicyAcceptanceController, flowFromPending, initialFlow, createMfaEnrollment, createPasskeySignInController, startSignInWithAtlas, mfaChoicesFrom, fetchInstanceSettings, fetchLastSignInMethod, offeredFirstFactors, preparePasswordHoldProof, prepareFactor, signInCaptchaOptions, flowNeedsCaptcha, planFirstFactor, attemptPasswordHoldProof, advanceWithCaptcha, loadPolicies, createSignUp, prepareSecondFactorCode, resendSignUpVerification, createPasskeySignUp, finishPasskeySignUp, pendingRecoveryCodes, acknowledgeRecoveryCodes, pendingExistingAccountNotice, acknowledgeExistingAccount, shouldKeepPolling, pollAttempt, lastUsedMethodLabel, signUp, passkeysSupported, confirmPolicies, existingAccountResetUrl, awaitingPasskey, listCibaRequests, getCibaPin, decideCibaRequest, setCibaPin, clearCibaPin, 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';
@@ -204,12 +204,21 @@ const EN_US = {
     'signIn.signUpLink': 'Sign up',
     'signIn.orDivider': 'or',
     'signIn.socialButton': 'Continue with {provider}',
+    'signIn.continueWithAtlas': 'Continue with Atlas',
     'signIn.emailCodeLabel': 'Verification code',
     'signIn.useEmailCode': 'Email me a code',
+    'signIn.useEmailLink': 'Email me a sign-in link',
+    'signIn.linkSentTo': 'We sent a sign-in link to {email}. Open it on any device to continue.',
+    'signIn.resendLink': 'Resend link',
+    'signIn.passwordOption': 'Use your password instead',
+    'signIn.passwordHoldReleased': 'Your email is verified. Enter your password to sign in.',
+    'signUp.existingAccount': 'You already had an account. Your existing password still applies.',
     '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.passkeyButton': 'Sign in with a passkey',
+    'signIn.passkeyCancelled': "Passkey sign-in didn't finish. Try again, or use another way to sign in.",
     '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.',
@@ -363,6 +372,9 @@ const EN_US = {
     'error.email_delivery_unavailable': "This app can't send email right now. Try another sign-in method or contact the app owner.",
     'error.strategy_disabled': 'This sign-in method is not available for this app.',
     'error.sign_up_restricted': 'Sign-up on this app is by invitation only.',
+    'error.sign_up_denied': 'Sign-up is not available for this account.',
+    'error.password_not_yet_usable': 'Verify your email address before signing in with this password.',
+    'error.account_deleted': 'The account for this address was deleted, so it can’t be used to sign up again.',
     'error.waitlisted': "You're on the waitlist. We'll email you when a place opens up.",
     'error.identifier_not_allowed': 'This email or phone number is not allowed on this app.',
     'error.disposable_email_blocked': 'Sign-up with a disposable or temporary email address is not allowed.',
@@ -371,6 +383,7 @@ const EN_US = {
     'error.sign_ups_disabled': 'Sign-ups are temporarily disabled.',
     'error.high_risk_blocked': 'This sign-in was blocked because it looked unusual.',
     'error.sms_region_blocked': 'Text messages are not available for this phone number.',
+    'error.github_team_required': 'Your GitHub account is not a member of a GitHub organization or team allowed to sign in here.',
 };
 /**
  * Look up a key and interpolate `{placeholders}`.
@@ -389,7 +402,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.11.0';
+const ATLAS_ANGULAR_VERSION = '0.14.0';
 const ATLAS_ANGULAR_SDK = { name: '@atlasauth/angular', version: ATLAS_ANGULAR_VERSION };
 
 /**
@@ -1481,10 +1494,16 @@ class AttemptFlowComponent {
     firstFactors = null;
     /** The first factor already sent (`AtlasFlowController.preparedFactor()`): its code is collected. */
     preparedFactor = null;
+    /** `FlowState.passwordHold`: where the proof went, and whether the password signs in now. */
+    passwordHold = null;
+    /** `AtlasFlowController.holdProof()`: the emailed proof a password hold still waits on. */
+    holdProof = null;
     /** Emits the collected field values when the form is submitted. */
     submitFlow = new EventEmitter();
     /** Emits when the user picks a first factor the server must send first (an emailed code). */
     chooseFactor = new EventEmitter();
+    /** Emits on "Use your password instead", from an emailed factor already sent. */
+    usePassword = new EventEmitter();
     /**
      * Offer "Email me a code instead" at the second factor (the instance's
      * `account.emailSecondFactor`); `emailSecondFactor` asks for it and
@@ -1545,6 +1564,11 @@ class AttemptFlowComponent {
             });
             return;
         }
+        // Only what is on screen: a code typed earlier must not turn a password into a code attempt.
+        if (this.step().kind === 'collect_first_factor') {
+            this.submitFlow.emit(this.preparedFactor === 'email_code' ? { code: this.values['code'] ?? '' } : { password: this.values['password'] ?? '' });
+            return;
+        }
         this.submitFlow.emit(this.values);
     }
     /** The shared enrolment step is drawn (a controller was passed and the flow is enrolling). */
@@ -1616,7 +1640,13 @@ class AttemptFlowComponent {
     codeSentText() {
         if (this.step().kind !== 'collect_first_factor' || this.preparedFactor !== 'email_code')
             return null;
-        return this.t('signIn.codeSentTo', { email: this.attempt?.identifier ?? '' });
+        return this.t('signIn.codeSentTo', { email: this.passwordHold?.email ?? this.attempt?.identifier ?? '' });
+    }
+    /** The "we sent a link to …" line, once a link was sent. */
+    linkSentText() {
+        if (this.step().kind !== 'collect_first_factor' || this.preparedFactor !== 'email_link')
+            return null;
+        return this.t('signIn.linkSentTo', { email: this.passwordHold?.email ?? this.attempt?.identifier ?? '' });
     }
     /** The attempt is `needs_policy_acceptance`. */
     awaitingPolicies() {
@@ -1627,7 +1657,7 @@ class AttemptFlowComponent {
         // Nothing to submit on a first-factor step that only offers an emailed code
         // until that code is sent.
         if (kind === 'collect_first_factor')
-            return this.fields().length > 0;
+            return this.fields().some((f) => f.kind === 'input');
         if (this.linkOnly())
             return false;
         // Enrolment: nothing to submit while choosing a method or fetching the setup.
@@ -1639,17 +1669,27 @@ class AttemptFlowComponent {
         const step = this.step();
         switch (step.kind) {
             case 'collect_identifier':
-                return [{ kind: 'input', name: 'identifier', labelKey: 'signIn.identifierLabel', type: 'email' }];
+                // `webauthn`: saved passkeys appear in this field's autofill while <atlas-sign-in> holds a conditional request.
+                return [{ kind: 'input', name: 'identifier', labelKey: 'signIn.identifierLabel', type: 'email', autocomplete: 'username webauthn' }];
             case 'collect_first_factor': {
+                // A link proved an address on an existing account: no session, and the password signs in.
+                if (this.attempt?.object === 'sign_up_attempt' && !(this.attempt.supported_first_factors ?? []).includes('passkey')) {
+                    return [released()];
+                }
                 if (this.preparedFactor === 'email_code') {
                     return [{ kind: 'input', name: 'code', labelKey: 'signIn.emailCodeLabel', type: 'text' }];
                 }
+                if (this.preparedFactor === 'email_link')
+                    return [];
                 // The password field unless the only offer is an emailed code (chosen
                 // with the button below the form).
                 const offered = this.offered();
                 return offered.includes('email_code') && !offered.includes('password')
                     ? []
-                    : [{ kind: 'input', name: 'password', labelKey: 'signIn.passwordLabel', type: 'password' }];
+                    : [
+                        ...(this.passwordHold?.released ? [released()] : []),
+                        { kind: 'input', name: 'password', labelKey: 'signIn.passwordLabel', type: 'password' },
+                    ];
             }
             case 'collect_second_factor':
                 return [{ kind: 'input', name: 'code', labelKey: 'mfa.codeLabel', type: 'text' }];
@@ -1693,7 +1733,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", 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", policyDeclined: "policyDeclined" }, 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", passwordHold: "passwordHold", holdProof: "holdProof", offerEmailSecondFactor: "offerEmailSecondFactor", emailedSecondFactor: "emailedSecondFactor", offerSmsSecondFactor: "offerSmsSecondFactor", textedSecondFactor: "textedSecondFactor", enrollment: "enrollment", enrollmentState: "enrollmentState", emailVerification: "emailVerification" }, outputs: { submitFlow: "submitFlow", chooseFactor: "chooseFactor", usePassword: "usePassword", emailSecondFactor: "emailSecondFactor", smsSecondFactor: "smsSecondFactor", resend: "resend", policyDeclined: "policyDeclined" }, ngImport: i0, template: `
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
 
@@ -1705,6 +1745,9 @@ class AttemptFlowComponent {
         @if (codeSentText(); as sentText) {
           <p class="atlas-text" data-atlas-code-sent="">{{ sentText }}</p>
         }
+        @if (linkSentText(); as sentLink) {
+          <p class="atlas-text" data-atlas-link-sent="">{{ sentLink }}</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">
@@ -1805,6 +1848,7 @@ class AttemptFlowComponent {
                 [class]="cls('formFieldInput', 'atlas-input')"
                 [type]="f.type"
                 [attr.name]="f.name"
+                [attr.autocomplete]="f.autocomplete ?? null"
                 [value]="values[f.name] ?? ''"
                 (input)="setValue(f.name, $any($event.target).value)"
               />
@@ -1812,6 +1856,8 @@ class AttemptFlowComponent {
                 <span [class]="cls('formFieldError', 'atlas-error')">{{ errorText(error) }}</span>
               }
             </label>
+          } @else if (f.kind === 'released') {
+            <p class="atlas-text" data-atlas-password-released="">{{ t(f.labelKey) }}</p>
           } @else if (f.kind === 'alert') {
             <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ t(f.labelKey) }}</p>
           } @else {
@@ -1893,6 +1939,31 @@ class AttemptFlowComponent {
             {{ t(preparedFactor === 'email_code' ? 'signIn.resendCode' : 'signIn.useEmailCode') }}
           </button>
         }
+
+        @if (holdProof === 'email_link' && step().kind === 'collect_first_factor') {
+          <button
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            [disabled]="busy"
+            type="button"
+            [attr.data-strategy]="preparedFactor === 'email_link' ? null : 'email_link'"
+            [attr.data-atlas-resend]="preparedFactor === 'email_link' ? '' : null"
+            (click)="chooseFactor.emit('email_link')"
+          >
+            {{ t(preparedFactor === 'email_link' ? 'signIn.resendLink' : 'signIn.useEmailLink') }}
+          </button>
+        }
+
+        @if (preparedFactor && offered().includes('password')) {
+          <button
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            [disabled]="busy"
+            type="button"
+            data-strategy="password"
+            (click)="usePassword.emit()"
+          >
+            {{ t('signIn.passwordOption') }}
+          </button>
+        }
       </form>
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: AtlasCaptchaSlotDirective, selector: "[atlasCaptchaSlot]", inputs: ["atlasCaptchaSlot"] }, { kind: "component", type: PolicyAcceptStepComponent, selector: "atlas-policy-accept-step", inputs: ["attempt", "busy"], outputs: ["submitFlow", "declined"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1916,6 +1987,9 @@ 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 (linkSentText(); as sentLink) {
+          <p class="atlas-text" data-atlas-link-sent="">{{ sentLink }}</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">
@@ -2016,6 +2090,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 [class]="cls('formFieldInput', 'atlas-input')"
                 [type]="f.type"
                 [attr.name]="f.name"
+                [attr.autocomplete]="f.autocomplete ?? null"
                 [value]="values[f.name] ?? ''"
                 (input)="setValue(f.name, $any($event.target).value)"
               />
@@ -2023,6 +2098,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 === 'released') {
+            <p class="atlas-text" data-atlas-password-released="">{{ t(f.labelKey) }}</p>
           } @else if (f.kind === 'alert') {
             <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ t(f.labelKey) }}</p>
           } @else {
@@ -2104,6 +2181,31 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             {{ t(preparedFactor === 'email_code' ? 'signIn.resendCode' : 'signIn.useEmailCode') }}
           </button>
         }
+
+        @if (holdProof === 'email_link' && step().kind === 'collect_first_factor') {
+          <button
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            [disabled]="busy"
+            type="button"
+            [attr.data-strategy]="preparedFactor === 'email_link' ? null : 'email_link'"
+            [attr.data-atlas-resend]="preparedFactor === 'email_link' ? '' : null"
+            (click)="chooseFactor.emit('email_link')"
+          >
+            {{ t(preparedFactor === 'email_link' ? 'signIn.resendLink' : 'signIn.useEmailLink') }}
+          </button>
+        }
+
+        @if (preparedFactor && offered().includes('password')) {
+          <button
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            [disabled]="busy"
+            type="button"
+            data-strategy="password"
+            (click)="usePassword.emit()"
+          >
+            {{ t('signIn.passwordOption') }}
+          </button>
+        }
       </form>
     </div>
   `,
@@ -2124,10 +2226,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], preparedFactor: [{
                 type: Input
+            }], passwordHold: [{
+                type: Input
+            }], holdProof: [{
+                type: Input
             }], submitFlow: [{
                 type: Output
             }], chooseFactor: [{
                 type: Output
+            }], usePassword: [{
+                type: Output
             }], offerEmailSecondFactor: [{
                 type: Input
             }], emailedSecondFactor: [{
@@ -2155,6 +2263,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
 function msg(labelKey) {
     return { kind: 'message', name: '', labelKey, type: 'text' };
 }
+function released() {
+    return { kind: 'released', name: '', labelKey: 'signIn.passwordHoldReleased', type: 'text' };
+}
 
 /**
  * The recovery codes a mid-sign-in MFA enrolment came with, shown once before
@@ -2290,6 +2401,7 @@ class AtlasFlowController {
     client;
     reload;
     t;
+    holdExistingAccountNotice;
     state;
     /**
      * The instance's public sign-in / sign-up settings (captcha, sign-up fields,
@@ -2341,23 +2453,60 @@ class AtlasFlowController {
      * {@link create} sends their acceptances and reloads them after a refusal.
      */
     policies = new PolicyAcceptanceController([]);
+    /**
+     * Passkey sign-in (the "Sign in with a passkey" button and passkey autofill on
+     * the identifier field). The outcome goes through the same completion as every sign-in.
+     */
+    passkey;
+    /** Whether this browser can run WebAuthn; `<atlas-sign-in>` sets it after it is created in a browser. */
+    passkeySupported = signal(false);
     pollTimer = null;
     identifier = '';
     constructor(client, reload, pending, 
     /** Resolves the captcha messages' catalog keys. Defaults to en-US. */
-    t = (key) => translate(EN_US, key)) {
+    t = (key) => translate(EN_US, key), 
+    /** Wait for {@link continueAfterExistingAccount} (`<atlas-sign-up>` draws the notice). */
+    holdExistingAccountNotice = false) {
         this.client = client;
         this.reload = reload;
         this.t = t;
+        this.holdExistingAccountNotice = holdExistingAccountNotice;
         // 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.passkey = createPasskeySignInController({
+            client: this.client,
+            onStart: () => this.state.update((current) => ({ ...current, busy: true, errors: [] })),
+            onResult: (next) => this.finish(next),
+            captcha: () => this.captcha,
+            cancelledMessage: () => this.t('signIn.passkeyCancelled'),
+        });
         this.syncCaptcha();
         this.syncEnrollment();
     }
+    /** Why "Continue with Atlas" could not start (the server's message); null otherwise. */
+    signInWithAtlasError = signal(null);
+    /**
+     * "Continue with Atlas" (when `settings().signInWithAtlas` is set): starts the
+     * SSO sign-in and sends the browser to Atlas.
+     */
+    async signInWithAtlas(connectionId) {
+        if (typeof window === 'undefined')
+            return;
+        this.signInWithAtlasError.set(null);
+        const started = await startSignInWithAtlas(this.client, connectionId, window.location.href);
+        if ('url' in started)
+            window.location.assign(started.url);
+        else
+            this.signInWithAtlasError.set(started.error);
+    }
+    /** "Sign in with a passkey" is offered: the first step, the instance turned passkey sign-in on, and the browser can. */
+    passkeyOffered() {
+        return this.passkeySupported() && !this.state().attempt && this.settings()?.passkeySignIn === true;
+    }
     /** What the app lets the MFA steps offer (from {@link settings}). */
     mfaChoices() {
         return mfaChoicesFrom(this.settings()?.account);
@@ -2388,9 +2537,27 @@ class AtlasFlowController {
     firstFactors() {
         const attempt = this.state().attempt;
         const step = attempt ? nextStep(attempt) : null;
-        return step?.kind === 'collect_first_factor'
-            ? offeredFirstFactors(step.strategies, this.settings()?.emailDelivery)
-            : [];
+        if (step?.kind !== 'collect_first_factor')
+            return [];
+        const offered = offeredFirstFactors(step.strategies, this.settings()?.emailDelivery);
+        const proof = this.holdProof();
+        return proof && !offered.includes(proof) ? [...offered, proof] : offered;
+    }
+    /**
+     * The emailed proof a password hold still waits on (`FlowState.passwordHold`): the
+     * code, or a link where the instance verifies by link only. Null with no hold, once
+     * proven, or while the app cannot deliver email.
+     */
+    holdProof() {
+        const hold = this.state().passwordHold;
+        if (!hold || hold.released || this.settings()?.emailDelivery?.available === false)
+            return null;
+        return this.settings()?.account?.emailVerification === 'link' ? 'email_link' : 'email_code';
+    }
+    /** Back from the emailed factor to the password field. */
+    usePassword() {
+        this.preparedFactor.set(null);
+        this.state.update((current) => ({ ...current, prepared: null, pollSecret: null, errors: [] }));
     }
     /**
      * True when email + password sign-up cannot complete because the app cannot
@@ -2407,16 +2574,21 @@ class AtlasFlowController {
     /**
      * Ask the server to email a sign-in code for the current `needs_first_factor`
      * step (`POST …/prepare_first_factor`); the form then collects the code, which
-     * {@link submit} posts as the `email_code` strategy.
+     * {@link submit} posts as the `email_code` strategy. While a password hold waits
+     * on it ({@link holdProof}), this emails that proof instead.
      */
     async prepare(strategy) {
         if (!this.firstFactors().includes(strategy))
             return;
+        const proof = this.holdProof();
         this.state.update((current) => ({ ...current, busy: true, errors: [] }));
-        const next = await prepareFactor(this.client, this.state(), strategy);
+        const next = strategy === proof
+            ? await preparePasswordHoldProof(this.client, this.state(), proof)
+            : await prepareFactor(this.client, this.state(), strategy);
         this.setState(next);
         if (!next.errors.length)
             this.preparedFactor.set(strategy);
+        this.syncPolling();
     }
     /** Keep both captchas in step with the settings and the flow's current step. */
     syncCaptcha() {
@@ -2432,8 +2604,12 @@ class AtlasFlowController {
         this.signUpCaptchaDrawn.set(this.signUpCaptcha.needed);
     }
     setState(next) {
-        const previousId = this.state().attempt?.id ?? null;
+        const previous = this.state();
+        const previousId = previous.attempt?.id ?? null;
         this.state.set(next);
+        // A proven hold goes back to the password field.
+        if (next.passwordHold?.released && !previous.passwordHold?.released)
+            this.preparedFactor.set(null);
         // A prepared factor belongs to the first-factor step it was sent for.
         if (next.attempt?.status !== 'needs_first_factor')
             this.preparedFactor.set(null);
@@ -2469,6 +2645,11 @@ class AtlasFlowController {
      */
     async submit(values) {
         this.state.update((current) => ({ ...current, busy: true, errors: [] }));
+        // A code that lifts a password hold goes to its own attempt, not this sign-in.
+        if (this.preparedFactor() === 'email_code' && this.holdProof() === 'email_code') {
+            this.setState(await attemptPasswordHoldProof(this.client, this.state(), values.code ?? ''));
+            return;
+        }
         const out = await advanceWithCaptcha(this.client, this.state(), values, {
             captcha: this.captcha,
             identifier: this.identifier,
@@ -2564,6 +2745,14 @@ class AtlasFlowController {
     async saveRecoveryCodes() {
         await this.finish(acknowledgeRecoveryCodes(this.state()));
     }
+    /** The address belonged to an existing account: the notice is up until {@link continueAfterExistingAccount}. */
+    existingAccountNotice() {
+        return pendingExistingAccountNotice(this.state());
+    }
+    /** The user read the notice: finish the sign-up. */
+    async continueAfterExistingAccount() {
+        await this.finish(acknowledgeExistingAccount(this.state()));
+    }
     async finish(next) {
         // An enrolment's recovery codes are shown first; `saveRecoveryCodes` finishes.
         if (pendingRecoveryCodes(next)) {
@@ -2582,6 +2771,10 @@ class AtlasFlowController {
                 });
                 exchanged = res.ok;
             }
+            if (exchanged && this.holdExistingAccountNotice && pendingExistingAccountNotice(next)) {
+                this.setState({ ...next, ticket: null, busy: false });
+                return;
+            }
             const kept = exchanged && (await this.reload());
             this.setState({ ...next, busy: false, sessionKept: kept });
         }
@@ -2632,6 +2825,7 @@ class AtlasFlowController {
     }
     /** Release the poll timer and the captcha widgets — call from the component's `ngOnDestroy`. */
     destroy() {
+        this.passkey.stopAutofill();
         this.stopPolling();
         this.captcha.destroy();
         this.signUpCaptcha.destroy();
@@ -2667,6 +2861,12 @@ class SignInComponent {
             return null;
         return lastUsedMethodLabel(this.flow.lastMethod(), (key) => this.t(key));
     }
+    /** The "Sign in with Atlas" connection, on the first step, when the instance has it on. */
+    atlasConnection() {
+        if (this.flow.state().attempt || this.flow.recoveryCodes())
+            return null;
+        return this.flow.settings()?.signInWithAtlas?.connectionId ?? null;
+    }
     signUpHref() {
         if (this.signUpUrl === null)
             return null;
@@ -2686,7 +2886,16 @@ class SignInComponent {
     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));
+    // Passkey autofill runs while the first step offers passkeys (a computed, so it re-arms only when that changes).
+    passkeyOffered = computed(() => this.flow.passkeyOffered());
+    passkeyAutofill = effect(() => (this.passkeyOffered() ? this.flow.passkey.armAutofill() : this.flow.passkey.stopAutofill()));
+    submitIdentifier(values) {
+        this.flow.passkey.stopAutofill();
+        void this.flow.submit(values);
+    }
     ngOnInit() {
+        if (typeof window !== 'undefined')
+            this.flow.passkeySupported.set(passkeysSupported());
         // If seeded from a pending attempt that is already pollable, start polling.
         this.flow.syncPolling();
         // §5 the instance's captcha settings (switching captcha on in the dashboard
@@ -2705,6 +2914,14 @@ class SignInComponent {
         {{ t('signIn.lastUsed') }}: {{ label }}
       </p>
     }
+    @if (atlasConnection(); as connectionId) {
+      <button type="button" class="atlas-social-button" data-atlas-provider="atlas" (click)="flow.signInWithAtlas(connectionId)">
+        {{ t('signIn.continueWithAtlas') }}
+      </button>
+      @if (flow.signInWithAtlasError(); as message) {
+        <p class="atlas-error" role="alert">{{ message }}</p>
+      }
+    }
     @if (flow.recoveryCodes(); as codes) {
       <atlas-recovery-codes [codes]="codes" [busy]="flow.state().busy" (saved)="flow.saveRecoveryCodes()"></atlas-recovery-codes>
     } @else {
@@ -2717,9 +2934,12 @@ class SignInComponent {
       [captcha]="flow.captchaDrawn() ? flow.captcha : null"
       [firstFactors]="flow.firstFactors()"
       [preparedFactor]="flow.preparedFactor()"
+      [passwordHold]="flow.state().passwordHold ?? null"
+      [holdProof]="flow.holdProof()"
+      (usePassword)="flow.usePassword()"
       [offerEmailSecondFactor]="flow.settings()?.account?.emailSecondFactor === true"
       [emailedSecondFactor]="flow.emailSecondFactor()"
-      (submitFlow)="flow.submit($event)"
+      (submitFlow)="submitIdentifier($event)"
       (chooseFactor)="flow.prepare($event)"
       [offerSmsSecondFactor]="flow.settings() !== null && flow.mfaChoices().sms"
       [textedSecondFactor]="flow.smsSecondFactor()"
@@ -2730,12 +2950,23 @@ class SignInComponent {
       (policyDeclined)="flow.declinePolicy($event)"
     ></atlas-attempt-flow>
     }
+    @if (flow.passkeyOffered() && !flow.recoveryCodes()) {
+      <button
+        type="button"
+        class="atlas-social-button atlas-passkey-button"
+        data-atlas-passkey-sign-in=""
+        [disabled]="flow.state().busy"
+        (click)="flow.passkey.signIn()"
+      >
+        {{ t('signIn.passkeyButton') }}
+      </button>
+    }
     @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", "policyDeclined"] }, { kind: "component", type: RecoveryCodesComponent, selector: "atlas-recovery-codes", inputs: ["codes", "busy"], outputs: ["saved"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "sessionKept", "titleKey", "captcha", "firstFactors", "preparedFactor", "passwordHold", "holdProof", "offerEmailSecondFactor", "emailedSecondFactor", "offerSmsSecondFactor", "textedSecondFactor", "enrollment", "enrollmentState", "emailVerification"], outputs: ["submitFlow", "chooseFactor", "usePassword", "emailSecondFactor", "smsSecondFactor", "resend", "policyDeclined"] }, { 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,
@@ -2750,6 +2981,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
         {{ t('signIn.lastUsed') }}: {{ label }}
       </p>
     }
+    @if (atlasConnection(); as connectionId) {
+      <button type="button" class="atlas-social-button" data-atlas-provider="atlas" (click)="flow.signInWithAtlas(connectionId)">
+        {{ t('signIn.continueWithAtlas') }}
+      </button>
+      @if (flow.signInWithAtlasError(); as message) {
+        <p class="atlas-error" role="alert">{{ message }}</p>
+      }
+    }
     @if (flow.recoveryCodes(); as codes) {
       <atlas-recovery-codes [codes]="codes" [busy]="flow.state().busy" (saved)="flow.saveRecoveryCodes()"></atlas-recovery-codes>
     } @else {
@@ -2762,9 +3001,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       [captcha]="flow.captchaDrawn() ? flow.captcha : null"
       [firstFactors]="flow.firstFactors()"
       [preparedFactor]="flow.preparedFactor()"
+      [passwordHold]="flow.state().passwordHold ?? null"
+      [holdProof]="flow.holdProof()"
+      (usePassword)="flow.usePassword()"
       [offerEmailSecondFactor]="flow.settings()?.account?.emailSecondFactor === true"
       [emailedSecondFactor]="flow.emailSecondFactor()"
-      (submitFlow)="flow.submit($event)"
+      (submitFlow)="submitIdentifier($event)"
       (chooseFactor)="flow.prepare($event)"
       [offerSmsSecondFactor]="flow.settings() !== null && flow.mfaChoices().sms"
       [textedSecondFactor]="flow.smsSecondFactor()"
@@ -2775,6 +3017,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       (policyDeclined)="flow.declinePolicy($event)"
     ></atlas-attempt-flow>
     }
+    @if (flow.passkeyOffered() && !flow.recoveryCodes()) {
+      <button
+        type="button"
+        class="atlas-social-button atlas-passkey-button"
+        data-atlas-passkey-sign-in=""
+        [disabled]="flow.state().busy"
+        (click)="flow.passkey.signIn()"
+      >
+        {{ t('signIn.passkeyButton') }}
+      </button>
+    }
     @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>
@@ -3361,7 +3614,9 @@ class SignUpComponent {
     atlas = inject(AtlasService);
     /** Where to send the user once the flow completes. Reserved for host routing. */
     afterUrl;
-    flow = new AtlasFlowController(this.atlas.createFapiClient(), () => this.atlas.reload(), this.atlas.pendingAttempt, (key) => translate(this.atlas.localization, key));
+    /** Where the existing-account notice's "Forgot password?" goes. Default: the hosted sign-in page; `null` hides it. */
+    resetPasswordUrl;
+    flow = new AtlasFlowController(this.atlas.createFapiClient(), () => this.atlas.reload(), this.atlas.pendingAttempt, (key) => translate(this.atlas.localization, key), true);
     /** Password or passkey-only sign-up (the latter when the instance offers it). */
     mode = signal('password');
     canPasskey() {
@@ -3375,6 +3630,9 @@ class SignUpComponent {
         this.flow.state.update((current) => ({ ...current, errors: [] }));
         this.mode.set(this.passkeyForm() ? 'password' : 'passkey');
     }
+    resetHref() {
+        return existingAccountResetUrl({ url: this.resetPasswordUrl, frontendApi: this.atlas.frontendApi, redirectUrl: this.afterUrl });
+    }
     awaitingPasskey() {
         return awaitingPasskey(this.flow.state().attempt);
     }
@@ -3399,8 +3657,24 @@ class SignUpComponent {
         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()) {
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: SignUpComponent, isStandalone: true, selector: "atlas-sign-up", inputs: { afterUrl: "afterUrl", resetPasswordUrl: "resetPasswordUrl" }, ngImport: i0, template: `
+    @if (flow.existingAccountNotice()) {
+      <div [class]="cls('card', 'atlas-card')" data-atlas-existing-account="">
+        <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('signUp.title') }}</h1>
+        <p class="atlas-text">{{ t('signUp.existingAccount') }}</p>
+        @if (resetHref(); as href) {
+          <p class="atlas-text"><a class="atlas-link" [href]="href">{{ t('signIn.forgotPassword') }}</a></p>
+        }
+        <button
+          [class]="cls('formButtonPrimary', 'atlas-button')"
+          type="button"
+          [disabled]="flow.state().busy"
+          (click)="flow.continueAfterExistingAccount()"
+        >
+          {{ t('signUp.submit') }}
+        </button>
+      </div>
+    } @else 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) {
@@ -3442,7 +3716,7 @@ class SignUpComponent {
         "
       ></atlas-sign-up-form>
     }
-  `, 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", "policyDeclined"] }, { kind: "component", type: SignUpFormComponent, selector: "atlas-sign-up-form", inputs: ["settings", "busy", "errors", "captcha", "passkey", "switchable", "policies"], outputs: ["switchMode", "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", "passwordHold", "holdProof", "offerEmailSecondFactor", "emailedSecondFactor", "offerSmsSecondFactor", "textedSecondFactor", "enrollment", "enrollmentState", "emailVerification"], outputs: ["submitFlow", "chooseFactor", "usePassword", "emailSecondFactor", "smsSecondFactor", "resend", "policyDeclined"] }, { kind: "component", type: SignUpFormComponent, selector: "atlas-sign-up-form", inputs: ["settings", "busy", "errors", "captcha", "passkey", "switchable", "policies"], outputs: ["switchMode", "submitSignUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpComponent, decorators: [{
             type: Component,
@@ -3452,7 +3726,23 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                     changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [AttemptFlowComponent, SignUpFormComponent],
                     template: `
-    @if (awaitingPasskey()) {
+    @if (flow.existingAccountNotice()) {
+      <div [class]="cls('card', 'atlas-card')" data-atlas-existing-account="">
+        <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('signUp.title') }}</h1>
+        <p class="atlas-text">{{ t('signUp.existingAccount') }}</p>
+        @if (resetHref(); as href) {
+          <p class="atlas-text"><a class="atlas-link" [href]="href">{{ t('signIn.forgotPassword') }}</a></p>
+        }
+        <button
+          [class]="cls('formButtonPrimary', 'atlas-button')"
+          type="button"
+          [disabled]="flow.state().busy"
+          (click)="flow.continueAfterExistingAccount()"
+        >
+          {{ t('signUp.submit') }}
+        </button>
+      </div>
+    } @else 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) {
@@ -3498,6 +3788,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 }]
         }], propDecorators: { afterUrl: [{
                 type: Input
+            }], resetPasswordUrl: [{
+                type: Input
             }] } });
 
 /**