Redirect user to the "Confirm Logout" page in Keycloak after refreshing the page before logging out

While working on a project with keycloak, I've encountered an issue that I can't seem to figure out.

After logging in and navigating to my project's page, everything operates smoothly. However, if I happen to refresh the page before logging out, upon logout I am directed to a "Confirm logout" page.

Is there a way to prevent this page from showing up?

Here are the current keycloak configurations I'm using:

await keycloak.init({
  config: environment.keycloakConfig,
  loadUserProfileAtStartUp: true,
  initOptions: {
      onLoad: 'check-sso',
      checkLoginIframe: false,
      silentCheckSsoRedirectUri: window.location.origin + '/assets/keycloak/silent-check-sso.html',
      enableLogging: true
  }
});

In previous versions of keycloak-js/keycloak-angular, there was an option to disable this page during the logout() action. Unfortunately, it seems that this feature is not available in the latest versions.

angulartypescriptkeycloakkeycloak-angularkeycloak-js

Answer №1

Hours of troubleshooting and relentless searching led me to discover the root cause of this issue. It turns out that blindly following a misleading "tutorial" was the culprit. The tutorial suggested executing the following code on logout:

await this.keycloakService.logout(logoutUrl).then(() => {
  this.keycloakService.clearToken(); // This line caused all the trouble!!
});

During logout, keycloak requires the token for proper sign out. If the token is removed prematurely, it triggers a redirection to the "Confirm logout" page every time.

SOLUTION:

Delete the line 

this.keycloakService.clearToken();
and you'll be back on track.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Why is it that TypeScript struggles to maintain accurate type information within array functions such as map or find?

Within the if block in this scenario, the p property obtains the type of an object. However, inside the arrow function, it can be either an object or undefined. const o: { p?: { sp?: string } } = { p: {} } if (o.p) { const b = ['a'].map(x => ...

typescript

Why is it that when the form is submitted, the value becomes unclear?

This is a form with HTML and TypeScript code that I am working on. <form> <div class="form-group"> <input class="form-control" ([ngModel])="login" placeholder="Login" required> </div> <div class="form-group"> &l ...

htmlangulartypescript

An issue occurred during the compilation of an Angular6 project

I am embarking on my first Angular project and may not grasp every detail perfectly. In my search for guidance, I came across the command "ng build --prod" on Google and decided to give it a try. Everything seemed to be going smoothly at first until an err ...

htmlcssangularwebng-build

The error message "Angular 4 does not recognize the 'dragula' property as a valid property of the 'div' element" is displayed

Struggling to integrate ng2-dragula with the AspNetCore SPA template. Despite trying various solutions, I am still encountering the following error: Exception: Call to Node module failed with error: Error: Template parse errors: Can't bind to 'd ...

angularsingle-page-applicationng2-dragula

Exploring the Power of Angular 2+: Leveraging the canLoad Feature

I'm having trouble getting the canLoad function to work with routes. It seems like it's not functioning properly. I'm not sure why, maybe it's incompatible with canActivate or something, but I'm hoping someone here might know. Wh ...

angularlazy-loadingangular-routingangular-guards

Obtain a segment of the string pathway

In this scenario, there is a file path provided below. Unlike the rest of the URL, the last part (referred to as video2.mp4) regularly changes. The language used for this project is either Javascript or Typescript. file:///data/user/0/com.sleep.app/files/ ...

javascriptregexstringtypescript

Unexpected behavior of ion-select: No rendering of selected value when applied to filtered data

I came across an unexpected issue with the dynamic data filtering feature of ion-select. In my application, users are required to choose three unique security questions during registration. I have an array of available questions: questions: Array<{isSe ...

javascriptangularionic2

Extract information from a complex nested structure within an array

Can someone assist me with extracting only the username from the response provided below? I am able to access other data but struggling with this particular aspect. [ { "_id": "5f44d450aaa72313549d519f", "imageTitle": "u ...

node.jsjsonangular

Divide Angular module

In my Angular application, I have set up pages with a consistent header and sidebar structure. However, the main content on these pages may change based on different routes. To keep things organized, I decided to create a central page outlet where the main ...

angular

Creating a Docker Image for Node.Js Using Bazel

Reason Behind the Need I am diving into the Bazel world and struggling to find comprehensive references on constructing Docker images for Node.js. My focus lies on a Typescript-based Node.js application that relies on two other Typescript packages. My ul ...

node.jstypescriptdockerbazel

Why is the imported package not being recognized in the namespace declaration of my Node.js TypeScript file?

Currently, I am utilizing the WebStorm IDE developed by JetBrains to modify a TypeScript file within a Node.js v8.6.0 project. The JavaScript version set for this project is JSX Harmony. In the beginning of the TypeScript source file, there is an import st ...

javascriptnode.jstypescriptwebstormjavascript-namespaces

What are the steps for integrating Angular Material into an existing project?

I have recently set up an Angular 2 project. Attempting to integrate Angular Material into my existing project, I followed the steps outlined in the official documentation by running the npm command: npm install --save @angular/material @angular/cdk How ...

angularnpmangular-material2

What is the best way to retrieve class properties within an input change listener in Angular?

I am new to Angular and have a question regarding scopes. While I couldn't find an exact match for my question in previous queries, I will try to clarify it with the code snippet below: @Component({ selector: 'item-selector&apos ...

angulartypescript

Ways to identify if there is a problem with the Firestore connection

Can anyone help me understand how I can use angularfire2 to check the accessibility of the cloud firestore database and retrieve collection values? If accessing the cloud database fails, I want to be able to retrieve local data instead. This is an exampl ...

javascriptangularfirebasegoogle-cloud-firestore

What is the most effective way to send messages from Typescript to C#?

Could someone provide guidance on how to properly send a message from Typescript to C#? I have been attempting to receive the message in C# using WebView_WebMessageReceived with the code snippet below: private void WebView_WebMessageReceived(object sender, ...

c#typescriptpostmessage

Adjust property value based on changes in a related property

Currently, I am developing a TypeScript-powered Angular (5) application and I have encountered a puzzling question that is proving elusive to solve. Let me illustrate with the following example: ... export class SomeComponent implements onInit { ... ...

angulartypescript

Adding a custom button to CkEditor 5 in Angular 12: Step by step tutorial

How can I customize the toolbar in version 4 of Ckeditor 5 by adding a unique button? I have tried looking through the documentation, but have been unsuccessful in achieving my goal. ...

angularckeditor5

How to Add External Applications Using Angular-CLI

I am a newcomer to using angular-cli and I have a question regarding the installation of the npm library mdbootstrap. Following the guidelines provided here in the Angular CLI Instructions, I attempted to install mdbootstrap by executing the following step ...

angularangular-clinpm-install

"Trouble accessing the URL" error encountered when trying to load templateUrl for dynamic components in Angular 2

Attempted to modify a solution found here. The modification works well, but when changing the template to templateUrl in the component that needs to be loaded dynamically, an error occurs: "No ResourceLoader implementation has been provided. Can't rea ...

angulartypescriptangular2-compiler

What exactly does the question mark represent in the code structure as indicated in VSCode?

When looking at the image, you can see that in the description of done(), VSCode indicates the type of parameters using a colon error: any or sometimes with a question mark and colon user?: any. So, what exactly is the distinction between these two ways o ...

javascriptnode.jstypescriptvisual-studio-code