CORS blocked error with loadDiscoveryDocumentAndTryLogin()

Question

I am working on Angular 9 Authentication from Azure B2C. In angular, I am using Auth angular-oauth2-oidc library.

I am getting CORS block error if I have loadDiscoveryDocumentAndTryLogin() code in config method not really sure what I am missing. If I disable loadDiscorveryDocumentAndTryLoging() code then I manage to redirect to Azure B2C login page

 import { OnInit, Component, Injector } from '@angular/core';
 import { OAuthService } from 'angular-oauth2-oidc';
 import { JwksValidationHandler } from 'angular-oauth2-oidc-jwks';
 import { authConfig } from '../../config/auth.config';


 @Component({
   selector: 'app-auth-landing-page',
   templateUrl: 'auth-landing.component.html',
   styleUrls: ['auth-landing.component.scss']

 })
   export class AuthComponent implements OnInit{

_accessToken: string; 
_idToken: string;


constructor(private injector: Injector) { }
 private get oauthService() {
    return this.injector.get(OAuthService)
 }

 private async ConfigureAuth(): Promise<void>{

  this.oauthService.configure(authConfig);
  this.oauthService.tokenValidationHandler = new JwksValidationHandler();
  this.oauthService.loadDiscoveryDocumentAndTryLogin();
  this.oauthService.setStorage(sessionStorage);
 }

 async ngOnInit(){
  await this.ConfigureAuth();
 }

  async login(){
  this.oauthService.tryLogin({});

 if(!this.oauthService.getAccessToken()){
   await this.oauthService.initImplicitFlow();
  }

this._accessToken = this.oauthService.getAccessToken();
this._idToken = this.oauthService.getIdToken();
let validToken = this.oauthService.hasValidAccessToken();
   console.log(this._accessToken);
}

logout(){
  this.oauthService.logOut();
}

token(){
  let claims: any = this.oauthService.getIdentityClaims();
  return claims ? claims : null;
}

readToken()
{
  console.log("ID Token ", this._accessToken );
  console.log("Access Token", this._idToken);
  let claims: any = this.oauthService.getIdentityClaims();
   console.log(claims);
 }
}

**DO NOT post images of code, data, error messages, etc.** - copy or type the text into the question. [ask] — Rob, May 29 '20 at 10:35

AlfredoRevilla-MSFT · Accepted Answer · 2020-06-04T14:57:36.377

Metadata URL is malformed. Use the following in your OAuthService configuration:

loginUrl: "https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/oauth2/v2.0/authorize",

issuer: "https://{tenant}.b2clogin.com/{tenant}.onmicrosoft.com/{policy}/v2.0/",

Also, not issue related but worth mentioning:

You're not awaiting anything in this function:

private async ConfigureAuth(): Promise<void>{

And/or more importantly, avoid async ngOnInit unless you're ok with the implications.

CORS blocked error with loadDiscoveryDocumentAndTryLogin()

1 Answers1