Angular-oauth2-oidc: tryLogin() can't parse token

[alonstar]

I followed readme.md to setup my app, and it woks until token returns. It can't parse token and try login over and over again.

I found after loading document, the window.location.hash is disappear. so tryLogin is fail. please tell me How can I do ? Thank you.

private configureWithNewConfigApi() {

    this.oauthService.configure(authConfig);
    this.oauthService.tokenValidationHandler = new JwksValidationHandler();

    console.log('configureWithNewConfigApi', window.location);

    this.oauthService.loadDiscoveryDocument().then((doc) => {
        console.log('loadDiscoveryDocument', window.location);
        this.oauthService.tryLogin({
            onTokenReceived: context => {
                console.log('onTokenReceived:', context);
                this.authService.init();
            },
            onLoginError: (err) => {
                console.log('onLoginError:', err);
            }
        }).then(() => {
            if (!this.oauthService.hasValidIdToken() || !this.oauthService.hasValidAccessToken()) {
                this.oauthService.initImplicitFlow();
            }
        });
    });
}

[AndreaPaciolla]

I am facing the same error here guys.
It is related to this issue.

Angular router actually strips out the query string params and when the oauthService got instantiated is too late to retrieve the token.

Possible strategies could be:

• store the access_token inside a very first entrypoint of the app. In this case we should be able to call the storeAccessTokenResponse from an "outside component" (the method needs to be public in the case...)
• once we've stored access_token in the very first entrypoint in some way, we can call tryLogin(). In this case the tryLogin method needs to accept a param.

@manfredsteyer any advices on this topic?

[alonstar]

@AndreaPaciolla

Here is my current solution.

    const hash = window.location.hash;

    this.oauthService.loadDiscoveryDocument().then((doc) => {

        this.oauthService.tryLogin({
            customHashFragment: hash,
            onTokenReceived: context => {
                this.oauthService.loadUserProfile().then((userInfo) => {
                    this.init((<UserInfo>userInfo));
                    this.router.navigate(['/']);
                });
            },
            onLoginError: (err) => {
                this.logger.log('onLoginError:', err);
            }
        }).then(() => {
            if (!this.oauthService.hasValidIdToken() || !this.oauthService.hasValidAccessToken()) {
                this.oauthService.initImplicitFlow();
            }
        });
    });

[AndreaPaciolla]

Yes @alonstar for now that seems to be the way. Thank you

[manfredsteyer]

Thx for this. I think turning off initial routing, like shown here [1] should also do the job.

Perhaps adding a catch all route (path: '**') at the end of the AppModule's routing table also helps.

Btw: There is a new convenince method that does almost what your method does. It's called loadDiscoveryDocumentAndLogin (not to be confused with loadDiscoveryDocumentAndTryLogin). See also my comment in #179 for this.

[1] https://manfredsteyer.github.io/angular-oauth2-oidc/angular-oauth2-oidc/docs/additional-documentation/routing-with-the-hashstrategy.html

[AndreaPaciolla]

Thanks for your suggestions @manfredsteyer.

Just a clarification about:

Perhaps adding a catch all route (path: '**') at the end of the AppModule's routing table also helps.

That could be the case when ** is not already used for another component (_e.g. 404 component, as in my context_).