title: How do I implement Authenication code flow using angular-oauth2-oidc in Angular 8
body: <p>I am currently following this for my oAuth2: </p>
  
  <p><a href="https://manfredsteyer.github.io/angular-oauth2-oidc/docs/index.html" rel="nofollow noreferrer">https://manfredsteyer.github.io/angular-oauth2-oidc/docs/index.html</a></p>
  
  <p>I am using the authentication flow grant. </p>
  
  <p>I have a main page, where users can click on the button and it gets redirect to the auth server. 
  After users enter their credentials, it will be redirected to a temporary page, where I am suppose to use the auth code to get the access token. </p>
  
  <p>I am currently stuck at the temporary page on how to get the code.</p>
  
  <p>So a few questions:</p>
  
  <ol>
  <li>How do i implement to get the access code and get access token?</li>
  <li>How do i redirect to home page after getting access token?</li>
  </ol>
  
  <p>-</p>
  
  <p>This is how I want the flow to be like:</p>
  
  <p>Prelogin -> auth server login page -> post login -> application home page</p>
  
  <p>-</p>
  
  <p><strong>PreLoginComponent.ts:</strong></p>
  
  <pre><code>export class PreLoginComponent implements OnInit {
    constructor(private oauthService: OAuthService) {}
  
    ngOnInit() {}
  
    public login() {
      this.oauthService.initCodeFlow();
    }
  }
  </code></pre>
  
  <p><strong>authConfig.ts:</strong></p>
  
  <pre><code>export const authConfig: AuthConfig = {
  
    responseType: environment.authRequestType,
  
    loginUrl: environment.authServerUrl,
  
    redirectUri: environment.redirectUrl,
  
    clientId: environment.clientId,
  
    scope: environment.scope,
  
    requireHttps: false,
  
    showDebugInformation: true
  };
  </code></pre>
  
  <p><strong>PreLoginComponent.ts:</strong></p>
  
  <pre><code>export class PreLoginComponent implements OnInit {
    constructor(private oauthService: OAuthService) {}
  
    ngOnInit() {}
  
    public login() {
      this.oauthService.initCodeFlow();
    }
  }
  </code></pre>
  
  <p><strong>AppComponent.ts:</strong> </p>
  
  <pre><code>import { OAuthService, JwksValidationHandler } from 'angular-oauth2-oidc';
  import { authConfig } from './core/authentication/auth.config';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.scss']
  })
  export class AppComponent implements OnInit, OnDestroy {
  
    constructor(
      private oauthService: OAuthService
    ) {
      this.configure();
    }
  
    ngOnInit() {
      }
  
    private configure() {
      this.oauthService.configure(authConfig);
      this.oauthService.tokenValidationHandler = new JwksValidationHandler();
    }
  }
  </code></pre>
  
  <p><strong>PostLoginComponent.ts:</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import { OAuthService, JwksValidationHandler } from 'angular-oauth2-oidc';
  
  @Component({
    selector: 'app-post-login',
    templateUrl: './post-login.component.html',
    styleUrls: ['./post-login.component.scss']
  })
  export class PostLoginComponent implements OnInit {
    constructor(private oauthService: OAuthService) {
  
    }
  
    ngOnInit() {
    // how do i implement to get the code and get access token 
    // how do i redirect after success
    //this.oauthService.tryLoginCodeFlow();
    }
  }
  </code></pre>