Working with auth0-spa-js locally

Help
4

Hi Dan,

I’ve been following the React Quick Start guide, using the react-auth0-spa.js code from that page with the new universal login. This is a completely greenfield application. I have never used Auth0 prior to this, so I’m not clinging to any old habits. I’m just following the recommend path as far as I can tell. So, up to this point I’ve been using localhost and I’m able to login no problems. However, I’m unable to get a JWT for making an API call.

I’m fetching an access token for a GraphQL backend registered with my account. When I specify anything other than the default audience in the Auth0Provider config, I’m unable to get a token. Despite already being logged in, the getTokenSilently call always fails telling me “login_required”. Chasing that down brought me to the first post I linked to, where an Auth0 employee helpfully pointed out that consent can’t be skipped for localhost. Fair enough. I followed the directions and added an entry to /etc/hosts file pointing at 127.0.0.1. I had to change the way I invoke webpack-dev-server, too, because by default it performs Host header checks and fails with anything other than localhost.

During the course of that thread, the Auth0 employee emphatically states “you should avoid using localhost for development purposes” and went on to clarify that using the custom host pointing at 127.0.0.1 is how you should be developing with Auth0. So, I added the host and started working with that, but now the SPA code from Auth0 doesn’t work because I’m not using localhost. The error message in Chrome looks like:

Uncaught (in promise) Error: 
      auth0-spa-js must run on a secure origin.
      See https://github.com/auth0/auth0-spa-js/blob/master/FAQ.md#why-do-i-get-error-invalid-state-in-firefox-when-refreshing-the-page-immediately-after-a-login 
      for more information.
    
    at eval (auth0-spa-js.production.js:1)
    at eval (auth0-spa-js.production.js:1)
    at Object.eval [as next] (auth0-spa-js.production.js:1)
    at eval (auth0-spa-js.production.js:1)
    at new Promise (<anonymous>)
    at r (auth0-spa-js.production.js:1)
    at eval (auth0-spa-js.production.js:1)
    at initAuth0 (react-auth0-wrapper.jsx:28)
    at eval (react-auth0-wrapper.jsx:49)
    at commitHookEffectList (react-dom.development.js:19986)

Following the FAQ link in the error message, I’m informed that my custom host is not considered a secure origin, and so the Web Cryptography API won’t work. Just to avoid the reader needing a second tab open, the FAQ indicates that with some browser vendor variation, the default set of secure origins is:

(https, *, *)
(wss, *, *)
(*, localhost, *)
(*, 127/8, *)
(*, ::1/128, *)
(file, *, —)

So, anything over HTTPS is fine and HTTP with localhost is fine. But, Auth0 won’t let me use localhost and get an access token for a registered API. Moreover, it looks like Auth0 doesn’t want you developing with localhost as the hostname at all, but that seems to be at odds with what the Web Cryptography API requires.

Please let me know if you need any additional information. I’m really mostly sticking to the quick start code and trying to get an access token for working with a GraphQL API. Reproducing should be straightforward, but I can appreciate if you don’t want to run through the steps. Each issue I’ve hit I’ve found documentation for, I just don’t see how they all can be reconciled for local development.

Thanks,
Kevin

1 Like