@igniteui/angular-templates 21.1.1492 → 21.1.1500-rc.0

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.spec.ts

@@ -0,0 +1,85 @@
+import { Component, DebugElement, EventEmitter, Output } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { StsConfigLoader } from 'angular-auth-oidc-client';
+import { IgxDialogModule } from 'igniteui-angular';
+import { LoginDialog } from './login-dialog';
+
+@Component({
+  selector: 'app-login, app-register',
+  template: '',
+  imports: [IgxDialogModule]
+})
+class TestSignViewComponent {
+  @Output() public viewChange = new EventEmitter();
+  @Output() public loggedIn = new EventEmitter();
+  @Output() public registered = new EventEmitter();
+}
+
+describe('LoginDialog', () => {
+  let component: LoginDialog;
+  let fixture: ComponentFixture<LoginDialog>;
+
+  const checkViews = (): { loginView: DebugElement, registerView: DebugElement } => {
+    const loginView = fixture.debugElement.query(By.css('app-login'));
+    const registerView = fixture.debugElement.query(By.css('app-register'));
+    return { loginView, registerView };
+  };
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [NoopAnimationsModule, IgxDialogModule, LoginDialog],
+      providers: [{ provide: StsConfigLoader, useValue: {} }]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginDialog);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should switch views, show login on open', async () => {
+    let result = checkViews();
+    expect(result.loginView).not.toBeNull();
+    expect(result.registerView).toBeNull();
+
+    component.showLogin = false;
+    fixture.detectChanges();
+    result = checkViews();
+    expect(result.loginView).toBeNull();
+    expect(result.registerView).not.toBeNull();
+    expect(component.loginDialog.title).toEqual('Register');
+
+    component.open();
+    await fixture.whenStable();
+    fixture.detectChanges();
+    result = checkViews();
+    expect(result.loginView).not.toBeNull();
+    expect(result.registerView).toBeNull();
+    expect(component.showLogin).toBeTruthy();
+    expect(component.loginDialog.title).toEqual('Login');
+  });
+
+  it('should switch views, close on events', () => {
+    let view: TestSignViewComponent = fixture.debugElement.query(By.css('app-login')).componentInstance;
+    vi.spyOn(component.loginDialog, 'close');
+
+    view.viewChange.emit();
+    expect(component.showLogin).toBeFalsy();
+    view.loggedIn.emit();
+    expect(component.loginDialog.close).toHaveBeenCalledTimes(1);
+    fixture.detectChanges();
+    view = fixture.debugElement.query(By.css('app-register')).componentInstance;
+    view.viewChange.emit();
+    expect(component.showLogin).toBeTruthy();
+    view.registered.emit();
+    expect(component.loginDialog.close).toHaveBeenCalledTimes(2);
+  });
+});

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.ts

@@ -0,0 +1,34 @@
+import { Component, ViewChild } from '@angular/core';
+import { IgxDialogComponent } from 'igniteui-angular';
+
+import { Register } from '../register/register';
+import { Login } from '../login/login';
+
+@Component({
+  selector: 'app-login-dialog',
+  templateUrl: './login-dialog.html',
+  styleUrl: './login-dialog.scss',
+  imports: [IgxDialogComponent, Login, Register]
+})
+export class LoginDialog {
+  public showLogin = true;
+  public get title() { return this.showLogin ? 'Login' : 'Register'; }
+  @ViewChild(IgxDialogComponent, { static: true })
+  public loginDialog!: IgxDialogComponent;
+
+  open() {
+    this.loginDialog.open();
+  }
+
+  close() {
+    this.loginDialog.close();
+  }
+
+  onOpen() {
+    this.showLogin = true;
+  }
+
+  toggleView() {
+    this.showLogin = !this.showLogin;
+  }
+}

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/models/register-info.ts

@@ -0,0 +1,6 @@
+export interface RegisterInfo {
+  given_name: string;
+  family_name: string;
+  email: string;
+  password: string;
+}

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/profile/profile.html

@@ -0,0 +1,3 @@
+<h3>
+  Hello {{this.userStore.currentUser!.name.toUpperCase()}}, you are now logged in!
+</h3>

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/profile/profile.spec.ts

@@ -0,0 +1,28 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { UserStore } from '../services/user-store';
+import { Profile } from './profile';
+
+describe('Profile', () => {
+  let component: Profile;
+  let fixture: ComponentFixture<Profile>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [Profile],
+      providers: [
+        { provide: UserStore, useValue: { currentUser: { name: 'test' } } }
+      ]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Profile);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/profile/profile.ts

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { UserStore } from '../services/user-store';
+
+@Component({
+  selector: 'app-profile',
+  templateUrl: './profile.html',
+  styleUrl: './profile.scss'
+})
+export class Profile {
+  constructor(public userStore: UserStore) { }
+}

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/provide-authentication.ts

@@ -0,0 +1,86 @@
+import { HTTP_INTERCEPTORS, provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { ENVIRONMENT_INITIALIZER, EnvironmentProviders, inject, Provider } from '@angular/core';
+import { OpenIdConfiguration, provideAuth } from 'angular-auth-oidc-client';
+
+import { BackendProvider } from './services/fake-backend';
+import { JwtInterceptor } from './services/jwt.interceptor';
+import { ExternalAuth, ExternalAuthRedirectUrl } from './services/external-auth';
+import { ExternalAuthProvider, AUTH_BASE_PATH } from './services/external-auth-configs';
+
+/**
+ * Social login provider credentials.
+ * In `app.config.ts`, uncomment the providers you want to enable and fill in your credentials.
+ * See https://github.com/IgniteUI/igniteui-cli/wiki/Angular-Authentication-Project-Template#add-a-third-party-social-provider
+ */
+export interface AuthProviders {
+  /** Google OAuth configuration. Provide to enable Google social login. */
+  google?: { clientId: string };
+  /** Microsoft OAuth configuration. Provide to enable Microsoft social login. */
+  microsoft?: { clientId: string; tenantId: string };
+  /** Facebook app configuration. Provide to enable Facebook social login. */
+  facebook?: { clientId: string };
+}
+
+/**
+ * Provides all authentication-related dependencies (OIDC, JWT interceptor, fake backend).
+ * Pass provider credentials via `authProviders` to activate social login.
+ *
+ * @example
+ * // In app.config.ts:
+ * provideAuthentication({
+ *   // google: { clientId: 'YOUR_GOOGLE_CLIENT_ID' },
+ *   // microsoft: { clientId: 'YOUR_MICROSOFT_CLIENT_ID', tenantId: 'YOUR_TENANT_ID' },
+ *   // facebook: { clientId: 'YOUR_FACEBOOK_CLIENT_ID' },
+ * })
+ */
+export function provideAuthentication(authProviders: AuthProviders = {}): (Provider | EnvironmentProviders)[] {
+  const oidcConfigs: OpenIdConfiguration[] = [];
+
+  if (authProviders.google) {
+    oidcConfigs.push({
+      configId: ExternalAuthProvider.Google,
+      authority: 'https://accounts.google.com',
+      redirectUrl: `${window.location.origin}/${AUTH_BASE_PATH}/${ExternalAuthRedirectUrl.Google}`,
+      postLogoutRedirectUri: window.location.origin,
+      clientId: authProviders.google.clientId,
+      scope: 'openid profile email',
+      responseType: 'code',
+      silentRenew: true,
+      useRefreshToken: true
+    });
+  }
+
+  if (authProviders.microsoft) {
+    oidcConfigs.push({
+      configId: ExternalAuthProvider.Microsoft,
+      authority: `https://login.microsoftonline.com/${authProviders.microsoft.tenantId}/v2.0/`,
+      redirectUrl: `${window.location.origin}/${AUTH_BASE_PATH}/${ExternalAuthRedirectUrl.Microsoft}`,
+      postLogoutRedirectUri: window.location.origin,
+      clientId: authProviders.microsoft.clientId,
+      scope: 'openid profile email',
+      responseType: 'code',
+      silentRenew: true,
+      useRefreshToken: true,
+      strictIssuerValidationOnWellKnownRetrievalOff: true
+    });
+  }
+
+  return [
+    provideAuth({ config: oidcConfigs }),
+    provideHttpClient(withInterceptorsFromDi()),
+    { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true },
+    // BackendProvider intercepts HTTP requests and simulates a REST API for development/testing.
+    // Remove this provider and configure a real backend before deploying to production.
+    BackendProvider,
+    {
+      provide: ENVIRONMENT_INITIALIZER,
+      multi: true,
+      useValue: () => {
+        const externalAuth = inject(ExternalAuth);
+        if (authProviders.google) { externalAuth.addGoogle(); }
+        if (authProviders.microsoft) { externalAuth.addMicrosoft(); }
+        if (authProviders.facebook) { externalAuth.addFacebook(authProviders.facebook.clientId); }
+      }
+    }
+  ];
+}

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/providers/auth-provider.ts

@@ -1,7 +1,6 @@
 import { ExternalLogin } from '../models/login';
 
 export interface AuthProvider {
-  config(): void;
   login(): void;
   getUserInfo(): Promise<ExternalLogin>;
   logout(): void;

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/providers/base-oidc-provider.ts

@@ -1,71 +1,33 @@
-import {
-  AuthWellKnownEndpoints,
-  OidcConfigService,
-  OidcSecurityService,
-  OpenIDImplicitFlowConfiguration
-} from 'angular-auth-oidc-client';
-import { take } from 'rxjs/operators';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { firstValueFrom } from 'rxjs';
 import { ExternalLogin } from '../models/login';
-import { ExternalAuthConfig } from '../services/external-auth-configs';
 import { AuthProvider } from './auth-provider';
 
 /** Base provider for OpenID Connect (OIDC) https://openid.net/connect/ */
 export abstract class BaseOidcProvider implements AuthProvider {
   constructor(
-    protected oidcConfigService: OidcConfigService,
     protected oidcSecurityService: OidcSecurityService,
-    protected externalStsConfig: ExternalAuthConfig) { }
-
-  public config() {
-    const openIDImplicitFlowConfiguration = new OpenIDImplicitFlowConfiguration();
-    openIDImplicitFlowConfiguration.stsServer = this.externalStsConfig.stsServer;
-    openIDImplicitFlowConfiguration.redirect_url = this.externalStsConfig.redirect_url;
-    openIDImplicitFlowConfiguration.client_id = this.externalStsConfig.client_id;
-    openIDImplicitFlowConfiguration.response_type = this.externalStsConfig.response_type;
-    openIDImplicitFlowConfiguration.scope = this.externalStsConfig.scope;
-    openIDImplicitFlowConfiguration.post_logout_redirect_uri = this.externalStsConfig.redirect_url;
-    openIDImplicitFlowConfiguration.post_login_route = this.externalStsConfig.post_login_route;
-    openIDImplicitFlowConfiguration.auto_userinfo = this.externalStsConfig.auto_userinfo;
-    openIDImplicitFlowConfiguration.max_id_token_iat_offset_allowed_in_seconds =
-      this.externalStsConfig.max_id_token_iat_offset_allowed_in_seconds;
-
-    const authWellKnownEndpoints = new AuthWellKnownEndpoints();
-    authWellKnownEndpoints.setWellKnownEndpoints(this.oidcConfigService.wellKnownEndpoints);
-    this.oidcSecurityService.setupModule(openIDImplicitFlowConfiguration, authWellKnownEndpoints);
-  }
+    protected configId: string) { }
 
   public login() {
-    this.oidcConfigService.onConfigurationLoaded.pipe(take(1)).subscribe(() => {
-      this.config();
-      this.oidcSecurityService.authorize();
-    });
-    this.oidcConfigService.load_using_stsServer(this.externalStsConfig.stsServer);
+    this.oidcSecurityService.authorize(this.configId);
   }
 
-  public getUserInfo(): Promise<ExternalLogin> {
-    let resolve: (val: ExternalLogin) => void;
-    let reject: () => void;
-    const user = new Promise<ExternalLogin>((res, rej) => {
-      resolve = res;
-      reject = rej;
-    });
-    this.oidcConfigService.onConfigurationLoaded.pipe(take(1)).subscribe(() => {
-      this.config();
-      this.oidcSecurityService.onAuthorizationResult.subscribe(() => {
-        this.oidcSecurityService.getUserData().subscribe(userData => {
-          resolve(this.formatUserData(userData));
-        });
-      });
-      this.oidcSecurityService.authorizedImplicitFlowCallback();
-    });
-    this.oidcConfigService.load_using_stsServer(this.externalStsConfig.stsServer);
-    return user;
+  public async getUserInfo(): Promise<ExternalLogin> {
+    const result = await firstValueFrom(this.oidcSecurityService.userData$);
+    const configData = result.allUserData?.find(
+      d => d.configId === this.configId
+    );
+    if (configData?.userData) {
+      return this.formatUserData(configData.userData);
+    }
+    return Promise.reject(null);
   }
 
   public logout() {
-    this.oidcSecurityService.logoff();
+    this.oidcSecurityService.logoff(this.configId).subscribe();
   }
 
   /** Format received user data per provider claims */
-  protected abstract formatUserData(userData: { [key: string]: any; }): ExternalLogin;
+  protected abstract formatUserData(userData: any): Promise<ExternalLogin>;
 }

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/providers/facebook-provider.ts

@@ -25,7 +25,7 @@ export class FacebookProvider implements AuthProvider {
       if (response.authResponse) {
         FB.api(
           '/me?fields=id,email,name,first_name,last_name,picture',
-          (newResponse: { [key: string]: any; }) => {
+          (newResponse: any) => {
             this.user = {
               id: newResponse.id,
               name: newResponse.name,
@@ -33,7 +33,7 @@ export class FacebookProvider implements AuthProvider {
               family_name: newResponse.last_name,
               email: newResponse.email,
               picture: newResponse.picture,
-              externalToken: FB.getAuthResponse()[accessToken]
+              externalToken: FB.getAuthResponse()?.[accessToken] ?? ''
             };
             this.router.navigate([this.externalStsConfig.redirect_url]);
           });

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/providers/google-provider.ts

@@ -1,3 +1,4 @@
+import { firstValueFrom } from 'rxjs';
 import { ExternalLogin } from '../models/login';
 import { BaseOidcProvider } from './base-oidc-provider';
 
@@ -7,17 +8,16 @@ export class GoogleProvider extends BaseOidcProvider {
    * https://developers.google.com/identity/protocols/OpenIDConnect
    * https://developers.google.com/+/web/api/rest/openidconnect/getOpenIdConnect
    */
-  protected formatUserData(userData: { [key: string]: any; }): ExternalLogin {
-    const login: ExternalLogin = {
+  protected async formatUserData(userData: any): Promise<ExternalLogin> {
+    const token = await firstValueFrom(this.oidcSecurityService.getAccessToken(this.configId));
+    return {
       id: userData.sub,
       name: userData.name,
       email: userData.email,
       given_name: userData.given_name,
       family_name: userData.family_name,
       picture: userData.picture,
-      externalToken: this.oidcSecurityService.getToken()
-
+      externalToken: token
     };
-    return login;
   }
 }

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/providers/microsoft-provider.ts

@@ -1,43 +1,19 @@
+import { firstValueFrom } from 'rxjs';
 import { ExternalLogin } from '../models/login';
 import { BaseOidcProvider } from './base-oidc-provider';
 
 export class MicrosoftProvider extends BaseOidcProvider {
-  public static keysURL = 'ms-discovery/keys';
-
-  /** ADD endpoint specific tenant + ID, used when connecting users from work or school accounts.
-   * https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-protocols-oidc#fetch-the-openid-connect-metadata-document
-   */
-  public tenant = 'consumers';
-  public tenantID = '';
-
-  public config() {
-    if (this.tenant !== 'consumers') {
-      // Replace common discovery URL issuer with correct tenant ID for token validation:
-      this.oidcConfigService.wellKnownEndpoints.issuer =
-        this.oidcConfigService.wellKnownEndpoints.issuer.replace('{tenantid}', this.tenantID);
-    }
-
-    // Microsoft OIDC doesn't support CORS for keys discovery URIs, intended for backend
-    // See https://stackoverflow.com/a/44688644
-    // Example implementation:
-    // https://blogs.msdn.microsoft.com/mihansen/2018/07/12/net-core-angular-app-with-openid-connection-implicit-flow-authentication-angular-auth-oidc-client/
-    // https://docs.microsoft.com/en-us/azure/active-directory/develop/v2-protocols-oidc
-    this.oidcConfigService.wellKnownEndpoints.jwks_uri = MicrosoftProvider.keysURL;
-    super.config();
-  }
-
   /**
    * Format user data response from available claims:
    * https://docs.microsoft.com/en-us/azure/active-directory/develop/id-tokens#payload-claims
    */
-  protected formatUserData(userData: { [key: string]: any; }): ExternalLogin {
-    const login: ExternalLogin = {
+  protected async formatUserData(userData: any): Promise<ExternalLogin> {
+    const token = await firstValueFrom(this.oidcSecurityService.getAccessToken(this.configId));
+    return {
       id: userData.oid,
       name: userData.name,
       email: userData.email,
-      externalToken: this.oidcSecurityService.getToken()
-
+      externalToken: token
     };
-    return login;
   }
 }