Unable to call getTokenSilently concurrently

[Tazaf]

Unable to call getTokenSilently concurrently

[luisrudge]

Thanks for posting this @Schmaga! We recently upgraded our Angular Quickstart with the shareReplaymethod as well. Here's our take on a great AuthService: https://auth0.com/docs/quickstart/spa/angular2/01-login#add-an-authentication-service

[Schmaga]

This is a duplicate of my post from the auth0 community forum, but I hope it might help someome:

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.

[Tazaf]

@luisrudge I've seen that! And I got to say that this is a waaaay better AuthService than the one before 👍
(By the way, I did not run onto this thread issue)

[luisrudge]

This is probably happening because the iframe was already closed 🤔 Can you inspect dev tools and see if you're sending two requests to the /authorize endpoint?

[gosuhiman]

I've got the same problem, and there are 2 requests sent to /authorize.

[rkuprin]

Same problem, two requests. Happens only if you refresh a page after sign-in (I'm using Auth0 with Angular SPA), without refreshing it works fine and sends just one request.

[luisrudge]

@gosuhiman @rkuprin Is it possible that you have two instances of the client? can you build a repro to help me identify why are you seeing two requests?

[max-eb]

Same problem if you write code like this:

class Auth { 
 getAuthClient = () => new Promise((resolve) => {
    if (this.auth0Client) {
      return resolve(this.auth0Client);
    }

    return resolve(createAuth0Client({
    domain: DOMAIN,
    client_id: CLIENT_ID,
    connection: DATABASE,
    audience: AUDIENCE,
    redirect_uri: ORIGIN,
    }).then(auth0Client => resolve(auth0Client)));
  });

  getUserInfo = async () => {
    const auth0Client = await this.getAuthClient();
    return auth0Client.getUser();
  }
}

If you call getUserInfo in several places in your project, after refreshing page, it will invoke function createAuth0Client several times.
In function createAuth0Client, it will call getTokenSilently. That is, if you invoke createAuth0Client multiple times, it will use a same iframe window(not sure). Once a tread called close, the other thread will fail.
So I changed the code to this:

class Auth {
  constructor() {
    this.setUp();
  }

  setUp = async () => createAuth0Client({
    domain: DOMAIN,
    client_id: CLIENT_ID,
    connection: DATABASE,
    audience: AUDIENCE,
    redirect_uri: ORIGIN,
  }).then((auth0Client) => {
    this.auth0Client = auth0Client;
  });

  getAuthClient = () => new Promise((resolve) => {
    const checkAuth0Ready = setInterval(() => {
      if (this.auth0Client) {
        resolve(this.auth0Client);
        clearInterval(checkAuth0Ready);
      }
    }, 500);

    setTimeout(() => clearInterval(checkAuth0Ready), 10000);
  });

  getUserInfo = async () => {
    const auth0Client = await this.getAuthClient();
    return auth0Client.getUser();
  }

And it doesn't throw exceptions now.