AWS Amplify token generation with authorization code (a simple way)

This is my first project with AWS, to me AWS makes everything so difficult to understand with their product names. Specially when it comes to options what we can do with AWS. So they confused me enough so I waste 2 days just to figure out how to configure amplify for authorization code. Finally I able to write sample code required for me (with help of course). Anyway here is how its done with minimal number of lines.

Note, I am doing this on a Angular project and with amplify library.

file : main.ts

import { environment } from './environments/environment';
import Amplify, { Auth } from '@aws-amplify/auth';

Amplify.configure(environment.amplify)

Auth.configure({
  oauth: environment.oauth,
});

//Here you can access tokens (ID, Access and Refresh tokens) in local storage of the browser.

file : environment.ts

export const environment = {
  production: false,
  amplify: {
      domain: 'XXXyour-domainXXX.ap-southeast-1.amazoncognito.com',
      aws_cognito_region: 'ap-southeast-1',
      aws_user_pools_id: 'ap-southeast-1_XXXXX',
      aws_user_pools_web_client_id: 'XXXXXXAAAAAAXXXXX'
  },

  oauth: {
    // Authorized scopes
    scope: [
      'phone',
      'email',
      'profile',
      'openid',
      'aws.cognito.signin.user.admin',
    ],
    // Callback URL
    redirectSignIn: 'http://localhost:4200',

    // Sign out URL
    redirectSignOut: 'http://localhost:4200',

    // 'code' for Authorization code grant,
    responseType: 'code',

    // optional, for Cognito hosted ui specified options
    options: {
      // Indicates if the data collection is enabled to support Cognito advanced security features. By default, this flag is set to true.
      AdvancedSecurityDataCollectionFlag: false,
    },
  }
};

Please refer https://www.youtube.com/c/krish for security related in-depth videos.