Invalid state error after using Oauth with Auth0 React SPA

Help
, , ,
1

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!!!

3 Likes
2

Hey there Tagai!

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

3

Hey there,

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

Here a screenshot of the error in react:

Screenshot from 2020-02-24 12-40-52
Screenshot from 2020-02-24 12-40-521634×878 113 KB

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

4

I’m currently having the exact same problem, have you found any solution to this or is this something that’s wrong with the library?

2 Likes
6

We are seeing the same Invalid State error with Auth0 React with multiple repeated calls to getAccessTokenSilently(). Any insights to fix this problem?

1 Like