CODEWITHSUNDEEP
angularoauth-2.0azure-active-directory
Mikey123
Mikey123

Reputation: 1429

TypeError: Cannot read property 'nonceStateSeparator

I'm currently trying to implement azure ad authentication in my angular application. Unfortunately i'm running into an error which I don't understand. In my application im calling the tryLogin function of the angular-oauth2-oidc package. The sign in works until this function is called, as it gives me the following error:

ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'nonceStateSeparator' of null
TypeError: Cannot read property 'nonceStateSeparator' of null
    at OAuthService.push../node_modules/angular-oauth2-oidc/esm5/angular-oauth2-oidc.js.OAuthService.tryLogin

The sign in function seems to work though, as it returns the tokens as parameters in the url in the application.

My code:

export class AppComponent implements OnInit {
  title = 'test';

  constructor(private oauthService: OAuthService) {

  }

  private async ConfigureAuth(): Promise<void> {
    this.oauthService.loginUrl = 'loginurl';
    this.oauthService.clientId = 'clientid';
    this.oauthService.resource = 'resource';
    this.oauthService.logoutUrl = 'logoutUrl';
    this.oauthService.redirectUri = window.location.origin + '/';
    this.oauthService.scope = 'openid';
    this.oauthService.oidc = true;
    this.oauthService.setStorage(sessionStorage);
  }

  async ngOnInit() {
    console.log('Starting ngInit');

    await this.ConfigureAuth();
    console.log('Await passed ngInit');

    this.oauthService.tryLogin({}); //ERROR here

    console.log('TryLogin passed ngInit');

    if(!this.oauthService.getAccessToken()) {
      console.log('no accestoken - ngInit');
      await this.oauthService.initImplicitFlow();
    }
    console.log(this.oauthService.getAccessToken());
    console.log('Finished ngInit');
  }
}

I hope someone can help me out with this issue.

Upvotes: 1

Views: 1277

Answers (1)

Poul Kruijt
Poul Kruijt

Reputation: 71961

You should not set the config values individually. Apparently the library excepts a config object which should be passed using the configure method:

private configureAuth(): void {
  this.oauthService.configure({
    loginUrl: 'loginurl',
    clientId,
    resource,
    logoutUrl
    // ... etc
  });      

  this.oauthService.setStorage(sessionStorage);
}

Also the async is not really necessary in the current implementation. There no method in your configureAuth is async.

Sidenote: better would be to create a separate config file for your oauth configuration and just import that in your component.

Even better would be to not have this kind of business logic inside a component. This is the job of a service. Try to make your component as stupid as possible

Upvotes: 3

Related Questions