Authorization in Angular UI

OAuth is preconfigured in Angular application templates. So, when you start a project using the CLI (or Suite, for that matter), authorization already works. You can find OAuth configuration in the environment.ts files.

import { Config } from '@abp/ng.core';

const baseUrl = 'http://localhost:4200';

export const environment = {
  // other options removed for sake of brevity

  oAuthConfig: {
    issuer: 'https://localhost:44305',
    redirectUri: baseUrl,
    clientId: 'MyProjectName_App',
    responseType: 'code',
    scope: 'offline_access MyProjectName',
  },

  // other options removed for sake of brevity
} as Config.Environment;

This configuration results in an OAuth authorization code flow with PKCE and we are using angular-oauth2-oidc library for managing OAuth in the Angular client.

According to this flow, the user is redirected to an external login page which is built with MVC. So, if you need to customize the login page, please follow this community article.