Hi. I can't say for sure in which moment it has begun, but now if I try to logout from the page OTHER than Home page (root page) - the logout does not happen. Here is the workflow of what is happening when I'm clicking "Logout" button in my Angular app:
First connect/revocation request contains "access_token". Next "connect/revocation" request contains "refresh_token.
Eventually I am just redirected to Home page.
Also the whole process is very slow and not attractive visually: at first the navigation and top menu gets disappears, so I see only the current page instead of being instantly redirected to Identity Server Login box (where I do not get at all in my case).
I don't know where to look at: is it a problem of front-end or back-end. Please point me in right direction.
Additionaly details: we DO have "AuthGuard" in app-routing.module.ts for each page we are trying to logout from.
Marked in red is yet another issue which is still not resolved: the subscribed API calls in the current Component: seems like at some point the user IS getting logged out (and thus is not authorized), so these requests are not allowed (but later the user is kind of logged-in again automatically).
Sorry I cannot share the source code with you. So I will be glad to follow your recommendations in troubleshooting the logout scenario.
They have it in the App Routing module:
The component routing module does not have it:
UPDATE: to save your time a bit, I've duplicated "canActive" in my Component's routing module. But the problem did not go away.
currently app.component.ts is the bootstraped component https://angular.io/guide/bootstrapping so if you place any api call in there it will be called so you have to use conditional operator there to calling api when the state is not authenticated.
Sorry, but i didn't get it. I have a lot of different components like the one below - with a bunch of API calls triggered based on different conditions - button clicks, subscriptions, route parameter values, etc.:
@Component({ ... })
export class ComponentHHH extends BaseComponent {
//Condition method can be invoked based on various conditions in unknown moment of time
ConditionMethodAAA() {
....
this.apiServiceXXX.apiMethodYYY(...).pipe(takeUntil(this.unsubscriber$))
.subscribe((response) => { ... });
....
this.apiServiceZZZ.apiMethodAAA(...).pipe(takeUntil(this.unsubscriber$))
.subscribe((response) => { ... });
....
}
ConditionMethodBBB() {
....
this.apiServiceDDD.apiMethodSSS(...).pipe(takeUntil(this.unsubscriber$))
.subscribe((response) => { ... });
....
}
}
If I activate another component in the menu - this.unsubscriber$ (property in "BaseComponent" class) receives null and completes. Due to this and to using "takeUntil", no matter which API calls were active, they all will be removed. I've tried to subcribe to "logout" event in "BaseComponent" and do the same I do with this.unsubscriber$ in "ngOnDestroy". However this does not work - API calls keep being invoked. Even more now: logout works only from Home page (probably these two things are unrelated, but I am not sure). I have not found explanation to this.
So you suggest to summon "app.component.ts" to resolve the problem. But I cannot figure out, how it can help here: there is no connection between AppComponent and another components API calls.
Hi Anjali.
First of all, ngOnDestroy with the suggested code already present in the base class HomeComponent is inherited from. Nevertheless, I've added ngOnDestroy here for test, too.
Also I've replace this.oAuthService.events with your suggestion.
After pressing "Logout" button I'm getting "Logout event received" message. But API call is STILL invoked as always. There has to be explanation WHY it is called though.
P.S. Please hold on - I want to check something...
UPDATE: I made some experiments.
Good news:
In the given specific case the API call I mentioned before was also invoked by other service - this was the reason it "resurrected" all the time after logout;
Bad news:
In a common case, only using if (this.authService.isAuthenticated) check or similar like you suggested helps resolving the initial problem. However, it is not a good approach: we have hundreds of API calls from hundreds of components. It is not a way to go to add hundreds of "if". Instead, it is supposed that for both component destroying and user logout action unsubscriber$ needs to received proper null value and be completed:
this.apiService
.apiCall(...)
.pipe(
finalize(() => (...)),
takeUntil(this.unsubscriber$) //this has to be enough for all cases
)
.subscribe((...) => {
...
});
The problem is that for some reason using logout event does not help to resolve this issue. I use this in Component base class (no matter, "tap" or "subscribe" actually) and this block DOES get triggered, however eventually API is still invoked for unknown for me reason:
ngOnInit(): void {
this.oAuthService.events
.pipe
(
filter(event => event?.type === 'logout'),
takeUntil(this.unsubscriber$),
tap(() => {
this.unsubscriber$.next(null);
this.unsubscriber$.complete();
})
)
.subscribe();
I've tried to make unsubscriber$ as ReplaySubject and create its new with buffer == 1, but it does not change the things.
I am confused even more now: it appeared that logging out works only for Home page: if I take any page - even the ABP page - after clicking "logout" button the user is eventually redirected to Home page again without landing at Identity Server Login page:
and then - all the rest our services required for the page are loaded as usual...
And this is workflow when I click "Logout" on Home page:
Afterwards I'm redirected to Identity Server Login page as expected. All the relevant pages have canActivate: [AuthGuard]
It's absolutely strange given that "Logout" functionality is the same for all pages, i.e. the same code has to be invoked. Do you have any clues? If required, I will create a new ticket for this issue...
I had additional experiment. Please have a look:
I've modified ngOnInit a bit:
this.oAuthService.events
.pipe(
filter(event => event?.type === 'logout'),
tap(() => {
this.unsubscriber$.next(null);
this.unsubscriber$.complete();
console.log('unsubscriber null!');
}))
.subscribe();
if (this.authService.isAuthenticated) {
this.homeService.getNewsForHomePage()
.pipe(tap(() => console.log('getNewsForHomePage still invoked')), takeUntil(this.unsubscriber$))
.subscribe((newsResponse) => {
this.newsForHomePage = newsResponse.items;
});
this.homeService.getUrlsForHomePage()
.pipe(tap(() => console.log('getUrlsForHomePage still invoked')), takeUntil(this.unsubscriber$))
.subscribe((newsUrlParameterResponse) => {
this.urls = newsUrlParameterResponse.items;
this.urlDigimedia = this.urls.filter(i => i.columnValue === 'DM')[0]?.stringValue;
this.urlMasterData = this.urls.filter(i => i.columnValue === 'MD')[0]?.stringValue;
});
}
I got 'unsubscriber null' message instantly after clicking "Logout" button. Despite this, shortly after, the method was still being invoked (getUrlsForHomePage matches '/api/ct/central-tool/parameters/values' API route). I cannot explain what's going on:
The messages "getNewsForHomePage still invoked" and "getUrlsForHomePage still invoked" were never shown - obviosly because this.authService.isAuthenticated was false by the moment.
I thought it could have something to do with using guards. But even if I remove guard for Home page, the given API call is still invoked.
Hi
Now after logout i guess your api will also not get called, can you check please?
The API is still called though - after I click Logout, but before actual logging out is complete.
Hi,
you can directly redirect to login page by attaching you root page or home component a authguard.
Great! Thank you so much - this part is now resolved.
Thank you! Will be waiting. Also please suggest me how to logout directly to Identity Server Login box without visiting intermediate root page (Home page). I was trying to find the way (like editing SignOut URLs in Identity Server settings via admin UI page), but it did not bring me anywhere. I believe this used to work properly in some previous ABP version. Maybe we have unintentionally have changed some relevant setting.
Hi Anjali.
Don't want to upset you, but it's even worse now: the mentioned API call is still GET called after I press 'Logout'. But now after I'm doing this - I never gets logged out: after several chaning screens I'm eventually redirected to the root page, i.e. Home page...
Hi Anjali,
i've run debug again.
when I click "Logout" on Home page - the onInit method IS get triggered with expected this.authService.isAuthenticated == false. But prior to that, I'm already getting 401 error request (sometimes - only this one request, sometimes - another one too):
The "initiator" there is shown as "zone.js", later on it's getting cleared. So it's still looking confusing.
our users complain about being redirected to landing page "Login" dialog, then - to Identity Server "Login" dialog (as shown on second screenshot). The request is to be redirected to the second "Login" dialog straight away... How to do that?
