fix(kaHasRoles): re-render on token refresh and auth events

[Maxouhell]

PR Checklist

Please check if your PR fulfills the following requirements:

• The commit message follows our guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

What kind of change does this PR introduce?

[x] Bugfix
[ ] Feature
[ ] Code style update (formatting, local variables)
[ ] Refactoring (no functional changes, no api changes)
[ ] Build related changes
[ ] CI related changes
[ ] Documentation content changes
[ ] Other... Please describe:

What is the current behavior?

The *kaHasRoles directive currently listens only to the Ready Keycloak event.
As a result, role-based UI visibility is not updated when the access token is refreshed.

This patch enhances the directive to also respond to AuthRefreshSuccess, AuthSuccess, TokenExpired, and AuthLogout events.
This ensures that UI elements controlled by *kaHasRoles are correctly re-evaluated after authentication or token lifecycle events.

Issue Number: N/A

What is the new behavior?

*kaHasRoles directive now listen AuthRefreshSuccess, AuthSuccess, TokenExpired, and AuthLogout events.

Does this PR introduce a breaking change?

[ ] Yes
[x] No

Other information

Tested in Angular 19.2 app keycloak-js 26 and Keycloak 26

[hmichelotti-lab]

I have the same problem, please approve!

@mauriciovigolo

[jhonataldsantos]

@mauriciovigolo we're facing the same problem, and it would be interesting to fix this bug so we don't have to go around this problem

[Maxouhell]

@jhonataldsantos @hmichelotti-lab if you have production bug like me, before this PR can be merged and deployed, you can just create a ka-has-roles.directive.ts inside your project, copy the content of has-roles.directive.ts from my PR and update the imports like this :

import { Directive, effect, inject, Input, type OnChanges, type SimpleChanges,TemplateRef, ViewContainerRef } from '@angular/core';
import { KEYCLOAK_EVENT_SIGNAL, KeycloakEventType, type ReadyArgs, typeEventArgs } from 'keycloak-angular';

import Keycloak from 'keycloak-js';

And import your own directive instead of the keycloak-angular one inside your components.
It's a "quick and dirty" hot fix, but it will work and fix your issue.
Don’t forget to delete this temporary code once the PR is merged :)

[jhonataldsantos]

@jhonataldsantos @hmichelotti-lab if you have production bug like me, before this PR can be merged and deployed, you can just create a ka-has-roles.directive.ts inside your project, copy the content of has-roles.directive.ts from my PR and update the imports like this :

import { Directive, effect, inject, Input, type OnChanges, type SimpleChanges,TemplateRef, ViewContainerRef } from '@angular/core';
import { KEYCLOAK_EVENT_SIGNAL, KeycloakEventType, type ReadyArgs, typeEventArgs } from 'keycloak-angular';

import Keycloak from 'keycloak-js';

And import your own directive instead of the keycloak-angular one inside your components. It's a "quick and dirty" hot fix, but it will work and fix your issue. Don’t forget to delete this temporary code once the PR is merged :)

Thank you @Maxouhell helped a lot! :)

[mauriciovigolo]

Hey @Maxouhell,
thank you for solving this issue and opening the PR.
Great work! 💯