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

Exploring the world of chained JavaScript Promises for automatic pagination of an API

Dealing with a paged API that requires fetching each page of results automatically has led me to construct a recursive promise chain. Surprisingly, this approach actually gives me the desired output. As I've tried to wrap my head around it, I've ...

javascripttypescriptrecursiones6-promise

Troubleshooting CSS Issues in ASP.NET Boilerplate

I am attempting to apply a CSS style to a text input similar to the one found on the CreateUser default page. However, I am encountering an issue where the blue line under the textbox does not appear when I navigate away from and then return to the page. ...

htmlcssangularaspnetboilerplate

Tips for designing a search bar using Angular

search : ____________ I am interested in designing a search bar functionality that automatically triggers when the user inputs 8 or more characters. The input text will be stored in a variable, the search bar will be reset, and the backend API will be che ...

javascripthtmlangular

Attempting to simulate the behavior of nfcManager by utilizing the nfcManager.start() function in react native testing library

In the process of developing my Android app, I encountered a need to read NFC tags. To accomplish this task, I decided to utilize the react-native-nfc-manager library. However, during my implementation, I faced two perplexing issues that have left me stump ...

javascripttypescriptreact-nativereact-native-nfc-manager

Utilize the power of generics with Angular's service providers

Is it possible to make the membervar of class Parent generic instead of type any, while still retaining the ability to switch provider classes without having to update all components that rely on class Parent? For example, if class ChildB implements a diff ...

angulartypescriptgenerics

The ESLINT_NO_DEV_ERRORS flag appears to be ineffective in my Typescript project

Currently, my project involves using the following tools: Yarn Typescript Create React App ESLint Make (Makefile) Fish shell During development, I encounter ESLint errors that prevent my project from compiling. To run my project, I use make run, which es ...

typescriptenvironment-variablescreate-react-appeslintyarnpkg

Can a map key value be converted into a param object?

I have a map containing key-value pairs as shown below: for (let controller of this.attributiFormArray.controls) { attributiAttivitaMap.set(controller.get('id').value, { value: controller.get('valoreDefault').value, mandatory ...

angulartypescriptdictionary

Changing a particular field value within an array of objects in Angular 4

I have a scenario where I created a class called security: class security { public id:number; public name:string; } Next, I initialized an array of security objects: let s:security[]=[{id:1,name:'Alex'},{id:2,name:'John'},{id:3,nam ...

javascriptangular

The Angular 2 Final Release is encountering an issue where it is unable to locate the module name with the

Recently, I made the transition to Angular 2 Final Release from RC 4 and encountered an issue with an error message cannot find name 'module' in my code: @Component({ selector: 'dashboard', moduleId: module.id, templateUrl: ...

angularjsangular

Is there a way to retrieve the value of bindings in the component controller using Angular 1.5 and Typescript?

In my quest to develop a versatile left-hand menu component that can dynamically display different menu structures based on input strings, I stumbled upon an interesting challenge. By binding a string to the <left-hand-menu-component> element like so ...

javascriptangularjstypescript

typescriptCreating a custom useFetch hook with TypeScript and Axios

I have a query regarding the utilization of the useFetch hook with TypeScript and Axios. I came across an example of the useFetch hook in JavaScript, but I need help adapting it for TypeScript. The JavaScript implementation only handles response and error ...

javascriptreactjstypescriptaxios

A guide to submitting forms within Stepper components in Angular 4 Material

Struggling to figure out how to submit form data within the Angular Material stepper? I've been referencing the example on the angular material website here, but haven't found a solution through my own research. <mat-horizontal-stepper [linea ...

javascriptangulartypescriptangular-materialangular-material-stepper

Encountering RxJS errors during the process of constructing an object using streams retrieved from Firebase

I am currently in the process of developing a template-driven form that involves multiple streams from Firebase. Despite my efforts, I keep encountering errors with the json pipe. The error message I receive is "Converting circular structure to JSON as ...

angularfirebasefirebase-realtime-databaserxjsangularfire2

Workbox automatically caches the lazy loaded bundles of Angular for improved performance

As I work on my Angular application and integrate Workbox Service Worker(SW) for PWA compatibility, I encounter an issue with my lazy-loaded bundles. While everything functions correctly in development mode due to SW being enabled only in production, the p ...

angularservice-workerworkbox

There is a Typescript error stating that the argument of type 'NodeListOf<HTMLInputElement> | undefined' cannot be assigned to the parameter of type 'Iterable<HTMLInputElement> ...'

While working on my React/Typescript App, I encountered an issue when trying to access an array of inputs in an event listener using 'e.currentTarget'. To solve this, I utilized Array.from() to convert the NodeListOf into an array and ensured tha ...

reactjstypescript

Struggling to maintain consistent updates on a child element while using the @Input property

I need to ensure that the data source in loans.component.ts is updated whenever a new loan is submitted from loan-form.component.ts. Therefore, in loan-form.component.ts, I have the following function being called when the form is submitted: onSubmit() { ...

angulartypescript

The routing navigate method is failing to direct to the desired component

For the past day, I have been struggling to find a solution to my issue but without success. The routing seems to be malfunctioning as it keeps showing the HTML content from app.component.html even when I try changing the path in the URL. Here is a snippe ...

javascriptangulartypescripturl-routing

Constructor not executing when using Object.create

Attempting to instantiate a class within a static method, I am using Object.create(this.prototype), which appears to be functioning correctly. Nonetheless, when I check the console, my property items is showing as undefined. The base class called model lo ...

javascripttypescript

What is the best way to ensure that my variables are properly differentiated in order to prevent Angular --prod --aot from causing empty values at runtime?

While testing my code locally in production, the functions I've written are returning the expected values when two parameters are passed in. However, after running ng build --prod --aot, the variable name within the functions changes from name to t. ...

angulartypescript

"Access to root is necessary for Angular-cli to run smoothly

After installing angular-cli with the command npm install -g angular-cli, I encountered an error every time I attempted to run any ng command. The error message stated: Error: EACCES: permission denied, open '/home/m041/.config/configstore/ember-cli. ...

angularnpmangular-cli