title: Angular Auth OIDC; Azue B2C : Getting user profile loading and promise uncaught error after getting Token from Azure
body: <p>I have implemented auth authentication in Angular 9 app with Azure B2C with using angular-oauth2-oidc library and have successfully managed to get token however I am getting 'Uncaught (in promise)' and error 'loading user info TypeError' error the same time.</p>
  <h2>user profile error</h2>
  <p><a href="https://i.stack.imgur.com/0Xmbo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/0Xmbo.png" alt="enter image description here" /></a></p>
  <h2>Promise Uncaught Error</h2>
  <p><a href="https://i.stack.imgur.com/bebsc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/bebsc.png" alt="enter image description here" /></a></p>
  <h2>Auth Service</h2>
  <pre><code>@Injectable()
  export class AuthService implements OnInit{
  
  _accessToken: string; 
  _idToken: string;
  
  private isAuthenticatedSubject$ = new BehaviorSubject&lt;boolean&gt;(false);
  public isAuthenticated$ = this.isAuthenticatedSubject$.asObservable();
  private isDoneLoadingSubject$ = new ReplaySubject&lt;boolean&gt;();
  public isDoneLoading$ = this.isDoneLoadingSubject$.asObservable();
  
  public canActivateProtectedRoutes$: Observable&lt;boolean&gt; = combineLatest([
      this.isAuthenticated$,
      this.isDoneLoading$
    ]).pipe(map(values =&gt; values.every(b =&gt; b)));
  
  
  constructor(
      private oauthService: OAuthService,
      private router: Router
  
  ){
       //debugging - Capture Error Events
       this.oauthService.events.subscribe(event =&gt;{
          if(event instanceof OAuthErrorEvent){
              console.error(event);
          }
          else{
              console.warn(event);
          }
        });
        
     
      console.warn('Noticed changes to access_token (most likely from another tab), updating isAuthenticated');
      this.isAuthenticatedSubject$.next(this.oauthService.hasValidAccessToken());
  
      this.oauthService.events
      .subscribe(_ =&gt; {
        this.isAuthenticatedSubject$.next(this.oauthService.hasValidAccessToken());
      });
  
      this.oauthService.events
      .pipe(filter(e =&gt; ['token_received'].includes(e.type)))
      .subscribe(e =&gt; this.oauthService.loadUserProfile());
  
      this.oauthService.events
       .pipe(filter(e =&gt; ['session_terminated', 'session_error'].includes(e.type)))
       .subscribe(e =&gt; this.navigateToLoginPage());
  
      this.oauthService.setupAutomaticSilentRefresh();
  
  }
  
  public initializeAuthService(): Promise&lt;void&gt;{
  
      this.oauthService.configure(authConfig);
  
      if (location.hash) {
          console.log('Encountered hash fragment, plotting as table...');
          console.table(location.hash.substr(1).split('&amp;').map(kvp =&gt; kvp.split('=')));
      }
  
      return this.oauthService.loadDiscoveryDocument(DiscoveryDocumentConfig.url)
  
          .then(() =&gt; this.oauthService.tryLogin())
  
          .then(() =&gt; {
              if(this.oauthService.hasValidAccessToken()){
                  console.log(&quot;Discovery document resolved, Token does exist...&quot;, this.oauthService.getAccessToken());
                  return Promise.resolve();
              }
          })
  
          .catch(error =&gt; {
              console.error(error);
          })       
  }
  
  
  public login(targetUrl?: string){
      this.oauthService.tryLogin({});
  
      if(!this.oauthService.getAccessToken()){
          this.oauthService.initImplicitFlow();
      }
  }
  </code></pre>