Stop flickering of menu when is logged in

Using Angular 19 and angular-auth-oidc-client I have the HomeComponent code:

export class HomeComponent implements OnInit {

private readonly oidcSecurityService = inject(OidcSecurityService);

private readonly eventService = inject(PublicEventsService);

isAuthenticated = signal<boolean>(false);
isCheckingAuth = signal<boolean>(true);

ngOnInit(): void {

this.oidcSecurityService.isAuthenticated$.subscribe(({ isAuthenticated }) => {
this.isAuthenticated.set(isAuthenticated);
this.isCheckingAuth.set(false);
});

this.eventService
.registerForEvents()
.pipe(filter((event) => event.type === EventTypes.CheckSessionReceived || event.type === EventTypes.UserDataChanged))
.subscribe((event) => {
console.log('Auth event received:', event);
this.oidcSecurityService.isAuthenticated$.subscribe(({ isAuthenticated }) => {
this.isAuthenticated.set(isAuthenticated);
});
});
}


And the HTML is:

<div *ngIf="!isCheckingAuth(); else loading">
<div *ngIf="isAuthenticated(); else noAuth">
<button (click)="logout()">Logout</button>
<button (click)="logoffAndRevokeTokens()">Logout and revoke tokens</button>

Is Authenticated: {{ isAuthenticated() }}

</div>
</div>

<ng-template #noAuth>
<button (click)="login()">Login</button>
<hr />
</ng-template>

<ng-template #loading>
<p>Loading authentication...</p>
</ng-template>


After I login I still can see the login button for an instance.

And the same when I refresh the page and I am logged in.

How can I stop this flickering?

Continue reading...