authService.notifier.subscribe((authed) => {
  if (authed) {
    this.rootPage = TabsPage;
  } else {
    this.rootPage = LoginPage;
  }
});

constructor (
    private _oauthService: OAuthService,
    private _router: Router
) {

}

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    if (this.loggedIn) {
        return true;
    }

    //Redirect the user before denying them access to this route
    this._router.navigate(['/welcome']);
    return false;
}

get loggedIn() {
    return this._oauthService.hasValidAccessToken();
}

    this.oauthService.tokenEndpoint = 'https://steyer-identity-server.azurewebsites.net/identity/connect/token';
    this.oauthService.fetchTokenUsingPasswordFlow('max', 'geheim').then(() => {
      // ...
    });

oauthService.redirectUri = window.location.href;

private _storage: Storage;
constructor(private http: Http) {
    if (typeof localStorage != undefined) {
        this._storage = localStorage;
    }
//Rest of the constructor
}

public login() {

        console.log('email: ' + this.model.email, 'password: ' + this.model.password);
        
        if(this.model.email && this.model.password != null) {
            this.loading = true;
            this.oauthService.fetchTokenUsingPasswordFlow(this.model.email, this.model.password).then(
                result => {
                    this.token = this.oauthService.getAccessToken();
                },
                error => {
                    alert(error);
                    console.log(error);
                    this.token = error;
                    this.loading = false;
            })
        }
    }

    public configureLogin(){  
        // URL of the SPA to redirect the user to after login
        this.oauthService.redirectUri = window.location.origin;

        // The SPA's id. The SPA is registerd with this id at the auth-server
        this.oauthService.clientId = "testClient";

        // set the scope for the permissions the client should request
        // The first three are defined by OIDC. The 4th is a usecase-specific one
        this.oauthService.scope = "openid profile email TestScope";

        // set to true, to receive also an id_token via OpenId Connect (OIDC) in addition to the
        // OAuth2-based access_token
        this.oauthService.oidc = true;

        this.oauthService.dummyClientSecret = "secret";

        // Use setStorage to use sessionStorage or another implementation of the TS-type Storage
        // instead of localStorage
        this.oauthService.setStorage(sessionStorage);

        // The name of the auth-server that has to be mentioned within the token
        this.oauthService.issuer = "https://phenomenexauthserver.azurewebsites.net/";
        
        // Load Discovery Document and then try to login the user
        this.oauthService.loadDiscoveryDocument().then(() => {

            // This method just tries to parse the token(s) within the url when
            // the auth-server redirects the user back to the web-app
            // It dosn't send the user the the login page
            this.oauthService.tryLogin({});      

        });
    }

EXCEPTION: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'error'
Error: Cannot match any routes. URL Segment: 'error'
    at ApplyRedirects.noMatchError (http://localhost:4200/vendor.bundle.js:108860:16) [angular]
    at CatchSubscriber.selector (http://localhost:4200/vendor.bundle.js:108829:29) [angular]
    at CatchSubscriber.error (http://localhost:4200/vendor.bundle.js:50636:31) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:483:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:457:18) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:483:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:457:18) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:483:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:457:18) [angular]
    at LastSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:483:26) [angular]
    at LastSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:457:18) [angular]
    at MergeAllSubscriber.OuterSubscriber.notifyError (http://localhost:4200/vendor.bundle.js:632:26) [angular]
    at InnerSubscriber._error (http://localhost:4200/vendor.bundle.js:115288:21) [angular]
    at InnerSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:457:18) [angular]
window.console.error @ VM13634:27
VM13634:27 ORIGINAL STACKTRACE:
window.console.error @ VM13634:27
VM13634:27 Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'error'
Error: Cannot match any routes. URL Segment: 'error'
    at ApplyRedirects.noMatchError (apply_redirects.js:149) [angular]
    at CatchSubscriber.selector (apply_redirects.js:118) [angular]
    at CatchSubscriber.error (catch.js:104) [angular]
    at MapSubscriber.Subscriber._error (Subscriber.js:128) [angular]
    at MapSubscriber.Subscriber.error (Subscriber.js:102) [angular]
    at MapSubscriber.Subscriber._error (Subscriber.js:128) [angular]
    at MapSubscriber.Subscriber.error (Subscriber.js:102) [angular]
    at MapSubscriber.Subscriber._error (Subscriber.js:128) [angular]
    at MapSubscriber.Subscriber.error (Subscriber.js:102) [angular]
    at LastSubscriber.Subscriber._error (Subscriber.js:128) [angular]
    at LastSubscriber.Subscriber.error (Subscriber.js:102) [angular]
    at MergeAllSubscriber.OuterSubscriber.notifyError (OuterSubscriber.js:22) [angular]
    at InnerSubscriber._error (InnerSubscriber.js:26) [angular]
    at InnerSubscriber.Subscriber.error (Subscriber.js:102) [angular]
    at resolvePromise (zone.js:643) [angular]
    at resolvePromise (zone.js:619) [angular]
    at :4200/vendor.bundle.js:131681:17 [angular]
    at Object.onInvokeTask (ng_zone.js:264) [angular]
    at ZoneDelegate.invokeTask (zone.js:362) [angular]
    at Zone.runTask (zone.js:166) [<root> => angular]
    at drainMicroTaskQueue (zone.js:529) [<root>]
window.console.error @ VM13634:27
VM13634:27 Unhandled Promise rejection: Cannot match any routes. URL Segment: 'error' ; Zone: angular ; Task: Promise.then ; Value: ZoneAwareError Error: Cannot match any routes. URL Segment: 'error'
    at ApplyRedirects.noMatchError (http://localhost:4200/vendor.bundle.js:108860:16) [angular]
    at CatchSubscriber.selector (http://localhost:4200/vendor.bundle.js:108829:29) [angular]
    at CatchSubscriber.error (http://localhost:4200/vendor.bundle.js:50636:31) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:483:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:457:18) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:483:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:457:18) [angular]
    at MapSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:483:26) [angular]
    at MapSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:457:18) [angular]
    at LastSubscriber.Subscriber._error (http://localhost:4200/vendor.bundle.js:483:26) [angular]
    at LastSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:457:18) [angular]
    at MergeAllSubscriber.OuterSubscriber.notifyError (http://localhost:4200/vendor.bundle.js:632:26) [angular]
    at InnerSubscriber._error (http://localhost:4200/vendor.bundle.js:115288:21) [angular]
    at InnerSubscriber.Subscriber.error (http://localhost:4200/vendor.bundle.js:457:18) [angular]
window.console.error @ VM13634:27
VM13634:27 ZoneAwareError

constructor(private oAuthService: OAuthService) {
    this.oAuthService.loginUrl = 'https://slack.com/oauth/authorize';
    this.oAuthService.redirectUri = '<redirect_uri>';
    this.oAuthService.clientId = '<client_id>';
    this.oAuthService.scope = 'commands users:read.email chat:write:bot channels:write channels:read users:read';
    this.oAuthService.tryLogin({
      onTokenReceived: context => {
        console.debug("logged in");
        console.debug(context);
      }
    });
}

http://<domain>/?code=<code>&state=<state>

constructor(private oauthService: OAuthService) {

      // Login-Url
      this.oauthService.loginUrl = "https://login.microsoftonline.com/TENANT_ID_GUID/oauth2/authorize";

      // URL of the SPA to redirect the user to after login
      this.oauthService.redirectUri = window.location.origin + "/";

      // The SPA's id. Register SPA with this id at the auth-server
      this.oauthService.clientId = '';

      // set the scope for the permissions the client should request
      this.oauthService.scope = "openid profile";

      // set to true, to receive also an id_token via OpenId Connect (OIDC) in addition to the
      // OAuth2-based access_token
      this.oauthService.oidc = true;

      //resourceAppId from manifest; required because requesting id_token AND token.  Would not be requied for just id_token...
      this.oauthService.resource = '';

      // Use setStorage to use sessionStorage or another implementation of the TS-type Storage
      // instead of localStorage
      this.oauthService.setStorage(sessionStorage);

      // To also enable single-sign-out set the url for your auth-server's logout-endpoint here
      this.oauthService.logoutUrl = "https://login.microsoftonline.com/TENANT_ID_GUID/oauth2/logout?id_token={{id_token}}";

      this.oauthService.issuer = "https://sts.windows.net/TENANT_ID_GUID/";

      // This method just tries to parse the token(s) within the url when
      // the auth-server redirects the user back to the web-app
      // It dosn't send the user the the login page
      this.oauthService.tryLogin({
          onTokenReceived: context => {
              var claims = context.idClaims;
              var currentUser = {
                  name: claims.name,
                  id: claims.unique_name,
                  roles: claims.roles
              };
              sessionStorage.setItem('currentUser', JSON.stringify(currentUser));
           }
       });
    }

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private oauthService: OAuthService, private router: Router) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (this.oauthService.hasValidIdToken()) {
      return true;
    }

    this.oauthService.initImplicitFlow();
    return false;
  }
}

...
        public redirectUri = "";
        public postLogoutRedirectUri = "";
...

...
        let logoutUrl: string;
        
        // For backward compatibility
        if (this.logoutUrl.indexOf('{{') > -1) {
            logoutUrl = this.logoutUrl.replace(/\{\{id_token\}\}/, id_token);
        }
        else {
            logoutUrl = this.logoutUrl + "?id_token_hint=" 
                                + encodeURIComponent(id_token)
                                + "&post_logout_redirect_uri="
                                + encodeURIComponent(this.postLogoutRedirectUri || this.redirectUri);
        }
        location.href = logoutUrl;
...

export class AppComponent {

    constructor(private router: Router,
        private oauthService: OAuthService) {

        // Login-Url
        this.oauthService.loginUrl = "https://login.microsoftonline.com/TENANT_ID_GUID/oauth2/authorize";

        // URL of the SPA to redirect the user to after login
        this.oauthService.redirectUri = window.location.origin + "/";

        // The SPA's id. Register SPA with this id at the auth-server
        this.oauthService.clientId = CLIENT_ID_GUID;

        // set the scope for the permissions the client should request
        this.oauthService.scope = "openid profile";

        // set to true, to receive also an id_token via OpenId Connect (OIDC) in addition to the
        // OAuth2-based access_token
        this.oauthService.oidc = true;

        //resourceAppId from manifest; required because requesting id_token AND token.  Would not be requied for just id_token...
        this.oauthService.resource = RESOURCE_ID_GUID;

        // Use setStorage to use sessionStorage or another implementation of the TS-type Storage
        // instead of localStorage
        this.oauthService.setStorage(sessionStorage);

        // To also enable single-sign-out set the url for your auth-server's logout-endpoint here
        this.oauthService.logoutUrl = "https://login.microsoftonline.com/TENANT_ID_GUID/oauth2/logout?id_token={{id_token}}";

        this.oauthService.issuer = "https://sts.windows.net/TENANT_ID_GUID/";

        // This method just tries to parse the token(s) within the url when
        // the auth-server redirects the user back to the web-app
        // It dosn't send the user the the login page
        this.oauthService.tryLogin({
            onTokenReceived: context => {
                var claims = context.idClaims;
                var currentUser = {
                    name: claims.name,
                    id: claims.unique_name,
                    roles: claims.roles
                };
                sessionStorage.setItem('currentUser', JSON.stringify(currentUser));
            }
        });
}

import { Component, Inject } from '@angular/core';
import { OAuthService } from 'angular-oauth2-oidc';
import { AppConfig } from './app.config';

@Component({
    selector: 'my-app',
    styleUrls: [ './app.component.scss' ],
    templateUrl: './app.component.html'
})
export class AppComponent {
    constructor(private _config: AppConfig,
                private _oauthService: OAuthService) {
        this._oauthService.loginUrl = _config.settings.loginEndpoint;
        this._oauthService.redirectUri = _config.settings.redirectUri;
        this._oauthService.clientId = _config.settings.clientId;
        this._oauthService.scope = _config.settings.scope;
        this._oauthService.oidc = _config.settings.oidc;
        this._oauthService.tryLogin({});
    }
}

import { Component, OnInit, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { OAuthService } from 'angular-oauth2-oidc';

@Component({
  template: ''
})
export class LoginComponent implements OnInit {
  constructor(private _oauthService: OAuthService, private _router: Router) {
  }

  ngOnInit(): void {
    let id =1;

    if (this._oauthService.hasValidIdToken()) {
      if (id)
        this._router.navigate(['/someurl', id]);
    }
    else
      this.login();
  }

  login() {
    this._oauthService.initImplicitFlow();
  }
}

import { permissionServiceInterface, IPermissionService } from './../permission/permission.service';
import { OAuthService } from 'angular-oauth2-oidc';
import { Observable } from 'rxjs/Observable';
import { CanActivate, ActivatedRouteSnapshot, Router, RouterStateSnapshot, NavigationExtras } from '@angular/router';
import { Inject, Injectable } from '@angular/core';

@Injectable()
export class AuthorizationGuardService implements CanActivate {
    constructor(private _oauthService: OAuthService,
        private _router: Router,
        @Inject(permissionServiceInterface) private _permissionService: IPermissionService) {}

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean | Observable<boolean> | Promise<boolean> {
        let id = route.params['id'];

        if (this._oauthService.hasValidIdToken())
            return this.checkRoutePermissions(+id);

        this._router.navigate(['/login']);
        return false;
    }

    private checkRoutePermissions(id: number): Observable<boolean> {
        return this._permissionService.checkAuthority(id);
    }
}

import { Observable } from 'rxjs/Observable';
import { Router } from '@angular/router';
import { Http, Response } from '@angular/http';
import { Injectable, OpaqueToken } from '@angular/core';

export let permissionServiceInterface = new OpaqueToken('IPermissionService');

export interface IPermissionService {
    checkAuthority(id: number): Observable<boolean>;
}

@Injectable()
export class PermisisonService implements IPermissionService {
    private _apiUrl: string;

    constructor(private _http: Http, private _config: AppConfig,
                router: Router) {
        super(router);
        this._apiUrl = 'someurl';
    }

    checkAuthority(id: number): Observable<boolean> {
        this._apiUrl = 'someurl/id';

        return this._http.get(this._apiUrl)
                    .map((response) => {
                        return response.json() as boolean;
                    });
    }
}

https://localhost:6001/#/home?id_token=...&access_token=...&token_type=Bearer
&expires_in=3600&scope=...&state=...&session_state=...

constructor(private oauthService: OAuthService) {

    // Login-Url
    this.oauthService.loginUrl = 'https://accounts.google.com/o/oauth2/v2/auth'; //Id-Provider?

    // URL of the SPA to redirect the user to after login
    this.oauthService.redirectUri = window.location.origin;

    // The SPA's id. Register SPA with this id at the auth-server
    this.oauthService.clientId = '<client-id>';

    // set the scope for the permissions the client should request
    this.oauthService.scope = 'profile email https://www.googleapis.com/auth/drive';

    // set to true, to receive also an id_token via OpenId Connect (OIDC) in addition to the
    // OAuth2-based access_token
    this.oauthService.oidc = true;

    // Use setStorage to use sessionStorage or another implementation of the TS-type Storage
    // instead of localStorage
    this.oauthService.setStorage(sessionStorage);
    this.oauthService.issuer = 'https://www.googleapis.com';

    // To also enable single-sign-out set the url for your auth-server's logout-endpoint here
    // this.oauthService.logoutUrl = "https://steyer-identity-server.azurewebsites.net/identity/connect/endsession?id_token={{id_token}}";

    // Set a dummy secret
    // Please note that the auth-server used here demand the client to transmit a client secret, although
    // the standard explicitly cites that the password flow can also be used without it. Using a client secret
    // does not make sense for a SPA that runs in the browser. That's why the property is called dummyClientSecret
    // Using such a dummy secreat is as safe as using no secret.
    this.oauthService.dummyClientSecret = '<client-secret>';

    // This method just tries to parse the token(s) within the url when
    // the auth-server redirects the user back to the web-app
    // It dosn't send the user the the login page
    this.oauthService.tryLogin({
      onTokenReceived: (context) => {
        console.log('logged in', context);
      }
    });
    
  }

 this.oauthService
            .fetchTokenUsingPasswordFlowAndLoadUserProfile(this.user.username, this.user.password)
            .then(() => {
                console.debug('successfully logged in');
                let claims = this.oauthService.getIdentityClaims();
                this.loginFailed = false;
            })
            .catch((err) => {
                console.error('error logging in', err);
                this.loginFailed = true;
                this.errorMessage = this.labels.APP_UNAVAILABLE;
            })

import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';