Angular-oauth2-oidc: loadUserProfile() : Error performing password flow TypeError: Cannot read property 'toLowerCase' of null

[FarhatW]

Hi,

I want to get user profile, so i used it like this :

const user = this.oauthService.loadUserProfile()
console.log(user, user);

My conf :
export const authConfig: AuthConfig = {

clientId : 'vegaJs',
redirectUri : 'http://localhost:5002/#/dashboard?',
responseType : 'id_token token',
scope : 'openid profile vega',
postLogoutRedirectUri : 'http://localhost:5002/',
issuer: 'http://localhost:5000',

}

LoginAuthComponent :

claims: any;
constructor(private oauthService: OAuthService) {

// URL of the SPA to redirect the user to after login
this.configureWithNewConfigApi();

}

private configureWithNewConfigApi() {
this.oauthService.configure(authConfig);
this.oauthService.oidc = true;
this.oauthService.setStorage(sessionStorage);
this.oauthService.tokenValidationHandler = new JwksValidationHandler();
this.oauthService.loadDiscoveryDocument().then(() => {
this.oauthService.tryLogin({});
});
}

public login() {
this.oauthService.initImplicitFlow();
}

public logoff() {
this.oauthService.logOut();
}

public getInfo() {
const user = this.oauthService.loadUserProfile()
console.log(user, user);

}

when i call get info, I have Error performing password flow TypeError: Cannot read property 'toLowerCase' of null

[dosama]

I'm facing same Issue here .. Are there is any updates regarding it ???

[FarhatW]

make this on the redirectUri page :

private configureWithNewConfigApi() {

this.oauthService.configure(authConfig);
this.oauthService.loadDiscoveryDocument().then(() => {
  this.oauthService.tryLogin().then(() => {
      console.log('hasValidAccessToken : ', this.oauthService.hasValidAccessToken());
      console.log('hasValidIdToken : ', this.oauthService.hasValidIdToken());
      console.log('getAccessTokenExpiration : ', this.oauthService.getAccessTokenExpiration());
      console.log('getAccessToken : ', this.oauthService.getAccessToken());
      console.log('getIdToken : ', this.oauthService.getIdToken());

    // this.oauthService.loadUserProfile().then(user => {
    //   console.log('user : ', user);
    // });

  });
});

}

[Cuiqs76]

I have the same issue. i publish to server. in my computer login is OK. I use password type
this.oauthService
.fetchTokenUsingPasswordFlowAndLoadUserProfile(this.userName.value, this.password.value)
.then( data => {
console.log('successfully logged in');
this.loading = false;
this.reuseTabService.clear();
this.router.navigate(['/']);
})
.catch((err => {
console.error('error logging in', err);
this.error = 账户或密码错误;
this.loading = false;
}));

but in other computer throw the error:
angular-oauth2-oidc.umd.js:995 Error performing password flow TypeError: Cannot read property 'toLowerCase' of null
at HttpXsrfInterceptor.webpackJsonp../node_modules/@angular/common/esm5/http.js.HttpXsrfInterceptor.intercept (http.js:2482)
at HttpInterceptorHandler.webpackJsonp../node_modules/@angular/common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at HttpInterceptingHandler.webpackJsonp../node_modules/@angular/common/esm5/http.js.HttpInterceptingHandler.handle (http.js:2547)
at MergeMapSubscriber.project (http.js:1466)
at MergeMapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:95)
at ScalarObservable.webpackJsonp../node_modules/rxjs/_esm5/observable/ScalarObservable.js.ScalarObservable._subscribe (ScalarObservable.js:51)
at ScalarObservable.webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable._trySubscribe (Observable.js:172)
at ScalarObservable.webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable.subscribe (Observable.js:160)
(anonymous) @ angular-oauth2-oidc.umd.js:995
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.SafeSubscriber.__tryOrSetError @ Subscriber.js:252
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.SafeSubscriber.error @ Subscriber.js:206
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber._error @ Subscriber.js:134
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber.error @ Subscriber.js:108
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber._error @ Subscriber.js:134
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber.error @ Subscriber.js:108
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber._error @ Subscriber.js:134
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber.error @ Subscriber.js:108
webpackJsonp../node_modules/rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._tryNext @ mergeMap.js:131
webpackJsonp../node_modules/rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._next @ mergeMap.js:118
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber.next @ Subscriber.js:95
webpackJsonp../node_modules/rxjs/_esm5/observable/ScalarObservable.js.ScalarObservable._subscribe @ ScalarObservable.js:51
webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable._trySubscribe @ Observable.js:172
webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable.subscribe @ Observable.js:160
webpackJsonp../node_modules/rxjs/_esm5/operators/mergeMap.js.MergeMapOperator.call @ mergeMap.js:92
webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp../node_modules/rxjs/_esm5/operators/filter.js.FilterOperator.call @ filter.js:61
webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable.subscribe @ Observable.js:157
webpackJsonp../node_modules/rxjs/_esm5/operators/map.js.MapOperator.call @ map.js:57
webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable.subscribe @ Observable.js:157
(anonymous) @ angular-oauth2-oidc.umd.js:989
ZoneAwarePromise @ zone.js:891
webpackJsonp../node_modules/angular-oauth2-oidc/angular-oauth2-oidc.umd.js.OAuthService.fetchTokenUsingPasswordFlow @ angular-oauth2-oidc.umd.js:972
webpackJsonp../src/app/routes/passport/login/login.component.ts.UserLoginComponent.login @ login.component.ts:63
(anonymous) @ UserLoginComponent.html:1
handleEvent @ core.js:13547
callWithDebugContext @ core.js:15056
debugHandleEvent @ core.js:14643
dispatchEvent @ core.js:9962
(anonymous) @ core.js:12301
schedulerFn @ core.js:4343
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.SafeSubscriber.__tryOrUnsub @ Subscriber.js:243
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.SafeSubscriber.next @ Subscriber.js:190
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber._next @ Subscriber.js:131
webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber.next @ Subscriber.js:95
webpackJsonp../node_modules/rxjs/_esm5/Subject.js.Subject.next @ Subject.js:56
webpackJsonp../node_modules/@angular/core/esm5/core.js.EventEmitter.emit @ core.js:4311
webpackJsonp../node_modules/@angular/forms/esm5/forms.js.FormGroupDirective.onSubmit @ forms.js:6768
(anonymous) @ UserLoginComponent.html:1
handleEvent @ core.js:13547
callWithDebugContext @ core.js:15056
debugHandleEvent @ core.js:14643
dispatchEvent @ core.js:9962
(anonymous) @ core.js:10587
(anonymous) @ platform-browser.js:2628
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4740
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
login.component.ts:71 error logging in TypeError: Cannot read property 'toLowerCase' of null
at HttpXsrfInterceptor.webpackJsonp../node_modules/@angular/common/esm5/http.js.HttpXsrfInterceptor.intercept (http.js:2482)
at HttpInterceptorHandler.webpackJsonp../node_modules/@angular/common/esm5/http.js.HttpInterceptorHandler.handle (http.js:1796)
at HttpInterceptingHandler.webpackJsonp../node_modules/@angular/common/esm5/http.js.HttpInterceptingHandler.handle (http.js:2547)
at MergeMapSubscriber.project (http.js:1466)
at MergeMapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._tryNext (mergeMap.js:128)
at MergeMapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/operators/mergeMap.js.MergeMapSubscriber._next (mergeMap.js:118)
at MergeMapSubscriber.webpackJsonp../node_modules/rxjs/_esm5/Subscriber.js.Subscriber.next (Subscriber.js:95)
at ScalarObservable.webpackJsonp../node_modules/rxjs/_esm5/observable/ScalarObservable.js.ScalarObservable._subscribe (ScalarObservable.js:51)
at ScalarObservable.webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable._trySubscribe (Observable.js:172)
at ScalarObservable.webpackJsonp../node_modules/rxjs/_esm5/Observable.js.Observable.subscribe (Observable.js:160)
(anonymous) @ login.component.ts:71
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:4749
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:872
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:4740
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
webpackJsonp../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566

[FarhatW]

try to call it into this

this.oauthService.loadDiscoveryDocument().then(() => {
this.oauthService.tryLogin().then(() => {
test if you have a valid token
else call your code
}

}

[dirkbolte]

I ran into the same issue. In my case, I was using plain oauth instead of OIDC, so I had no discovery document and had to configure various parts myself. In my case, I got the error because a call to http was done with an empty URL as I hadn't configured the tokenEndpoint. The issue went away as soon as I had it configured. Furthermore, I had to adjust the setting as the default one for requireHttps is remoteOnly - which obviously failed in local testing. So changing it to true + setting the config value fixed it for me.

This might not be the same issue that was encountered here but it might help with debugging down the line.

[DoanVanThuong]

I resolve by using:

this.oauthService.fetchTokenUsingPasswordFlow(username,password)
    .then((tokenInfo: any) => {
     return this.oauthService.loadUserProfile();
     .then((userInfo: any) => {
                            if (userInfo) {

                            }
                        })
     })

[jeroenheijmans]

Looking at the history and merges I think this issue can be cleaned up now? Let us know, here or in a fresh issue, if you encounter problems still.

[Gaurav-enest]

@jeroenheijmans Still getting the same issue with
version: "angular-oauth2-oidc": "^9.0.1",

[jeroenheijmans]

Would you be able to create a fresh StackBlitz or repository with a minimal repro? The original post is old, and a tad hard to read. Also, you may have the same symptom, but could be that the root cause has changed since 2018...

[Gaurav-enest]

@jeroenheijmans Case is same it's working fine in login process .

this.oauthService.loadDiscoveryDocument().then(doc => {
      this.oauthService
        .tryLogin({
          customHashFragment: hash,
          onTokenReceived: context => {
            this.oauthService.loadUserProfile()
              .then((userProfile)=>{
                   console.log(userProfile);
           });
          },
          onLoginError: err => {
            console.log(err);
          }
        })
        .then(() => {
          if (this.hasInValidToken()) {
            this.oauthService.initImplicitFlow();
          }
        });
    });

but when we reload page after login then it's showing error

Cannot read property 'toLowerCase' of null

with below code

 ngOnInit(): void {
   const user = this.oauthService.loadUserProfile();
  }

Follow steps to replicate:

1. Implement login flow
2. Then try to get user profile on ngOnInit method you will see this error message.

[jeroenheijmans]

Hmm, I can imagine a few things that trigger the error with the given code. The most likely culprit is that you _might_ be trying to load the user profile before the other initialization has properly taken place.

I would probably do something like this in the constructor instead of ngOnInit():

    this.oauthService.events
      .pipe(filter(e => ['token_received'].includes(e.type)))
      .subscribe(e => this.oauthService.loadUserProfile());

Or otherwise make sure loadUserProfile is only called in a then chain _after_ you are sure the disco document was loaded and also the tokens are available.

[LeoPote]

Hello,

I am facing quite the same error calling "this.oAuthService.revokeTokenAndLogout()" for logout.

"angular-oauth2-oidc.js:2374 Error revoking token TypeError: Cannot read property 'toLowerCase' of undefined"

Any solution on this?

Tks.

[steven-rothwell]

I was getting the same error after calling: this.oAuthService.revokeTokenAndLogout(). This was happening when I would log in, make changes to my angular app, then refresh the page and try to log out.

My auth guard was:

if (this.oauthService.hasValidAccessToken()) {
      return true;
    }
    return this.oauthService.loadDiscoveryDocumentAndLogin();

By adding && this.oauthService.discoveryDocumentLoaded to the if statement, it made sure to load the discovery document so that on log out, the null error would not be thrown.