Bug: Bad authorization state. Refreshing the page might solve the issue. (

[pablojakub]

Hello,
In my react React I've got an error when I first time enter the page:

THis may indicates that in my url there is no 'code' query. Indeed there is no 'code' query and after reloading the page it is.

I tried to change settings in my router:

Right now default page redirects to /dashboard. But even when I delete it doesn't work.

In TAuthConfig I have autoLogin: true and clearURL: false,

I'am using this verson:

My expected behaviour - login wihout refreshing the page. Of course I can force login() method but it does not do the trick for me in this case

[soofstad]

Could you be running into this issue? https://github.com/soofstad/react-oauth2-pkce#after-redirect-back-from-auth-provider-with-code-no-token-request-is-made

Specifically:

This could also happend if some routes in your app are not wrapped by the <AuthProvider>.

[pablojakub]

Yeah I read about it and it's not this case. When I'm redirected from my provider everything works fine. It happens when I enter the page -> provider/ library somehow remembers session -> no redirect to provider to login -> error 'bad authorization state...'

All my routes are wrapper inside AuthProvider. AuthProvider is in index.sx and App routes in App.tsx one level lower

[soofstad]

Are you able to make minimal example on how to recreate this bug?

If not, I'd like so see the state of localStorage, both before and after you are redirected to the authentication provider. If everything there looks alright, then you should have a look at what parameters the auth servers sets when it redirects you back after login.

[madtag]

I am also facing a similar issue. My company's QA found a very interesting scenario:

• First attempt to access the site, you get redirected to keycloak, no problem.
• If you don't log in and try to access the site again (new tab or in the same tab) you get the 'Bad Authorization State' Error and it goes straight into the site bypassing authirisation
• If you try to access the site again it redirects to keycloak, no problem
• If you don't log in and try to access the site, then 'Bad Authorsation State' Error
• Repeat ad nauseam

I've done a lot of monitoring and found the following, when there is 'Bad Authirisation State' Error:

• there is no attempt to reach keycloak
• logout() function does nothing

Seeing you ask about localstorage I monitored it and found something very interesting:

First time:
Storage { length: 0 }

Second Time:
Storage { ROCP_tokenExpire: "1691504132", ROCP_token: '""', ROCP_loginInProgress: "true", ROCP_refreshTokenExpire: "1691504132", length: 4 }

Third Time:
Storage { ROCP_tokenExpire: "1691504148", ROCP_token: '""', ROCP_loginInProgress: "false", ROCP_refreshTokenExpire: "1691504148", length: 4 }

After logging in:
Storage { ROCP_tokenExpire: "1691504289", ROCP_token: '""', ROCP_loginInProgress: "true", ROCP_refreshTokenExpire: "1691504289", length: 4 }

So it seems that the logininProcess is the issue. I tried to check if there isn't a token and logininProcess is false or null to call the login command and it works. But then logging out doesn't. Tried this both with autologin = true and autologin = false.

Any help on this issue?

[pablojakub]

Ok - most updated version:

First scenario:

1. Local storage is empty - everything works fine. I'm redirected to provider -> there log in -> redirect to my app and everything works

Second scenario:
Local storage is NOT empty. There is some ROCP data. I'm NOT redirected to provider -> there is no 'code' param in my url and error occurs.
My local storage:

I think in order to reproduce it I need to:

1. Log in to the provider first OUTSIDE my application environment.
2. Turn on my app
3. Then there is no redirect and beforementioned data in local storage.

[soofstad]

react-oauth2-code-pkce will only attempts to retrive code from url if loginInProgress is true.
That is set right before redirecting to auth provider.
The login flow needs to start from the web app using the package. Any redirects to the web-app with code besides that will not work. However, it should just automatically log the user in anyway, with a new redirect.

Have you tried clearing all the web apps persistent data? Calling "logout()" should be enough.

If you wan't some more help with this, I realy need an example on how to recreate it.

[pablojakub]

Hi,
It's really hard to recreate it. Usually it happens when I build my app locally and the session is kept. Nevertheless I will wait until we will release it on demo and if it persist maybe I will catch it and report here. Thank you for your support.

[pablojakub]

I would also ask about 'logout()' method. Currently when I'm calling this method my tokens are deleted from localStorage but there is no redirect to login again. Is there any possibility to redirect to login again?

Sidenote:
I already used both logoutEndpoint and logoutRedirect but without any effect

[soofstad]

If "logoutEndpoint" is provided, calling "logout()" should redirect the user to that URL.
Any errors being thrown when you call "logout()"?

[sebastianvitterso]

If I'm reading this correctly, you want the user to be sent back to login whenever logout is called - won't autoLogin=true make that happen?

[pablojakub]

@soofstad no there is no error. I provided logoutEndpoint but after calling logout nothing happens. Only ROCP_tokens are removed from localStorage. To make matter worse it doesn't logout me from provider (OP) - but this is probably due to some configuration on the OP side.

@sebastianvitterso after logout I would like to be redirected to provider to login again. Right now I have to make a bypass and manually change url by providing window.location.href

[Maatzu]

@pablojakub Do you use Next.js? I am experiencing this same issue right now after migrating over to the new App router.

[Adman94]

Hello @soofstad , I'm also encountering this issue Bad authorization state. Refreshing the page might solve the issue. and was wondering if there's a solution to handle this. I'm working on a React/TS SPA and also using the @tanstack/react-query package. Please let me know what details I can provide to work on it. Would really appreciate a response at your earliest convenience. Thank you!

[soofstad]

Got a good detailed recreation report from @madtag . Will see if I can find what's causing the issue as soon as I get some time.

[madtag]

Another concern of mine is that when we have this Bad Authorization State, Logout does nothing. It does not try to redirect to keycloak to log in again.

So in the case where we send the token in api calls, the api would respond with an 401 Unauthorized error, we would not be able to run logout to redirect to the login page and the user would be left stranded in a gui with no data.

[soofstad]

This is a problem you need to work around.
It is impossible to "log out" if there is noone logged in. The sever need to know "Who it should log out".

You will need to create a solution where you redirect to login page or call the "log in" function when the need arises.

[madtag]

I have another situation where Bad Authorisation State may occur (and I don't think there is much you can do about it to be honest). When you specify a keycloak url that doesn't point to keycloak but somehow returns a 200 response you get the 'Bad Authorization State' error, the gui is loaded anyway and logout does nothing. (Or appears to do nothing)

[madtag]

Another situation where Bad Authorisation State may happen. Configure an invalid redirect_uri. Keycloak will show the error below

The link will point to the Root url configured in the keycloak client and if it is the same url you started from will go into the 'Bad Authorisation State'

[madtag]

@soofstad Is there any ETA on this issue please? Sorry for asking but my manager is pressuring me.

[soofstad]

Hey,
I'm currently away on some travels, unable to work on the project until October. Perhaps @sebastianvitterso could have a look.
I do consider this to be the highest priority issue right now. So will work on it when I get back.

[sebastianvitterso]

@madtag Can you make a minimal example on codesandbox? I don't really know where to begin here yet, but having a repro might help.

[soofstad]

From what I can gather, there is no bug, and everything is working as intended.
There's been raised many different concerns in this discussion, but to focus on the "Bad auth state".

If the user aborts the login process at the auth provider and goes back to the app, we have no other choice than to raise this error.
The app must be designed in such a way that the user is presented with a choice to attempt login again.

The error in question is a bit vague; 'Bad authorization state. Refreshing the page might solve the issue.'
This message is targeted at end users, but for developers we should add a more informative message in the console. The problem is quite clearly that the library expected a ?code= parameter in the URL, but did not find one.

[soofstad]

Now, version 1.15.1 includes a fix where the error is not cleared automatically, and no redirect to logout is made if the user is not logged in.
This should make the behaviour of the library a bit more consistent.