Angular MSAL Library acquireTokenRedirect vs acquireTokenPopup error

Question

I am using msal angular library to log in so I have backend API I communicate with it to get token and everything and get access to a dashboard so I am getting the error is if I want to use redirect instead of the popup to sign in or get token but if I use acquireTokenPopup it is working but if I use acquireTokenRedirect then inside code it shows an error that "Property 'then' does not exist on type 'void'." here is the code that I am using right now.

getItems(): any{
// this.http.get(url_products,{observe: 'response'}).subscribe((response) => {
//   this.logger.log("Authenticated : ",response.status);
// },(err : Error) => {
//   this.logger.log("Not Authenticated : ",err);
// });
// this.logger.log("Get Items");
this.http.get(url_auth,{observe: 'response'}).subscribe({
  next: (response) => {
    // this.logger.log("next: response : ", response);
    if(response.status == 200)
    {
      this.allowUser = true;
      this.isLoading = false;
    }
  },
  error: (err: AuthError) => {
    // this.logger.log("Auth Error : ", err.errorCode);
    if(err.errorCode == undefined)
    {
      this.allowUser = false;
      this.isLoading = false;
    }
    if (InteractionRequiredAuthError.isInteractionRequiredError(err.errorCode)) {
      // this.logger.log("Inside the interaction required error")
      this.authService.acquireTokenRedirect({
        scopes: this.authService.getScopesForEndpoint("MY APi URL")
      })
      .then(() => {
        this.http.get(url_auth,{observe: 'response'})
          .toPromise()
          .then((response)  => {
            // this.logger.log("Promise: ItemsArray : ", response);
            if(response.status == 200)
            {
              this.allowUser = true;
              this.isLoading = false;
            }
            else{
              this.allowUser = false;
              this.isLoading = false;
            }
          }, (err) => {
            // this.logger.log("Promises are working ", err);
          });
      });
    }
  }
});

this is the code I am getting an error. here is a screenshot of the error. enter image description here

Answer 1

In MSAL Angular v1, acquireTokenRedirect returns void, not a Promise, as the user will be navigated away from the page. You need to either use acquireTokenPopup, or initiate the http call when the user returns from the redirect process, which can be done in handleRedirectCallback.