PassportJS + Browsersync's External url Throws Error

I’m having a bad experience with PassportJS running with Browser-sync. I’m using passport-Auth0 with my expressjs application. My app runs on localhost:1337. Browser-sync proxies that and runs its version on localhost:3000. So when I navigate to localhost:1337, authentication works fine. On localhost:3000, it fails, though I could just authenticate myself on localhost:1337, and I find myself authenticated on localhost:3000 fine.

But browser-sync also runs my application externally. It’s on http://10.18.xxx.xxx:3000. This is good since I can test it on my iPad. But when I try to authenticate myself on my iPad, I receive two errors. On the server, I receive this error (which is the same as if I’m authenticating myself on localhost:3000):

The redirect URI is wrong. You send http://localhost:1337, and we expected http://10.18.xxx.xxx:3000

And on the front-end, it gives me a server 500 error saying:

TokenError: The redirect URI is wrong. You send //10.18.xxx.xxx:3000, and we expected http://10.18.xxx.xxx:3000

This happens while I’m already authenticated on localhost:1337 and localhost:3000. Can I tell passport-Auth0 to ignore this rule???

The answer to your ultimate question is no; validation of the redirection URI endpoint is a vital piece of OAuth2 and as such should not be disabled.

If you’re running your application behind a proxy then you need to consider that within the application itself and associated OAuth2 configuration. More specifically, the application should understand that is being accessed through a proxy and react accordingly; you mention Express.js so you can start by having a look at the following (Express behind proxies).

Of particular interest would be the trust proxy setting; enabling this and assuming a well-behaved proxy implementation the application could now understand that is being accessed through a specific proxy URL and dynamically react to that. For example, it would request the OAuth redirect to be at the proxy location instead of the original server address.

In addition, if there are multiple proxy addresses at which the application can be accessed then you would have to configure multiple redirect URL’s (at least one for each proxy). This way the Auth0 validation of the redirect URL would pass independently of the proxy through which you access the application. You should also no longer access your application directly and just go through the proxy; if this is just for development then you should have conditional logic according to the environment so that proxy support would be enabled or disabled.

Have in mind that nothing of the above is really specific to Auth0 (it’s mostly a proxy/browser-sync + OAuth situation). Just noting this in case you want to make your search terms more general as it may give you more results.