Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Invalid State on Protected Route with query parameters

See original GitHub issue

By submitting an Issue to this repository, you agree to the terms within the Auth0 Code of Conduct.

Describe the problem

I am implementing an OAUTH2.0 process outside of Auth0 because it is just to connect a Slack Workspace and I don’t want my users to be able to login using their slack. This functionality is hidden behind a protected route so users can only connect their Slack account after logging in with Auth0.

My problem is that after the user authorizes my app and slack redirects to mydomain.com/slackcode=SLACKCODE&state=SLACKSTATE my app gets stuck in the unauthenticated state. When I try to open mydomain.com/slack I am automatically authenticated again like normal. It seems that I get an Invalid State error when this happens.

What was the expected behavior?

When I slack redirects to mydomain.com/slack?code=SLACKCODE&state=SLACKSTATE i want my users to be authenticated right away just like normal.

Reference

I seem to have the same problem as this person from stackoverflow but there were no solutions available aside from not using query parameters (which do work) but I cannot do that because the OAUTH2 process uses query parameters.

https://stackoverflow.com/questions/62038511/invalid-state-when-i-come-back-on-a-auth0-private-route-on-a-react-application

Environment

Please provide the following:

Version of auth0-react used: ^1.2.0
Which browsers have you tested in? Chrome
Which framework are you using, if applicable (Angular, React, etc): React
Other modules/plugins/libraries that might be involved: none

Issue Analytics

State:
Created 3 years ago
Comments:6 (4 by maintainers)

Top GitHub Comments

1reaction

adamjmcgrathcommented, Feb 25, 2021

Hi @lvillacin - skipRedirectCallback should work the same on localhost

Can you share a link to some code for how you’ve implemented skipRedirectCallback or a link to the app (the code or the running application)?

1reaction

adamjmcgrathcommented, Feb 24, 2021

Hi @lvillacin - thanks for raising this

It sounds like this SDK is clashing with another OAuth provider. This SDK is designed to check for code and state query params when the page is loaded and attempt to login with them. But because they are meant for Slack rather than Auth0, the login fails.

We have an option to handle these use cases called skipRedirectCallback, which will essentially tell the Auth0 React SDK to ignore those query parameters under some cases, eg to ignore these when the pathname is /slack. See https://auth0.github.io/auth0-react/interfaces/auth0_provider.auth0provideroptions.html#skipredirectcallback

Top Results From Across the Web

How can I preserve query parameters when changing route?

In your route component: ... const locationDescriptor = { pathname: '/somewhere/else', query: ... an action is dispatched that updates the query params.

How to preserve query parameters in react-router v4

I needed to replace {pathname: location, state} part with { ...parsePath(location), state } , where parsePath is imported from history. – ...

How to handle query params in React Router

Learn how to handle query params in a client side react application using react router library.

Routing in ASP.NET Core - Microsoft Learn

Discover how ASP.NET Core routing is responsible for matching HTTP requests and dispatching to executable endpoints.

URL Generation - The PHP Framework For Web Artisans

Laravel allows you to easily create "signed" URLs to named routes. These URLs have a "signature" hash appended to the query string which...