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

[jongunter]

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 () 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();
});
});

[luisrudge]

Sorry, I don't know what's going on or why that happens. The stack trace is not helpful as well. Can you build a simple repo with repro steps so I can try it?

[jongunter]

Thanks for the response @luisrudge. I will try to get back to you shortly with a repo.

[ubcent]

I'm getting the same errors. Any updates?

[luisrudge]

@ubcent can you build a repro so I can test it?

[ubcent]

I'll try

[jongunter]

I'm working on a repro, too. Just been really busy lately.

[jongunter]

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!

[arobotd]

I'm getting the postMessage error from winchan as well. Has there been any insight into this bug?

Uncaught TypeError: Cannot read property 'a' of undefined
    at onMessage (winchan.js?fb3a:194)

Here's my code:

import auth0 from 'auth0-js'
import { config } from './config'

class AuthService {
  constructor () {
    this.auth0 = new auth0.WebAuth({
      domain: config.get('app.services.auth0.domain'),
      clientID: config.get('app.services.auth0.clientId'),
      redirectUri: config.get('app.services.auth0.callback'),
      audience: config.get('app.services.auth0.audience')
      responseType: 'token id_token',
      scope: 'openid profile email phone address'
    })
  }

  login = () => {
    const popupOptions = {}
    this.auth0.popup.authorize(popupOptions, this.handlePopupAuth)
  }

  handlePopupAuth = (err, resp) => {
    if (err && err.name === 'SyntaxError') return // catching weird error
    if (err) {
      console.warn('handlePopupAuth', err)
    } else if (resp) {
      console.log('handlePopupAuth', resp)
    } else {
      console.log('handlePopupAuth - no resp')
    }
  }
}

const authService = new AuthService()
export { authService }

[girokon]

Got the same bug with Augury extension for Angular. The issue not in auth0.js, it is inside winchan library wich auth0 uses for opening popup window.
Look at this code https://github.com/mozilla/winchan/blob/master/winchan.js#L178

Many chrome extensions use postMessage mechanism for communication between their parts. And they offten put inside data property plain objects or string data, and this can cause error, because winchan doesn't check what in data

=== update ===
in the npm package little bit another code:

function onMessage(e) {
          if (e.origin !== origin) { return; }
          try {
            var d = JSON.parse(e.data);
          } catch(err) {
            if (cb) {
              cb(err);
            } else {
              throw err;
            }
          }

          if (d.a === 'ready') {
            messageTarget.postMessage(req, origin);
          } else if (d.a === 'error') {
            cleanup();
            if (cb) {
              cb(d.d);
              cb = null;
            }
          } else if (d.a === 'response') {
            cleanup();
            if (cb) {
              cb(null, d.d);
              cb = null;
            }
          }
        }

[gnoff]

Is it possible this is fixable by making this line return?

https://github.com/auth0/winchan/blob/master/winchan.js#L188

If we attach a cb, we get to handle the error but the message handler still proceeds to process the message even though we know it will throw

if we do not attach a cb, the execution terminates with a throw of the underlying error

It seems we likely want to terminate execution regardless of the presence of the cb and a return would neatly do this

[luisrudge]

this would work only when the JSON.parse call fails.
What we have to do is add support to postMessageDataType like we have for renewAuth: https://github.com/auth0/auth0.js/issues/406#issuecomment-312738290. This will fix the issue. When we added to renewAuth, we didn't expect to have the same problem in other parts of the code. So, the fix is already there, we just need to enable this for popup.authorize as well.

[EugenRakhimov]

experiencing the same issue here

[revett]

@luisrudge Thanks for putting a fix in for this. Can I ask why you re-opened the issue?

Would it possible to create a v0.2.1 release of this package as your fix is currently only on master? The dependency reference within auth0-js will also need updating.

[luisrudge]

I'll release a new version of winchan and upgrade the dependency in auth0-js. Thanks for the patience

[mickeeri]

thanks for looking into this @luisrudge.

Any idea when this will be updated?, we're kind of dependent on having redux devtools and the popup authentication working together.

[FlowFlorent]

Hello @luisrudge I am also getting the syntax error, when will this be fixed?

I notice that WebAuth's popup calls authorize 3 times per actual login procedure, could this be a source of error?

VERSION USED: "auth0-js": "^9.10.0"

Another thing to note is that this unrelated to redux devTools (I can reproduce with and without)

export class WebAuthClient implements AuthClient {
  private auth0 = new WebAuth({
    ...DEFAULT_AUTH_OPTIONS,
    responseType: 'token',
    redirectUri: location.origin
  })

  private authorizeCount = 0

  authorize = () => {
    let scopedAuthorizeCount = 0
    return new Promise<AuthResponse>((resolve, reject) => {
      this.auth0.popup.authorize({ owp: true }, (err, res) => {
        if (err) {
          console.warn('Authentication Error', err)
          const errorMsg = err.errorDescription || err.original
          reject(errorMsg)
          console.log('authorize ERROR', err, res)
          this.authorizeCount++
          scopedAuthorizeCount++
        } else {
          resolve(res)
          console.log('authorize SUCCESS', res)
          this.authorizeCount++
          scopedAuthorizeCount++
        }
        console.log('authorizeCount', this.authorizeCount)
        console.log('scopedAuthorizeCount', scopedAuthorizeCount)
      })
    })
  }
}

Login results:
The first authorize error happens before the username / password has been submitted, ie, when the popup appears.
The second and third one (respectively failure and success) happen after the submission

[luisrudge]

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.

[FlowFlorent]

Thanks for the quick answer!

So we are prone to having a failing auth due to external extensions that our users could have? What would be a good mitigation strategy until the fix is done?

[luisrudge]

@FlowFlorent can you build a simple repo that I can just run and reproduce the issue? I don't remember exactly what I was trying to say here, but I think it's the right path to follow in this issue

[FlowFlorent]

So I had the (whatfix editor)[https://chrome.google.com/webstore/detail/whatfix-editor/ohkeehjepccedbdpohnbapepongppfcj/related] extension installed on my browser, removing it fixed the issue. I would assume that auth0-js should filter out messages sent by external extensions / sources.

Also seems like you fixed it already, but it does not seem to be working 🤔 https://github.com/auth0/winchan/pull/5

I'll see if I can get you code for repro

[FlowFlorent]

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)
        }
      })
    })
  }