Migration to Angular 5

[ranouf]

Hi,

I just upgraded to Angular 5 and I Have an "Invalid token" error now. Every thing worked find before.

Here are my packages:

  "dependencies": {
    "@agm/core": "^1.0.0-beta.0",
    "@angular/animations": "^5.1.0",
    "@angular/cdk": "^5.0.0",
    "@angular/common": "^5.1.0",
    "@angular/compiler": "^5.1.0",
    "@angular/core": "^5.1.0",
    "@angular/flex-layout": "2.0.0-beta.10-4905443",
    "@angular/forms": "^5.1.0",
    "@angular/http": "^5.1.0",
    "@angular/material": "^5.0.0",
    "@angular/platform-browser": "^5.1.0",
    "@angular/platform-browser-dynamic": "^5.1.0",
    "@angular/platform-server": "^5.1.0",
    "@angular/router": "^5.1.0",
    "@covalent/core": "^1.0.0-beta.5-1",
    "@ngui/map": "^0.20.0",
    "@ngx-translate/core": "9.0.1",
    "@ngx-translate/http-loader": "2.0.0",
    "@swimlane/ngx-charts": "7.0.1",
    "@types/googlemaps": "^3.26.13",
    "@types/node": "8.0.57",
    "angular2-jwt": "^0.2.3",
    "angular2-template-loader": "0.6.2",
    "aspnet-prerendering": "^3.0.1",
    "aspnet-webpack": "^2.0.1",
    "auth0-js": "^8.7.0",
    "auth0-lock": "^10.16.0",
    "awesome-typescript-loader": "3.4.1",
    "core-js": "^2.4.1",
    "css": "2.2.1",
    "css-loader": "0.28.7",
    "d3": "^4.4.0",
    "es6-shim": "0.35.3",
    "event-source-polyfill": "0.0.12",
    "expose-loader": "0.7.4",
    "extract-text-webpack-plugin": "3.0.2",
    "file-loader": "1.1.5",
    "hammerjs": "^2.0.8",
    "highlight.js": "9.12.0",
    "html-loader": "0.5.1",
    "isomorphic-fetch": "2.2.1",
    "jquery": "3.2.1",
    "json-loader": "0.5.7",
    "node-sass": "^4.5.3",
    "preboot": "6.0.0-beta.0",
    "raw-loader": "^0.5.1",
    "reflect-metadata": "0.1.10",
    "rxjs": "^5.2.0",
    "sass-loader": "^6.0.5",
    "showdown": "1.8.4",
    "style-loader": "0.19.0",
    "to-string-loader": "1.1.5",
    "typescript": "^2.5.3",
    "url-loader": "0.6.2",
    "web-animations-js": "2.3.1",
    "webpack": "3.10.0",
    "webpack-hot-middleware": "2.21.0",
    "webpack-merge": "4.1.1",
    "zone.js": "^0.8.12"
  },
  "devDependencies": {
    "@types/chai": "4.0.8",
    "@types/jasmine": "2.8.2",
    "@types/hammerjs": "^2.0.34",
    "chai": "4.1.2",
    "jasmine-core": "2.8.0",
    "karma": "1.7.1",
    "karma-chai": "0.1.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-jasmine": "1.1.1",
    "karma-webpack": "2.0.6",
    "node-sass": "4.7.2"
  }

Here is the ts function:

public handleAuthentication(): void {
        debugger;
        this.GetAuth0(this.userInvitationId).subscribe(auth0 => {
            auth0.parseHash({ _idTokenVerification: false }, (err, authResult) => { 
                if (err) {
                    alert(`Error: ${err.errorDescription}`)
                }
                if (authResult && authResult.accessToken && authResult.idToken) {
                    localStorage.setItem('access_token', authResult.accessToken);
                    localStorage.setItem('id_token', authResult.idToken);

                    this.authenticationService.authenticate(authResult.state)
                        .subscribe(result => {

                            this.authentified.next(result);
                            localStorage.setItem('user', JSON.stringify(result));
                        }, error => {

                            this.snackbarService.displayError(error.message);
                        });
                }
            })
        });
    }

Can you help to find the solution?

[luisrudge]

Hi, did you find the issue? Can you paste the stacktrace or something?

[ranouf]

Hi,

So finally, i Just removed the Auth0 validation on client side, my server will do it. To do that, I updated my code: login.component.ts

    ngOnInit() {
        this.route.fragment.subscribe(
            (fragments) => {
                if (fragments) {
                    let params = new URLSearchParams(fragments.split('#')[0]);
                    let access_token = params.get('access_token');
                    let id_token = params.get('id_token');
                    let userInvitationId = params.get('state');
                    this.auth.handleAuthentication(access_token, id_token, userInvitationId);
                }
            }
        ); 
    }

And auth.service.ts

public handleAuthentication(access_token: string, id_token: string, userInvitationId: string ): void {
        if (access_token && id_token) {
            localStorage.setItem('access_token', access_token);
            localStorage.setItem('id_token', id_token);

            this.authenticationService.authenticate(userInvitationId)
                .subscribe(result => {
                    this.authentified.next(result);
                    localStorage.setItem('user', JSON.stringify(result));
                }, error => {
                    this.snackbarService.displayError(error.message);
                });
        }
    }

I hope it will help you too :)

[luisrudge]

Thanks. We don't recommend bypassing the id_token verification, since it validates state, nonce, expiration time, jwks etc. Are you doing everything on the server? if that's the case, why use id_token at all?