Keycloak 18 + React logout issue

Getting advice
,
1

I’m using keycloak-react/web and keycloak-js packages in my React project. This is what I have in my keycloak.js

import Keycloak from 'keycloak-js'

const keycloak = new Keycloak({
  url: `http://localhost:8080/auth`,
  realm: 'demo',
  clientId: 'demo',
})

export default keycloak

The user is logged-in via Google IDP and this is how I logout:

{
  !!keycloak.authenticated && (
    <li>
      <a href='/#' onClick={() => keycloak.logout()}>Logout</a>
    </li>
  )
}

This used to work fine till I switched to keycloak v18.x.x Quarkus. I updated the JavaScript adapter (keycloak-js) to v19.0.1 which at least logs-out the user now but still haven’t figured out how to redirect back to the login page.

What I understand from the release notes is that the mechanism to logout has been changed. But what I don’t understand is how and where do I use this post_logout_redirect_uri or any other method, as a matter of fact, to just redirect back to login

2

The relevant documentation is here: Server Administration Guide

The new relaying party (RP) initiated logout needs the id_token and a post_logout_redirect_uri.

This post logout uri needs to be pre-registered in the server, just like the redirect uri.

Maybe you didn’t registered it when the server was upgraded?

3

I’m sorry but I’m quite new to this and don’t understand by what you mean when you say “pre-register the post logout uri in the server”. The only thing I did was download Quarkus v18.0.2 and run this command

./kc.sh start-dev --http-enabled true --http-relative-path /auth --hostname-strict-https false --hostname-strict false --proxy edge

I do see a .conf file, do I have to declare the post logout uri parameter there?

4

This can be done at Keycloak’s web interface, on the client configuration.

5

Hey guys, im having the same problem, but im using Vue.js instead of React.
My problem is on post_logout_redirect_uri. I didn’t find where to set this url on my client in Keycloak’s web interface.
Could you tell me better or show me where to place the log out url’s registration field? @weltonrodrigo

6

This options is only available in Keycloak from v18+. The release notes have a pretty decent explanation and rationale. They link to the appropriate section on the manual.

The url ifself must be entered at this field (this is for the new admin console, the old one is similar):

image
image734×87 12 KB

If you are not seing this field, check your keycloak server version.

1 Like
7

I’ve seen some images on the forum that actually show this field for logout. However, the sequence of fields is a little different from what’s available to me. I’ll check the version of my Keycloak.
Thank you very much.

8

@jvhk If this project is for the brazilian goverment and your are a public servant, I’m able to provide free consultantion. DM me if interested.

9

@weltonrodrigo this current project is unfortunately not for the government, however, where I work we have projects under contract with the government.
The problem I’m encountering is that inside Keycloak (this image is from a local installation of 18.0.1) the field I’ve seen in other discussions on the forum. Even the interface is different. Is there any interface update that might be causing this problem?

Test installation

image
image2543×958 131 KB

10

…Continuation

Images I found on the forum about logout discussions.

image
image1563×791 47.4 KB

11

Have you tried enabling the option Front Channel logout? This should enable the Front-Channel Logout URL and Front-Channel Logout Session Required options.

12

Yes I tried, but it returned a 500 status code error :pensive:

13

You get a http 500 when enabling the switch? If that’s the case, can you post the exception on the server logs?

14

Yes!
The post_logout_redirect_url URL is also not changed in the payload even after I enable Front Channel Logout and set a specific URL.
Logout is invoking the same URL as the page that is loaded at the time it should be logging out rather than redirecting to another URL.

Note: this error screen is appearing only in the browser. In my API there is no error.

image
image1427×975 13.5 KB

16

@jvhk Sorry, I confused the features. The front-channel logout url is one thing and the RP-Initiated Logout is another.

As stated in the other thread (I really believe cross posting this is not ideal), I believed you should include the post redirect url as a redirect URI in the admin console.

17

You have to set both post_logout_redirect_url and id_token_hint as url parameters.
Refer oidc-logout section for more info Server Administration Guide

1 Like