Possible memory-leak within ui-angular#AuthenticatorService (Angular SSR)

[QuentinFchx]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

Angular

Which UI component?

Authenticator, Primitive components

How is your app built?

@angular/cli

What browsers are you seeing the problem on?

No response

Which region are you seeing the problem in?

No response

Please describe your bug.

I'm using the AmplifyUI library within a server-side rendered Angular application.
I'm seeing a constant memory increase on the machines running the server code until they crash
FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory.

After some quick fiddling with the Chrome memory profiler, I strongly suspect something in the amplify-related packages to trigger the issue.
Please note that I'm not very proficient with heap snapshots interpretation.

What's the expected behaviour?

No memory leak

Help us reproduce the bug!

I've created a repository that reproduces the bug https://github.com/QuentinFchx/amplify-leak

ng build
node --inspect dist/amplify-leak/server/server.mjs

Open chrome://inspect
Go to localhost:4000 (refresh 1-2 times to warm the server)
Take a heap snapshot
curl http://localhost:4000\?\[1-100\] (perform 100 requests)
Take another heap snapshot

-> The memory constantly increases

Please note that :

• I disabled the pre-rendering "prerender": false
• The leak does not happen if I don't initialize the AuthenticatorService (remove the line private authenticator = inject(AuthenticatorService);)

Code Snippet

No response

Console log output

No response

Additional information and screenshots

No response

[cwomack]

Hello, @QuentinFchx and thank you for opening this issue. Greatly appreciate the sample repo and we'll investigate this/follow up with any additional questions we have.

[tiffanynwyeung]

@QuentinFchx Hello, thanks for reaching out about this issue 👋 We suggest that the service should be used together with the Authenticator UI component. Can you clarify if you still experience this memory leak issue if you render the UI component?

[QuentinFchx]

Hello, sorry for the late answer

To make sure we're talking about the same thing, do you agree this is the suggested approach :

import { Component, inject } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import {
  AmplifyAuthenticatorModule,
  AuthenticatorService,
} from '@aws-amplify/ui-angular';

@Component({
  selector: 'app-root',
  imports: [RouterOutlet, AmplifyAuthenticatorModule], // import the module here
  providers: [AuthenticatorService],
  template: `
    <h1>Leak repro</h1>

    <p>Hello, world</p>

   <!-- Use the component here -->
    <amplify-authenticator></amplify-authenticator> 

    <router-outlet />
  `,
  styleUrl: './app.component.css',
})
export class AppComponent {
  private authenticator = inject(AuthenticatorService);

  title = 'amplify-leak';
}

If yes, I do observe a memory leak with this configuration.
I just wanted to reduce the code to its minimum to ease the reproduction of the issue :)

Here is a screenshot of my profiler (snapshot 1 after 2 requests, snapshot 2 after 102 requests)

[cwomack]

@QuentinFchx, appreciate all the detailed screenshots and context you replied with. We've been able to reproduce this consistently on our side and the memory leak seems to only happen when using SSR, but not happening when using the Authenticator component client side.

As we continue to investigate the root cause here, we'll follow up if there's any workarounds we can recommend until a fix is in place.