[MNT-22836] - support PKCE code flow in SSO (#8884)

* [MNT-22836] - support PKCE code flow in SSO

demo-shell/src/app.config.json

@@ -20,7 +20,8 @@
     "clientId": "alfresco",
     "scope": "openid profile email",
     "secret": "",
-    "implicitFlow": true,
+    "implicitFlow": false,
+    "codeFlow": true,
     "silentLogin": true,
     "redirectSilentIframeUri": "{protocol}//{hostname}{:port}/assets/silent-refresh.html",
     "redirectUri": "/",

docker/docker-entrypoint.d/30-sed-on-appconfig.sh

@@ -33,6 +33,11 @@ if [ -n "${APP_CONFIG_OAUTH2_IMPLICIT_FLOW}" ]; then
     -i "${NGINX_ENVSUBST_OUTPUT_DIR}/app.config.json"
 fi
 
+if [ -n "${APP_CONFIG_OAUTH2_CODE_FLOW}" ]; then
+  sed -e "s/\"codeFlow\": [^,]*/\"codeFlow\": ${APP_CONFIG_OAUTH2_CODE_FLOW}/g" \
+    -i "${NGINX_ENVSUBST_OUTPUT_DIR}/app.config.json"
+fi
+
 if [ -n "${APP_CONFIG_OAUTH2_SILENT_LOGIN}" ]; then
   sed -e "s/\"silentLogin\": [^,]*/\"silentLogin\": ${APP_CONFIG_OAUTH2_SILENT_LOGIN}/g" \
     -i "${NGINX_ENVSUBST_OUTPUT_DIR}/app.config.json"

docker/run.sh

@@ -14,6 +14,7 @@ docker run --rm -it \
   --env APP_CONFIG_OAUTH2_HOST=$APP_CONFIG_OAUTH2_HOST \
   --env APP_CONFIG_OAUTH2_CLIENTID=$APP_CONFIG_OAUTH2_CLIENTID \
   --env APP_CONFIG_OAUTH2_IMPLICIT_FLOW=$APP_CONFIG_OAUTH2_IMPLICIT_FLOW \
+  --env APP_CONFIG_OAUTH2_IMPLICIT_FLOW=$APP_CONFIG_OAUTH2_CODE_FLOW \
   --env APP_CONFIG_OAUTH2_SILENT_LOGIN=$APP_CONFIG_OAUTH2_SILENT_LOGIN \
   --env APP_CONFIG_OAUTH2_REDIRECT_SILENT_IFRAME_URI=$APP_CONFIG_OAUTH2_REDIRECT_SILENT_IFRAME_URI \
   --env APP_CONFIG_BPM_HOST=$APP_CONFIG_BPM_HOST \

lib/core/src/lib/auth/oidc/auth-config.service.spec.ts

@@ -149,7 +149,7 @@ describe('AuthConfigService', () => {
             const expectedConfig = {
                 oidc: true,
                 issuer: 'http://localhost:3000/auth/realms/alfresco',
-                redirectUri: 'http://localhost:3000/#/view/authentication-confirmation',
+                redirectUri: 'http://localhost:3000/#/view/authentication-confirmation/?',
                 silentRefreshRedirectUri: 'http://localhost:3000/assets/silent-refresh.html',
                 postLogoutRedirectUri: 'http://localhost:3000/#/logout',
                 clientId: 'fakeClientId',

lib/core/src/lib/auth/oidc/auth-config.service.ts

@@ -19,7 +19,7 @@ import { Inject, Injectable } from '@angular/core';
 import { AuthConfig } from 'angular-oauth2-oidc';
 import { take } from 'rxjs/operators';
 import { AppConfigService } from '../../app-config/app-config.service';
-import { AuthModuleConfig, AUTH_MODULE_CONFIG } from './auth-config';
+import { AUTH_MODULE_CONFIG, AuthModuleConfig } from './auth-config';
 
 /**
  * Create auth configuration factory
@@ -84,7 +84,7 @@ export class AuthConfigService {
 
         // handle issue from the OIDC library with hashStrategy and implicitFlow, with would append &state to the url with would lead to error
         // `cannot match any routes`, and displaying the wildcard ** error page
-        return oauth2.implicitFlow && useHash ? `${redirectUri}/?` : redirectUri;
+        return (oauth2.codeFlow || oauth2.implicitFlow) && useHash ? `${redirectUri}/?` : redirectUri;
     }
 
     private getLocationOrigin() {

lib/core/src/lib/login/components/login.component.html

@@ -3,7 +3,7 @@
         <div class="adf-ie11FixerChild">
 
             <mat-card class="adf-login-card-wide">
-                <form 
+                <form
                     id="adf-login-form"
                     [formGroup]="form"
                     autocomplete="off"
@@ -12,13 +12,13 @@
                         <mat-card-title>
                             <div class="adf-alfresco-logo">
                                 <!--HEADER TEMPLATE-->
-                                <ng-template 
+                                <ng-template
                                     *ngIf="headerTemplate"
                                     ngFor
                                     [ngForOf]="[data]"
                                     [ngForTemplate]="headerTemplate">
                                 </ng-template>
-                                <img 
+                                <img
                                     *ngIf="!headerTemplate"
                                     id="adf-login-img-logo"
                                     class="adf-img-logo"
@@ -44,10 +44,10 @@
                             </div>
                         </div>
 
-                        <div *ngIf="!implicitFlow">
+                        <div *ngIf="!ssoLogin">
 
                             <!--USERNAME FIELD-->
-                            <div 
+                            <div
                                 class="adf-login__field"
                                 [ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
                                 <mat-form-field
@@ -137,14 +137,14 @@
                                         class="adf-login-button-label">
                                             {{'LOGIN.BUTTON.LOGIN' | translate }}
                                     </span>
-                                    <div 
+                                    <div
                                         *ngIf="actualLoginStep === LoginSteps.Checking"
                                         class="adf-interactive-login-label">
                                             <span class="adf-login-button-label">
                                                 {{ 'LOGIN.BUTTON.CHECKING' | translate}}
                                             </span>
                                             <div class="adf-login-spinner-container">
-                                                <mat-spinner 
+                                                <mat-spinner
                                                     id="checking-spinner"
                                                     class="adf-login-checking-spinner"
                                                     [diameter]="25">
@@ -169,7 +169,7 @@
                                 </mat-checkbox>
                             </div>
                         </div>
-                        <div *ngIf="implicitFlow">
+                        <div *ngIf="ssoLogin">
                             <button
                                 type="button"
                                 (click)="implicitLogin()"

lib/core/src/lib/login/components/login.component.spec.ts

@@ -721,7 +721,7 @@ describe('LoginComponent', () => {
                 fixture.detectChanges();
 
                 fixture.whenStable().then(() => {
-                    expect(component.implicitFlow).toBe(false);
+                    expect(component.ssoLogin).toBe(false);
                     expect(component.redirectToImplicitLogin).toHaveBeenCalled();
                 });
 
@@ -734,7 +734,7 @@ describe('LoginComponent', () => {
                 fixture.detectChanges();
 
                 fixture.whenStable().then(() => {
-                    expect(component.implicitFlow).toBe(true);
+                    expect(component.ssoLogin).toBe(true);
                 });
 
             }));

lib/core/src/lib/login/components/login.component.ts

@@ -111,7 +111,7 @@ export class LoginComponent implements OnInit, OnDestroy {
     @Output()
     executeSubmit = new EventEmitter<LoginSubmitEvent>();
 
-    implicitFlow: boolean = false;
+    ssoLogin: boolean = false;
 
     form: UntypedFormGroup;
     isError: boolean = false;
@@ -155,8 +155,8 @@ export class LoginComponent implements OnInit, OnDestroy {
                 const oauth = this.appConfig.oauth2;
                 if (oauth?.silentLogin) {
                     this.redirectToImplicitLogin();
-                } else if (oauth?.implicitFlow) {
-                    this.implicitFlow = true;
+                } else if (oauth?.implicitFlow || oauth?.codeFlow) {
+                    this.ssoLogin = true;
                 }
             }