UserManager() call makes Angular app unstable

After using the call this.userManager = new UserManager(oidcConfig); my angular application gets stuck in an unstable state. This is tested by running the testability.isStable code in the console

var x = getAllAngularRootElements().every((root) => { var isStable = getAngularTestability(root).isStable(); console.log(root, 'is stable', isStable); });

There has been a previous issue opened on the old oidc-client-js repo - url

This has been fixed on the angular-auth-oidc-client and was wondering if this could be looked into url

[Badisi]

oidc-client-ts uses a few setInterval and setTimeout over the place.

And stated from the Angular doc :

the application will never be stable if you start any kind of recurrent asynchronous task when the application starts (for example for a polling process, started with a setInterval, a setTimeout or using RxJS operators like interval);

---

angular-auth-oidc-client suffered from the same problem and the fix you mentioned was actually quite simple as they now run their setInterval and setTimeout outside angular:

   this.zone.runOutsideAngular(() => { ... }

But this fix was possible only because this library is 100% Angular made. oidc-client-ts on the other side is 100% JS so there is no way it can fix that issue. Moreover this issue relates to Angular and so it should be fixed in your application.

---

Solution 1

You could simply wait for Angular to become stable then do what you want. Also wait for Angular to properly start (ie. ngOnInit) as using the constructor might also be too early.

public ngOnInit(): void {
  this.app.isStable.subscribe(isStable => {
    ...
  });
}

But the issue with that approach is that you will delay the authentication and depending on your use case that might not be as bullet proof as it should be regarding security.

Solution 2

Use oidc-client-ts prior to launch your Angular application (ie. in the main.ts before bootstrapModule).

Two advantages with this one:

1. All the unstable part will be done before your app will actually launch. Making Angular launch in a stable state.
2. You will avoid your app to be loaded twice due to the redirect with the auth provider -> saving you some execution time.

Solution 3

I actually developed an Angular library around oidc-client-ts that might be of interest. The library is still in beta but the desktop part is stable and complete, only the mobile part remains. Also the documentation is under redaction but what’s actually there is enough for a start.

• repository (@badisi/ngx-auth)
• documentation

[AlexHughesOk]

We initialise the UserManager within the constructor so

constructor( ) {

    const stsSettings = {
        authority: _authZeroDomain,
        client_id: _authZeroClientId,
        redirect_uri: '${_clientRoot}signin-callback',


    };
    
    var x = new UserManager(stsSettings);
}.

Once this code is hit the isStable become false and only becomes true when this line of code is commented out.