I want to set the users logged in status in the front end. For instance set a sign out button if the user is currently logged in and so forth. This works all fine with the /user endpoint on the resource server to call to verify the authentication state.
The problem I am having is that right after the redirect from the auth server after successful login the request to the /user endpoint is denied. I am guessing the angular client has not received the tokens when making the request to /user.
I cannot find a working callback or subscribtion in the angular-oauth2-oidc lib to wait for until the tokens are received. 'token_received' callback is also to early as the sent request to the server in this callback also receives a 401. Does anybody now this scenario and how to verify that a user is logged in in the front end right after being redirected to the angular app after logging in into the auth server? I was thinking about a custom redirect url with a param to inform the client so it knows without any subscriptions that the user just logged in but that would create its own complications and I just wanted to know whether there are simpler solutions.
Here is some code:
ngOnInit(){
this.subs.add(this.oauthService.events.subscribe(event => {
// Is called whenever an OAuth event is fired
console.log(event);
if (event instanceof OAuthSuccessEvent && (event.type == 'token_received') && event.info != null) {
// This is just preliminary to show the user as signed in, right after coming back from the auth server
this.subs.add(this.securedResource.isUserLoggedIn().subscribe(response => {
// Check if user is logged in by calling the secured /user endpoint on the resource server
if (response.payload == null){
// user is not logged in
this.setLoggedOutText();
this.signedIn = false;
}else {
this.setLoggedInText();
this.signedIn = true;
}
}
));
}
}
private setLoggedInText(){
const smallElement = document.getElementById("loginStatusText") as HTMLElement;
smallElement.innerText = 'Hello, Sign out';
this.changeDetector.detectChanges();
}
private setLoggedOutText(){
const smallElement = document.getElementById("loginStatusText") as HTMLElement;
smallElement.innerText = 'Hello, Sign in';
this.changeDetector.detectChanges();
}
private configure() {
this.oauthService.configure(this.authConfig);
this.oauthService.loadDiscoveryDocumentAndTryLogin();
}
login() {
if ( this.signedIn ){
this.logoff();
return;
}
this.oauthService.initLoginFlow();
console.log("Login clicked");
}
logoff() {
this.oauthService.logOut();
console.log("Logout clicked");
}
This works after a refresh after redirect from auth server but is not a good user experience. How could I fix this behaviour? Thank you all.