1

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.

ChopStick
  • 126
  • 8
  • What I did was write a [wrapper service](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/blob/master/src/app/core/auth.service.ts) that has an `isAuthenticated$` and `isDoneLoading$` observable, plus [I make an `APP_INITIALIZER` wait for initialization to be done](https://github.com/jeroenheijmans/sample-angular-oauth2-oidc-with-auth-guards/blob/master/src/app/core/auth-app-initializer.factory.ts) before further running app logic. Perhaps that helps? – Jeroen Oct 26 '22 at 22:16

0 Answers0