Invalid state error after using Oauth with Auth0 React SPA

Hello,

I’ve been trying to implement the Intercom Oauth flow in my app that is powered by Auth0. Unfortunately, after I get redirected back from the Intercom website, after I grant it permissions, the url contains the query params code=XXX&state=XXX (which I assume conflicts with the existing Auth0 params). As a result, I get an “Invalid State error”. Any idea how I could get around this?

Thanks!!!

1 Like

Hey there Tagai!

Have you followed any tutorial or quickstart of ours that you can share, so we can try to reproduce?

Hey there,

I have followed your tutorial with slight modifications and I have the same error.

Here a screenshot of the error in react:

You can see the URL parameters which are passed when clicking the link to verify the email and being redirected to the application.

My code is very similar to the example code:

const DEFAULT_REDIRECT_CALLBACK = () =>
 window.history.replaceState({}, document.title, window.location.pathname)

export const Auth0Context = React.createContext()
export const useAuth0 = () => useContext(Auth0Context)
export const Auth0Provider = ({
 children,
 onRedirectCallback = DEFAULT_REDIRECT_CALLBACK,
 ...initOptions
}) => {
 const [isAuthenticated, setIsAuthenticated] = useState()
 const [user, setUser] = useState()
 const [auth0Client, setAuth0] = useState()
 const [loading, setLoading] = useState(true)
 const [popupOpen, setPopupOpen] = useState(false)
 const [hasToken, setHasToken] = useState(hasValidToken())
 const [loadingToken, setLoadingToken] = useState(false)

 useEffect(() => {
   const initAuth0 = async () => {
     const auth0FromHook = await createAuth0Client(initOptions)
     setAuth0(auth0FromHook)
     if (window.location.search.includes('code=')) {
       try {
         const { appState } = await auth0FromHook.handleRedirectCallback()
         onRedirectCallback(appState)
       } catch (e) {
         // console.log("Invalid state on redirect from auth0", e) => Somehow auth0 can not parse the response
         onRedirectCallback({})
       }
     }
     const isAuth = await auth0FromHook.isAuthenticated()
     setIsAuthenticated(isAuth)

     if (isAuth) {
       const u = await auth0FromHook.getUser()
       setUser(u)
     }

     setLoading(false)
   }
   initAuth0()
   // eslint-disable-next-line
 }, [])

You can see that I am using a try-catch at the moment to prevent the redirect to fail.

Would be great if this gets fixed.

Kind regards