Auth0 Invalid State on Single Page React App

Help
, , ,
1

I have a single page react app, I am using Auth 0 hooks to manage authentication. The navigation bar in my website contains the code to log users in and out. The app is wrapped in the following:

    <Provider store={store}>
      <Auth0Provider
        domain={auth0Domain}
        clientId={auth0ClientID}
        redirectUri={process.env.REACT_APP_RESOURCE_BUILDER_URL}
        cacheLocation={"localstorage"}
      >
        <App />
      </Auth0Provider>
    </Provider>

When testing on localhost, I can login on any page of my app no problem however when using a live version of my site, I get an invalid state error when calling loginwithredirect()

Error: Invalid state
    at e.<anonymous> (auth0-spa-js.production.esm.js:15:79674)
    at auth0-spa-js.production.esm.js:15:2234
    at Object.next (auth0-spa-js.production.esm.js:15:1550)
    at auth0-spa-js.production.esm.js:15:1276
    at new Promise (<anonymous>)
    at f (auth0-spa-js.production.esm.js:15:1021)
    at e.handleRedirectCallback (auth0-spa-js.production.esm.js:15:79091)
    at auth0-provider.tsx:238:45
    at 2.6e364720.chunk.js:2:685335
    at Object.next (2.6e364720.chunk.js:2:685440)

Very confused and any help would be much appreciated

3

Hi @altraerc,

Welcome to the Auth0 Community!

I did some research and can’t find a specific reason why you would be seeing this only when you deploy your application. Could you give us some more info about your deployment or anything that could be different from when you run it locally?

Have you tried to deploy without the cacheLocation={"localstorage"} flag?