Bug: amplify-authenticator broken with Angular zoneless change detection (provideZonelessChangeDetection)

[gage22171]

Bug Report

Related issue: #4899 (OnPush change detection support)

Summary

<amplify-authenticator> does not work correctly with Angular's zoneless change detection (provideZonelessChangeDetection()) when MFA is enabled. Zoneless is a stable, supported feature in Angular 18–21 — this is a compatibility bug, not a feature gap.

With zoneless enabled and Zone.js removed from polyfills, the Authenticator renders but does not update the UI after the MFA challenge step. After entering a password and clicking "Sign in", the UI appears frozen on the MFA prompt until an unrelated user interaction (e.g., a mouse move) happens to trigger change detection.

This is a stricter superset of #4899. With zoneless, Zone.js is entirely absent, so AuthenticatorComponent's async state updates never schedule a change detection pass at all.

Environment

• @aws-amplify/ui-angular: 5.3.3
• Angular: 21
• provideZonelessChangeDetection() enabled, Zone.js removed from polyfills
• Cognito User Pool with MFA enabled

Steps to Reproduce

1. Create an Angular 18–21 project with provideZonelessChangeDetection() in app.config.ts
2. Remove zone.js from polyfills in angular.json
3. Configure Cognito with MFA enabled
4. Add <amplify-authenticator> to the root component
5. Load the app and attempt to sign in — enter credentials and submit
6. Observe that the UI does not transition to the MFA challenge step (or from MFA to authenticated) until an unrelated mouse event fires

Expected Behavior

The Authenticator component works correctly with zoneless change detection. All state transitions (sign in, MFA challenge, authenticated) update the UI immediately — consistent with how any Angular 18–21 component is expected to behave.

Why This Is a Bug

Zoneless change detection has been stable and supported since Angular 18 and is the recommended default in Angular 19+. Angular 21 applications using provideZonelessChangeDetection() are using a first-class, documented Angular API. A library component that breaks under it has a compatibility bug, not a missing feature.

Note on Fix Approach

markForCheck() alone is not sufficient for the zoneless case — it marks the component dirty but relies on Zone.js to actually trigger a change detection run. With Zone.js absent, the dirty flag is never processed.

For full zoneless compatibility, the fix needs to either:

• Call ChangeDetectorRef.detectChanges() after async auth state updates (runs CD synchronously, no Zone.js needed), or
• Migrate internal auth state to Angular signals (signal writes automatically schedule a CD pass in the signal graph)

markForCheck() is the correct fix for the OnPush case in #4899, but zoneless requires one of the above approaches.

The stalled community PR #4997 uses markForCheck() + RxJS — that would fix #4899 but would still leave zoneless broken. A complete fix needs detectChanges() or signals.

Workaround

None known that doesn't require re-adding Zone.js or wrapping the entire Authenticator in a custom component with manual ApplicationRef.tick() calls.

[bobbor]

hey @gage22171

thanks for the bug report. This is a bug in the library for angular support. I agree.
We will start working on this as soon as possible.

Cheers Philipp

[gage22171]

Is there any plan to work on this anytime soon? If not, we will have to figure out a workaround as our customers keep reporting this issue. Thanks.

[osama-rizk]

Hey @gage22171 ,
We don't have a firm timeline to share just yet, as we're still looking into this, but I'll update you as soon as we have more clarity.

[gage22171]

Hey @gage22171 , We don't have a firm timeline to share just yet, as we're still looking into this, but I'll update you as soon as we have more clarity.

OK, thanks for the response....we coded a workaround by doing this:

In AppComponent's constructor, subscribe to AuthenticatorService's machine. On each transition:

1. Call this.ref.markForCheck() — marks OnPush AppComponent dirty
2. Schedule a coalesced this.appRef.tick() via queueMicrotask guarded by a private authTickScheduled flag (collapses rapid
   multi-transition sequences into one CD pass, avoids recursive tick)
3. Unsubscribe via destroyRef.onDestroy

The markForCheck() call is the critical piece — tick() alone is insufficient under OnPush because it won't descend into an
unmarks subtree.

 const authSubscription = this.authenticator.subscribe(() => {
   /*
    * AppComponent is OnPush, so ApplicationRef.tick() alone skips its subtree
    * (including <amplify-authenticator>) unless it is marked dirty first.
    * markForCheck() marks the path dirty; the scheduled tick() then runs a CD
    * pass that descends into the authenticator and renders the new route (e.g.
    * the MFA confirmSignIn screen).
    *
    * The tick() is coalesced onto a microtask: the machine can emit several
    * transitions per user action, so we schedule at most one tick() per
    * microtask instead of one per transition. Deferring also guarantees tick()
    * never runs nested inside an in-progress CD pass (avoids recursive tick()).
    */
   this.ref.markForCheck();
   if (!this.authTickScheduled) {
     this.authTickScheduled = true;
     queueMicrotask(() => {
       this.authTickScheduled = false;
       this.appRef.tick();
     });
   }
 });
 this.destroyRef.onDestroy(() => authSubscription.unsubscribe());

[osama-rizk]

Hi @gage22171,

Thank you for the update — I'm really glad to hear you found a workaround that works for you. And thank you especially for taking the time to share it here; it'll be a big help to others in the community running into the same issue.