Auth0-spa-js: "await createAuth0Client" takes one minute to finish

[ghost]

Hello, been following the new documentation for Angular and i am finding that when i get to the this.auth0Client = await createAuth0Client(this.config); it awaits for near exactly 60 seconds, which is an issue if the user clicks the login button before that and gets the following error in the console.

Error: "Uncaught (in promise): TypeError: this.auth0Client is undefined

My code is exactly the same as what's provided in the documentation.

Any ideas?

[AnisTss]

I am using angular 7 and I had to wrap everything into Observables. I used a ReplaySubject for the Auth0Client.

This library has many issues and it is really bad to have it in the QuickStart tutorial. It is a complete turn off and made me lose a day at work. Now I am giving up.

Here is how I did work around that:

export class AuthService {
  authClientSubject = new ReplaySubject<Auth0Client>(1);

  constructor() {
    from(createAuth0Client(this.config)).subscribe(
      client => this.authClientSubject.next(client)
    );
  }
// Example method in the service
  isAuthenticated(): Observable<boolean> {
    return this.authClientSubject.pipe(
      switchMap(client => from(client.isAuthenticated()))
    );
  }
}

[stevehobbsdev]

@dobertson It should not be taking 60 seconds. If the code is the same as in the tutorial, the next thing I would do is check the logs in your tenant to see if it's reporting any issues. Assuming you've already managed to log in, one of the things that happens when you create the client is getTokenSilently is called, which may invoke a call to the authorization server.

If you do find anything untoward in the logs, please report back here and we'll take it from there.

[luisrudge]

@dobertson This happens when there's a configuration error (most of the times, it's a misconfiguration related to the Allowed web origins field). You can find the error in your tenant logs or via Chrome Dev Tools, if you inspect the failed request. Unfortunately, those types of errors can't be prevented or catched at runtime because those types of configuration errors prevent the server to actually send the error in the iframe.

[ghost]

I had correctly defined the callback url in the application settings under Allowed Callback URLs, but i had no put this url in the config that is passed to createAuthoClient(this.config)

Adding redirect_uri: 'http://localhost:4200/callback' to the config fixed this :)

[luisrudge]

@dobertson perfect! What doc did you follow to implement this in your project?

[ghost]

@luisrudge i was following the Angular one

[luisrudge]

@dobertson Thanks! I'll review the QS to make sure this doesn't happen again!

[stszap]

Just spend half a day fighting this (used the sample js project too). In my case, the problem was the trailing slash (I specified http://localhost:3000/ in Allowed web origins instead of http://localhost:3000). This is very strange because Allowed Callback URLs setting works in both cases (with and without the slash). Is this the intended behaviour? Should I open pr to the docs or a bug report somewhere?