How do I implement Authenication code flow using angular-oauth2-oidc in Angular 8

Question

I am currently following this for my oAuth2:

https://manfredsteyer.github.io/angular-oauth2-oidc/docs/index.html

I am using the authentication flow grant.

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.

I am currently stuck at the temporary page on how to get the code.

So a few questions:

1. How do i implement to get the access code and get access token?
2. How do i redirect to home page after getting access token?

-

This is how I want the flow to be like:

Prelogin -> auth server login page -> post login -> application home page

-

PreLoginComponent.ts:

export class PreLoginComponent implements OnInit {
  constructor(private oauthService: OAuthService) {}

  ngOnInit() {}

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

authConfig.ts:

export const authConfig: AuthConfig = {

  responseType: environment.authRequestType,

  loginUrl: environment.authServerUrl,

  redirectUri: environment.redirectUrl,

  clientId: environment.clientId,

  scope: environment.scope,

  requireHttps: false,

  showDebugInformation: true
};

PreLoginComponent.ts:

export class PreLoginComponent implements OnInit {
  constructor(private oauthService: OAuthService) {}

  ngOnInit() {}

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

AppComponent.ts:

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();
  }
}

PostLoginComponent.ts:

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();
  }
}

Answer 1

Do you mean Authorization Code Grant? If so, I find going back to the source (standard) to have been very useful to me: https://www.rfc-editor.org/rfc/rfc6749#section-4.1

To answer specifically:

1. How do i implement to get the access code and get access token?

In theory the page you are redirected to is under your control. The redirection will pass the authorization code in the URL and so you should be able to read it from there. See step C) in the link above.

2. How do i redirect to home page after getting access token?

Again, the page you are redirected to is 'yours' so you can either redirect 301 to your home page... Or just make the entire process happen in another window (which is kind of standard practice) and close it when the redirect page is hit...