Getting invalid state on redirect

[Anupamc]

I am building a react application, as per requirement the app will run on localhost:3400, after login I want to redirect user to org1.localhost:3400. Redirection to org1.localhost:3400 is working, But getting ‘invalid state’, Please let me know how this can be resolved.

[rueben.tiow]

Hi @Anupamc,

Thanks for reaching out to the Auth0 Community!

An invalid state error happens when the returned state value does not match the state value that was passed in the initial login request. This is explained in more detail in this related post.

Could you please confirm if the state value passed in the login request matches the state value in the response?

[Anupamc]

My user is login to the application using localhost:3000, after getting authenticated from auth0 I want the user to be redirected to new.locahost:3000. when passing ‘new.localhost:3000’ the url is opening after the authentication but getting ‘Invalid State’ error. Please let me know how to fix this.

[rueben.tiow]

Hi @Anupamc,

I have merged your first post on this thread on having an invalid state to keep our conversation in one place.

Thanks!

[Anupamc]

Hi @rueben.tiow , thanks for your reply. I am using below npm package.
import { useAuth0 } from “@auth0/auth0-react”

I dont see any option to pass state in loginwithRedirect function. how can I pass state value in the initial login request here.

onClick={() => loginWithRedirect()}

[rueben.tiow]

Hi @Anupamc,

Thanks for following up.

Could you please share the exact code and steps you took in your tests that led to an invalid state error?

And if possible, could you please capture the login events in a HAR file and send them to me as a direct message to investigate further?

Thanks,
Rueben

[Anupamc]

HI @rueben.tiow , I am using sample react app provided by Auth0.

updated the providerConfig as mentioned below. In my case both localhost:3400 and org1.localhost:3400 are pointing to same application.

const providerConfig = {
domain: config.domain,
clientId: config.clientId,
onRedirectCallback,
authorizationParams: {
redirect_uri: ‘http://org1.localhost:3400’,
organization:‘org_g8jXXXXXXXTU5u’,
…(config.audience ? { audience: config.audience } : null),
},
};

After login getting successfully redirected to http://org1.localhost:3400/?code=XXXX&state=XXXX
but getting invalid state error.

PFA HAR file
org1.localhost.har (6.3 MB)

[rueben.tiow]

Hi @Anupamc,

Thanks for your reply.

After looking at your HAR file carefully, I see that the returned state parameter matches the one from the initial login request.

And when testing this on my end, I could not reproduce the error with the Auth0 React SDK.

One workaround I would recommend is to go directly to the Auth0 React SDK Quickstarts: Login page and log in to your Auth0 account.

On there, you should have an option to Download Sample.

A popup window should appear, giving you the option to select the application you would like this sample to be configured for:

Then following the provided instructions, you should be able to run the sample application without any issues.

Could you please give this a try and let me know how it goes?

Thanks,
Rueben