Merge pull request #5 from Azure-Samples/interceptor-error-handling

Show how to handle errors from the interceptor

Author: jasonnutter

src/app/profile/profile.component.ts

@@ -1,6 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { MsalService } from '@azure/msal-angular';
 import { HttpClient } from '@angular/common/http';
+import { InteractionRequiredAuthError, AuthError } from 'msal';
 
 const GRAPH_ENDPOINT = 'https://graph.microsoft.com/v1.0/me';
 
@@ -19,9 +20,27 @@ export class ProfileComponent implements OnInit {
   }
 
   getProfile() {
-    this.http.get(GRAPH_ENDPOINT).toPromise()
-      .then(profile => {
-          this.profile = profile;
-      });
+    this.http.get(GRAPH_ENDPOINT)
+    .subscribe({
+      next: (profile) => {
+        this.profile = profile;
+      },
+      error: (err: AuthError) => {
+        // If there is an interaction required error,
+        // call one of the interactive methods and then make the request again.
+        if (InteractionRequiredAuthError.isInteractionRequiredError(err.errorCode)) {
+          this.authService.acquireTokenPopup({
+            scopes: this.authService.getScopesForEndpoint(GRAPH_ENDPOINT)
+          })
+          .then(() => {
+            this.http.get(GRAPH_ENDPOINT)
+              .toPromise()
+              .then(profile => {
+                this.profile = profile;
+              });
+          });
+        }
+      }
+    });
   }
 }