Oidc-client-js: React js Error: No matching state found in storage

[galopez1995]

Hi, how can I solve this problem?

Error: No matching state found in storage

I am working on React js, try with https://github.com/maxmantz/redux-oidc but it generates the same error.

Thank you,

[brockallen]

looks like you're using a routing path for your redirect uri. you might need to manually parse the #/hash out of the URL and pass in just the protocol response params into the signinRedirectCalback.

[galopez1995]

I'm trying to make the adjustment you tell me, but it does not work.

Could you give me a guide?

The application of reac js is published in IIS.

Regards,

[brockallen]

it's pretty obvious you have not looked at any of the sample. you should look at those to get started.

[JwanKhalaf]

@galopez1995 how did you overcome this issue? I have looked at the samples, but there is no ReactJS sample, so I had to look at the AngularJS sample, but it didn't help.

This is how my code currently looks:

const loginCallback = () => {
    const currentUrl = window.location.href;
    const queryResponseTypeUserManager = new UserManager({
      response_mode: "query"
    })
      .signinRedirectCallback(currentUrl)
      .then(
        user => {
          setUser(user);
          navigate("/");
        },
        error => {
          console.error(error);
        }
      );
  };

Notice how I navigate away, I use @reach/router and navigate by doing navigate("/");.

Previously, I had .signinRedirectCallback() (with no url param being passed in) but I still got the same error. I'm not sure what I'm missing.

[JwanKhalaf]

@brockallen would appreciate your input, still haven't gotten over this issue :(

[frankieali]

I'm encountering the same issue. It seems that processSigninResponse in src/OidcClient.js is setting the removeState argument in readSigninResponseState to true. Won't that cause it to throw the "No matching state found in storage" error every time?

[frankieali]

I was able to resolve my issue. My component was updating due to changes in props, triggering subsequent calls to signinRedirectCallback. However, after signinRedirectCallback is called the first time it purges the local storage so subsequent calls were failing. This explains why I was getting both the user data and the Promise error.
For other React devs, be sure your signinRedirectCallback is in useEffect or componentDidMount lifecycle methods.

[Pinguwien]

Hey @frankieali ycould you please provide an example of your implementation? I am stuck with this error, too. I used this tutorial: https://medium.com/@franciscopa91/how-to-implement-oidc-authentication-with-react-context-api-and-react-router-205e13f2d49 and especially in the callback.tsx I call the signinRedirectCallback function, which from time to time (often in firefox inkognito mode) leads to no matching state in storage. Sadly its very hard to reproduce that error.

[frankieali]

I used the same tutorial with the exception of swapping react router for reach router. You're probably seeing issues in incognito mode because this library will write authentication data to the local storage session to be recalled in the signinCallback step. I believe various levels of incognito will prevent writing any data to local storage.

[frankieali]

I created a demo app using the service methods described in Francisco Pastor Medium article. My app is for use with login.gov. Perhaps it will help. https://github.com/frankieali/react-login-gov

[mauryakrishna]

I was able to resolve my issue. My component was updating due to changes in props, triggering subsequent calls to signinRedirectCallback. However, after signinRedirectCallback is called the first time it purges the local storage so subsequent calls were failing. This explains why I was getting both the user data and the Promise error.
For other React devs, be sure your signinRedirectCallback is in useEffect or componentDidMount lifecycle methods.

I was trying to resolve this issue from last 4 days but this was suggestion to resolve the issue. Thanks a lot man.