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.
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…
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 
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?
I'm having an error in the console when creating the Auth0 client using `…createAuth0Client()`.
The error is the following:
> ERROR TypeError: Cannot read property 'close' of undefined
at o (auth0-spa-js.production.js:formatted:1)
at ZoneDelegate.invokeTask (zone-evergreen.js:391)
at Object.onInvokeTask (auth0-spa-js.production.js:formatted:1)
at ZoneDelegate.invokeTask (zone-evergreen.js:390)
at Zone.runTask (zone-evergreen.js:168)
at ZoneTask.invokeTask [as invoke] (zone-evergreen.js:465)
at invokeTask (zone-evergreen.js:1603)
at globalZoneAwareCallback (zone-evergreen.js:1640)
On the beautyfied production code, the error points to this line:
```js
o = function(i) {
// Below is the culprit, apparently, 'i.source' is undefined
i.origin == m && i.data && "authorization_response" === i.data.type && (i.source.close(),
i.data.response.error ? t(i.data.response) : e(i.data.response),
clearTimeout(n),
window.removeEventListener("message", o, !1),
window.document.body.removeChild(r))
And the code that's calling the `createAuth0Client()` function is this one (pretty much the exact same as the [Angular Login Tutorial](https://auth0.com/docs/quickstart/spa/angular2#add-an-authentication-service)):
```typescript
// This is a method of my AuthService
async getAuth0Client(): Promise<Auth0Client> {
if (!this.auth0Client) {
console.log("AuthService - generating new Auth0Client");
this.auth0Client = await createAuth0Client(environment.auth0);
console.log("AuthService - new Auth0Client", this.auth0Client);
// Provide the current value of isAuthenticated
this.isAuthenticated.next(await this.auth0Client.isAuthenticated());
// Whenever isAuthenticated changes, provide the current value of `getUser`
this.isAuthenticated
.subscribe(async isAuthenticated => await this.updateUserProfile(isAuthenticated));
return this.auth0Client;
Note that this error does not prevent the client to be effectively created and functionning. But it's still an unwanted error 😄
Also, some other people seem to have the same kind of issue, see [this thread in the Auth0 Community Forums](https://community.auth0.com/t/typeerror-cannot-read-property-close-of-undefined-when-using-new-auth0-spa-library-in-angular-interceptor/28010)
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.
