@atlasauth/angular 0.3.0 → 0.4.0

package/dist/fesm2022/atlasauth-angular.mjs

@@ -4,8 +4,8 @@ import { isPlatformBrowser, DOCUMENT } from '@angular/common';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { BehaviorSubject, combineLatest, firstValueFrom } from 'rxjs';
 import { map, distinctUntilChanged, filter, take } from 'rxjs/operators';
-import { TokenCache, resolveFrontendApi, FapiClient, getProviderToken, runFrontChannelLogoutFromResponse, readRedirectResult, stripRedirectParams, readExpiry, msUntilRefresh, nextStep, createCaptchaController, flowFromPending, initialFlow, fetchInstanceSettings, signInCaptchaOptions, flowNeedsCaptcha, advanceWithCaptcha, createSignUp, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
-export { FapiClient, advance, flowFromPending, getProviderToken, initialFlow, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
+import { TokenCache, resolveFrontendApi, FapiClient, SignOutGuard, getProviderToken, readRedirectResult, completeOAuthPopupLanding, mapOAuthPopupPayload, stripRedirectParams, closeOAuthPopupAfterSignIn, readExpiry, msUntilRefresh, nextStep, createCaptchaController, flowFromPending, initialFlow, fetchInstanceSettings, offeredFirstFactors, prepareFactor, signInCaptchaOptions, flowNeedsCaptcha, advanceWithCaptcha, createSignUp, shouldKeepPolling, pollAttempt } from '@atlasauth/js';
+export { FapiClient, SignOutError, advance, flowFromPending, getProviderToken, initialFlow, pollAttempt, prepareFactor, requestForStep, shouldKeepPolling } from '@atlasauth/js';
 import { evaluate } from '@atlasauth/authz';
 export { evaluate, hasFromClaims } from '@atlasauth/authz';
 import { renderDesignAppearance, instanceDesignFrom, applyAppearanceToDom } from '@atlasauth/design/runtime';
@@ -167,6 +167,7 @@ const EN_US = {
     'signIn.orDivider': 'or',
     'signIn.socialButton': 'Continue with {provider}',
     'signIn.emailCodeLabel': 'Verification code',
+    'signIn.useEmailCode': 'Email me a code',
     'signIn.magicLinkSent': 'Check your email for a sign-in link.',
     'signIn.checkOtherTab': 'You can close this tab — you are signed in where you started.',
     'signUp.title': 'Create your account',
@@ -182,6 +183,8 @@ const EN_US = {
     'signUp.terms': 'Terms of Service',
     'signUp.privacy': 'Privacy Policy',
     'signUp.and': 'and',
+    // = EMAIL_UNAVAILABLE_MESSAGE from @atlasauth/js.
+    'signUp.emailUnavailable': "This app can't send email right now. Try another sign-in method or contact the app owner.",
     'captcha.prompt': 'Complete the security check to continue.',
     'captcha.required': 'Please complete the security check, then try again.',
     'captcha.failed': "The security check didn't pass. Please try again.",
@@ -262,6 +265,14 @@ class AtlasService {
     cache = new TokenCache();
     fapiClient;
     refreshTimer = null;
+    /**
+     * The sessions this browser signed out of (tombstones in localStorage, per
+     * Frontend API origin), the revoke and its background re-tries. Every reload /
+     * refresh asks it before adopting a session, so a sign-out the server never
+     * confirmed is not undone by the still-valid refresh cookie.
+     */
+    guard;
+    stopWatchingSignOut = null;
     catalog;
     /**
      * A sign-in attempt handed back by an OAuth redirect that still needs a second
@@ -323,6 +334,10 @@ class AtlasService {
             baseUrl: this.baseUrl,
             fetchImpl: this.doFetch,
         });
+        this.guard = new SignOutGuard({
+            request: (path, init) => this.call(path, init),
+            frontendApi: this.baseUrl,
+        });
         // Captured synchronously (not in an async init) so it is available before any
         // flow component reads it: a needs_second_factor redirect carries a status but
         // no ticket, and that is what the 2FA resume seeds from.
@@ -330,10 +345,19 @@ class AtlasService {
         // Boot once, browser only. On the server there is no cookie jar to read a
         // session from, so we leave the state at `loading` and let hydration boot it.
         if (this.isBrowser) {
+            // Another tab signed out of THIS session (its tombstone reached the shared
+            // store): drop the token and re-check, which then refuses the session.
+            this.stopWatchingSignOut = this.guard.watch(() => this.cache.peek()?.sessionId ?? this._session.value?.id, () => {
+                this.cache.clear();
+                void this.reload();
+            });
             void this.boot();
         }
     }
     ngOnDestroy() {
+        this.stopWatchingSignOut?.();
+        this.stopWatchingSignOut = null;
+        this.guard.dispose();
         this.clearRefreshTimer();
         this._status.complete();
         this._user.complete();
@@ -412,25 +436,27 @@ class AtlasService {
     has(condition) {
         return evaluate(this._claims.value, condition).allowed;
     }
-    /** Revoke the current session server-side and drop all local auth state. */
-    async signOut(options) {
-        const current = this.cache.peek();
-        if (current) {
-            const revoked = await this.call(`/v1/client/sessions/${current.sessionId}/revoke`, {
-                method: 'POST',
-            }).catch(() => undefined);
-            // OIDC Front-Channel Logout: let the apps signed in through this session
-            // clear theirs in this browser (hidden iframes, capped at 5 s). Best-effort.
-            if (options?.frontchannel !== false)
-                await runFrontChannelLogoutFromResponse(revoked);
-        }
-        this.clearRefreshTimer();
-        this.cache.clear();
-        this._status.next('signed_out');
-        this._user.next(null);
-        this._session.next(null);
-        this._claims.next(null);
-        this._memberships.next([]);
+    /**
+     * Revoke the current session server-side and drop all local auth state.
+     *
+     * The session id is remembered before the revoke (a tombstone shared by every
+     * tab), so a reload, a token refresh, a sibling tab or a tab opened later never
+     * re-adopts it — even when the revoke failed (it is retried once, then again in
+     * the background) and the refresh cookie is still valid. Resolves
+     * `{ revoked, activeSessionId? }`; with `{ strict: true }` an unconfirmed revoke
+     * rejects with a `SignOutError` instead (after the local sign-out). A parked
+     * session the server promoted on revoke is adopted. Front-channel logout runs
+     * unless `{ frontchannel: false }`.
+     */
+    async signOut(options = {}) {
+        // With no cached token the guard finds the cookie session itself
+        // (GET /v1/client), so a missing JWT never skips the revoke.
+        const sessionId = this.cache.peek()?.sessionId ?? this._session.value?.id ?? null;
+        const attempt = await this.guard.revoke(sessionId, options);
+        this.clearLocalState();
+        if (this.guard.promoted(attempt))
+            await this.reload();
+        return this.guard.settle(attempt, options);
     }
     /**
      * Switch the active organization (or `null` for the personal account). The
@@ -458,14 +484,10 @@ class AtlasService {
             if (!response.ok)
                 throw new Error('boot failed');
             const body = (await response.json());
-            if (!body.session || !body.user) {
-                this.clearRefreshTimer();
-                this.cache.clear();
-                this._status.next('signed_out');
-                this._user.next(null);
-                this._session.next(null);
-                this._claims.next(null);
-                this._memberships.next([]);
+            // A session this browser signed out of is never re-adopted from the
+            // refresh cookie; the guard re-tries its revoke in the background.
+            if (!body.session || !body.user || this.guard.refuse(body.session.id)) {
+                this.clearLocalState();
                 return;
             }
             this._user.next(body.user);
@@ -493,17 +515,41 @@ class AtlasService {
      * has no ticket, so nothing is exchanged and the app boots signed-out.
      */
     async boot() {
-        const result = readRedirectResult(window.location.search);
+        const fromUrl = readRedirectResult(window.location.search);
+        let result = fromUrl;
+        // §oauth popup mode: this page may be the landing of a sign-in popup whose
+        // opener a Cross-Origin-Opener-Policy severed (`#atlas_popup_result=…`).
+        // The result is relayed to the opener, which redeems the ticket, and this
+        // window closes. If no opener takes it (its tab is gone), finish here like
+        // a redirect.
+        const landing = await completeOAuthPopupLanding().catch(() => null);
+        if (landing && !landing.delivered) {
+            const outcome = mapOAuthPopupPayload(landing.payload);
+            if (outcome?.ticket && outcome.attemptId) {
+                result = { attemptId: outcome.attemptId, ticket: outcome.ticket };
+            }
+            else if (outcome?.continuationUrl) {
+                // A second factor / connect step / provider error: the redirect flow's page.
+                window.location.replace(outcome.continuationUrl);
+                return;
+            }
+        }
+        let exchanged = false;
         if (result?.ticket) {
-            await this.call('/v1/client/tickets/exchange', {
+            const response = await this.call('/v1/client/tickets/exchange', {
                 method: 'POST',
                 body: JSON.stringify({ attempt_id: result.attemptId, ticket: result.ticket }),
             }).catch(() => undefined);
+            exchanged = !!response?.ok;
         }
-        if (result) {
+        if (fromUrl) {
             window.history.replaceState({}, document.title, stripRedirectParams(window.location.href));
         }
         await this.reload();
+        // Signed in inside the Atlas popup (the redirect flow ran in it): hand back
+        // to the waiting opener and close. A no-op in an ordinary tab.
+        if (exchanged)
+            void closeOAuthPopupAfterSignIn();
     }
     readPendingAttempt() {
         const result = readRedirectResult(window.location.search);
@@ -525,6 +571,9 @@ class AtlasService {
         });
     }
     applyToken(jwt, sessionId) {
+        // An in-flight refresh must not resurrect a session signed out meanwhile.
+        if (this.guard.isSignedOut(sessionId))
+            return;
         const expiresAt = readExpiry(jwt);
         if (!expiresAt)
             return;
@@ -550,6 +599,15 @@ class AtlasService {
             await this.reload();
         }
     }
+    clearLocalState() {
+        this.clearRefreshTimer();
+        this.cache.clear();
+        this._status.next('signed_out');
+        this._user.next(null);
+        this._session.next(null);
+        this._claims.next(null);
+        this._memberships.next([]);
+    }
     /** §7.4: proactive, jittered refresh scheduled from the token's own expiry. */
     scheduleRefresh() {
         this.clearRefreshTimer();
@@ -901,8 +959,18 @@ class AttemptFlowComponent {
      * with `needs_captcha`. Null when the flow draws none.
      */
     captcha = null;
+    /**
+     * The first factors to offer on the `needs_first_factor` step — pass
+     * `AtlasFlowController.firstFactors()`, which drops email code / link while the
+     * app cannot deliver email. Null uses the server's list as-is.
+     */
+    firstFactors = null;
+    /** The first factor already sent (`AtlasFlowController.preparedFactor()`): its code is collected. */
+    preparedFactor = null;
     /** Emits the collected field values when the form is submitted. */
     submitFlow = new EventEmitter();
+    /** Emits when the user picks a first factor the server must send first (an emailed code). */
+    chooseFactor = new EventEmitter();
     values = {};
     t(key, vars) {
         return translate(this.atlas.localization, key, vars);
@@ -930,8 +998,22 @@ class AttemptFlowComponent {
         const kind = this.step().kind;
         return !!this.captcha && (kind === 'collect_identifier' || kind === 'collect_captcha');
     }
+    /** The first factors on offer at a `needs_first_factor` step (empty on any other). */
+    offered() {
+        const step = this.step();
+        if (step.kind !== 'collect_first_factor')
+            return [];
+        return this.firstFactors ?? step.strategies;
+    }
+    showEmailCodeOption() {
+        return this.preparedFactor !== 'email_code' && this.offered().includes('email_code');
+    }
     showSubmit() {
         const kind = this.step().kind;
+        // Nothing to submit on a first-factor step that only offers an emailed code
+        // until that code is sent.
+        if (kind === 'collect_first_factor')
+            return this.fields().length > 0;
         return kind !== 'done' && kind !== 'await_oauth';
     }
     fields() {
@@ -939,8 +1021,17 @@ class AttemptFlowComponent {
         switch (step.kind) {
             case 'collect_identifier':
                 return [{ kind: 'input', name: 'identifier', labelKey: 'signIn.identifierLabel', type: 'email' }];
-            case 'collect_first_factor':
-                return [{ kind: 'input', name: 'password', labelKey: 'signIn.passwordLabel', type: 'password' }];
+            case 'collect_first_factor': {
+                if (this.preparedFactor === 'email_code') {
+                    return [{ kind: 'input', name: 'code', labelKey: 'signIn.emailCodeLabel', type: 'text' }];
+                }
+                // The password field unless the only offer is an emailed code (chosen
+                // with the button below the form).
+                const offered = this.offered();
+                return offered.includes('email_code') && !offered.includes('password')
+                    ? []
+                    : [{ kind: 'input', name: 'password', labelKey: 'signIn.passwordLabel', type: 'password' }];
+            }
             case 'collect_second_factor':
                 return [{ kind: 'input', name: 'code', labelKey: 'mfa.codeLabel', type: 'text' }];
             case 'enroll_second_factor':
@@ -971,7 +1062,7 @@ class AttemptFlowComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: AttemptFlowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AttemptFlowComponent, isStandalone: true, selector: "atlas-attempt-flow", inputs: { attempt: "attempt", busy: "busy", errors: "errors", titleKey: "titleKey", captcha: "captcha" }, outputs: { submitFlow: "submitFlow" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", type: AttemptFlowComponent, isStandalone: true, selector: "atlas-attempt-flow", inputs: { attempt: "attempt", busy: "busy", errors: "errors", titleKey: "titleKey", captcha: "captcha", firstFactors: "firstFactors", preparedFactor: "preparedFactor" }, outputs: { submitFlow: "submitFlow", chooseFactor: "chooseFactor" }, ngImport: i0, template: `
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t(titleKey) }}</h1>
 
@@ -1009,6 +1100,17 @@ class AttemptFlowComponent {
             {{ t('signIn.submit') }}
           </button>
         }
+
+        @if (showEmailCodeOption()) {
+          <button
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            [disabled]="busy"
+            type="button"
+            (click)="chooseFactor.emit('email_code')"
+          >
+            {{ t('signIn.useEmailCode') }}
+          </button>
+        }
       </form>
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: AtlasCaptchaSlotDirective, selector: "[atlasCaptchaSlot]", inputs: ["atlasCaptchaSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
@@ -1058,6 +1160,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
             {{ t('signIn.submit') }}
           </button>
         }
+
+        @if (showEmailCodeOption()) {
+          <button
+            [class]="cls('formButtonSecondary', 'atlas-button-secondary')"
+            [disabled]="busy"
+            type="button"
+            (click)="chooseFactor.emit('email_code')"
+          >
+            {{ t('signIn.useEmailCode') }}
+          </button>
+        }
       </form>
     </div>
   `,
@@ -1072,8 +1185,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
                 type: Input
             }], captcha: [{
                 type: Input
+            }], firstFactors: [{
+                type: Input
+            }], preparedFactor: [{
+                type: Input
             }], submitFlow: [{
                 type: Output
+            }], chooseFactor: [{
+                type: Output
             }] } });
 /** A read-only message row: `labelKey` holds the i18n key of the text to show. */
 function msg(labelKey) {
@@ -1113,6 +1232,12 @@ class AtlasFlowController {
     captchaDrawn = signal(false);
     /** Whether {@link signUpCaptcha} currently draws a widget (for templates). */
     signUpCaptchaDrawn = signal(false);
+    /**
+     * The first factor the server was asked to send ({@link prepare}) on the
+     * current `needs_first_factor` step — the form then collects its code. Null
+     * otherwise.
+     */
+    preparedFactor = signal(null);
     pollTimer = null;
     identifier = '';
     constructor(client, reload, pending, 
@@ -1134,6 +1259,44 @@ class AtlasFlowController {
             this.syncCaptcha();
         }
     }
+    /**
+     * The first factors to offer on a `needs_first_factor` step: the server's list
+     * without email code / link while the app cannot deliver email
+     * (`settings.emailDelivery.available === false`). Empty on any other step.
+     */
+    firstFactors() {
+        const attempt = this.state().attempt;
+        const step = attempt ? nextStep(attempt) : null;
+        return step?.kind === 'collect_first_factor'
+            ? offeredFirstFactors(step.strategies, this.settings()?.emailDelivery)
+            : [];
+    }
+    /**
+     * True when email + password sign-up cannot complete because the app cannot
+     * send the verification email (`settings.emailDelivery.passwordSignUp === false`):
+     * `<atlas-sign-up>` shows the "can't send email" notice instead of the form.
+     */
+    signUpEmailUnavailable() {
+        return this.settings()?.emailDelivery.passwordSignUp === false;
+    }
+    /** False when a password reset email cannot be delivered — hide "Forgot password?". */
+    passwordResetAvailable() {
+        return this.settings()?.emailDelivery.passwordReset !== false;
+    }
+    /**
+     * Ask the server to email a sign-in code for the current `needs_first_factor`
+     * step (`POST …/prepare_first_factor`); the form then collects the code, which
+     * {@link submit} posts as the `email_code` strategy.
+     */
+    async prepare(strategy) {
+        if (!this.firstFactors().includes(strategy))
+            return;
+        this.state.update((current) => ({ ...current, busy: true, errors: [] }));
+        const next = await prepareFactor(this.client, this.state(), strategy);
+        this.setState(next);
+        if (!next.errors.length)
+            this.preparedFactor.set(strategy);
+    }
     /** Keep both captchas in step with the settings and the flow's current step. */
     syncCaptcha() {
         const settings = this.settings();
@@ -1149,6 +1312,9 @@ class AtlasFlowController {
     }
     setState(next) {
         this.state.set(next);
+        // A prepared factor belongs to the first-factor step it was sent for.
+        if (next.attempt?.status !== 'needs_first_factor')
+            this.preparedFactor.set(null);
         this.syncCaptcha();
     }
     /**
@@ -1261,8 +1427,9 @@ class SignInComponent {
     ngOnInit() {
         // If seeded from a pending attempt that is already pollable, start polling.
         this.flow.syncPolling();
-        // §5 the instance's captcha settings: switching captcha on in the dashboard
-        // draws it here with no code change.
+        // §5 the instance's captcha settings (switching captcha on in the dashboard
+        // draws it here with no code change) and email delivery (no emailed-code
+        // option while the app cannot send email).
         if (typeof window !== 'undefined')
             void this.flow.loadSettings();
     }
@@ -1277,9 +1444,12 @@ class SignInComponent {
       [errors]="flow.state().errors"
       titleKey="signIn.title"
       [captcha]="flow.captchaDrawn() ? flow.captcha : null"
+      [firstFactors]="flow.firstFactors()"
+      [preparedFactor]="flow.preparedFactor()"
       (submitFlow)="flow.submit($event)"
+      (chooseFactor)="flow.prepare($event)"
     ></atlas-attempt-flow>
-  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha"], outputs: ["submitFlow"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha", "firstFactors", "preparedFactor"], outputs: ["submitFlow", "chooseFactor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignInComponent, decorators: [{
             type: Component,
@@ -1295,7 +1465,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
       [errors]="flow.state().errors"
       titleKey="signIn.title"
       [captcha]="flow.captchaDrawn() ? flow.captcha : null"
+      [firstFactors]="flow.firstFactors()"
+      [preparedFactor]="flow.preparedFactor()"
       (submitFlow)="flow.submit($event)"
+      (chooseFactor)="flow.prepare($event)"
     ></atlas-attempt-flow>
   `,
                 }]
@@ -1307,7 +1480,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
  * The create-account step of `<atlas-sign-up>`: the instance's configured extra
  * fields, email + password, the legal-consent row and — when the instance
  * requires one on sign-up — the captcha widget. Values live on the component so
- * a refused submit never clears them.
+ * a refused submit never clears them. When the app cannot send the verification
+ * email (`settings.emailDelivery.passwordSignUp === false`) it shows the
+ * `signUp.emailUnavailable` notice instead of the form.
  */
 class SignUpFormComponent {
     atlas = inject(AtlasService);
@@ -1328,6 +1503,10 @@ class SignUpFormComponent {
     setValue(name, value) {
         this.values = { ...this.values, [name]: value };
     }
+    /** Email + password sign-up cannot complete: the app cannot send the verification email. */
+    emailUnavailable() {
+        return this.settings?.emailDelivery?.passwordSignUp === false;
+    }
     fields() {
         return this.settings?.signUpFields ?? [];
     }
@@ -1366,7 +1545,7 @@ class SignUpFormComponent {
     }
     onSubmit(event) {
         event.preventDefault();
-        if (!this.consentOk())
+        if (this.emailUnavailable() || !this.consentOk())
             return;
         this.submitSignUp.emit({
             values: { ...this.values },
@@ -1378,6 +1557,13 @@ class SignUpFormComponent {
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('signUp.title') }}</h1>
 
+      @if (emailUnavailable()) {
+        <!-- The app cannot send the verification email, so an email + password
+             sign-up could never complete: say so instead of offering the form. -->
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert" data-atlas-email-unavailable="">
+          {{ t('signUp.emailUnavailable') }}
+        </p>
+      } @else {
       @for (error of formErrors(); track error.code) {
         <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
       }
@@ -1528,6 +1714,7 @@ class SignUpFormComponent {
           {{ t('signUp.submit') }}
         </button>
       </form>
+      }
     </div>
   `, isInline: true, dependencies: [{ kind: "directive", type: AtlasCaptchaSlotDirective, selector: "[atlasCaptchaSlot]", inputs: ["atlasCaptchaSlot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
@@ -1542,6 +1729,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
     <div [class]="cls('card', 'atlas-card')">
       <h1 [class]="cls('headerTitle', 'atlas-title')">{{ t('signUp.title') }}</h1>
 
+      @if (emailUnavailable()) {
+        <!-- The app cannot send the verification email, so an email + password
+             sign-up could never complete: say so instead of offering the form. -->
+        <p [class]="cls('formFieldError', 'atlas-error')" role="alert" data-atlas-email-unavailable="">
+          {{ t('signUp.emailUnavailable') }}
+        </p>
+      } @else {
       @for (error of formErrors(); track error.code) {
         <p [class]="cls('formFieldError', 'atlas-error')" role="alert">{{ error.message }}</p>
       }
@@ -1692,6 +1886,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImpo
           {{ t('signUp.submit') }}
         </button>
       </form>
+      }
     </div>
   `,
                 }]
@@ -1751,7 +1946,7 @@ class SignUpComponent {
         (submitSignUp)="flow.create($event.values, $event.consent)"
       ></atlas-sign-up-form>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha"], outputs: ["submitFlow"] }, { kind: "component", type: SignUpFormComponent, selector: "atlas-sign-up-form", inputs: ["settings", "busy", "errors", "captcha"], outputs: ["submitSignUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: AttemptFlowComponent, selector: "atlas-attempt-flow", inputs: ["attempt", "busy", "errors", "titleKey", "captcha", "firstFactors", "preparedFactor"], outputs: ["submitFlow", "chooseFactor"] }, { kind: "component", type: SignUpFormComponent, selector: "atlas-sign-up-form", inputs: ["settings", "busy", "errors", "captcha"], outputs: ["submitSignUp"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: SignUpComponent, decorators: [{
             type: Component,