I’m using Keycloak now and I simply love it. Though it’s hard to set up, I’m pretty content.
Now I want to improve workflows. Here’s my current problem.
Let’s say my Keycloack instance is running on
I have a react.js client at
example.com and a dotnet 6 API at
Now consider this workflow:
- User logs in
- Gets the token in react.js
- Browser sends that token on each request to the API (
Authorization: Bearer tokenheader)
- Everything works fine until the token expires
- User has filled a form in react.js
- He pushes the submit button. Post request goes to API with the expired token.
- API realizes that the token is expired.
I’m stuck here. If API asks for a new token using refresh token, then we actually DDoS attack our own Keycloak. Because for each react.js request, we should get a token.
If API returns an error saying that the token is expired, then what should we do in the client app? If we redirect the user to Keycloak, form data is lost and the user needs to re-fill the form. If we don’t redirect the user, how should we refresh the token? Also, it’s still a bad UX, since the user needs to submit a form twice and spend extra time to compensate for refreshing the token.
Please guide me on how can I improve this scenario?
Right now, my implementation is this:
- User submits a form or reloads data from the server
- Server (dotnet) response with an error that the token is expired
- Client (react.js) shows a message that the user needs to re-login and redirects the user to the login URL
- If the user is still logged in into the Keycloak, the user would be redirected back, but loses form data in react.js
- If the user is not logged in into the Keycloak, he would log in again and would be redirected back, again with lost data.