Search code examples
reactjsreact-routerkeycloakkeycloak-nodejs-connect

ReactJS redirect on page switch with Keycloak authentication

I have created a ReactJS UI that uses Keycloak to authenticate users.

I used this tutorial with some minor tweaks: https://blog.logrocket.com/implement-keycloak-authentication-react/

I am using:

  • React Router
  • keycloak-js
  • @react-keycloak/web

Now the problem is that when I am routing between the different pages of my application it redirect through a page with variables in the URL.

I added a screenshot of the redirect url. After the redirect shown in the image I get redirected again to the correct page (in this case /secured).

After click on the link to the "secured" page

This behaviour is not really what I expected from a SPA.

I want it to redirect to the page I click without any step inbetween.

If you need anything else I am happy to provide information/code snippets.

Thanks in advance!

Solution

  • I found the solution.

    The tutorial I used used <a href="/"> to route between components.

    After switching it to <Link> from react-router-dom it works like expected.