Bug: "Bad authorization state" error on subsequent visits to login page.

[muazshahid]

When I first visit the homepage of my React application at localhost:3000, the application correctly redirects to my Django server for authentication which uses django-oauth-toolkit. I close the tab, then if I return to the application at localhost:3000 after the initial visit without clearing the browser's cache or restarting, it fails to redirect for re-authentication and displays a "Bad authorization state" error. If I refresh my browser tab at this stage, the error goes away and I am redirected to my login page. I am unable to understand why '?code=' parameter is expected to be set when the user isn't even logged in.

Error Detail : Bad authorization state. Refreshing the page and log in again might solve the issue. Expected to find a '?code=' parameter in the URL by now. Did the authentication get aborted or interrupted? (AuthContext.js:213)

Auth config settings :

    const authConfig = {
        clientId: process.env.REACT_APP_CLIENT_ID,
        authorizationEndpoint: process.env.REACT_APP_AUTHORIZATION_ENDPOINT,
        tokenEndpoint: process.env.REACT_APP_TOKEN_END_POINT,
        redirectUri: process.env.REACT_APP_REDIRECT_URI,
        scope: process.env.REACT_APP_SCOPE,
        logoutEndpoint: process.env.REACT_APP_LOGOUT_URI,
        state: `${Math.random().toString(36).substring(7)}_${Date.now()}`,
        tokenExpiresIn: 3600,
        refreshTokenExpiresIn: 604800,
        onRefreshTokenExpire: handleRefreshTokenExpire,
    };

Steps To Reproduce

This happens on subsequent visits, as described above.

The current behavior

The application shows a "Bad authorization state" error and does not redirect to the server for login.

The expected behavior

The application should redirect to the server for login without showing an error every single time if user isn't authenticated.

[sebastianvitterso]

This is expected behaviour, as whenever you start a login-flow (and redirect to the oath-server), the library has to start expecting a code-parameter. You are, as the page developer, able to fix this if you'd like, e.g. by clearing the ROCP_loginInProgress key in localStorage when you (somehow) know that the user cancelled their flow.

However, I don't think you'll find it super-easy to manage this, as what happens once the user has been redirected to the auth server (them closing the window/navigating away) is impossible to see for your js code, since it's no longer running).

But you are allowed to modify the ROCP_*-values in localStorage/sessionStorage if that helps you!

[soofstad]

IMO, the most universal solution to this, is to whenever you get a error from the library,show a message/box with a button triggering the "Login" function.

[sebastianvitterso]

Closing this, given @soofstad's comment, but @muazshahid, let me know if you believe another solution (from the library's side) would be preferential, and we can reopen it.

[vhermecz]

I've just spent 15 minutes to figure out why is the front page stuck loading. After looking around I've found "Bad authorization state. Refreshing the page and log in again might solve the issue." in the logs. It is great that you log this out, so I could see what is going wrong. But this could be done better: It is totally possible, that you open your app, abandon that tab, and open your app again. Here we could start debating if the best approach is:

• Showing a popup from app logic
• Silently overwriting exisitng ROCP_* values and moving on to the auth provider

What I'd expect from this library is to have a configuration related to this. If I want to go with option 2, silently doing auth again, I do not want to tamper with ROCP_* values. Those are library internals. I should not be required to change those.

Thx for the library BTW, OAuth flows are not easy, this lib can be pretty helpful!

[soofstad]

Hi @vhermecz, thanks for your feedback. In a cause that "something went wrong", there are too many unknowns, and no single correct way to handle it. It all depends on the app, the authprovider, the user experience, etc. etc.. It's kind of dangerous to just automatically retry a login, as the user/app could get stuck in an infinite login loop, and possibly get blocked by the authprovider for doing to many calls. You can (and should) handle logins that fails yourself, you can do that by checking the error value, and deciding what is right for your app to do. Ether show a message, a popup with a "login again" button, hint at the user to refresh, or just call logIn() automatically.

Any ideas on how the library could handle this better is welcome :slightly_smiling_face: