TypeError: Cannot read property 'close' of undefined when using new auth0-spa library in Angular interceptor

Help
,
1

Hi everyone,

I am currently working on replacing the old auth0-js implementation of our application with your new auth0-spa-js library. Even though I got it to work somehow, I am always getting the following error on the console which is caught by my error handler:

TypeError: Cannot read property 'close' of undefined
    at a (auth0-spa-js.production.js:1)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)
    at invokeTask (zone.js:1744)
    at globalZoneAwareCallback (zone.js:1781)

Here is the relevant code from the interceptor:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const isAuthenticated$ = from(this.authService.isAuthenticated());
    return isAuthenticated$.pipe(switchMap(isAuthenticated => {
      if (isAuthenticated) {
        const accessToken$ = from(this.authService.getAccessToken());
        return accessToken$.pipe(switchMap(token => {
          const headers = req.headers.set('Authorization', 'Bearer ' + token);
          const authReq = req.clone({ headers });
          return next.handle(authReq);
        }));
      } else {
        return next.handle(req);
      }
  }));

And the auth-service:
private auth0Client: Auth0Client;

  config = {
    domain: 'xxx',
    client_id: 'yyy',
    redirect_uri: '...',
    audience: 'myaudience',
    responseType: 'token id_token',
    scope: 'openid email'
  };

  private async createClientIfNecessary() {
    if (!this.auth0Client) {
      this.auth0Client = await createAuth0Client(this.config);
    }
  }

  async isAuthenticated() {
    await this.createClientIfNecessary();
    return await this.auth0Client.isAuthenticated();
  }

  async login() {
    await this.createClientIfNecessary();
    await this.auth0Client.loginWithRedirect(this.config);
  }

  async getAccessToken(): Promise<string> {
    await this.createClientIfNecessary();
    const token = await this.auth0Client.getTokenSilently();
    return token;
  }

  }

Anyone know what I am doing wrong? It is a lot of transforming of Promises to Observables, maybe that is the cause of the error. And it is actually a bit hacky to always check if the client is already created, but I wanted to encapsulate as much auth0 code as possible into the service.

1 Like
2

Update: The error also occurs if I consequently wrap everything into Observables, even in the service itself.

The problem seems also to appear only under certain conditions, because If I attach the debugger and step through parts of a page load, the error does NOT occur…

3

I am having the same issue. Have you figured out a solution?

4

Sadly, no. I cannot figure out whether I am doing anything wrong or if there is a problem in the library. I am hoping that someone from Auth0 Support has a look at this thread. Otherwise I would probably have to open a github issue. But it’s actually comforting to know that I am not the only one with that problem :wink:

5

Hello there! Unfortunately, I’m experiencing the same. I followed this tutorial: Auth0 Angular SDK Quickstarts: Login

6

Same here. I also followed the Auth0 tutorial. :frowning:

7

Hi @schmaga,
I suggest to open a github issue at Issues · auth0/auth0-spa-js · GitHub so that the SDK team can take a look at it.

And can you exclude this as a possible reason?

8

Hi!

Having the same kind of problem, I raised an issue on GItHub, as proposed by @mathiasconradt.

3 Likes
9

Thanks a lot for that @mob! The team responsible for the SDK will certainly look at that!

10

For me @mathiasconradt was correct…ssl fixed it. I was developing locally and not using ssl

2 Likes
11

Thanks for opening the issue. I was on vacation for a few days and thus could not answer. Once I get to it, I will try to verify if using https fixes the problem for me as well.

12

Perfect! Let us know @schmaga if everything works for you as it should!

13

A question to clarify: Which part needs to use https or localhost? I am currently using an ASP.NET Core Backend running on http-localhost and the Angular Development server running on http-localhost. In the thread you refered to, localhost was explicitly stated as working.

14

https doesn’t solve anything. Error appears when you reload the page and you’re logged in.

1 Like
15

Indeed, https does not solve anything. Problem remains.

16

I think I might have found the problem. Because of the observables and multiple subscriptions, there might have been concurrency issues or multiple instances of the Auth0Client. I got rid of the error by doing it this way:

Create the client as shared observable in a similar way like you proposed in your updated angular quickstart:

  private auth0Client$ = (from(createAuth0Client(this.config))).pipe(
    shareReplay(1), // Every subscription receives the same shared value
  );

And using it using a piped observable.

isAuthenticated() {
 return this.auth0Client$.pipe(switchMap(client => {
 return from(client.isAuthenticated());
}));

}

This has solved the error for me.

1 Like
17

Hi @schmaga (and others on this thread!), I just wanted to let you know that we’ve updated the Angular QuickStart to be more consistent with RxJS patterns in Angular. It might give you some ideas on how to structure your code now that you’ve moved past the errors you were getting.

3 Likes
18

This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.