auth0.js: Error messages when using popup authentication with Extensions that use postMessage

I’m using version 8.9.3 with Google Chrome Version 61.0.3163.100 (Official Build) (64-bit) in an Angular CLI project and I’ve implemented popup authentication. Everything works, but I’m getting some error messages in my console:

core.es5.js:1020 ERROR TypeError: Cannot read property 'a' of undefined
    at onMessage (winchan.js:194)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:425)
    at Object.onInvokeTask (core.es5.js:3881)
    at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:424)
    at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:192)
    at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:499)
    at invokeTask (zone.js:1427)
    at globalZoneAwareCallback (zone.js:1453)

I’m also getting error events in my auth callback (that fire before the authentication succeeds/fails).

SyntaxError: Unexpected token o in JSON at position 1 
at Object.parse (<anonymous>) at onMessage (http://localhost:4200/vendor.bundle.js:96593:26) 
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:4291:31) 
at Object.onInvokeTask (http://localhost:4200/vendor.bundle.js:141476:33) 
at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (http://localhost:4200/polyfills.bundle.js:4290:36) 
at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (http://localhost:4200/polyfills.bundle.js:4058:47)
at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (http://localhost:4200/polyfills.bundle.js:4365:34) 
at invokeTask (http://localhost:4200/polyfills.bundle.js:5293:14) 
at globalZoneAwareCallback (http://localhost:4200/polyfills.bundle.js:5319:21

It seems as though the Redux Dev Tools extension in my browser is causing this, because if I disable the extension, I do not get the error.

Here is my code to Authenticate. Note that I’m turning the authentication callback into an RxJs Observable:

 this.auth0 = new auth0.WebAuth({
                clientID: this.environmentSettings.auth0.clientID,
                domain: this.environmentSettings.auth0.domain,
                responseType: this.environmentSettings.auth0.responseType,
                audience: this.environmentSettings.auth0.audience,
                redirectUri: this.environmentSettings.auth0.redirectUri,      
                scope: this.environmentSettings.auth0.scope,
 });
const popupOptions = {};
return Observable.create(observer =>{
                this.auth0.popup.authorize(popupOptions, (error: any, payload: any) => {
                  if(error && error.name=="SyntaxError") return; // catching weird error
                  if (error) {
                        observer.error(error);                
                   } else {
                        observer.next(payload);
                   }
                   observer.complete();
                });                
});

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 21 (6 by maintainers)

Most upvoted comments

Fixed it be ignoring SyntaxError errors, I believe auth0-js should be fixed to filter / handle those errors gracefully

  authorize = () => {
    return new Promise<AuthResponse>((resolve, reject) => {
      this.auth0.popup.authorize({ owp: true }, (err, res) => {
        if (err) {
          if (err.name === 'SyntaxError') {
            console.error(err) // IGNORE SyntaxError which are generated by external extensions
          } else {
            const errorMsg = err.errorDescription || err.original
            reject(errorMsg)
          }
        } else {
          resolve(res)
        }
      })
    })
  }

FlowFlorent on Feb 18, 2019

This is not related to redux dev tools itself, but any browser extension or code that sends a ‘postMessage’. You get the callback called multiple times because there’s multiple postMessage calls happening.

luisrudge on Feb 18, 2019

I have a repo for ya! Please install the Redux devtools extension before running this Angular CLI project. https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd

Download the repo here and run npm i then ng serve to run the application at http://localhost:4200 https://github.com/jongunter/auth0-issue-repro

Note that you’ll need the Angular CLI installed globally to run this.

The key here is that actions are being dispatched in Redux while the login window is open (thus, I have an interval dispatching actions every 250ms).

You don’t even have to login or configure your own Auth0 account. Just opening the login popup window triggers these errors all over the console!

jongunter on Oct 18, 2017