Understanding Keycloak Sessions with React+Spring

Hi,

I’m running a React app with a keycloak-protected Spring backend and noticed strange behaviour.

When opening the app via browser, the backend recognises the session and keeps the user logged in. However, after around 10 minutes, all Ajax calls fail (The server attempts internal redirects to the keycloak server). Simply refreshing the page solves the issue, meaning that the user is still logged in.

I’m having difficulties understanding what exactly is happening, since the session still works when the page is reloaded.

The achitecture is very simple:
Frontend: React
Backend: Spring with keycloak-spring-boot-starter

Can someone give me an idea why this could happen? I feel like I’m missing some key concept on how Keycloak is handling user sessions.

I assume, this happens because your access token is expired and you (your react app or your spring app, don’t know, because you didn’t tell us any details about your architecture and how you implemented things) don’t properly refresh the token. :man_shrugging:

I didn’t configure anything and used default values. As I wrote, the session stays active no matter what. I can return after days and it’s still logged in when reloading the page. The only issue is that all Ajax calls fail after around 10 minutes.

Regarding my architecture, it’s very basic with everythinig left at default values:
Frontend: React without any reference to keycloak.
Backend: Spring with keycloak-spring-boot-starter

Is there any need for the react app to refresh anything?

Then, you most probably don’t use default values…

Like your favorite consultant says: It depends.
On your requirements, on your goals, on your architecture, on your knowledge, etc… on many things.

You’re correct, I’ve changed the max session durations in keycloak. That’s about it.

I’m trying to understand what’s going on, since it doesn’t make sense to me that the ajax calls fail. I think I’m missing an important concept of keycloak in regards to how it handles sessions. It seems that on any ajax call after 10 minutes it tries to redirect to keycloak for some reason. But the page reloads without issues and everything is working fine for 10 minutes after the page reload.

To better illustrate what’s going on:

1.) I’m using the spring keycloak adapter to manage the login.
2.) Spring renders a simple html page with a react app that makes basic ajax calls. There’s no authentification going on there at all. Just basic javascript that calls endpoints.
3.) The react app makes regular REST calls to the spring endpoints.
4.) After around 10-20 minutes all calls fail. In the chrome dev-tools I can see that it tries to redirect the rest calls to the keycloak server login page.
5.) Everything works again after reloading the page.

This is how I configured Keycloak:

I’ve found similar threads about this problem online, but so far no solution. Is there some kind of token type that’s not configurable via the keycloak admin interface and is expiring?

I worked on this for a few days and as far as I can tell the spring keycloak plugin is broken. Setting all lifespans to 365 days didn’t fix the issue so its not honouring the token lifespan settings.

I solved the problem by changing the architecture:
Frontend: React + KeycloakJS
Backend: Spring + spring-boot-starter-oauth2-resource-server

This guide helped me getting started: https://www.baeldung.com/rest-api-spring-oauth2-angular

1 Like