How to deal with "The CSRF value from the token does not match the CSRF value from the data store" error for first party scenario

Hello.
As per this issue from github it is clear, that

Hydra doesn’t support two simoultaneous oauth2 auth code flows from the same browser.

I have client SPA application in browser, and login through hydra. Imagine the case, when someone opens two links to my application (let’s say its url is https://myapp.com). As he is not logged in, he will be redirected to https://login.myapp.com on both tabs, which is where my login-consent app is located. Hydra uses cookie for csrf protection. In my case csrf cookie from second tab will replace cookie from first tab. If user tries to login from first tab, he will get “The CSRF value from the token does not match the CSRF value from the data store” error.

Can I somehow fix this behavior? Any suggestions or workarounds?

We’ve been thinking about having the CSRF state persist over multiple session (unless a principal change occurs) but we have not checked the security implications of that yet.

As your application also has a state (?client_id=…&state=…) which should be unique per request, this issue is usually not only within hydra itself but also in the actual oauth2 client.

Thanks for your response.
Could you please clarify statement about state? Really, I have a state in my client (which is actually my first party application). I generate unique state for each auth flow. In my case (described in initial question) I initiate two oauth flows with two unique states. It is not clear for me how I can change smth here, to fix initial issue with csrf mismatch.

what I meant is that since you’re creating a unique state each time you initiate the flow, if you have multiple flows going on, you will end up with an error state at the end, unless you keep track of all the states in your client application, which is most often not the case!