From 9b1d0c000afdc3c57940996cd2101fa10c74c4cb Mon Sep 17 00:00:00 2001
From: Ivan Kovarin <ivan.kovarin@graviteesource.com>
Date: Wed, 29 Oct 2025 16:54:08 +0100
Subject: [PATCH 1/4] [APIM-11537] Enable SSO on next-gen portal.

---
 gravitee-apim-portal-webui-next/package.json  |  1 +
 .../src/app/app.component.html                |  7 +-
 .../src/app/app.component.ts                  | 27 +++++-
 .../src/app/app.config.ts                     |  6 ++
 .../src/app/log-in/log-in.component.html      | 84 ++++++++++-------
 .../src/app/log-in/log-in.component.scss      | 58 ++++++++++++
 .../src/app/log-in/log-in.component.ts        | 62 ++++++++++---
 .../src/assets/images/idp/github.svg          |  3 +
 .../src/assets/images/idp/google.svg          |  1 +
 .../src/assets/images/idp/graviteeio_am.svg   |  9 ++
 .../src/assets/images/idp/oidc.svg            |  9 ++
 .../desktop-nav-bar.component.html            | 30 ++++---
 .../desktop-nav-bar.component.ts              |  1 +
 .../mobile-nav-bar.component.html             | 12 +--
 .../mobile-nav-bar.component.ts               |  1 +
 .../components/nav-bar/nav-bar.component.html |  4 +-
 .../components/nav-bar/nav-bar.component.ts   |  1 +
 .../src/entities/common/data-response.ts      | 22 +++++
 .../src/entities/common/links.ts              | 22 +++++
 .../configuration/identity-provider-type.ts   | 23 +++++
 .../configuration/identity-provider.ts        | 41 +++++++++
 .../src/services/auth.service.ts              | 90 +++++++++++++++++--
 .../src/services/identity-provider.service.ts | 42 +++++++++
 gravitee-apim-portal-webui-next/yarn.lock     | 15 +++-
 24 files changed, 502 insertions(+), 69 deletions(-)
 create mode 100644 gravitee-apim-portal-webui-next/src/assets/images/idp/github.svg
 create mode 100644 gravitee-apim-portal-webui-next/src/assets/images/idp/google.svg
 create mode 100644 gravitee-apim-portal-webui-next/src/assets/images/idp/graviteeio_am.svg
 create mode 100644 gravitee-apim-portal-webui-next/src/assets/images/idp/oidc.svg
 create mode 100644 gravitee-apim-portal-webui-next/src/entities/common/data-response.ts
 create mode 100644 gravitee-apim-portal-webui-next/src/entities/common/links.ts
 create mode 100644 gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider-type.ts
 create mode 100644 gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider.ts
 create mode 100644 gravitee-apim-portal-webui-next/src/services/identity-provider.service.ts

diff --git a/gravitee-apim-portal-webui-next/package.json b/gravitee-apim-portal-webui-next/package.json
index 1cc157abcd8..b36ca9b61b9 100644
--- a/gravitee-apim-portal-webui-next/package.json
+++ b/gravitee-apim-portal-webui-next/package.json
@@ -61,6 +61,7 @@
     "@fontsource/roboto": "5.2.5",
     "@types/swagger-ui": "3.52.4",
     "angular-gridster2": "20.2.3",
+    "angular-oauth2-oidc": "^20.0.2",
     "asciidoctor": "3.0.4",
     "chart.js": "4.3.0",
     "dompurify": "3.2.7",
diff --git a/gravitee-apim-portal-webui-next/src/app/app.component.html b/gravitee-apim-portal-webui-next/src/app/app.component.html
index 2f3f7d95e10..40f4d073c64 100644
--- a/gravitee-apim-portal-webui-next/src/app/app.component.html
+++ b/gravitee-apim-portal-webui-next/src/app/app.component.html
@@ -15,7 +15,12 @@
     limitations under the License.
 
 -->
-<app-nav-bar [currentUser]="currentUser()" [siteTitle]="siteTitle" [logo]="logo()" [customLinks]="customLinks()" />
+<app-nav-bar
+  [currentUser]="currentUser()"
+  [siteTitle]="siteTitle"
+  [logo]="logo()"
+  [customLinks]="customLinks()"
+  [forceLogin]="forceLogin()" />
 <div class="main-container-wrapper">
   <router-outlet />
 </div>
diff --git a/gravitee-apim-portal-webui-next/src/app/app.component.ts b/gravitee-apim-portal-webui-next/src/app/app.component.ts
index ce882154f2a..675e9358a59 100644
--- a/gravitee-apim-portal-webui-next/src/app/app.component.ts
+++ b/gravitee-apim-portal-webui-next/src/app/app.component.ts
@@ -15,7 +15,8 @@
  */
 import { Component, effect, inject } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { RouterOutlet } from '@angular/router';
+import { NavigationStart, Router, RouterOutlet } from '@angular/router';
+import { isEmpty } from 'lodash';
 import { BreadcrumbService } from 'xng-breadcrumb';
 
 import { FooterComponent } from '../components/footer/footer.component';
@@ -25,6 +26,12 @@ import { CurrentUserService } from '../services/current-user.service';
 import { PortalMenuLinksService } from '../services/portal-menu-links.service';
 import { ThemeService } from '../services/theme.service';
 
+const PATHS = {
+  LOGIN: '/log-in',
+  SIGNUP: '/sign-up',
+  RESET_PASSWORD: '/log-in/reset-password',
+};
+
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet, NavBarComponent, FooterComponent],
@@ -43,6 +50,7 @@ export class AppComponent {
     // Don't delete BreadcrumbService from here - it's responsible for correct breadcrumb navigation
     private breadcrumbService: BreadcrumbService,
     private title: Title,
+    private router: Router,
   ) {
     this.siteTitle = configService.configuration?.portalNext?.siteTitle ?? 'Developer Portal';
     this.title.setTitle(this.siteTitle);
@@ -51,6 +59,23 @@ export class AppComponent {
         this.updateFavicon();
       }
     });
+
+    this.router.events.subscribe(event => {
+      if (event instanceof NavigationStart) {
+        if (isEmpty(this.currentUser()) && !this.isInLoginOrRegistration(event.url) && this.forceLogin()) {
+          const redirectUrl = event.url;
+          this.router.navigate([PATHS.LOGIN], { replaceUrl: true, queryParams: { redirectUrl } });
+        }
+      }
+    });
+  }
+
+  isInLoginOrRegistration(url: string = this.router.routerState.snapshot.url): boolean {
+    return url.startsWith(PATHS.LOGIN) || url.startsWith(PATHS.SIGNUP) || url.startsWith(PATHS.RESET_PASSWORD);
+  }
+
+  forceLogin(): boolean {
+    return this.configService.configuration.authentication?.forceLogin?.enabled ?? false;
   }
 
   private updateFavicon() {
diff --git a/gravitee-apim-portal-webui-next/src/app/app.config.ts b/gravitee-apim-portal-webui-next/src/app/app.config.ts
index 8cde9467ba5..1974dbade14 100644
--- a/gravitee-apim-portal-webui-next/src/app/app.config.ts
+++ b/gravitee-apim-portal-webui-next/src/app/app.config.ts
@@ -20,18 +20,21 @@ import { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, Router, withComponentInputBinding, withRouterConfig } from '@angular/router';
 import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
+import { provideOAuthClient } from 'angular-oauth2-oidc';
 import { catchError, combineLatest, Observable, switchMap } from 'rxjs';
 import { of } from 'rxjs/internal/observable/of';
 
 import { routes } from './app.routes';
 import { csrfInterceptor } from '../interceptors/csrf.interceptor';
 import { httpRequestInterceptor } from '../interceptors/http-request.interceptor';
+import { AuthService } from '../services/auth.service';
 import { ConfigService } from '../services/config.service';
 import { CurrentUserService } from '../services/current-user.service';
 import { PortalMenuLinksService } from '../services/portal-menu-links.service';
 import { ThemeService } from '../services/theme.service';
 
 function initApp(
+  authService: AuthService,
   configService: ConfigService,
   themeService: ThemeService,
   currentUserService: CurrentUserService,
@@ -40,6 +43,7 @@ function initApp(
 ): () => Observable<unknown> {
   return () =>
     configService.initBaseURL().pipe(
+      switchMap(_ => authService.load()),
       switchMap(_ =>
         combineLatest([
           themeService.loadTheme(),
@@ -60,8 +64,10 @@ export const appConfig: ApplicationConfig = {
     provideRouter(routes, withComponentInputBinding(), withRouterConfig({ paramsInheritanceStrategy: 'always' })),
     provideHttpClient(withInterceptors([httpRequestInterceptor, csrfInterceptor])),
     provideAnimations(),
+    provideOAuthClient(),
     provideAppInitializer(() => {
       const initializerFn = initApp(
+        inject(AuthService),
         inject(ConfigService),
         inject(ThemeService),
         inject(CurrentUserService),
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
index a87f07241c7..41ab59fce69 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
@@ -20,37 +20,61 @@
     <mat-card-header>
       <mat-card-title i18n="@@logInTitle">Log in</mat-card-title>
     </mat-card-header>
-    <mat-card-content class="log-in__form">
-      <div class="log-in__form__fields">
-        <mat-form-field appearance="outline" class="log-in__form__input">
-          <mat-label i18n="@@logInUsername">Username</mat-label>
-          <input matInput formControlName="username" appearance="outlined" />
-          @if (logInForm.controls.username.hasError('required')) {
-            <mat-error i18n="@@logInUsernameErrorRequired">Username is required</mat-error>
-          }
-        </mat-form-field>
-        <mat-form-field appearance="outline" class="log-in__form__input">
-          <mat-label i18n="@@logInPassword">Password</mat-label>
-          <input type="password" matInput formControlName="password" />
-          @if (logInForm.controls.password.hasError('required')) {
-            <mat-error i18n="@@logInPasswordErrorRequired">Password is required</mat-error>
-          }
-        </mat-form-field>
-        @if (error() === 401) {
-          <mat-error i18n="@@logInError401">The username or password you entered is incorrect, please try again.</mat-error>
+    <mat-card-content>
+      @if (isLocalLoginEnabled()) {
+        <div class="log-in__form">
+          <div class="log-in__form__fields">
+            <mat-form-field appearance="outline" class="log-in__form__input">
+              <mat-label i18n="@@logInUsername">Username</mat-label>
+              <input matInput formControlName="username" appearance="outlined" />
+              @if (logInForm.controls.username.hasError('required')) {
+                <mat-error i18n="@@logInUsernameErrorRequired">Username is required</mat-error>
+              }
+            </mat-form-field>
+            <mat-form-field appearance="outline" class="log-in__form__input">
+              <mat-label i18n="@@logInPassword">Password</mat-label>
+              <input type="password" matInput formControlName="password" />
+              @if (logInForm.controls.password.hasError('required')) {
+                <mat-error i18n="@@logInPasswordErrorRequired">Password is required</mat-error>
+              }
+            </mat-form-field>
+            @if (error() === 401) {
+              <mat-error i18n="@@logInError401">The username or password you entered is incorrect, please try again.</mat-error>
+            }
+          </div>
+          <div class="log-in__form__buttons">
+            <button
+              [disabled]="logInForm.invalid"
+              type="submit"
+              mat-flat-button
+              i18n="@@logInAction"
+              class="log-in__form__submit secondary-button">
+              Log in
+            </button>
+            <a class="log-in__form__forgot-password" i18n="@@resetPasswordAction" routerLink="reset-password"> Forgot password? </a>
+          </div>
+        </div>
+      }
+      <div class="log-in__sso">
+        @if (isLocalLoginEnabled() && identityProviders.length > 0) {
+          <div class="log-in__sso__separator">
+            <div class="log-in__sso__separator__line"></div>
+            <div class="log-in__sso__separator__label" i18n="@@orSeparator">OR</div>
+          </div>
+        }
+        @for (provider of identityProviders; track provider.id) {
+          <button
+            type="button"
+            mat-stroked-button
+            class="log-in__sso__idp secondary-button"
+            [style.background-color]="getProviderColor(provider)"
+            (click)="authenticateSSO(provider)">
+            <div class="log-in__sso__idp__container">
+              <img class="log-in__sso__idp__logo" [src]="'assets/images/idp/' + getProviderLogo(provider)" alt="Provider Logo" />
+              {{ provider.name }}
+            </div>
+          </button>
         }
-      </div>
-
-      <div class="log-in__form__buttons">
-        <button
-          [disabled]="logInForm.invalid"
-          type="submit"
-          mat-flat-button
-          i18n="@@logInAction"
-          class="log-in__form__submit secondary-button">
-          Log in
-        </button>
-        <a mat-stroked-button i18n="@@resetPasswordAction" routerLink="reset-password"> Forgot password? </a>
       </div>
     </mat-card-content>
   </mat-card>
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
index b3a4593db51..ee44b61d117 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
@@ -47,5 +47,63 @@
     &__submit {
       width: 100%;
     }
+
+    &__forgot-password {
+      margin-top: 5px;
+      color: var(--mdc-outlined-button-label-text-color);
+      font-size: 14px;
+      text-align: center;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__sso {
+    display: flex;
+    flex-flow: column;
+    gap: 16px;
+
+    &__separator {
+      position: relative;
+      display: flex;
+      height: 30px;
+      align-items: center;
+      margin: 16px 0 0;
+
+      &__line {
+        width: 100%;
+        border-top: 1px solid var(--mdc-outlined-card-outline-color);
+      }
+
+      &__label {
+        position: absolute;
+        display: flex;
+        width: 40px;
+        height: 100%;
+        align-items: center;
+        justify-content: center;
+        margin: auto;
+        background: var(--gio-app-card-background-color);
+        inset: 0;
+      }
+    }
+
+    &__idp {
+      width: 100%;
+
+      &__container {
+        display: flex;
+        align-items: center;
+        gap: 7px;
+      }
+
+      &__logo {
+        width: 23px;
+        height: 23px;
+      }
+    }
   }
 }
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts
index afaa7ca1261..5060944f579 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts
@@ -14,41 +14,63 @@
  * limitations under the License.
  */
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, DestroyRef, inject, signal } from '@angular/core';
+import { Component, DestroyRef, OnInit, signal } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
-import { MatAnchor, MatButtonModule } from '@angular/material/button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
 import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
-import { Router, RouterLink } from '@angular/router';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { OAuthModule } from 'angular-oauth2-oidc';
 import { switchMap, tap } from 'rxjs';
 
+import { IdentityProvider } from '../../entities/configuration/identity-provider';
+import { IdentityProviderType } from '../../entities/configuration/identity-provider-type';
 import { AuthService } from '../../services/auth.service';
+import { ConfigService } from '../../services/config.service';
 import { CurrentUserService } from '../../services/current-user.service';
+import { IdentityProviderService } from '../../services/identity-provider.service';
 import { PortalMenuLinksService } from '../../services/portal-menu-links.service';
 
 @Component({
   selector: 'app-log-in',
-  imports: [MatCardModule, MatFormField, MatInput, MatButtonModule, MatLabel, ReactiveFormsModule, MatError, RouterLink, MatAnchor],
+  imports: [MatCardModule, MatFormField, MatInput, MatButtonModule, MatLabel, ReactiveFormsModule, MatError, RouterLink, OAuthModule],
   templateUrl: './log-in.component.html',
   styleUrl: './log-in.component.scss',
 })
-export class LogInComponent {
+export class LogInComponent implements OnInit {
   logInForm: FormGroup<{ username: FormControl; password: FormControl }> = new FormGroup({
     username: new FormControl('', [Validators.required]),
     password: new FormControl('', [Validators.required]),
   });
   error = signal(200);
+  identityProviders: IdentityProvider[] = [];
+  private redirectUrl: string = '';
 
-  private destroyRef = inject(DestroyRef);
   constructor(
-    private authService: AuthService,
-    private currentUserService: CurrentUserService,
-    private portalMenuLinksService: PortalMenuLinksService,
-    private router: Router,
+    private readonly configService: ConfigService,
+    private readonly authService: AuthService,
+    private readonly currentUserService: CurrentUserService,
+    private readonly identityProviderService: IdentityProviderService,
+    private readonly portalMenuLinksService: PortalMenuLinksService,
+    private readonly activatedRoute: ActivatedRoute,
+    private readonly router: Router,
+    private readonly destroyRef: DestroyRef,
   ) {}
 
+  ngOnInit(): void {
+    this.redirectUrl = this.activatedRoute.snapshot.queryParams?.['redirectUrl'] || '';
+    this.identityProviderService.getPortalIdentityProviders().subscribe({
+      next: response => {
+        this.identityProviders = response.data ?? [];
+      },
+      error: error => {
+        console.error('Cannot retrieve identity providers: ' + error.statusText);
+      },
+    });
+  }
+
   logIn() {
     this.authService
       .login(this.logInForm.value.username, this.logInForm.value.password)
@@ -64,4 +86,24 @@ export class LogInComponent {
         },
       });
   }
+
+  authenticateSSO(provider: IdentityProvider) {
+    this.authService.authenticateSSO(provider, this.redirectUrl);
+  }
+
+  getProviderColor(provider: IdentityProvider) {
+    if (provider.type && provider.color) {
+      return provider.color;
+    }
+    return '';
+  }
+
+  getProviderLogo(provider: IdentityProvider) {
+    const type = provider.type ?? IdentityProviderType.OIDC;
+    return `${type?.toLowerCase()}.svg`;
+  }
+
+  isLocalLoginEnabled() {
+    return this.configService.configuration.authentication?.localLogin?.enabled;
+  }
 }
diff --git a/gravitee-apim-portal-webui-next/src/assets/images/idp/github.svg b/gravitee-apim-portal-webui-next/src/assets/images/idp/github.svg
new file mode 100644
index 00000000000..a8d1174049a
--- /dev/null
+++ b/gravitee-apim-portal-webui-next/src/assets/images/idp/github.svg
@@ -0,0 +1,3 @@
+<svg width="1024" height="1024" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#1B1F23"/>
+</svg>
diff --git a/gravitee-apim-portal-webui-next/src/assets/images/idp/google.svg b/gravitee-apim-portal-webui-next/src/assets/images/idp/google.svg
new file mode 100644
index 00000000000..088288fa3fb
--- /dev/null
+++ b/gravitee-apim-portal-webui-next/src/assets/images/idp/google.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg>
\ No newline at end of file
diff --git a/gravitee-apim-portal-webui-next/src/assets/images/idp/graviteeio_am.svg b/gravitee-apim-portal-webui-next/src/assets/images/idp/graviteeio_am.svg
new file mode 100644
index 00000000000..b26a8538d5e
--- /dev/null
+++ b/gravitee-apim-portal-webui-next/src/assets/images/idp/graviteeio_am.svg
@@ -0,0 +1,9 @@
+<svg width="917" height="876" viewBox="0 0 917 876" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M447.981 0.12C565.911 3.1 667.691 49.79 751.031 131.34C752.481 132.75 762.551 142.35 762.411 143.16L613.051 296.61C595.701 278.79 577.991 261.78 556.791 248.51C440.361 175.65 285.891 224.74 232.751 350.38C171.781 494.52 273.881 653.63 428.471 660.77L636.571 660.74L427.371 416.2H707.121L916.541 660.75H637.911V875.29L416.821 874.86C192.361 863.87 11.7613 683.52 0.901289 459C-11.0187 212.5 182.941 6.21 428.721 0.12C435.011 -0.04 441.691 -0.04 447.981 0.12Z" fill="url(#paint0_linear_26116_6863)"/>
+<defs>
+<linearGradient id="paint0_linear_26116_6863" x1="579.881" y1="28" x2="211.381" y2="796.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FD6802"/>
+<stop offset="1" stop-color="#F21C12"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/gravitee-apim-portal-webui-next/src/assets/images/idp/oidc.svg b/gravitee-apim-portal-webui-next/src/assets/images/idp/oidc.svg
new file mode 100644
index 00000000000..a2a222efe99
--- /dev/null
+++ b/gravitee-apim-portal-webui-next/src/assets/images/idp/oidc.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90">
+    <g transform="translate(-59,-80)">
+        <g transform="matrix(0.35277777,0,0,-0.35277777,-15.526842,222.47817)">
+            <path  d="m 330.10774,359.51207 v -159.9391 -20.0609 l 32,15.0609 v 180.5721 z"/>
+            <path d="m 440.93004,306.71227 4.417,-45.864 -61.883,13.464"/>
+            <path d="m 266.10774,248.01987 c 0,22.674 24.707,41.769 58.383,47.598 v 20.325 c -51.51,-6.226 -90.383,-34.267 -90.383,-67.923 0,-34.869 41.725,-63.709 96,-68.508 v 20.061 c -36.516,4.578 -64,24.528 -64,48.447 m 101.617,67.915 v -20.317 c 13.399,-2.319 25.385,-6.727 34.9511,-12.64 l 22.6269,13.984 c -15.42,9.531 -35.322,16.283 -57.578,18.973"/>
+        </g>
+    </g>
+</svg>
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.html b/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.html
index c870b5f4f88..369268ccc8c 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.html
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.html
@@ -1,13 +1,13 @@
 <!--
 
     Copyright (C) 2025 The Gravitee team (http://gravitee.io)
-    
+
     Licensed under the Apache License, Version 2.0 (the "License");
     you may not use this file except in compliance with the License.
     You may obtain a copy of the License at
-    
+
             http://www.apache.org/licenses/LICENSE-2.0
-    
+
     Unless required by applicable law or agreed to in writing, software
     distributed under the License is distributed on an "AS IS" BASIS,
     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
@@ -16,17 +16,19 @@
 
 -->
 <div class="menu-items">
-  <app-nav-bar-button i18n="@@catalog" [path]="['catalog']">Catalog</app-nav-bar-button>
-  <app-nav-bar-button i18n="@@guides" [path]="['guides']">Guides</app-nav-bar-button>
-  @for (link of customLinks(); track link.id) {
-    <a
-      [href]="link.target"
-      mat-stroked-button
-      color="primary"
-      class="menu-items__custom_link"
-      [target]="link.type === 'external' ? '_blank' : ''">
-      {{ link.name }}
-    </a>
+  @if (!forceLogin() || isLoggedIn()) {
+    <app-nav-bar-button i18n="@@catalog" [path]="['catalog']">Catalog</app-nav-bar-button>
+    <app-nav-bar-button i18n="@@guides" [path]="['guides']">Guides</app-nav-bar-button>
+    @for (link of customLinks(); track link.id) {
+      <a
+        [href]="link.target"
+        mat-stroked-button
+        color="primary"
+        class="menu-items__custom_link"
+        [target]="link.type === 'external' ? '_blank' : ''">
+        {{ link.name }}
+      </a>
+    }
   }
 </div>
 
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.ts b/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.ts
index 96876341de2..a5c26c47c3e 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.ts
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.ts
@@ -31,6 +31,7 @@ import { NavBarButtonComponent } from '../nav-bar-button/nav-bar-button.componen
 })
 export class DesktopNavBarComponent {
   currentUser: InputSignal<User> = input({});
+  forceLogin: InputSignal<boolean> = input(false);
   customLinks: InputSignal<PortalMenuLink[]> = input<PortalMenuLink[]>([]);
   protected isLoggedIn = computed(() => {
     return !isEmpty(this.currentUser());
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.html b/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.html
index f49f2eb89ba..f5b72667f16 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.html
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.html
@@ -16,11 +16,13 @@
 
 -->
 <div class="actions">
-  <button class="mobile-menu__button" mat-stroked-button i18n="@@navigationButton" (click)="isMobileMenuOpened = !isMobileMenuOpened">
-    <span class="mobile-menu__icon"
-      ><mat-icon>{{ isMobileMenuOpened ? 'close' : 'menu' }}</mat-icon></span
-    >
-  </button>
+  @if (!forceLogin() || isLoggedIn()) {
+    <button class="mobile-menu__button" mat-stroked-button i18n="@@navigationButton" (click)="isMobileMenuOpened = !isMobileMenuOpened">
+      <span class="mobile-menu__icon"
+        ><mat-icon>{{ isMobileMenuOpened ? 'close' : 'menu' }}</mat-icon></span
+      >
+    </button>
+  }
 </div>
 @if (isMobileMenuOpened) {
   <div class="mobile-menu__panel">
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.ts b/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.ts
index 18858d5fe5e..8fb6962dc97 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.ts
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.ts
@@ -34,6 +34,7 @@ import { PortalService } from '../../../services/portal.service';
 })
 export class MobileNavBarComponent {
   currentUser: InputSignal<User> = input({});
+  forceLogin: InputSignal<boolean> = input(false);
   customLinks: InputSignal<PortalMenuLink[]> = input<PortalMenuLink[]>([]);
   hasHomepage = toSignal(
     inject(PortalService)
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.html b/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.html
index b5afb8fa1c5..6ec1080ff9b 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.html
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.html
@@ -18,8 +18,8 @@
 <div class="nav-bar__container">
   <app-company-title [title]="siteTitle" [logo]="logo()" />
   @if (isMobile()) {
-    <app-mobile-nav-bar [currentUser]="currentUser()" [customLinks]="customLinks()" />
+    <app-mobile-nav-bar [currentUser]="currentUser()" [customLinks]="customLinks()" [forceLogin]="forceLogin()" />
   } @else {
-    <app-desktop-nav-bar [currentUser]="currentUser()" [customLinks]="customLinks()" />
+    <app-desktop-nav-bar [currentUser]="currentUser()" [customLinks]="customLinks()" [forceLogin]="forceLogin()" />
   }
 </div>
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.ts b/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.ts
index 4436902ada6..7529f067119 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.ts
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.ts
@@ -35,6 +35,7 @@ export class NavBarComponent {
 
   customLinks: InputSignal<PortalMenuLink[]> = input<PortalMenuLink[]>([]);
   currentUser: InputSignal<User> = input({});
+  forceLogin: InputSignal<boolean> = input(false);
   logo: InputSignal<string> = input('');
   protected readonly isMobile = inject(ObservabilityBreakpointService).isMobile;
 }
diff --git a/gravitee-apim-portal-webui-next/src/entities/common/data-response.ts b/gravitee-apim-portal-webui-next/src/entities/common/data-response.ts
new file mode 100644
index 00000000000..ef519687fbe
--- /dev/null
+++ b/gravitee-apim-portal-webui-next/src/entities/common/data-response.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Links } from './links';
+
+export interface DataResponse<T> {
+  data?: Array<T>;
+  metadata?: { [key: string]: { [key: string]: object } };
+  links?: Links;
+}
diff --git a/gravitee-apim-portal-webui-next/src/entities/common/links.ts b/gravitee-apim-portal-webui-next/src/entities/common/links.ts
new file mode 100644
index 00000000000..8740810651b
--- /dev/null
+++ b/gravitee-apim-portal-webui-next/src/entities/common/links.ts
@@ -0,0 +1,22 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface Links {
+  self?: string;
+  first?: string;
+  last?: string;
+  prev?: string;
+  next?: string;
+}
diff --git a/gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider-type.ts b/gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider-type.ts
new file mode 100644
index 00000000000..b29d012acab
--- /dev/null
+++ b/gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider-type.ts
@@ -0,0 +1,23 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export type IdentityProviderType = 'GOOGLE' | 'GITHUB' | 'GRAVITEEIO_AM' | 'OIDC';
+
+export const IdentityProviderType = {
+  GOOGLE: 'GOOGLE' as IdentityProviderType,
+  GITHUB: 'GITHUB' as IdentityProviderType,
+  GRAVITEEIOAM: 'GRAVITEEIO_AM' as IdentityProviderType,
+  OIDC: 'OIDC' as IdentityProviderType,
+};
diff --git a/gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider.ts b/gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider.ts
new file mode 100644
index 00000000000..349a6a04e45
--- /dev/null
+++ b/gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider.ts
@@ -0,0 +1,41 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { IdentityProviderType } from './identity-provider-type';
+
+export interface IdentityProvider {
+  // Common props of all identity providers
+  id?: string;
+  name?: string;
+  description?: string;
+  client_id?: string;
+  email_required?: boolean;
+  type?: IdentityProviderType;
+  authorizationEndpoint?: string;
+  scopes?: Array<string>;
+
+  // Gravitee.io AM and OpenId Connect only
+  tokenIntrospectionEndpoint?: string;
+  userLogoutEndpoint?: string;
+  color?: string;
+
+  // Google only
+  display?: string;
+  requiredUrlParams?: Array<string>;
+
+  // GitHub and Google only
+  optionalUrlParams?: Array<string>;
+}
diff --git a/gravitee-apim-portal-webui-next/src/services/auth.service.ts b/gravitee-apim-portal-webui-next/src/services/auth.service.ts
index b400dfc49a4..08340c69936 100644
--- a/gravitee-apim-portal-webui-next/src/services/auth.service.ts
+++ b/gravitee-apim-portal-webui-next/src/services/auth.service.ts
@@ -15,9 +15,14 @@
  */
 import { HttpClient } from '@angular/common/http';
 import { Injectable } from '@angular/core';
-import { Observable } from 'rxjs';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { catchError, map, Observable, switchMap } from 'rxjs';
+import { fromPromise } from 'rxjs/internal/observable/innerFrom';
+import { of } from 'rxjs/internal/observable/of';
 
 import { ConfigService } from './config.service';
+import { IdentityProviderService } from './identity-provider.service';
+import { IdentityProvider } from '../entities/configuration/identity-provider';
 
 interface Token {
   token_type: string;
@@ -29,13 +34,15 @@ interface Token {
 })
 export class AuthService {
   constructor(
-    private http: HttpClient,
-    private configuration: ConfigService,
+    private readonly http: HttpClient,
+    private readonly configService: ConfigService,
+    private readonly oauthService: OAuthService,
+    private readonly identityProviderService: IdentityProviderService,
   ) {}
 
   login(username: string, password: string) {
     return this.http.post<Token>(
-      `${this.configuration.baseURL}/auth/login`,
+      `${this.configService.baseURL}/auth/login`,
       {},
       {
         headers: {
@@ -46,6 +53,79 @@ export class AuthService {
   }
 
   logout(): Observable<unknown> {
-    return this.http.post<Token>(`${this.configuration.baseURL}/auth/logout`, {});
+    return this.http.post<Token>(`${this.configService.baseURL}/auth/logout`, {});
+  }
+
+  authenticateSSO(provider: IdentityProvider, redirectUrl: string) {
+    if (provider) {
+      this.storeProviderId(provider.id!);
+      this._configure(provider);
+      this.oauthService.initCodeFlow(redirectUrl);
+    }
+  }
+
+  storeProviderId(providerId: string) {
+    localStorage.setItem('user-provider-id', providerId);
+  }
+
+  getProviderId(): string {
+    return localStorage.getItem('user-provider-id')!;
+  }
+
+  load() {
+    if (this.getProviderId()) {
+      return this._fetchProviderAndConfigure().pipe(
+        switchMap(() => {
+          return fromPromise(
+            this.oauthService.tryLoginCodeFlow({
+              // 📝 The clear of the hash doesn't work correctly and keeps a piece of string which distorts angular routing and
+              // displays a 404. Disabling it solves the problem and the clear will be done with an angular internal redirection.
+              preventClearHashAfterLogin: true,
+            }),
+          );
+        }),
+      );
+    } else {
+      return of(undefined);
+    }
+  }
+
+  private _fetchProviderAndConfigure() {
+    return this.identityProviderService.getPortalIdentityProvider(this.getProviderId()).pipe(
+      map(identityProvider => {
+        if (identityProvider) {
+          this._configure(identityProvider);
+        }
+      }),
+      catchError(() => of(undefined)),
+    );
+  }
+
+  private _configure(provider: IdentityProvider) {
+    const redirectUri =
+      window.location.origin + (window.location.pathname === '/' ? '' : window.location.pathname.replace('/user/logout', '/'));
+    this.oauthService.configure({
+      clientId: provider.client_id,
+      loginUrl: provider.authorizationEndpoint,
+      tokenEndpoint: this.configService.baseURL + '/auth/oauth2/' + provider.id,
+      requireHttps: false,
+      issuer: provider.tokenIntrospectionEndpoint,
+      logoutUrl: provider.userLogoutEndpoint,
+      postLogoutRedirectUri: redirectUri,
+      scope: provider.scopes?.join(' '),
+      responseType: 'code',
+      redirectUri,
+      /*
+       added because with our current OIDC configuration, we don't know the real issuer.
+       For example, with keycloak, the issuer is "https://[host]:[port]/auth/realms/[realm_id].
+       But in our configuration, we only have these endpoints:
+        - https://[host]:[port]/auth/realms/[realm_id]/protocol/openid-connect/token
+        - https://[host]:[port]/auth/realms/[realm_id]/protocol/openid-connect/token/introspect
+        - https://[host]:[port]/auth/realms/[realm_id]/protocol/openid-connect/auth
+        - https://[host]:[port]/auth/realms/[realm_id]/protocol/openid-connect/userinfo
+        - https://[host]:[port]/auth/realms/[realm_id]/protocol/openid-connect/logout
+       */
+      skipIssuerCheck: true,
+    });
   }
 }
diff --git a/gravitee-apim-portal-webui-next/src/services/identity-provider.service.ts b/gravitee-apim-portal-webui-next/src/services/identity-provider.service.ts
new file mode 100644
index 00000000000..03f9f279824
--- /dev/null
+++ b/gravitee-apim-portal-webui-next/src/services/identity-provider.service.ts
@@ -0,0 +1,42 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+import { ConfigService } from './config.service';
+import { DataResponse } from '../entities/common/data-response';
+import { IdentityProvider } from '../entities/configuration/identity-provider';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class IdentityProviderService {
+  constructor(
+    private readonly http: HttpClient,
+    private readonly configService: ConfigService,
+  ) {}
+
+  public getPortalIdentityProviders(): Observable<DataResponse<IdentityProvider>> {
+    return this.http.get<DataResponse<IdentityProvider>>(`${this.configService.baseURL}/configuration/identities`);
+  }
+
+  public getPortalIdentityProvider(identityProviderId: string): Observable<IdentityProvider> {
+    return this.http.get<IdentityProvider>(
+      `${this.configService.baseURL}/configuration/identities/${encodeURIComponent(String(identityProviderId))}`,
+    );
+  }
+}
diff --git a/gravitee-apim-portal-webui-next/yarn.lock b/gravitee-apim-portal-webui-next/yarn.lock
index 60a0bc05c3c..d87f019d1fd 100644
--- a/gravitee-apim-portal-webui-next/yarn.lock
+++ b/gravitee-apim-portal-webui-next/yarn.lock
@@ -7477,6 +7477,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"angular-oauth2-oidc@npm:^20.0.2":
+  version: 20.0.2
+  resolution: "angular-oauth2-oidc@npm:20.0.2"
+  dependencies:
+    tslib: "npm:^2.5.2"
+  peerDependencies:
+    "@angular/common": ">=20.0.0"
+    "@angular/core": ">=20.0.0"
+  checksum: 10c0/db22f23d4906dd6b413b2a01d832a35aa8f7e8db236eafc7d0c63fdf7e29e08ca3aea13241b16e7ca63d27f586d365dc6b1cce690a6fb6d6aaf3f88aeb89a21b
+  languageName: node
+  linkType: hard
+
 "ansi-colors@npm:4.1.3, ansi-colors@npm:^4.1.3":
   version: 4.1.3
   resolution: "ansi-colors@npm:4.1.3"
@@ -11472,6 +11484,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:7.18.0"
     "@typescript-eslint/parser": "npm:7.18.0"
     angular-gridster2: "npm:20.2.3"
+    angular-oauth2-oidc: "npm:^20.0.2"
     asciidoctor: "npm:3.0.4"
     chart.js: "npm:4.3.0"
     dompurify: "npm:3.2.7"
@@ -19019,7 +19032,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:2.8.1, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.6.0, tslib@npm:^2.6.2, tslib@npm:^2.8.1":
+"tslib@npm:2.8.1, tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.2.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0, tslib@npm:^2.5.2, tslib@npm:^2.6.0, tslib@npm:^2.6.2, tslib@npm:^2.8.1":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"
   checksum: 10c0/9c4759110a19c53f992d9aae23aac5ced636e99887b51b9e61def52611732872ff7668757d4e4c61f19691e36f4da981cd9485e869b4a7408d689f6bf1f14e62

From 2275c0df7954d0a1175234087f46e3663c0dcbd4 Mon Sep 17 00:00:00 2001
From: Ivan Kovarin <ivan.kovarin@graviteesource.com>
Date: Wed, 29 Oct 2025 16:59:57 +0100
Subject: [PATCH 2/4] [APIM-11537] New design for login form.

---
 .../src/app/log-in/log-in.component.html      | 14 ++---
 .../src/app/log-in/log-in.component.scss      | 53 ++++++++++++++++---
 ...reset-password-confirmation.component.html | 10 ++--
 ...reset-password-confirmation.component.scss | 44 +++++++++++++--
 .../reset-password.component.html             | 12 ++---
 .../reset-password.component.scss             | 20 ++++++-
 6 files changed, 121 insertions(+), 32 deletions(-)

diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
index 41ab59fce69..f5112c354e8 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
@@ -17,16 +17,16 @@
 -->
 <form [formGroup]="logInForm" (ngSubmit)="logIn()" class="log-in__form__container">
   <mat-card appearance="outlined" class="log-in">
-    <mat-card-header>
-      <mat-card-title i18n="@@logInTitle">Log in</mat-card-title>
+    <mat-card-header class="log-in__form__header">
+      <mat-card-title class="log-in__form__title" i18n="@@logInTitle">Login</mat-card-title>
     </mat-card-header>
-    <mat-card-content>
+    <mat-card-content class="log-in__form__content">
       @if (isLocalLoginEnabled()) {
         <div class="log-in__form">
           <div class="log-in__form__fields">
             <mat-form-field appearance="outline" class="log-in__form__input">
               <mat-label i18n="@@logInUsername">Username</mat-label>
-              <input matInput formControlName="username" appearance="outlined" />
+              <input matInput formControlName="username" />
               @if (logInForm.controls.username.hasError('required')) {
                 <mat-error i18n="@@logInUsernameErrorRequired">Username is required</mat-error>
               }
@@ -39,7 +39,7 @@
               }
             </mat-form-field>
             @if (error() === 401) {
-              <mat-error i18n="@@logInError401">The username or password you entered is incorrect, please try again.</mat-error>
+              <mat-error class="log-in__form__error" i18n="@@logInError401">The username or password you entered is incorrect, please try again.</mat-error>
             }
           </div>
           <div class="log-in__form__buttons">
@@ -48,7 +48,7 @@
               type="submit"
               mat-flat-button
               i18n="@@logInAction"
-              class="log-in__form__submit secondary-button">
+              class="log-in__form__submit primary-button">
               Log in
             </button>
             <a class="log-in__form__forgot-password" i18n="@@resetPasswordAction" routerLink="reset-password"> Forgot password? </a>
@@ -71,7 +71,7 @@
             (click)="authenticateSSO(provider)">
             <div class="log-in__sso__idp__container">
               <img class="log-in__sso__idp__logo" [src]="'assets/images/idp/' + getProviderLogo(provider)" alt="Provider Logo" />
-              {{ provider.name }}
+              <span class="log-in__sso__idp__label" i18n="@@logInSsoLabelPrefix">Continue with {{ provider.name }}</span>
             </div>
           </button>
         }
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
index ee44b61d117..82726873582 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@use '../../scss/theme';
+
 :host {
   display: flex;
   justify-content: center;
@@ -21,21 +23,37 @@
 .log-in {
   display: flex;
   flex-flow: column;
-  gap: 32px;
+  gap: 20px;
+  background: #{theme.$background-color};
 
   &__form {
     display: flex;
     flex-flow: column;
-    gap: 12px;
+    gap: 16px;
+
+    &__header {
+      padding: 20px 20px 0;
+    }
+
+    &__title {
+      font-size: 18px;
+      font-weight: 700;
+    }
 
     &__container {
-      width: 100%;
+      width: 400px;
       max-width: 500px;
+      border-radius: 8px;
+    }
+
+    &__content:last-child {
+        padding: 0 20px 20px;
     }
 
     &__fields {
       display: flex;
       flex-flow: column;
+      gap: 8px;
     }
 
     &__buttons {
@@ -50,7 +68,7 @@
 
     &__forgot-password {
       margin-top: 5px;
-      color: var(--mdc-outlined-button-label-text-color);
+      color: #{theme.$primary-main-color};
       font-size: 14px;
       text-align: center;
       text-decoration: none;
@@ -59,6 +77,11 @@
         text-decoration: underline;
       }
     }
+
+    &__error {
+      text-align: center;
+      font-size: 14px;
+    }
   }
 
   &__sso {
@@ -71,11 +94,12 @@
       display: flex;
       height: 30px;
       align-items: center;
-      margin: 16px 0 0;
+      margin: 20px 0 4px;
+      font-size: 14px;
 
       &__line {
         width: 100%;
-        border-top: 1px solid var(--mdc-outlined-card-outline-color);
+        border-top: 1px solid #{theme.$card-border-color};
       }
 
       &__label {
@@ -86,13 +110,18 @@
         align-items: center;
         justify-content: center;
         margin: auto;
-        background: var(--gio-app-card-background-color);
+        background: #{theme.$background-color};
         inset: 0;
       }
     }
 
     &__idp {
       width: 100%;
+      font-weight: bold;
+      color: #{theme.$button-text-text-color};
+      white-space: nowrap;
+      overflow: hidden;
+      padding: 0 18px;
 
       &__container {
         display: flex;
@@ -104,6 +133,16 @@
         width: 23px;
         height: 23px;
       }
+
+      ::ng-deep .mdc-button__label {
+        white-space: nowrap;
+        overflow: hidden;
+      }
+
+      &__label {
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
     }
   }
 }
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html
index 2987c453d52..ede46bc2e65 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html
@@ -17,11 +17,11 @@
 -->
 <mat-card appearance="outlined" class="reset-password-confirmation">
   @if (!isSubmitted) {
-    <mat-card-header>
-      <mat-card-title i18n="@@resetPasswordConfirmationTitle">Reset password confirmation</mat-card-title>
+    <mat-card-header class="reset-password-confirmation__header">
+      <mat-card-title class="reset-password-confirmation__title" i18n="@@resetPasswordConfirmationTitle">Reset password confirmation</mat-card-title>
     </mat-card-header>
     @if (!isTokenExpired && !!resetPasswordConfirmationForm) {
-      <mat-card-content>
+      <mat-card-content class="reset-password-confirmation__content">
         <form class="reset-password-confirmation__form" [formGroup]="resetPasswordConfirmationForm" (ngSubmit)="confirmResetPassword()">
           <div class="reset-password-confirmation__form__fields">
             <mat-form-field appearance="outline" class="reset-password-confirmation__form__input">
@@ -74,8 +74,8 @@
     }
   }
   @if (isSubmitted) {
-    <mat-card-header>
-      <mat-card-title i18n="@@resetPasswordConfirmationDoneTitle">Password reset</mat-card-title>
+    <mat-card-header class="reset-password-confirmation__header">
+      <mat-card-title class="reset-password-confirmation__title" i18n="@@resetPasswordConfirmationDoneTitle">Password reset</mat-card-title>
     </mat-card-header>
 
     <mat-card-content>
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss
index 294c8498135..1027a404969 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@use '../../../../scss/theme';
+
 :host {
   display: flex;
   justify-content: center;
@@ -20,20 +22,34 @@
 
 .reset-password-confirmation {
   display: flex;
-  width: 500px;
+  width: 400px;
   flex-flow: column;
-  gap: 32px;
+  gap: 20px;
+  background: #{theme.$background-color};
+
+  &__header {
+    padding: 20px 20px 0;
+  }
 
-  &__form,
+  &__title {
+    font-size: 18px;
+    font-weight: 700;
+  }
+
+  &__content,
   &__expired {
     display: flex;
     flex-flow: column;
-    gap: 12px;
+    gap: 24px;
+
+    &:last-child {
+      padding: 0 20px 20px;
+    }
 
-    &__fields,
     &__text {
       display: flex;
       flex-flow: column;
+      gap: 8px;
     }
 
     &__buttons {
@@ -46,4 +62,22 @@
       width: 100%;
     }
   }
+
+  &__form {
+    display: flex;
+    flex-flow: column;
+    gap: 16px;
+
+    &__fields {
+      display: flex;
+      flex-flow: column;
+      gap: 8px;
+    }
+
+    &__buttons {
+      display: flex;
+      flex-flow: column;
+      gap: 16px;
+    }
+  }
 }
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.html b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.html
index 6c053709745..11e3da05648 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.html
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.html
@@ -18,8 +18,8 @@
 <form [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword()">
   <mat-card appearance="outlined" class="reset-password">
     @if (!isSubmitted) {
-      <mat-card-header>
-        <mat-card-title i18n="@@resetPasswordTitle">Reset password</mat-card-title>
+      <mat-card-header class="reset-password__form__header">
+        <mat-card-title class="reset-password__form__title" i18n="@@resetPasswordTitle">Reset password</mat-card-title>
       </mat-card-header>
       <mat-card-content class="reset-password__form">
         <mat-form-field appearance="outline" class="reset-password__form__fields">
@@ -42,15 +42,15 @@
             type="submit"
             mat-flat-button
             i18n="@@resetPasswordAction"
-            class="reset-password__form__submit secondary-button">
+            class="reset-password__form__submit primary-button">
             Reset password
           </button>
-          <a mat-stroked-button i18n="@@resetPasswordLoginLink" routerLink="/log-in">Log in</a>
+          <a mat-stroked-button i18n="@@resetPasswordLoginLink" routerLink="/log-in">Back</a>
         </div>
       </mat-card-content>
     } @else {
-      <mat-card-header>
-        <mat-card-title i18n="@@resetPasswordResultTitle">Password reset confirmed</mat-card-title>
+      <mat-card-header class="reset-password__form__header">
+        <mat-card-title class="reset-password__form__title" i18n="@@resetPasswordResultTitle">Password reset confirmed</mat-card-title>
       </mat-card-header>
       <mat-card-content class="reset-password__form">
         <p i18n="@@resetPasswordResultContent">If the account exists, an email will be sent.</p>
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss
index f5d8abc47ed..b30eb8fccd5 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss
@@ -13,6 +13,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+@use '../../../scss/theme';
+
 :host {
   display: flex;
   justify-content: center;
@@ -20,15 +22,29 @@
 
 .reset-password {
   display: flex;
-  width: 500px;
+  width: 400px;
   flex-flow: column;
-  gap: 32px;
+  gap: 20px;
+  background: #{theme.$background-color};
 
   &__form {
     display: flex;
     flex-flow: column;
     gap: 12px;
 
+    &:last-child {
+      padding: 0 20px 20px;
+    }
+
+    &__header {
+      padding: 20px 20px 0;
+    }
+
+    &__title {
+      font-size: 18px;
+      font-weight: 700;
+    }
+
     &__fields {
       display: flex;
       flex-flow: column;

From 283af7d20871bef7b8a2e854e9e4ef3a3589841f Mon Sep 17 00:00:00 2001
From: Ivan Kovarin <ivan.kovarin@graviteesource.com>
Date: Wed, 29 Oct 2025 16:48:18 +0100
Subject: [PATCH 3/4] [APIM-11537] Add tests. Fix lint.

---
 gravitee-apim-portal-webui-next/package.json  |   2 +-
 .../src/app/log-in/log-in.component.html      |   5 +-
 .../src/app/log-in/log-in.component.scss      |  14 +--
 .../src/app/log-in/log-in.component.spec.ts   | 107 ++++++++++++++++-
 .../src/app/log-in/log-in.component.ts        |   7 --
 ...reset-password-confirmation.component.html |   4 +-
 ...reset-password-confirmation.component.scss |   2 +-
 .../reset-password.component.scss             |   2 +-
 .../nav-bar/nav-bar.component.spec.ts         | 109 ++++++++++++------
 .../src/services/auth.service.spec.ts         |  38 +++++-
 .../identity-provider.service.spec.ts         |  52 +++++++++
 .../src/testing/app-testing.module.ts         |  70 +++++++++--
 gravitee-apim-portal-webui-next/yarn.lock     |   4 +-
 13 files changed, 343 insertions(+), 73 deletions(-)
 create mode 100644 gravitee-apim-portal-webui-next/src/services/identity-provider.service.spec.ts

diff --git a/gravitee-apim-portal-webui-next/package.json b/gravitee-apim-portal-webui-next/package.json
index b36ca9b61b9..c0bceaba749 100644
--- a/gravitee-apim-portal-webui-next/package.json
+++ b/gravitee-apim-portal-webui-next/package.json
@@ -61,7 +61,7 @@
     "@fontsource/roboto": "5.2.5",
     "@types/swagger-ui": "3.52.4",
     "angular-gridster2": "20.2.3",
-    "angular-oauth2-oidc": "^20.0.2",
+    "angular-oauth2-oidc": "20.0.2",
     "asciidoctor": "3.0.4",
     "chart.js": "4.3.0",
     "dompurify": "3.2.7",
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
index f5112c354e8..fe958f6de5a 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
@@ -39,7 +39,9 @@
               }
             </mat-form-field>
             @if (error() === 401) {
-              <mat-error class="log-in__form__error" i18n="@@logInError401">The username or password you entered is incorrect, please try again.</mat-error>
+              <mat-error class="log-in__form__error" i18n="@@logInError401"
+                >The username or password you entered is incorrect, please try again.</mat-error
+              >
             }
           </div>
           <div class="log-in__form__buttons">
@@ -67,7 +69,6 @@
             type="button"
             mat-stroked-button
             class="log-in__sso__idp secondary-button"
-            [style.background-color]="getProviderColor(provider)"
             (click)="authenticateSSO(provider)">
             <div class="log-in__sso__idp__container">
               <img class="log-in__sso__idp__logo" [src]="'assets/images/idp/' + getProviderLogo(provider)" alt="Provider Logo" />
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
index 82726873582..cdc2a28a697 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
@@ -23,8 +23,8 @@
 .log-in {
   display: flex;
   flex-flow: column;
-  gap: 20px;
   background: #{theme.$background-color};
+  gap: 20px;
 
   &__form {
     display: flex;
@@ -47,7 +47,7 @@
     }
 
     &__content:last-child {
-        padding: 0 20px 20px;
+      padding: 0 20px 20px;
     }
 
     &__fields {
@@ -79,8 +79,8 @@
     }
 
     &__error {
-      text-align: center;
       font-size: 14px;
+      text-align: center;
     }
   }
 
@@ -116,12 +116,12 @@
     }
 
     &__idp {
+      overflow: hidden;
       width: 100%;
-      font-weight: bold;
+      padding: 0 18px;
       color: #{theme.$button-text-text-color};
+      font-weight: bold;
       white-space: nowrap;
-      overflow: hidden;
-      padding: 0 18px;
 
       &__container {
         display: flex;
@@ -135,8 +135,8 @@
       }
 
       ::ng-deep .mdc-button__label {
-        white-space: nowrap;
         overflow: hidden;
+        white-space: nowrap;
       }
 
       &__label {
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.spec.ts b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.spec.ts
index a00955d20c6..1ef2e2a4103 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.spec.ts
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.spec.ts
@@ -22,22 +22,41 @@ import { MatButtonHarness } from '@angular/material/button/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
 
 import { LogInComponent } from './log-in.component';
-import { AppTestingModule, TESTING_BASE_URL } from '../../testing/app-testing.module';
+import { IdentityProvider } from '../../entities/configuration/identity-provider';
+import { AuthService } from '../../services/auth.service';
+import { ConfigService } from '../../services/config.service';
+import { IdentityProviderService } from '../../services/identity-provider.service';
+import { AppTestingModule, ConfigServiceStub, IdentityProviderServiceStub, TESTING_BASE_URL } from '../../testing/app-testing.module';
+import { DivHarness } from '../../testing/div.harness';
 
 describe('LogInComponent', () => {
   let fixture: ComponentFixture<LogInComponent>;
   let harnessLoader: HarnessLoader;
   let httpTestingController: HttpTestingController;
 
+  async function initComponent() {
+    fixture = TestBed.createComponent(LogInComponent);
+    harnessLoader = TestbedHarnessEnvironment.loader(fixture);
+    httpTestingController = TestBed.inject(HttpTestingController);
+    fixture.detectChanges();
+  }
+
+  function enableLocalLogin(enable: boolean) {
+    const configService = TestBed.inject(ConfigService) as unknown as ConfigServiceStub;
+    configService.configuration.authentication!.localLogin!.enabled = enable;
+  }
+
+  function initSsoProviders(providers: IdentityProvider[]) {
+    const identityProviderService = TestBed.inject(IdentityProviderService) as unknown as IdentityProviderServiceStub;
+    identityProviderService.providers = providers;
+  }
+
   beforeEach(async () => {
     await TestBed.configureTestingModule({
       imports: [LogInComponent, AppTestingModule],
     }).compileComponents();
 
-    fixture = TestBed.createComponent(LogInComponent);
-    harnessLoader = TestbedHarnessEnvironment.loader(fixture);
-    httpTestingController = TestBed.inject(HttpTestingController);
-    fixture.detectChanges();
+    await initComponent();
   });
 
   afterEach(() => {
@@ -66,6 +85,7 @@ describe('LogInComponent', () => {
 
     expect(await submitButton.isDisabled()).toEqual(true);
   });
+
   it('should not validate form with missing password', async () => {
     const submitButton = await harnessLoader.getHarness(MatButtonHarness.with({ text: 'Log in' }));
 
@@ -88,4 +108,81 @@ describe('LogInComponent', () => {
     httpTestingController.expectOne(`${TESTING_BASE_URL}/user`).flush({});
     httpTestingController.expectOne(`${TESTING_BASE_URL}/portal-menu-links`).flush({});
   });
+
+  it('should not display log-in form', async () => {
+    enableLocalLogin(false);
+    initSsoProviders([
+      {
+        id: 'github',
+        name: 'GitHub',
+      },
+    ]);
+
+    await initComponent();
+
+    const login = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__form' }));
+    expect(login).toBeNull();
+
+    const orSeparator = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__sso__separator' }));
+    expect(orSeparator).toBeNull();
+
+    const ssoProvider = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ selector: '.log-in__sso__idp' }));
+    expect(ssoProvider).not.toBeNull();
+
+    const providerText = await ssoProvider!.getText();
+    expect(providerText).toEqual('Continue with GitHub');
+  });
+
+  it('should not display SSO providers', async () => {
+    enableLocalLogin(true);
+    initSsoProviders([]);
+
+    await initComponent();
+
+    const login = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__form' }));
+    expect(login).not.toBeNull();
+
+    const orSeparator = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__sso__separator' }));
+    expect(orSeparator).toBeNull();
+
+    const ssoProvider = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ selector: '.log-in__sso__idp' }));
+    expect(ssoProvider).toBeNull();
+  });
+
+  it('should display "or" separator and identity providers', async () => {
+    const identityProviders = [
+      { id: 'github', name: 'GitHub' },
+      { id: 'google', name: 'Google' },
+      { id: 'graviteeio_am', name: 'Gravitee AM' },
+    ];
+    enableLocalLogin(true);
+    initSsoProviders(identityProviders);
+
+    await initComponent();
+
+    const orSeparator = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__sso__separator' }));
+    expect(orSeparator).not.toBeNull();
+
+    const ssoProviders = await harnessLoader.getAllHarnesses(MatButtonHarness.with({ selector: '.log-in__sso__idp' }));
+    const providerTexts = await Promise.all(ssoProviders.map(harness => harness.getText()));
+    console.log('providerTexts', providerTexts);
+
+    for (const provider of identityProviders) {
+      const found = providerTexts.find(text => text === `Continue with ${provider.name}`);
+      expect(found).toBeDefined();
+    }
+  });
+
+  it('should redirect when clicked on SSO provider', async () => {
+    enableLocalLogin(true);
+    initSsoProviders([{ id: 'google', name: 'Google' }]);
+
+    const authenticateSSO = jest.spyOn(TestBed.inject(AuthService), 'authenticateSSO').mockReturnValue();
+
+    await initComponent();
+
+    const ssoProvider = await harnessLoader.getHarness(MatButtonHarness.with({ selector: '.log-in__sso__idp' }));
+    await ssoProvider.click();
+    expect(authenticateSSO).toHaveBeenCalledWith({ id: 'google', name: 'Google' }, '');
+  });
 });
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts
index 5060944f579..81fa218c04b 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts
@@ -91,13 +91,6 @@ export class LogInComponent implements OnInit {
     this.authService.authenticateSSO(provider, this.redirectUrl);
   }
 
-  getProviderColor(provider: IdentityProvider) {
-    if (provider.type && provider.color) {
-      return provider.color;
-    }
-    return '';
-  }
-
   getProviderLogo(provider: IdentityProvider) {
     const type = provider.type ?? IdentityProviderType.OIDC;
     return `${type?.toLowerCase()}.svg`;
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html
index ede46bc2e65..938cf7f19be 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html
@@ -18,7 +18,9 @@
 <mat-card appearance="outlined" class="reset-password-confirmation">
   @if (!isSubmitted) {
     <mat-card-header class="reset-password-confirmation__header">
-      <mat-card-title class="reset-password-confirmation__title" i18n="@@resetPasswordConfirmationTitle">Reset password confirmation</mat-card-title>
+      <mat-card-title class="reset-password-confirmation__title" i18n="@@resetPasswordConfirmationTitle"
+        >Reset password confirmation</mat-card-title
+      >
     </mat-card-header>
     @if (!isTokenExpired && !!resetPasswordConfirmationForm) {
       <mat-card-content class="reset-password-confirmation__content">
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss
index 1027a404969..6832628c720 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss
@@ -24,8 +24,8 @@
   display: flex;
   width: 400px;
   flex-flow: column;
-  gap: 20px;
   background: #{theme.$background-color};
+  gap: 20px;
 
   &__header {
     padding: 20px 20px 0;
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss
index b30eb8fccd5..00e87139ba2 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss
@@ -24,8 +24,8 @@
   display: flex;
   width: 400px;
   flex-flow: column;
-  gap: 20px;
   background: #{theme.$background-color};
+  gap: 20px;
 
   &__form {
     display: flex;
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.spec.ts b/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.spec.ts
index 690fc677eef..027dd638336 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.spec.ts
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.spec.ts
@@ -34,6 +34,22 @@ describe('NavBarComponent', () => {
   let harnessLoader: HarnessLoader;
   let componentRef: ComponentRef<NavBarComponent>;
   let httpTestingController: HttpTestingController;
+  const customLinks = [
+    {
+      id: 'link-id-1',
+      type: 'external',
+      name: 'link-name-1',
+      target: 'link-target-1',
+      order: 1,
+    },
+    {
+      id: 'link-id-2',
+      type: 'external',
+      name: 'link-name-2',
+      target: 'link-target-2',
+      order: 2,
+    },
+  ];
 
   const init = async (isMobile: boolean = false) => {
     const mockBreakpointObserver = {
@@ -69,24 +85,26 @@ describe('NavBarComponent', () => {
       expect(logInButton).toBeFalsy();
     });
 
-    it('should show custom links', async () => {
-      const customLinks = [
-        {
-          id: 'link-id-1',
-          type: 'external',
-          name: 'link-name-1',
-          target: 'link-target-1',
-          order: 1,
-        },
-        {
-          id: 'link-id-2',
-          type: 'external',
-          name: 'link-name-2',
-          target: 'link-target-2',
-          order: 2,
-        },
-      ];
+    it('should not show links if user is not connected and login is forced', async () => {
+      componentRef.setInput('customLinks', customLinks);
+      componentRef.setInput('forceLogin', true);
+      const link1Anchor = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ text: 'link-name-1' }));
+      expect(link1Anchor).not.toBeTruthy();
+      const link2Anchor = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ text: 'link-name-2' }));
+      expect(link2Anchor).not.toBeTruthy();
+    });
 
+    it('should show links if user is connected and login is forced', async () => {
+      componentRef.setInput('customLinks', customLinks);
+      componentRef.setInput('forceLogin', true);
+      componentRef.setInput('currentUser', fakeUser());
+      const link1Anchor = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ text: 'link-name-1' }));
+      expect(link1Anchor).toBeTruthy();
+      const link2Anchor = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ text: 'link-name-2' }));
+      expect(link2Anchor).toBeTruthy();
+    });
+
+    it('should show custom links if login is not forced', async () => {
       componentRef.setInput('customLinks', customLinks);
       const link1Anchor = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ text: 'link-name-1' }));
       expect(link1Anchor).toBeTruthy();
@@ -116,27 +134,34 @@ describe('NavBarComponent', () => {
       expect(linkTexts).toEqual(['Homepage', 'Catalog', 'Guides', 'Sign in']);
     });
 
-    it('should show custom links', async () => {
-      expectHomePage([]);
+    it('should show logout button if user connected', async () => {
+      expectHomePage();
       componentRef.setInput('currentUser', fakeUser());
+      fixture.detectChanges();
+
+      const menuButton = await harnessLoader.getHarness(MatButtonHarness.with({ selector: '.mobile-menu__button' }));
+      await menuButton.click();
+
+      const links: NodeList = fixture.debugElement.nativeElement.querySelectorAll('.mobile-menu__link');
+      const linkTexts = Array.from(links).map((el: Node) => el.textContent?.trim());
+      expect(linkTexts).toEqual(['Homepage', 'Catalog', 'Guides', 'Applications', 'Log out']);
+    });
 
-      const customLinks = [
-        {
-          id: 'link-id-1',
-          type: 'external',
-          name: 'link-name-1',
-          target: 'link-target-1',
-          order: 1,
-        },
-        {
-          id: 'link-id-2',
-          type: 'external',
-          name: 'link-name-2',
-          target: 'link-target-2',
-          order: 2,
-        },
-      ];
+    it('should not show menu if user is not connected and login is forced', async () => {
+      expectHomePage([]);
       componentRef.setInput('customLinks', customLinks);
+      componentRef.setInput('forceLogin', true);
+      fixture.detectChanges();
+
+      const menuButton = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ selector: '.mobile-menu__button' }));
+      expect(menuButton).not.toBeTruthy();
+    });
+
+    it('should show links if user is connected and login is forced', async () => {
+      expectHomePage([]);
+      componentRef.setInput('currentUser', fakeUser());
+      componentRef.setInput('customLinks', customLinks);
+      componentRef.setInput('forceLogin', true);
       fixture.detectChanges();
 
       const menuButton = await harnessLoader.getHarness(MatButtonHarness.with({ selector: '.mobile-menu__button' }));
@@ -148,6 +173,20 @@ describe('NavBarComponent', () => {
       expect(linkTexts).toEqual(['Catalog', 'Guides', 'link-name-1', 'link-name-2', 'Applications', 'Log out']);
     });
 
+    it('should show custom links if login is not forced', async () => {
+      expectHomePage([]);
+      componentRef.setInput('customLinks', customLinks);
+      fixture.detectChanges();
+
+      const menuButton = await harnessLoader.getHarness(MatButtonHarness.with({ selector: '.mobile-menu__button' }));
+      await menuButton.click();
+      fixture.detectChanges();
+
+      const links: NodeList = fixture.debugElement.nativeElement.querySelectorAll('.mobile-menu__link');
+      const linkTexts = Array.from(links).map((el: Node) => el.textContent?.trim());
+      expect(linkTexts).toEqual(['Catalog', 'Guides', 'link-name-1', 'link-name-2', 'Sign in']);
+    });
+
     it('should close menu when clicking outside', async () => {
       componentRef.setInput('currentUser', fakeUser());
       expectHomePage();
diff --git a/gravitee-apim-portal-webui-next/src/services/auth.service.spec.ts b/gravitee-apim-portal-webui-next/src/services/auth.service.spec.ts
index ea668afb9a4..7c92eb0577e 100644
--- a/gravitee-apim-portal-webui-next/src/services/auth.service.spec.ts
+++ b/gravitee-apim-portal-webui-next/src/services/auth.service.spec.ts
@@ -15,9 +15,13 @@
  */
 import { HttpTestingController } from '@angular/common/http/testing';
 import { TestBed } from '@angular/core/testing';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { of } from 'rxjs';
 
 import { AuthService } from './auth.service';
-import { AppTestingModule, TESTING_BASE_URL } from '../testing/app-testing.module';
+import { IdentityProviderService } from './identity-provider.service';
+import { IdentityProvider } from '../entities/configuration/identity-provider';
+import { AppTestingModule, IdentityProviderServiceStub, OAuthServiceStub, TESTING_BASE_URL } from '../testing/app-testing.module';
 
 describe('AuthService', () => {
   let service: AuthService;
@@ -43,4 +47,36 @@ describe('AuthService', () => {
     expect(req.request.headers.get('Authorization')).toEqual('Basic dXNlcm5hbWU6cGFzc3dvcmQ=');
     req.flush(token);
   });
+
+  it('should redirect for SSO', () => {
+    const idp = { id: 'google', name: 'Google' };
+    const redirectUrl = 'redirectUrl';
+
+    const storeProviderId = jest.spyOn(service, 'storeProviderId').mockReturnValue();
+    const initCodeFlow = jest.spyOn(TestBed.inject(OAuthService) as unknown as OAuthServiceStub, 'initCodeFlow').mockReturnValue();
+
+    service.authenticateSSO(idp, redirectUrl);
+
+    expect(initCodeFlow).toHaveBeenCalledWith(redirectUrl);
+    expect(storeProviderId).toHaveBeenCalled();
+  });
+
+  it('should retrieve token on load from SSO provider', done => {
+    const idp = { id: 'google', name: 'Google' } as IdentityProvider;
+
+    const getProviderId = jest.spyOn(service, 'getProviderId').mockReturnValue(idp.id!);
+    const getPortalIdentityProvider = jest
+      .spyOn(TestBed.inject(IdentityProviderService) as unknown as IdentityProviderServiceStub, 'getPortalIdentityProvider')
+      .mockReturnValue(of(idp));
+    const tryLoginCodeFlow = jest
+      .spyOn(TestBed.inject(OAuthService) as unknown as OAuthServiceStub, 'tryLoginCodeFlow')
+      .mockResolvedValue();
+
+    service.load().subscribe(() => {
+      expect(getProviderId).toHaveBeenCalled();
+      expect(getPortalIdentityProvider).toHaveBeenCalledWith(idp.id);
+      expect(tryLoginCodeFlow).toHaveBeenCalled();
+      done();
+    });
+  });
 });
diff --git a/gravitee-apim-portal-webui-next/src/services/identity-provider.service.spec.ts b/gravitee-apim-portal-webui-next/src/services/identity-provider.service.spec.ts
new file mode 100644
index 00000000000..b6ba9be94a2
--- /dev/null
+++ b/gravitee-apim-portal-webui-next/src/services/identity-provider.service.spec.ts
@@ -0,0 +1,52 @@
+/*
+ * Copyright (C) 2024 The Gravitee team (http://gravitee.io)
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { HttpTestingController } from '@angular/common/http/testing';
+import { TestBed } from '@angular/core/testing';
+
+import { IdentityProviderService } from './identity-provider.service';
+import { DataResponse } from '../entities/common/data-response';
+import { IdentityProvider } from '../entities/configuration/identity-provider';
+import { AppTestingModule, TESTING_BASE_URL } from '../testing/app-testing.module';
+
+describe('IdentityProviderService', () => {
+  let service: IdentityProviderService;
+  let httpTestingController: HttpTestingController;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [AppTestingModule],
+      providers: [IdentityProviderService],
+    });
+    service = TestBed.inject(IdentityProviderService);
+    httpTestingController = TestBed.inject(HttpTestingController);
+  });
+
+  it('should load identity provider by id', done => {
+    const provider = { id: 'google' };
+    service.getPortalIdentityProvider(provider.id).subscribe(() => done());
+    httpTestingController
+      .expectOne(`${TESTING_BASE_URL}/configuration/identities/${encodeURIComponent(String(provider.id))}`)
+      .flush(provider);
+  });
+
+  it('should load identity provider by id', done => {
+    const response: DataResponse<IdentityProvider> = {
+      data: [{ id: 'google' }],
+    };
+    service.getPortalIdentityProviders().subscribe(() => done());
+    httpTestingController.expectOne(`${TESTING_BASE_URL}/configuration/identities`).flush(response);
+  });
+});
diff --git a/gravitee-apim-portal-webui-next/src/testing/app-testing.module.ts b/gravitee-apim-portal-webui-next/src/testing/app-testing.module.ts
index 1c589f985f6..f29fdfe981d 100644
--- a/gravitee-apim-portal-webui-next/src/testing/app-testing.module.ts
+++ b/gravitee-apim-portal-webui-next/src/testing/app-testing.module.ts
@@ -14,14 +14,19 @@
  * limitations under the License.
  */
 import { CommonModule, DATE_PIPE_DEFAULT_OPTIONS } from '@angular/common';
-import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { Injectable, NgModule } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute, Router } from '@angular/router';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { Observable } from 'rxjs/internal/Observable';
 import { of } from 'rxjs/internal/observable/of';
 
+import { DataResponse } from '../entities/common/data-response';
 import { Configuration } from '../entities/configuration/configuration';
+import { IdentityProvider } from '../entities/configuration/identity-provider';
 import { ConfigService } from '../services/config.service';
+import { IdentityProviderService } from '../services/identity-provider.service';
+import {HttpClientTestingModule} from "@angular/common/http/testing";
 
 export const TESTING_BASE_URL = 'http://localhost:8083/portal/environments/DEFAULT';
 export const TESTING_ACTIVATED_ROUTE = {
@@ -30,22 +35,59 @@ export const TESTING_ACTIVATED_ROUTE = {
   params: of({ apiId: 'apiId' }),
   queryParams: of({}),
 };
+
 @Injectable()
 export class ConfigServiceStub {
+  private _configuration: Configuration = {
+    portalNext: {
+      banner: {
+        enabled: true,
+        title: 'Welcome to Gravitee Developer Portal!',
+        subtitle: 'Great subtitle',
+      },
+    },
+    authentication: {
+      localLogin: {
+        enabled: true,
+      },
+    },
+  };
+
   get baseURL(): string {
     return TESTING_BASE_URL;
   }
 
   get configuration(): Configuration {
-    return {
-      portalNext: {
-        banner: {
-          enabled: true,
-          title: 'Welcome to Gravitee Developer Portal!',
-          subtitle: 'Great subtitle',
-        },
-      },
-    };
+    return this._configuration ?? {};
+  }
+
+  set configuration(configuration: Configuration) {
+    this._configuration = configuration;
+  }
+}
+
+@Injectable()
+export class IdentityProviderServiceStub {
+  providers: IdentityProvider[] = [];
+
+  getPortalIdentityProviders(): Observable<DataResponse<IdentityProvider[]>> {
+    return of({ data: this.providers } as unknown as DataResponse<IdentityProvider[]>);
+  }
+  getPortalIdentityProvider(): Observable<IdentityProvider> {
+    return of();
+  }
+}
+
+@Injectable()
+export class OAuthServiceStub {
+  initCodeFlow() {
+    // nothing to do
+  }
+  tryLoginCodeFlow(): Promise<void> {
+    return Promise.resolve();
+  }
+  configure() {
+    // nothing to do
   }
 }
 
@@ -65,6 +107,14 @@ export class TestRouterModule {
       provide: ConfigService,
       useClass: ConfigServiceStub,
     },
+    {
+      provide: OAuthService,
+      useClass: OAuthServiceStub,
+    },
+    {
+      provide: IdentityProviderService,
+      useClass: IdentityProviderServiceStub,
+    },
     {
       provide: ActivatedRoute,
       useValue: TESTING_ACTIVATED_ROUTE,
diff --git a/gravitee-apim-portal-webui-next/yarn.lock b/gravitee-apim-portal-webui-next/yarn.lock
index d87f019d1fd..7ae490b6ad5 100644
--- a/gravitee-apim-portal-webui-next/yarn.lock
+++ b/gravitee-apim-portal-webui-next/yarn.lock
@@ -7477,7 +7477,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"angular-oauth2-oidc@npm:^20.0.2":
+"angular-oauth2-oidc@npm:20.0.2":
   version: 20.0.2
   resolution: "angular-oauth2-oidc@npm:20.0.2"
   dependencies:
@@ -11484,7 +11484,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:7.18.0"
     "@typescript-eslint/parser": "npm:7.18.0"
     angular-gridster2: "npm:20.2.3"
-    angular-oauth2-oidc: "npm:^20.0.2"
+    angular-oauth2-oidc: "npm:20.0.2"
     asciidoctor: "npm:3.0.4"
     chart.js: "npm:4.3.0"
     dompurify: "npm:3.2.7"

From 37f3bf1e02b4d98a2167e7d190347ec802a3b6b4 Mon Sep 17 00:00:00 2001
From: Ivan Kovarin <ivan.kovarin@graviteesource.com>
Date: Fri, 31 Oct 2025 10:10:15 +0100
Subject: [PATCH 4/4] [APIM-11537] Fix PR comments: responsive login form, move
 forceLogin to authGuard, fix redirection after SSO login.

---
 .../src/app/app.component.ts                  |  23 +---
 .../src/app/app.config.ts                     |   5 +-
 .../src/app/app.routes.ts                     |   9 +-
 .../src/app/log-in/log-in.component.html      |  50 ++++----
 .../src/app/log-in/log-in.component.scss      |  98 ++++++---------
 .../src/app/log-in/log-in.component.spec.ts   | 113 ++++++++++--------
 .../src/app/log-in/log-in.component.ts        |  56 +++++----
 ...reset-password-confirmation.component.html |   4 +-
 ...reset-password-confirmation.component.scss |  10 +-
 .../reset-password-confirmation.component.ts  |   4 +-
 .../reset-password.component.html             |   6 +-
 .../reset-password.component.scss             |  10 +-
 .../reset-password.component.ts               |   4 +-
 .../src/app/log-out/log-out.component.ts      |  32 ++---
 .../desktop-nav-bar.component.html            |  24 ++--
 .../desktop-nav-bar.component.ts              |   1 -
 .../mobile-nav-bar.component.html             |  12 +-
 .../mobile-nav-bar.component.ts               |   1 -
 .../components/nav-bar/nav-bar.component.html |  10 +-
 .../components/nav-bar/nav-bar.component.ts   |   7 +-
 .../configuration/identity-provider-type.ts   |   2 +-
 .../src/guards/auth.guard.spec.ts             |  62 ++++++++--
 .../src/guards/auth.guard.ts                  |  39 +++++-
 .../src/testing/app-testing.module.ts         |   5 +-
 .../rest/api/model/parameters/Key.java        |   2 +-
 25 files changed, 320 insertions(+), 269 deletions(-)

diff --git a/gravitee-apim-portal-webui-next/src/app/app.component.ts b/gravitee-apim-portal-webui-next/src/app/app.component.ts
index 675e9358a59..141d1c2f17f 100644
--- a/gravitee-apim-portal-webui-next/src/app/app.component.ts
+++ b/gravitee-apim-portal-webui-next/src/app/app.component.ts
@@ -15,8 +15,7 @@
  */
 import { Component, effect, inject } from '@angular/core';
 import { Title } from '@angular/platform-browser';
-import { NavigationStart, Router, RouterOutlet } from '@angular/router';
-import { isEmpty } from 'lodash';
+import { RouterOutlet } from '@angular/router';
 import { BreadcrumbService } from 'xng-breadcrumb';
 
 import { FooterComponent } from '../components/footer/footer.component';
@@ -26,12 +25,6 @@ import { CurrentUserService } from '../services/current-user.service';
 import { PortalMenuLinksService } from '../services/portal-menu-links.service';
 import { ThemeService } from '../services/theme.service';
 
-const PATHS = {
-  LOGIN: '/log-in',
-  SIGNUP: '/sign-up',
-  RESET_PASSWORD: '/log-in/reset-password',
-};
-
 @Component({
   selector: 'app-root',
   imports: [RouterOutlet, NavBarComponent, FooterComponent],
@@ -50,7 +43,6 @@ export class AppComponent {
     // Don't delete BreadcrumbService from here - it's responsible for correct breadcrumb navigation
     private breadcrumbService: BreadcrumbService,
     private title: Title,
-    private router: Router,
   ) {
     this.siteTitle = configService.configuration?.portalNext?.siteTitle ?? 'Developer Portal';
     this.title.setTitle(this.siteTitle);
@@ -59,19 +51,6 @@ export class AppComponent {
         this.updateFavicon();
       }
     });
-
-    this.router.events.subscribe(event => {
-      if (event instanceof NavigationStart) {
-        if (isEmpty(this.currentUser()) && !this.isInLoginOrRegistration(event.url) && this.forceLogin()) {
-          const redirectUrl = event.url;
-          this.router.navigate([PATHS.LOGIN], { replaceUrl: true, queryParams: { redirectUrl } });
-        }
-      }
-    });
-  }
-
-  isInLoginOrRegistration(url: string = this.router.routerState.snapshot.url): boolean {
-    return url.startsWith(PATHS.LOGIN) || url.startsWith(PATHS.SIGNUP) || url.startsWith(PATHS.RESET_PASSWORD);
   }
 
   forceLogin(): boolean {
diff --git a/gravitee-apim-portal-webui-next/src/app/app.config.ts b/gravitee-apim-portal-webui-next/src/app/app.config.ts
index 1974dbade14..980cd6b80de 100644
--- a/gravitee-apim-portal-webui-next/src/app/app.config.ts
+++ b/gravitee-apim-portal-webui-next/src/app/app.config.ts
@@ -19,8 +19,8 @@ import { ApplicationConfig, inject, provideAppInitializer } from '@angular/core'
 import { MAT_RIPPLE_GLOBAL_OPTIONS } from '@angular/material/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, Router, withComponentInputBinding, withRouterConfig } from '@angular/router';
-import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 import { provideOAuthClient } from 'angular-oauth2-oidc';
+import { provideCharts, withDefaultRegisterables } from 'ng2-charts';
 import { catchError, combineLatest, Observable, switchMap } from 'rxjs';
 import { of } from 'rxjs/internal/observable/of';
 
@@ -43,13 +43,12 @@ function initApp(
 ): () => Observable<unknown> {
   return () =>
     configService.initBaseURL().pipe(
-      switchMap(_ => authService.load()),
       switchMap(_ =>
         combineLatest([
           themeService.loadTheme(),
-          currentUserService.loadUser(),
           configService.loadConfiguration(),
           portalMenuLinksService.loadCustomLinks(),
+          authService.load().pipe(switchMap(_ => currentUserService.loadUser())),
         ]),
       ),
       catchError(error => {
diff --git a/gravitee-apim-portal-webui-next/src/app/app.routes.ts b/gravitee-apim-portal-webui-next/src/app/app.routes.ts
index 9d49b9cf5be..ff634f9d467 100644
--- a/gravitee-apim-portal-webui-next/src/app/app.routes.ts
+++ b/gravitee-apim-portal-webui-next/src/app/app.routes.ts
@@ -131,13 +131,13 @@ const apiRoutes: Routes = [
 export const routes: Routes = [
   {
     path: '',
-    canActivate: [redirectGuard],
+    canActivate: [redirectGuard, authGuard],
     resolve: { homepage: homepageResolver },
     component: HomepageComponent,
   },
   {
     path: 'catalog',
-    canActivateChild: [redirectGuard],
+    canActivateChild: [redirectGuard, authGuard],
     data: { breadcrumb: 'Catalog' },
     children: [
       {
@@ -178,7 +178,7 @@ export const routes: Routes = [
   },
   {
     path: 'applications',
-    canActivateChild: [authGuard, redirectGuard],
+    canActivateChild: [redirectGuard, authGuard],
     children: [
       { path: '', component: ApplicationsComponent, data: { breadcrumb: 'Applications' } },
       {
@@ -220,6 +220,7 @@ export const routes: Routes = [
   },
   {
     path: 'guides',
+    canActivate: [redirectGuard, authGuard],
     component: GuidesComponent,
     data: { breadcrumb: { label: 'Documentation', disable: true } },
     resolve: { pages: environmentPagesResolver },
@@ -252,7 +253,7 @@ export const routes: Routes = [
       },
     ],
   },
-  { path: 'log-out', component: LogOutComponent, canActivate: [redirectGuard, authGuard] },
+  { path: 'log-out', component: LogOutComponent, canActivate: [redirectGuard] },
   { path: '404', component: NotFoundComponent },
   { path: '503', component: ServiceUnavailableComponent },
   { path: 'gravitee-md', component: GraviteeMarkdownComponent },
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
index fe958f6de5a..82c8ad11137 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.html
@@ -15,13 +15,14 @@
     limitations under the License.
 
 -->
-<form [formGroup]="logInForm" (ngSubmit)="logIn()" class="log-in__form__container">
+<form [formGroup]="logInForm" (ngSubmit)="logIn()" class="log-in__form__container" [appIsMobile]="'log-in__form__container--mobile'">
   <mat-card appearance="outlined" class="log-in">
     <mat-card-header class="log-in__form__header">
       <mat-card-title class="log-in__form__title" i18n="@@logInTitle">Login</mat-card-title>
     </mat-card-header>
     <mat-card-content class="log-in__form__content">
-      @if (isLocalLoginEnabled()) {
+      @let identityProviders = identityProviders$ | async;
+      @if (isLocalLoginEnabled) {
         <div class="log-in__form">
           <div class="log-in__form__fields">
             <mat-form-field appearance="outline" class="log-in__form__input">
@@ -39,44 +40,35 @@
               }
             </mat-form-field>
             @if (error() === 401) {
-              <mat-error class="log-in__form__error" i18n="@@logInError401"
+              <mat-error class="log-in__form__error m3-label-large" i18n="@@logInError401"
                 >The username or password you entered is incorrect, please try again.</mat-error
               >
             }
           </div>
           <div class="log-in__form__buttons">
-            <button
-              [disabled]="logInForm.invalid"
-              type="submit"
-              mat-flat-button
-              i18n="@@logInAction"
-              class="log-in__form__submit primary-button">
+            <button [disabled]="logInForm.invalid" type="submit" mat-flat-button i18n="@@logInAction" class="log-in__form__submit">
               Log in
             </button>
-            <a class="log-in__form__forgot-password" i18n="@@resetPasswordAction" routerLink="reset-password"> Forgot password? </a>
+            <a class="log-in__form__forgot-password m3-label-large" i18n="@@resetPasswordAction" routerLink="reset-password">
+              Forgot password?
+            </a>
           </div>
         </div>
-      }
-      <div class="log-in__sso">
-        @if (isLocalLoginEnabled() && identityProviders.length > 0) {
-          <div class="log-in__sso__separator">
-            <div class="log-in__sso__separator__line"></div>
-            <div class="log-in__sso__separator__label" i18n="@@orSeparator">OR</div>
+        @if ((identityProviders ?? []).length > 0) {
+          <div class="log-in__or-separator m3-label-large">
+            <div class="log-in__or-separator__line"></div>
+            <div class="log-in__or-separator__label" i18n="@@orSeparator">OR</div>
           </div>
         }
-        @for (provider of identityProviders; track provider.id) {
-          <button
-            type="button"
-            mat-stroked-button
-            class="log-in__sso__idp secondary-button"
-            (click)="authenticateSSO(provider)">
-            <div class="log-in__sso__idp__container">
-              <img class="log-in__sso__idp__logo" [src]="'assets/images/idp/' + getProviderLogo(provider)" alt="Provider Logo" />
-              <span class="log-in__sso__idp__label" i18n="@@logInSsoLabelPrefix">Continue with {{ provider.name }}</span>
-            </div>
-          </button>
-        }
-      </div>
+      }
+      @for (provider of identityProviders; track provider.id) {
+        <button type="button" mat-stroked-button class="log-in__sso-provider secondary-button" (click)="authenticateSSO(provider)">
+          <div class="log-in__sso-provider__container">
+            <img class="log-in__sso-provider__logo" [src]="'assets/images/idp/' + getProviderLogo(provider)" alt="Provider Logo" />
+            <span class="log-in__sso-provider__label m3-label-large" i18n="@@logInSsoLabelPrefix">Continue with {{ provider.name }}</span>
+          </div>
+        </button>
+      }
     </mat-card-content>
   </mat-card>
 </form>
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
index cdc2a28a697..1a648b2036a 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.scss
@@ -23,7 +23,6 @@
 .log-in {
   display: flex;
   flex-flow: column;
-  background: #{theme.$background-color};
   gap: 20px;
 
   &__form {
@@ -35,15 +34,13 @@
       padding: 20px 20px 0;
     }
 
-    &__title {
-      font-size: 18px;
-      font-weight: 700;
-    }
-
     &__container {
       width: 400px;
-      max-width: 500px;
       border-radius: 8px;
+
+      &--mobile {
+        max-width: 75vw;
+      }
     }
 
     &__content:last-child {
@@ -69,7 +66,6 @@
     &__forgot-password {
       margin-top: 5px;
       color: #{theme.$primary-main-color};
-      font-size: 14px;
       text-align: center;
       text-decoration: none;
 
@@ -79,70 +75,54 @@
     }
 
     &__error {
-      font-size: 14px;
       text-align: center;
     }
   }
 
-  &__sso {
+  &__or-separator {
+    position: relative;
     display: flex;
-    flex-flow: column;
-    gap: 16px;
+    height: 30px;
+    align-items: center;
+    margin: 20px 0;
 
-    &__separator {
-      position: relative;
+    &__line {
+      width: 100%;
+      border-top: 1px solid #{theme.$card-border-color};
+    }
+
+    &__label {
+      position: absolute;
       display: flex;
-      height: 30px;
+      width: 40px;
+      height: 100%;
       align-items: center;
-      margin: 20px 0 4px;
-      font-size: 14px;
-
-      &__line {
-        width: 100%;
-        border-top: 1px solid #{theme.$card-border-color};
-      }
-
-      &__label {
-        position: absolute;
-        display: flex;
-        width: 40px;
-        height: 100%;
-        align-items: center;
-        justify-content: center;
-        margin: auto;
-        background: #{theme.$background-color};
-        inset: 0;
-      }
+      justify-content: center;
+      margin: auto;
+      background: #{theme.$card-background-color};
+      inset: 0;
     }
+  }
 
-    &__idp {
-      overflow: hidden;
-      width: 100%;
-      padding: 0 18px;
-      color: #{theme.$button-text-text-color};
-      font-weight: bold;
-      white-space: nowrap;
-
-      &__container {
-        display: flex;
-        align-items: center;
-        gap: 7px;
-      }
+  &__sso-provider {
+    width: 100%;
+    padding: 0 18px;
+    margin-bottom: 16px;
+    color: #{theme.$button-text-text-color};
 
-      &__logo {
-        width: 23px;
-        height: 23px;
-      }
+    &:last-of-type {
+      margin-bottom: 0;
+    }
 
-      ::ng-deep .mdc-button__label {
-        overflow: hidden;
-        white-space: nowrap;
-      }
+    &__container {
+      display: flex;
+      align-items: center;
+      gap: 7px;
+    }
 
-      &__label {
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
+    &__logo {
+      width: 23px;
+      height: 23px;
     }
   }
 }
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.spec.ts b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.spec.ts
index 1ef2e2a4103..67002e6f122 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.spec.ts
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.spec.ts
@@ -34,36 +34,47 @@ describe('LogInComponent', () => {
   let harnessLoader: HarnessLoader;
   let httpTestingController: HttpTestingController;
 
-  async function initComponent() {
-    fixture = TestBed.createComponent(LogInComponent);
-    harnessLoader = TestbedHarnessEnvironment.loader(fixture);
-    httpTestingController = TestBed.inject(HttpTestingController);
-    fixture.detectChanges();
-  }
-
-  function enableLocalLogin(enable: boolean) {
-    const configService = TestBed.inject(ConfigService) as unknown as ConfigServiceStub;
-    configService.configuration.authentication!.localLogin!.enabled = enable;
-  }
-
-  function initSsoProviders(providers: IdentityProvider[]) {
-    const identityProviderService = TestBed.inject(IdentityProviderService) as unknown as IdentityProviderServiceStub;
-    identityProviderService.providers = providers;
-  }
-
-  beforeEach(async () => {
+  const init = async (
+    params: Partial<{ enableLocalLogin: boolean; ssoProviders: IdentityProvider[] }> = {
+      enableLocalLogin: true,
+      ssoProviders: [],
+    },
+  ) => {
     await TestBed.configureTestingModule({
       imports: [LogInComponent, AppTestingModule],
+      providers: [
+        {
+          provide: ConfigService,
+          useFactory: () => {
+            const stub = new ConfigServiceStub();
+            stub.configuration.authentication!.localLogin!.enabled = params.enableLocalLogin;
+            return stub;
+          },
+        },
+        {
+          provide: IdentityProviderService,
+          useFactory: () => {
+            const stub = new IdentityProviderServiceStub();
+            stub.providers = params.ssoProviders!;
+            return stub;
+          },
+        },
+      ],
     }).compileComponents();
 
-    await initComponent();
-  });
+    fixture = TestBed.createComponent(LogInComponent);
+    harnessLoader = TestbedHarnessEnvironment.loader(fixture);
+    httpTestingController = TestBed.inject(HttpTestingController);
+    fixture.detectChanges();
+  };
 
   afterEach(() => {
     httpTestingController.verify();
   });
 
   it('should allow submit if username and password are valid', async () => {
+    await init();
+
     const submitButton = await harnessLoader.getHarness(MatButtonHarness.with({ text: 'Log in' }));
 
     const username = await harnessLoader.getHarness(MatInputHarness.with({ selector: '[formControlName="username"]' }));
@@ -78,6 +89,8 @@ describe('LogInComponent', () => {
   });
 
   it('should not validate form with missing username', async () => {
+    await init();
+
     const submitButton = await harnessLoader.getHarness(MatButtonHarness.with({ text: 'Log in' }));
 
     const password = await harnessLoader.getHarness(MatInputHarness.with({ selector: '[formControlName="password"]' }));
@@ -87,6 +100,8 @@ describe('LogInComponent', () => {
   });
 
   it('should not validate form with missing password', async () => {
+    await init();
+
     const submitButton = await harnessLoader.getHarness(MatButtonHarness.with({ text: 'Log in' }));
 
     const username = await harnessLoader.getHarness(MatInputHarness.with({ selector: '[formControlName="username"]' }));
@@ -96,6 +111,8 @@ describe('LogInComponent', () => {
   });
 
   it('should login and fetch current user on submit', async () => {
+    await init();
+
     const submitButton = await harnessLoader.getHarness(MatButtonHarness.with({ text: 'Log in' }));
     const username = await harnessLoader.getHarness(MatInputHarness.with({ selector: '[formControlName="username"]' }));
     await username.setValue('john@doe.com');
@@ -110,23 +127,23 @@ describe('LogInComponent', () => {
   });
 
   it('should not display log-in form', async () => {
-    enableLocalLogin(false);
-    initSsoProviders([
-      {
-        id: 'github',
-        name: 'GitHub',
-      },
-    ]);
-
-    await initComponent();
+    await init({
+      enableLocalLogin: false,
+      ssoProviders: [
+        {
+          id: 'github',
+          name: 'GitHub',
+        },
+      ],
+    });
 
     const login = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__form' }));
     expect(login).toBeNull();
 
-    const orSeparator = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__sso__separator' }));
+    const orSeparator = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__or-separator' }));
     expect(orSeparator).toBeNull();
 
-    const ssoProvider = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ selector: '.log-in__sso__idp' }));
+    const ssoProvider = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ selector: '.log-in__sso-provider' }));
     expect(ssoProvider).not.toBeNull();
 
     const providerText = await ssoProvider!.getText();
@@ -134,18 +151,17 @@ describe('LogInComponent', () => {
   });
 
   it('should not display SSO providers', async () => {
-    enableLocalLogin(true);
-    initSsoProviders([]);
-
-    await initComponent();
+    await init({
+      enableLocalLogin: true,
+    });
 
     const login = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__form' }));
     expect(login).not.toBeNull();
 
-    const orSeparator = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__sso__separator' }));
+    const orSeparator = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__or-separator' }));
     expect(orSeparator).toBeNull();
 
-    const ssoProvider = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ selector: '.log-in__sso__idp' }));
+    const ssoProvider = await harnessLoader.getHarnessOrNull(MatButtonHarness.with({ selector: '.log-in__sso-provider' }));
     expect(ssoProvider).toBeNull();
   });
 
@@ -155,15 +171,15 @@ describe('LogInComponent', () => {
       { id: 'google', name: 'Google' },
       { id: 'graviteeio_am', name: 'Gravitee AM' },
     ];
-    enableLocalLogin(true);
-    initSsoProviders(identityProviders);
-
-    await initComponent();
+    await init({
+      enableLocalLogin: true,
+      ssoProviders: identityProviders,
+    });
 
-    const orSeparator = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__sso__separator' }));
+    const orSeparator = await harnessLoader.getHarnessOrNull(DivHarness.with({ selector: '.log-in__or-separator' }));
     expect(orSeparator).not.toBeNull();
 
-    const ssoProviders = await harnessLoader.getAllHarnesses(MatButtonHarness.with({ selector: '.log-in__sso__idp' }));
+    const ssoProviders = await harnessLoader.getAllHarnesses(MatButtonHarness.with({ selector: '.log-in__sso-provider' }));
     const providerTexts = await Promise.all(ssoProviders.map(harness => harness.getText()));
     console.log('providerTexts', providerTexts);
 
@@ -174,14 +190,13 @@ describe('LogInComponent', () => {
   });
 
   it('should redirect when clicked on SSO provider', async () => {
-    enableLocalLogin(true);
-    initSsoProviders([{ id: 'google', name: 'Google' }]);
-
+    await init({
+      enableLocalLogin: true,
+      ssoProviders: [{ id: 'google', name: 'Google' }],
+    });
     const authenticateSSO = jest.spyOn(TestBed.inject(AuthService), 'authenticateSSO').mockReturnValue();
 
-    await initComponent();
-
-    const ssoProvider = await harnessLoader.getHarness(MatButtonHarness.with({ selector: '.log-in__sso__idp' }));
+    const ssoProvider = await harnessLoader.getHarness(MatButtonHarness.with({ selector: '.log-in__sso-provider' }));
     await ssoProvider.click();
     expect(authenticateSSO).toHaveBeenCalledWith({ id: 'google', name: 'Google' }, '');
   });
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts
index 81fa218c04b..d6dc5310727 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/log-in.component.ts
@@ -13,9 +13,10 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import { AsyncPipe } from '@angular/common';
 import { HttpErrorResponse } from '@angular/common/http';
-import { Component, DestroyRef, OnInit, signal } from '@angular/core';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { Component, DestroyRef, inject, signal } from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
@@ -23,8 +24,9 @@ import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { OAuthModule } from 'angular-oauth2-oidc';
-import { switchMap, tap } from 'rxjs';
+import { map, switchMap, tap } from 'rxjs';
 
+import { MobileClassDirective } from '../../directives/mobile-class.directive';
 import { IdentityProvider } from '../../entities/configuration/identity-provider';
 import { IdentityProviderType } from '../../entities/configuration/identity-provider-type';
 import { AuthService } from '../../services/auth.service';
@@ -35,49 +37,49 @@ import { PortalMenuLinksService } from '../../services/portal-menu-links.service
 
 @Component({
   selector: 'app-log-in',
-  imports: [MatCardModule, MatFormField, MatInput, MatButtonModule, MatLabel, ReactiveFormsModule, MatError, RouterLink, OAuthModule],
+  imports: [
+    MatCardModule,
+    MatFormField,
+    MatInput,
+    MatButtonModule,
+    MatLabel,
+    ReactiveFormsModule,
+    MatError,
+    RouterLink,
+    OAuthModule,
+    AsyncPipe,
+    MobileClassDirective,
+  ],
   templateUrl: './log-in.component.html',
   styleUrl: './log-in.component.scss',
 })
-export class LogInComponent implements OnInit {
+export class LogInComponent {
   logInForm: FormGroup<{ username: FormControl; password: FormControl }> = new FormGroup({
     username: new FormControl('', [Validators.required]),
     password: new FormControl('', [Validators.required]),
   });
   error = signal(200);
-  identityProviders: IdentityProvider[] = [];
-  private redirectUrl: string = '';
+  isLocalLoginEnabled = inject(ConfigService).configuration.authentication?.localLogin?.enabled ?? false;
+  identityProviders$ = inject(IdentityProviderService)
+    .getPortalIdentityProviders()
+    .pipe(map(({ data }) => data ?? []));
+  private readonly redirectUrl = toSignal(inject(ActivatedRoute).queryParams.pipe(map(params => params['redirectUrl'] || '')));
 
   constructor(
-    private readonly configService: ConfigService,
     private readonly authService: AuthService,
     private readonly currentUserService: CurrentUserService,
-    private readonly identityProviderService: IdentityProviderService,
     private readonly portalMenuLinksService: PortalMenuLinksService,
-    private readonly activatedRoute: ActivatedRoute,
     private readonly router: Router,
     private readonly destroyRef: DestroyRef,
   ) {}
 
-  ngOnInit(): void {
-    this.redirectUrl = this.activatedRoute.snapshot.queryParams?.['redirectUrl'] || '';
-    this.identityProviderService.getPortalIdentityProviders().subscribe({
-      next: response => {
-        this.identityProviders = response.data ?? [];
-      },
-      error: error => {
-        console.error('Cannot retrieve identity providers: ' + error.statusText);
-      },
-    });
-  }
-
   logIn() {
     this.authService
       .login(this.logInForm.value.username, this.logInForm.value.password)
       .pipe(
         switchMap(_ => this.currentUserService.loadUser()),
         switchMap(_ => this.portalMenuLinksService.loadCustomLinks()),
-        tap(_ => this.router.navigate([''])),
+        tap(_ => this.router.navigate([this.redirectUrl()])),
         takeUntilDestroyed(this.destroyRef),
       )
       .subscribe({
@@ -88,15 +90,11 @@ export class LogInComponent implements OnInit {
   }
 
   authenticateSSO(provider: IdentityProvider) {
-    this.authService.authenticateSSO(provider, this.redirectUrl);
+    this.authService.authenticateSSO(provider, this.redirectUrl());
   }
 
   getProviderLogo(provider: IdentityProvider) {
     const type = provider.type ?? IdentityProviderType.OIDC;
-    return `${type?.toLowerCase()}.svg`;
-  }
-
-  isLocalLoginEnabled() {
-    return this.configService.configuration.authentication?.localLogin?.enabled;
+    return `${type.toLowerCase()}.svg`;
   }
 }
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html
index 938cf7f19be..7ca9f7ba9ab 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.html
@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<mat-card appearance="outlined" class="reset-password-confirmation">
+<mat-card appearance="outlined" class="reset-password-confirmation" [appIsMobile]="'reset-password-confirmation--mobile'">
   @if (!isSubmitted) {
     <mat-card-header class="reset-password-confirmation__header">
       <mat-card-title class="reset-password-confirmation__title" i18n="@@resetPasswordConfirmationTitle"
@@ -58,7 +58,7 @@
               type="submit"
               mat-flat-button
               i18n="@@resetPasswordConfirmationAction"
-              class="reset-password-confirmation__form__submit secondary-button">
+              class="reset-password-confirmation__form__submit">
               Reset password
             </button>
           </div>
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss
index 6832628c720..c6669092430 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.scss
@@ -24,16 +24,14 @@
   display: flex;
   width: 400px;
   flex-flow: column;
-  background: #{theme.$background-color};
   gap: 20px;
 
-  &__header {
-    padding: 20px 20px 0;
+  &--mobile {
+    max-width: 75vw;
   }
 
-  &__title {
-    font-size: 18px;
-    font-weight: 700;
+  &__header {
+    padding: 20px 20px 0;
   }
 
   &__content,
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.ts b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.ts
index 13413b4ff48..d57215b70c1 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.ts
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password-confirmation/reset-password-confirmation.component.ts
@@ -23,6 +23,7 @@ import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
+import { MobileClassDirective } from '../../../../directives/mobile-class.directive';
 import { ResetPasswordService } from '../../../../services/reset-password.service';
 import { TokenService } from '../../../../services/token.service';
 import { passwordMatchValidator } from '../../../validators/password-match.validator';
@@ -52,6 +53,7 @@ export interface UserFromToken {
     MatButton,
     RouterLink,
     MatAnchor,
+    MobileClassDirective,
   ],
   templateUrl: './reset-password-confirmation.component.html',
   styleUrl: './reset-password-confirmation.component.scss',
@@ -72,7 +74,7 @@ export class ResetPasswordConfirmationComponent implements OnInit {
     { validators: passwordMatchValidator('password', 'confirmedPassword') },
   );
   error = signal(200);
-  private destroyRef = inject(DestroyRef);
+  private readonly destroyRef = inject(DestroyRef);
 
   constructor(
     private route: ActivatedRoute,
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.html b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.html
index 11e3da05648..d61abc38670 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.html
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.html
@@ -16,7 +16,7 @@
 
 -->
 <form [formGroup]="resetPasswordForm" (ngSubmit)="resetPassword()">
-  <mat-card appearance="outlined" class="reset-password">
+  <mat-card appearance="outlined" class="reset-password" [appIsMobile]="'reset-password--mobile'">
     @if (!isSubmitted) {
       <mat-card-header class="reset-password__form__header">
         <mat-card-title class="reset-password__form__title" i18n="@@resetPasswordTitle">Reset password</mat-card-title>
@@ -42,10 +42,10 @@
             type="submit"
             mat-flat-button
             i18n="@@resetPasswordAction"
-            class="reset-password__form__submit primary-button">
+            class="reset-password__form__submit">
             Reset password
           </button>
-          <a mat-stroked-button i18n="@@resetPasswordLoginLink" routerLink="/log-in">Back</a>
+          <a mat-stroked-button i18n="@@resetPasswordLoginLink" routerLink="/log-in">Back to Login</a>
         </div>
       </mat-card-content>
     } @else {
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss
index 00e87139ba2..848e05c1879 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.scss
@@ -24,9 +24,12 @@
   display: flex;
   width: 400px;
   flex-flow: column;
-  background: #{theme.$background-color};
   gap: 20px;
 
+  &--mobile {
+    max-width: 75vw;
+  }
+
   &__form {
     display: flex;
     flex-flow: column;
@@ -40,11 +43,6 @@
       padding: 20px 20px 0;
     }
 
-    &__title {
-      font-size: 18px;
-      font-weight: 700;
-    }
-
     &__fields {
       display: flex;
       flex-flow: column;
diff --git a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.ts b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.ts
index 7ab0f2dcc12..09742036124 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.ts
+++ b/gravitee-apim-portal-webui-next/src/app/log-in/reset-password/reset-password.component.ts
@@ -23,6 +23,7 @@ import { MatError, MatFormField, MatLabel } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { RouterLink } from '@angular/router';
 
+import { MobileClassDirective } from '../../../directives/mobile-class.directive';
 import { ResetPasswordService } from '../../../services/reset-password.service';
 
 @Component({
@@ -41,6 +42,7 @@ import { ResetPasswordService } from '../../../services/reset-password.service';
     ReactiveFormsModule,
     RouterLink,
     MatAnchor,
+    MobileClassDirective,
   ],
   templateUrl: './reset-password.component.html',
   styleUrls: ['./reset-password.component.scss'],
@@ -51,7 +53,7 @@ export class ResetPasswordComponent {
   });
   isSubmitted: boolean;
   error = signal(200);
-  private destroyRef = inject(DestroyRef);
+  private readonly destroyRef = inject(DestroyRef);
 
   constructor(private resetPasswordService: ResetPasswordService) {
     this.isSubmitted = false;
diff --git a/gravitee-apim-portal-webui-next/src/app/log-out/log-out.component.ts b/gravitee-apim-portal-webui-next/src/app/log-out/log-out.component.ts
index 6c5ae682c3e..ac66b444ebf 100644
--- a/gravitee-apim-portal-webui-next/src/app/log-out/log-out.component.ts
+++ b/gravitee-apim-portal-webui-next/src/app/log-out/log-out.component.ts
@@ -28,24 +28,28 @@ import { PortalMenuLinksService } from '../../services/portal-menu-links.service
   template: '',
 })
 export class LogOutComponent implements OnInit {
-  private destroyRef = inject(DestroyRef);
+  private readonly destroyRef = inject(DestroyRef);
 
   constructor(
-    private authService: AuthService,
-    private currentUserService: CurrentUserService,
-    private portalMenuLinksService: PortalMenuLinksService,
-    private router: Router,
+    private readonly authService: AuthService,
+    private readonly currentUserService: CurrentUserService,
+    private readonly portalMenuLinksService: PortalMenuLinksService,
+    private readonly router: Router,
   ) {}
 
   ngOnInit() {
-    this.authService
-      .logout()
-      .pipe(
-        tap(_ => this.currentUserService.clear()),
-        switchMap(_ => this.portalMenuLinksService.loadCustomLinks()),
-        tap(_ => this.router.navigate([''])),
-        takeUntilDestroyed(this.destroyRef),
-      )
-      .subscribe();
+    if (this.currentUserService.isAuthenticated()) {
+      this.authService
+        .logout()
+        .pipe(
+          tap(_ => this.currentUserService.clear()),
+          switchMap(_ => this.portalMenuLinksService.loadCustomLinks()),
+          tap(_ => this.router.navigate([''])),
+          takeUntilDestroyed(this.destroyRef),
+        )
+        .subscribe();
+    } else {
+      this.router.navigate(['']);
+    }
   }
 }
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.html b/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.html
index 369268ccc8c..e1eb302728f 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.html
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.html
@@ -16,19 +16,17 @@
 
 -->
 <div class="menu-items">
-  @if (!forceLogin() || isLoggedIn()) {
-    <app-nav-bar-button i18n="@@catalog" [path]="['catalog']">Catalog</app-nav-bar-button>
-    <app-nav-bar-button i18n="@@guides" [path]="['guides']">Guides</app-nav-bar-button>
-    @for (link of customLinks(); track link.id) {
-      <a
-        [href]="link.target"
-        mat-stroked-button
-        color="primary"
-        class="menu-items__custom_link"
-        [target]="link.type === 'external' ? '_blank' : ''">
-        {{ link.name }}
-      </a>
-    }
+  <app-nav-bar-button i18n="@@catalog" [path]="['catalog']">Catalog</app-nav-bar-button>
+  <app-nav-bar-button i18n="@@guides" [path]="['guides']">Guides</app-nav-bar-button>
+  @for (link of customLinks(); track link.id) {
+    <a
+      [href]="link.target"
+      mat-stroked-button
+      color="primary"
+      class="menu-items__custom_link"
+      [target]="link.type === 'external' ? '_blank' : ''">
+      {{ link.name }}
+    </a>
   }
 </div>
 
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.ts b/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.ts
index a5c26c47c3e..96876341de2 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.ts
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/desktop-nav-bar/desktop-nav-bar.component.ts
@@ -31,7 +31,6 @@ import { NavBarButtonComponent } from '../nav-bar-button/nav-bar-button.componen
 })
 export class DesktopNavBarComponent {
   currentUser: InputSignal<User> = input({});
-  forceLogin: InputSignal<boolean> = input(false);
   customLinks: InputSignal<PortalMenuLink[]> = input<PortalMenuLink[]>([]);
   protected isLoggedIn = computed(() => {
     return !isEmpty(this.currentUser());
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.html b/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.html
index f5b72667f16..f49f2eb89ba 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.html
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.html
@@ -16,13 +16,11 @@
 
 -->
 <div class="actions">
-  @if (!forceLogin() || isLoggedIn()) {
-    <button class="mobile-menu__button" mat-stroked-button i18n="@@navigationButton" (click)="isMobileMenuOpened = !isMobileMenuOpened">
-      <span class="mobile-menu__icon"
-        ><mat-icon>{{ isMobileMenuOpened ? 'close' : 'menu' }}</mat-icon></span
-      >
-    </button>
-  }
+  <button class="mobile-menu__button" mat-stroked-button i18n="@@navigationButton" (click)="isMobileMenuOpened = !isMobileMenuOpened">
+    <span class="mobile-menu__icon"
+      ><mat-icon>{{ isMobileMenuOpened ? 'close' : 'menu' }}</mat-icon></span
+    >
+  </button>
 </div>
 @if (isMobileMenuOpened) {
   <div class="mobile-menu__panel">
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.ts b/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.ts
index 8fb6962dc97..18858d5fe5e 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.ts
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/mobile-nav-bar/mobile-nav-bar.component.ts
@@ -34,7 +34,6 @@ import { PortalService } from '../../../services/portal.service';
 })
 export class MobileNavBarComponent {
   currentUser: InputSignal<User> = input({});
-  forceLogin: InputSignal<boolean> = input(false);
   customLinks: InputSignal<PortalMenuLink[]> = input<PortalMenuLink[]>([]);
   hasHomepage = toSignal(
     inject(PortalService)
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.html b/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.html
index 6ec1080ff9b..35f0e64c10d 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.html
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.html
@@ -17,9 +17,11 @@
 -->
 <div class="nav-bar__container">
   <app-company-title [title]="siteTitle" [logo]="logo()" />
-  @if (isMobile()) {
-    <app-mobile-nav-bar [currentUser]="currentUser()" [customLinks]="customLinks()" [forceLogin]="forceLogin()" />
-  } @else {
-    <app-desktop-nav-bar [currentUser]="currentUser()" [customLinks]="customLinks()" [forceLogin]="forceLogin()" />
+  @if (!forceLogin() || isLoggedIn()) {
+    @if (isMobile()) {
+      <app-mobile-nav-bar [currentUser]="currentUser()" [customLinks]="customLinks()" />
+    } @else {
+      <app-desktop-nav-bar [currentUser]="currentUser()" [customLinks]="customLinks()" />
+    }
   }
 </div>
diff --git a/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.ts b/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.ts
index 7529f067119..dc3d8540cdd 100644
--- a/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.ts
+++ b/gravitee-apim-portal-webui-next/src/components/nav-bar/nav-bar.component.ts
@@ -13,8 +13,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Component, inject, Input, input, InputSignal } from '@angular/core';
+import { Component, computed, inject, Input, input, InputSignal } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
+import { isEmpty } from 'lodash';
 
 import { User } from '../../entities/user/user';
 import { ObservabilityBreakpointService } from '../../services/observability-breakpoint.service';
@@ -38,4 +39,8 @@ export class NavBarComponent {
   forceLogin: InputSignal<boolean> = input(false);
   logo: InputSignal<string> = input('');
   protected readonly isMobile = inject(ObservabilityBreakpointService).isMobile;
+
+  protected isLoggedIn = computed(() => {
+    return !isEmpty(this.currentUser());
+  });
 }
diff --git a/gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider-type.ts b/gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider-type.ts
index b29d012acab..9fac80810d4 100644
--- a/gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider-type.ts
+++ b/gravitee-apim-portal-webui-next/src/entities/configuration/identity-provider-type.ts
@@ -18,6 +18,6 @@ export type IdentityProviderType = 'GOOGLE' | 'GITHUB' | 'GRAVITEEIO_AM' | 'OIDC
 export const IdentityProviderType = {
   GOOGLE: 'GOOGLE' as IdentityProviderType,
   GITHUB: 'GITHUB' as IdentityProviderType,
-  GRAVITEEIOAM: 'GRAVITEEIO_AM' as IdentityProviderType,
+  GRAVITEEIO_AM: 'GRAVITEEIO_AM' as IdentityProviderType,
   OIDC: 'OIDC' as IdentityProviderType,
 };
diff --git a/gravitee-apim-portal-webui-next/src/guards/auth.guard.spec.ts b/gravitee-apim-portal-webui-next/src/guards/auth.guard.spec.ts
index ebb764cb306..57c3e62ee52 100644
--- a/gravitee-apim-portal-webui-next/src/guards/auth.guard.spec.ts
+++ b/gravitee-apim-portal-webui-next/src/guards/auth.guard.spec.ts
@@ -15,15 +15,19 @@
  */
 import { TestBed } from '@angular/core/testing';
 import { ActivatedRoute, CanActivateFn, Router } from '@angular/router';
+import { OAuthService } from 'angular-oauth2-oidc';
 
 import { authGuard } from './auth.guard';
 import { fakeUser } from '../entities/user/user.fixtures';
+import { ConfigService } from '../services/config.service';
 import { CurrentUserService } from '../services/current-user.service';
 import { AppTestingModule } from '../testing/app-testing.module';
 
 describe('authGuard', () => {
   let currentUserService: CurrentUserService;
+  let oauthService: OAuthService;
   let activatedRoute: ActivatedRoute;
+  let configService: ConfigService;
   let router: Router;
   const executeGuard: CanActivateFn = (...guardParameters) => TestBed.runInInjectionContext(() => authGuard(...guardParameters));
 
@@ -32,24 +36,66 @@ describe('authGuard', () => {
       imports: [AppTestingModule],
     });
     currentUserService = TestBed.inject(CurrentUserService);
+    oauthService = TestBed.inject(OAuthService);
     activatedRoute = TestBed.inject(ActivatedRoute);
+    configService = TestBed.inject(ConfigService);
     router = TestBed.inject(Router);
   });
 
-  it('should not allow anonymous user', () => {
-    currentUserService.user.set({});
-    jest.spyOn(router, 'navigate');
+  it('should allow authenticated user', () => {
+    const parseUrl = jest.spyOn(router, 'parseUrl');
+    const createUrlTree = jest.spyOn(router, 'createUrlTree');
+    currentUserService.user.set(fakeUser());
 
     expect(executeGuard(activatedRoute.snapshot, { url: '', root: activatedRoute.snapshot })).toBeTruthy();
-    expect(router.navigate).toBeCalledTimes(1);
-    expect(router.navigate).toHaveBeenCalledWith(['']);
+    expect(parseUrl).not.toHaveBeenCalled();
+    expect(createUrlTree).not.toHaveBeenCalled();
   });
 
-  it('should allow authenticated user', () => {
+  it('should redirect authenticated user coming from SSO', () => {
+    const parseUrl = jest.spyOn(router, 'parseUrl');
+    const createUrlTree = jest.spyOn(router, 'createUrlTree');
     currentUserService.user.set(fakeUser());
-    jest.spyOn(router, 'navigate');
+    oauthService.state = encodeURIComponent('/redirectPath');
 
     expect(executeGuard(activatedRoute.snapshot, { url: '', root: activatedRoute.snapshot })).toBeTruthy();
-    expect(router.navigate).toBeCalledTimes(0);
+    expect(oauthService.state).toEqual('');
+    expect(parseUrl).toHaveBeenCalledWith('/redirectPath');
+    expect(createUrlTree).not.toHaveBeenCalled();
+  });
+
+  it('should redirect unauthenticated user to login', () => {
+    const parseUrl = jest.spyOn(router, 'parseUrl');
+    const createUrlTree = jest.spyOn(router, 'createUrlTree');
+    configService.configuration.authentication!.forceLogin!.enabled = true;
+    const url = '/test';
+
+    expect(executeGuard(activatedRoute.snapshot, { url, root: activatedRoute.snapshot })).toBeTruthy();
+    expect(parseUrl).not.toHaveBeenCalled();
+    expect(createUrlTree).toHaveBeenCalledWith(['/log-in'], { queryParams: { redirectUrl: url } });
+  });
+
+  it('should allow unauthenticated user, anonymous routes', () => {
+    const parseUrl = jest.spyOn(router, 'parseUrl');
+    const createUrlTree = jest.spyOn(router, 'createUrlTree');
+    configService.configuration.authentication!.forceLogin!.enabled = true;
+
+    expect(executeGuard(activatedRoute.snapshot, { url: '/log-in', root: activatedRoute.snapshot })).toBeTruthy();
+    expect(executeGuard(activatedRoute.snapshot, { url: '/sign-up', root: activatedRoute.snapshot })).toBeTruthy();
+    expect(executeGuard(activatedRoute.snapshot, { url: '/log-in/reset-password', root: activatedRoute.snapshot })).toBeTruthy();
+
+    expect(parseUrl).not.toHaveBeenCalled();
+    expect(createUrlTree).not.toHaveBeenCalled();
+  });
+
+  it('should allow unauthenticated user, login not forced', () => {
+    const parseUrl = jest.spyOn(router, 'parseUrl');
+    const createUrlTree = jest.spyOn(router, 'createUrlTree');
+    configService.configuration.authentication!.forceLogin!.enabled = false;
+
+    expect(executeGuard(activatedRoute.snapshot, { url: '/test', root: activatedRoute.snapshot })).toBeTruthy();
+
+    expect(parseUrl).not.toHaveBeenCalled();
+    expect(createUrlTree).not.toHaveBeenCalled();
   });
 });
diff --git a/gravitee-apim-portal-webui-next/src/guards/auth.guard.ts b/gravitee-apim-portal-webui-next/src/guards/auth.guard.ts
index c1537bc4c82..0cc144df144 100644
--- a/gravitee-apim-portal-webui-next/src/guards/auth.guard.ts
+++ b/gravitee-apim-portal-webui-next/src/guards/auth.guard.ts
@@ -14,10 +14,43 @@
  * limitations under the License.
  */
 import { inject } from '@angular/core';
-import { CanActivateFn, Router } from '@angular/router';
+import { CanActivateFn, Router, RouterStateSnapshot } from '@angular/router';
+import { OAuthService } from 'angular-oauth2-oidc';
+import { isEmpty } from 'lodash';
 
+import { ConfigService } from '../services/config.service';
 import { CurrentUserService } from '../services/current-user.service';
 
-export const authGuard: CanActivateFn = (_route, _state) => {
-  return inject(CurrentUserService).isAuthenticated() || inject(Router).navigate(['']);
+export const authGuard: CanActivateFn = (route, state) => {
+  return checkUserAuthenticated() || forceLogin(state);
 };
+
+function checkUserAuthenticated() {
+  if (inject(CurrentUserService).isAuthenticated()) {
+    const redirectPath = getOAuthRedirectPath();
+    return isEmpty(redirectPath) || inject(Router).parseUrl(redirectPath);
+  }
+  return false;
+}
+
+function getOAuthRedirectPath() {
+  const oAuthService = inject(OAuthService);
+  const redirectPath = decodeURIComponent(oAuthService.state ?? '');
+  oAuthService.state = '';
+  return redirectPath;
+}
+
+function forceLogin(state: RouterStateSnapshot) {
+  if (isForceLoginEnabled() && !isRouteAnonymous(state.url)) {
+    return inject(Router).navigate(['/log-in'], { queryParams: { redirectUrl: state.url } });
+  }
+  return true;
+}
+
+function isForceLoginEnabled(): boolean {
+  return inject(ConfigService).configuration.authentication?.forceLogin?.enabled ?? false;
+}
+
+function isRouteAnonymous(url: string): boolean {
+  return url.startsWith('/log-in') || url.startsWith('/sign-up') || url.startsWith('/log-in/reset-password');
+}
diff --git a/gravitee-apim-portal-webui-next/src/testing/app-testing.module.ts b/gravitee-apim-portal-webui-next/src/testing/app-testing.module.ts
index f29fdfe981d..0fe8b95ac2a 100644
--- a/gravitee-apim-portal-webui-next/src/testing/app-testing.module.ts
+++ b/gravitee-apim-portal-webui-next/src/testing/app-testing.module.ts
@@ -14,6 +14,7 @@
  * limitations under the License.
  */
 import { CommonModule, DATE_PIPE_DEFAULT_OPTIONS } from '@angular/common';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { Injectable, NgModule } from '@angular/core';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { ActivatedRoute, Router } from '@angular/router';
@@ -26,7 +27,6 @@ import { Configuration } from '../entities/configuration/configuration';
 import { IdentityProvider } from '../entities/configuration/identity-provider';
 import { ConfigService } from '../services/config.service';
 import { IdentityProviderService } from '../services/identity-provider.service';
-import {HttpClientTestingModule} from "@angular/common/http/testing";
 
 export const TESTING_BASE_URL = 'http://localhost:8083/portal/environments/DEFAULT';
 export const TESTING_ACTIVATED_ROUTE = {
@@ -50,6 +50,9 @@ export class ConfigServiceStub {
       localLogin: {
         enabled: true,
       },
+      forceLogin: {
+        enabled: false,
+      },
     },
   };
 
diff --git a/gravitee-apim-rest-api/gravitee-apim-rest-api-model/src/main/java/io/gravitee/rest/api/model/parameters/Key.java b/gravitee-apim-rest-api/gravitee-apim-rest-api-model/src/main/java/io/gravitee/rest/api/model/parameters/Key.java
index 0a4c304fa12..f94efe21901 100644
--- a/gravitee-apim-rest-api/gravitee-apim-rest-api-model/src/main/java/io/gravitee/rest/api/model/parameters/Key.java
+++ b/gravitee-apim-rest-api/gravitee-apim-rest-api-model/src/main/java/io/gravitee/rest/api/model/parameters/Key.java
@@ -128,7 +128,7 @@ public enum Key {
     ),
     PORTAL_NEXT_THEME_COLOR_BACKGROUND_CARD(
         "portal.next.theme.color.background.card",
-        "#F4F7FD",
+        "#ffffff",
         new HashSet<>(singletonList(ENVIRONMENT))
     ),
     PORTAL_NEXT_THEME_CUSTOM_CSS("portal.next.theme.customCss", new HashSet<>(singletonList(ENVIRONMENT))),