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

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

@@ -1,9 +1,11 @@
+import { of } from 'rxjs';
 import { FacebookProvider } from './facebook-provider';
 import { GoogleProvider } from './google-provider';
 import { MicrosoftProvider } from './microsoft-provider';
 
 describe('Providers', () => {
   const MOCK_EXTERNAL_AUTH_CONFIG = {
+    configId: 'test-config-id',
     stsServer: 'test-stsServer',
     redirect_url: 'test-redirect_url',
     client_id: 'test-client_id',
@@ -16,24 +18,15 @@ describe('Providers', () => {
   const MOCK_ROUTER = {
     navigate: () => { }
   } as any;
-  const MOCK_OIDC_CONFIG = {
-    wellKnownEndpoints: {
-      issuer: ''
-    },
-    load_using_stsServer: () => { },
-    onConfigurationLoaded: {
-      pipe: () => { }
-    }
-  } as any;
   const MOCK_OIDC_SECURITY = {
-    setupModule: () => { },
     authorize: () => { },
-    getToken: () => { },
-    onAuthorizationResult: () => { },
-    authorizedImplicitFlowCallback: () => { },
-    getUserData: () => { },
-    logoff: () => { }
+    getAccessToken: () => '',
+    logoff: () => { },
+    userData$: of({ allUserData: [] })
   } as any;
+
+  afterEach(() => { vi.restoreAllMocks(); });
+
   describe('Facebook Provider', () => {
     const facebookProviderName = 'FB';
     let mockResponse: any = {};
@@ -45,18 +38,21 @@ describe('Providers', () => {
       email: 'mock_email',
       picture: 'mock_picture'
     };
-    global[facebookProviderName] = {
-      login: (callback: (obj: any) => void, scope: { scope: string }) => { callback({ authResponse: mockResponse }); },
-      init: () => { },
-      api: (params: string, callback: (obj: any) => void) => { callback(mockAPIObj); },
+    globalThis[facebookProviderName] = {
+      login: (callback: any) => { callback({ authResponse: mockResponse }); },
+      init: () => {},
+      api: (paramsOrCb: any, cb?: any) => {
+        const callback = typeof paramsOrCb === 'function' ? paramsOrCb : cb;
+        callback(mockAPIObj);
+      },
       getAuthResponse: (): any => { return { accessToken: 'mockAccessToken' } },
-      logout: () => { },
-      AppEvents: null,
-      Canvas: null,
-      Event: null,
-      getLoginStatus: (): any => null,
-      ui: (params: any, callback: (response: any) => void): void => { },
-      XFBML: null
+      logout: () => {},
+      AppEvents: {},
+      Canvas: {},
+      Event: {} as any,
+      getLoginStatus: () => null,
+      ui: () => {},
+      XFBML: {}
     };
     it('Should properly initialize', () => {
       const provider = new FacebookProvider(MOCK_EXTERNAL_AUTH_CONFIG, MOCK_ROUTER);
@@ -65,7 +61,7 @@ describe('Providers', () => {
 
     it('Should properly call config', () => {
       const provider = new FacebookProvider(MOCK_EXTERNAL_AUTH_CONFIG, MOCK_ROUTER);
-      spyOn(FB, 'init');
+      vi.spyOn(FB, 'init');
       provider.config();
       expect(FB.init).toHaveBeenCalled();
       expect(FB.init).toHaveBeenCalledWith({
@@ -77,18 +73,18 @@ describe('Providers', () => {
 
     it('Should properly call login', () => {
       const provider = new FacebookProvider(MOCK_EXTERNAL_AUTH_CONFIG, MOCK_ROUTER);
-      spyOn(provider, 'config');
-      spyOn(FB, 'login').and.callThrough();
-      spyOn(console, 'log').and.callThrough();
-      spyOn(FB, 'api').and.callThrough();
+      vi.spyOn(provider, 'config');
+      vi.spyOn(FB, 'login');
+      vi.spyOn(console, 'log');
+      vi.spyOn(FB, 'api');
       mockResponse = false;
       provider.login();
       expect(provider.config).toHaveBeenCalledTimes(1);
       expect(FB.login).toHaveBeenCalledTimes(1);
       expect(FB.api).not.toHaveBeenCalled();
       expect(console.log).toHaveBeenCalledWith('User cancelled login or did not fully authorize.');
-      spyOn(FB, 'getAuthResponse').and.returnValue({ accessToken: 'Fake' } as any);
-      spyOn(MOCK_ROUTER, 'navigate');
+      vi.spyOn(FB, 'getAuthResponse').mockReturnValue({ accessToken: 'Fake' } as any);
+      vi.spyOn(MOCK_ROUTER, 'navigate');
       mockResponse = true;
       const mockObj = {
         id: 'test id',
@@ -119,13 +115,13 @@ describe('Providers', () => {
     it(`Should properly call 'getUserInfo'`, () => {
       const provider = new FacebookProvider(MOCK_EXTERNAL_AUTH_CONFIG, MOCK_ROUTER);
       provider.login();
-      spyOn(Promise, 'resolve').and.returnValue('Mock' as any);
+      vi.spyOn(Promise, 'resolve').mockReturnValue('Mock' as any);
       expect(provider.getUserInfo()).toEqual('Mock' as any);
     });
 
     it(`Should properly call 'logout'`, () => {
       const provider = new FacebookProvider(MOCK_EXTERNAL_AUTH_CONFIG, MOCK_ROUTER);
-      spyOn(FB, 'logout');
+      vi.spyOn(FB, 'logout');
       provider.logout();
       expect(FB.logout).toHaveBeenCalled();
     });
@@ -134,38 +130,19 @@ describe('Providers', () => {
   describe('Google Provider', () => {
 
     it('Should properly initialize', () => {
-      const provider = new GoogleProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
+      const provider = new GoogleProvider(MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG.configId);
       expect(provider).toBeDefined();
     });
 
-    it('Should properly call config', () => {
-      const provider = new GoogleProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
-      spyOn(MOCK_OIDC_SECURITY, 'setupModule').and.callThrough();
-      provider.config();
-      expect(MOCK_OIDC_SECURITY.setupModule).toHaveBeenCalled();
-    });
-
     it('Should properly call login', () => {
-      const provider = new GoogleProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
-      const mockSub = {
-        subscribe: (fn: () => {}) => {
-          fn.apply(MOCK_OIDC_SECURITY);
-        }
-      };
-      spyOn(mockSub, 'subscribe').and.callThrough();
-      spyOn(MOCK_OIDC_SECURITY, 'authorize');
-      spyOn(MOCK_OIDC_CONFIG.onConfigurationLoaded, 'pipe').and.returnValue(mockSub);
-      spyOn(MOCK_OIDC_CONFIG, 'load_using_stsServer');
-      const mockSpy = spyOn(provider, 'config');
+      const provider = new GoogleProvider(MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG.configId);
+      vi.spyOn(MOCK_OIDC_SECURITY, 'authorize');
       provider.login();
-      expect(mockSub.subscribe).toHaveBeenCalled();
-      expect(mockSpy).toHaveBeenCalled();
-      expect(MOCK_OIDC_SECURITY.authorize).toHaveBeenCalled();
-      expect(MOCK_OIDC_CONFIG.load_using_stsServer).toHaveBeenCalled();
+      expect(MOCK_OIDC_SECURITY.authorize).toHaveBeenCalledWith(MOCK_EXTERNAL_AUTH_CONFIG.configId);
     });
 
-    it(`Should properly call 'formatUserData'`, () => {
-      const provider = new GoogleProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
+    it(`Should properly call 'formatUserData'`, async () => {
+      const provider = new GoogleProvider(MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG.configId);
       const mockObj = {
         sub: 'test-id',
         name: 'test-name',
@@ -174,8 +151,9 @@ describe('Providers', () => {
         family_name: 'test-family_name',
         picture: 'test-picture'
       };
-      spyOn(MOCK_OIDC_SECURITY, 'getToken').and.returnValue('FAKE');
-      expect((provider as any).formatUserData(mockObj)).toEqual({
+      MOCK_OIDC_SECURITY.getAccessToken = vi.fn(() => of('FAKE'));
+      const result = await (provider as any).formatUserData(mockObj);
+      expect(result).toEqual({
         id: mockObj.sub,
         name: mockObj.name,
         email: mockObj.email,
@@ -186,115 +164,62 @@ describe('Providers', () => {
       });
     });
 
-    it('Should properly call getUserInfo', () => {
-      const provider = new GoogleProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
-      const mockSub = {
-        subscribe: (fn: () => {}) => {
-          fn.apply(this);
-        }
-      };
-      spyOn(mockSub, 'subscribe').and.callThrough();
-      spyOn(MOCK_OIDC_CONFIG.onConfigurationLoaded, 'pipe').and.returnValue(mockSub);
-      spyOn(provider, 'config');
-      spyOn(MOCK_OIDC_CONFIG, 'load_using_stsServer');
-      MOCK_OIDC_SECURITY.onAuthorizationResult = mockSub;
-      spyOn(MOCK_OIDC_SECURITY, 'getUserData').and.returnValue(mockSub);
-      spyOn(MOCK_OIDC_SECURITY, 'authorizedImplicitFlowCallback');
-      const formatDataSpy = spyOn<any>(provider, 'formatUserData');
-      provider.getUserInfo();
-      expect(mockSub.subscribe).toHaveBeenCalled();
-      expect(mockSub.subscribe).toHaveBeenCalledTimes(3);
-      expect(formatDataSpy).toHaveBeenCalled();
-      expect(provider.config).toHaveBeenCalled();
-      expect(MOCK_OIDC_SECURITY.authorizedImplicitFlowCallback).toHaveBeenCalled();
-      expect(MOCK_OIDC_CONFIG.load_using_stsServer).toHaveBeenCalled();
+    it('Should properly call getUserInfo', async () => {
+      const provider = new GoogleProvider(MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG.configId);
+      const mockUserData = { sub: 'test-id', name: 'test-name', email: 'test@example.com' };
+      MOCK_OIDC_SECURITY.userData$ = of({
+        allUserData: [{ configId: MOCK_EXTERNAL_AUTH_CONFIG.configId, userData: mockUserData }]
+      });
+      MOCK_OIDC_SECURITY.getAccessToken = vi.fn(() => of('test-token'));
+      const formatDataSpy = vi.spyOn<any, any>(provider, 'formatUserData');
+      await provider.getUserInfo();
+      expect(formatDataSpy).toHaveBeenCalledWith(mockUserData);
     });
 
     it('Should properly call logout', () => {
-      const provider = new GoogleProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
-      spyOn(MOCK_OIDC_SECURITY, 'logoff').and.callThrough();
+      const provider = new GoogleProvider(MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG.configId);
+      const logoffSpy = vi.spyOn(MOCK_OIDC_SECURITY, 'logoff').mockReturnValue(of(undefined));
       provider.logout();
-      expect(MOCK_OIDC_SECURITY.logoff).toHaveBeenCalled();
+      expect(logoffSpy).toHaveBeenCalled();
     });
   });
 
   describe('Microsoft Provider', () => {
 
     it('Should properly initialize', () => {
-      const provider = new MicrosoftProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
+      const provider = new MicrosoftProvider(MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG.configId);
       expect(provider).toBeDefined();
     });
 
-    it('Should properly call config', () => {
-      const provider = new MicrosoftProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
-      spyOn(MOCK_OIDC_SECURITY, 'setupModule').and.callThrough();
-      provider.config();
-      expect(MOCK_OIDC_SECURITY.setupModule).toHaveBeenCalled();
-    });
-
-    it('Should properly call config if tenant !== consumer', () => {
-      const provider = new MicrosoftProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
-      provider.tenant = 'test';
-      provider.tenantID = 'test_id';
-      const replaceSpy = spyOn<any>(String.prototype, 'replace');
-      spyOn(MOCK_OIDC_SECURITY, 'setupModule').and.callThrough();
-      provider.config();
-      expect(replaceSpy).toHaveBeenCalledWith('{tenantid}', 'test_id');
-      expect(MOCK_OIDC_SECURITY.setupModule).toHaveBeenCalled();
-    });
-
     it('Should properly call login', () => {
-      const provider = new MicrosoftProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
-      const mockSub = {
-        subscribe: (fn: () => {}) => {
-          fn.apply(MOCK_OIDC_SECURITY);
-        }
-      };
-      spyOn(mockSub, 'subscribe').and.callThrough();
-      spyOn(MOCK_OIDC_SECURITY, 'authorize');
-      spyOn(MOCK_OIDC_CONFIG.onConfigurationLoaded, 'pipe').and.returnValue(mockSub);
-      spyOn(MOCK_OIDC_CONFIG, 'load_using_stsServer');
-      const mockSpy = spyOn(provider, 'config');
+      const provider = new MicrosoftProvider(MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG.configId);
+      vi.spyOn(MOCK_OIDC_SECURITY, 'authorize');
       provider.login();
-      expect(mockSub.subscribe).toHaveBeenCalled();
-      expect(mockSpy).toHaveBeenCalled();
-      expect(MOCK_OIDC_SECURITY.authorize).toHaveBeenCalled();
-      expect(MOCK_OIDC_CONFIG.load_using_stsServer).toHaveBeenCalled();
+      expect(MOCK_OIDC_SECURITY.authorize).toHaveBeenCalledWith(MOCK_EXTERNAL_AUTH_CONFIG.configId);
     });
 
-    it('Should properly call getUserInfo', () => {
-      const provider = new MicrosoftProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
-      const mockSub = {
-        subscribe: (fn: () => {}) => {
-          fn.apply(MOCK_OIDC_SECURITY);
-        }
-      };
-      spyOn(mockSub, 'subscribe').and.callThrough();
-      spyOn(MOCK_OIDC_CONFIG.onConfigurationLoaded, 'pipe').and.returnValue(mockSub);
-      spyOn(MOCK_OIDC_CONFIG, 'load_using_stsServer');
-      spyOn(provider, 'config');
-      spyOn(MOCK_OIDC_SECURITY, 'authorizedImplicitFlowCallback');
-      MOCK_OIDC_SECURITY.onAuthorizationResult = mockSub;
-      spyOn(MOCK_OIDC_SECURITY, 'getUserData').and.returnValue(mockSub);
-      const formatDataSpy = spyOn<any>(provider, 'formatUserData');
-      provider.getUserInfo();
-      expect(mockSub.subscribe).toHaveBeenCalled();
-      expect(mockSub.subscribe).toHaveBeenCalledTimes(3);
-      expect(formatDataSpy).toHaveBeenCalled();
-      expect(provider.config).toHaveBeenCalled();
-      expect(MOCK_OIDC_SECURITY.authorizedImplicitFlowCallback).toHaveBeenCalled();
-      expect(MOCK_OIDC_CONFIG.load_using_stsServer).toHaveBeenCalled();
+    it('Should properly call getUserInfo', async () => {
+      const provider = new MicrosoftProvider(MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG.configId);
+      const mockUserData = { oid: 'test-id', name: 'test-name', email: 'test@example.com' };
+      MOCK_OIDC_SECURITY.userData$ = of({
+        allUserData: [{ configId: MOCK_EXTERNAL_AUTH_CONFIG.configId, userData: mockUserData }]
+      });
+      MOCK_OIDC_SECURITY.getAccessToken = vi.fn(() => of('test-token'));
+      const formatDataSpy = vi.spyOn<any, any>(provider, 'formatUserData');
+      await provider.getUserInfo();
+      expect(formatDataSpy).toHaveBeenCalledWith(mockUserData);
     });
 
-    it(`Should properly call 'formatUserData'`, () => {
-      const provider = new MicrosoftProvider(MOCK_OIDC_CONFIG, MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG);
+    it(`Should properly call 'formatUserData'`, async () => {
+      const provider = new MicrosoftProvider(MOCK_OIDC_SECURITY, MOCK_EXTERNAL_AUTH_CONFIG.configId);
       const mockObj = {
         oid: 'test-id',
         name: 'test-name',
         email: 'test-email',
       };
-      spyOn(MOCK_OIDC_SECURITY, 'getToken').and.returnValue('FAKE');
-      expect((provider as any).formatUserData(mockObj)).toEqual({
+      MOCK_OIDC_SECURITY.getAccessToken = vi.fn(() => of('FAKE'));
+      const result = await (provider as any).formatUserData(mockObj);
+      expect(result).toEqual({
         id: mockObj.oid,
         name: mockObj.name,
         email: mockObj.email,

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

@@ -0,0 +1,66 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ActivatedRoute, Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { of } from 'rxjs';
+import { Authentication } from '../services/authentication';
+import { ExternalAuth } from '../services/external-auth';
+import { UserStore } from '../services/user-store';
+import { Redirect } from './redirect';
+
+describe('Redirect', () => {
+  let fixture: ComponentFixture<Redirect>;
+  const activeRouteSpy: any = { snapshot: { data: { provider: {} } } };
+  const extAuthSpy = { getUserInfo: vi.fn() };
+  const authSpy = { loginWith: vi.fn() };
+  const userServSpy = { setCurrentUser: vi.fn() };
+  const oidcSecuritySpy = { checkAuth: vi.fn() };
+
+  afterEach(() => { vi.restoreAllMocks(); });
+
+  beforeEach(async () => {
+    oidcSecuritySpy.checkAuth.mockReturnValue(of(null));
+    await TestBed.configureTestingModule({
+	  imports: [RouterTestingModule, Redirect],
+      providers: [
+        { provide: ActivatedRoute, useValue: activeRouteSpy },
+        { provide: ExternalAuth, useValue: extAuthSpy },
+        { provide: Authentication, useValue: authSpy },
+        { provide: UserStore, useValue: userServSpy },
+        { provide: OidcSecurityService, useValue: oidcSecuritySpy }
+      ]
+    })
+      .compileComponents();
+  });
+
+  it('should try external login on init', async () => {
+    const router: Router = TestBed.inject(Router);
+    vi.spyOn(router, 'navigate');
+    extAuthSpy.getUserInfo.mockResolvedValue({ test: '1' });
+    authSpy.loginWith.mockResolvedValue({
+      error: null,
+      user: { name: 'TEST' }
+    });
+    fixture = TestBed.createComponent(Redirect);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(extAuthSpy.getUserInfo).toHaveBeenCalled();
+    expect(authSpy.loginWith).toHaveBeenCalledWith({ test: '1' });
+    expect(userServSpy.setCurrentUser).toHaveBeenCalledWith({ name: 'TEST' });
+    expect(router.navigate).toHaveBeenCalledWith(['/auth/profile']);
+  });
+
+  it('should show err on external login', async () => {
+    const router: Router = TestBed.inject(Router);
+    vi.spyOn(router, 'navigate');
+    extAuthSpy.getUserInfo.mockResolvedValue({ test: '1' });
+    authSpy.loginWith.mockResolvedValue({
+      error: 'Err'
+    });
+    vi.spyOn(window, 'alert').mockImplementation(() => {});
+    fixture = TestBed.createComponent(Redirect);
+    fixture.detectChanges();
+    await fixture.whenStable();
+    expect(window.alert).toHaveBeenCalledWith('Err');
+  });
+});

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

@@ -0,0 +1,43 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute, Router } from '@angular/router';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { firstValueFrom } from 'rxjs';
+import { ExternalLogin } from '../models/login';
+import { Authentication } from '../services/authentication';
+import { ExternalAuthProvider } from '../services/external-auth-configs';
+import { ExternalAuth } from '../services/external-auth';
+import { UserStore } from '../services/user-store';
+
+@Component({
+  template: '<p>Signing in...</p>'
+})
+export class Redirect implements OnInit {
+  private provider: ExternalAuthProvider;
+
+  constructor(
+    route: ActivatedRoute,
+    private router: Router,
+    private userStore: UserStore,
+    private authentication: Authentication,
+    private externalAuth: ExternalAuth,
+    private oidcSecurityService: OidcSecurityService) {
+    this.provider = route.snapshot.data['provider'] as ExternalAuthProvider;
+  }
+
+  async ngOnInit() {
+    try {
+      await firstValueFrom(this.oidcSecurityService.checkAuth());
+      const userInfo: ExternalLogin = await this.externalAuth.getUserInfo(this.provider);
+      const result = await this.authentication.loginWith(userInfo);
+      if (!result.error) {
+        this.userStore.setCurrentUser(result.user!);
+        this.router.navigate(['/auth/profile']);
+      } else {
+        alert(result.error);
+      }
+    } catch (err) {
+      console.error('External authentication failed:', err);
+      alert('Authentication failed. Please try again.');
+    }
+  }
+}

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

@@ -0,0 +1,94 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ReactiveFormsModule } from '@angular/forms';
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+import { Router } from '@angular/router';
+import { RouterTestingModule } from '@angular/router/testing';
+import { IgxButtonModule, IgxIconModule, IgxInputGroupModule, IgxRippleModule } from 'igniteui-angular';
+import { Authentication } from '../services/authentication';
+import { UserStore } from '../services/user-store';
+import { Register } from './register';
+
+const MAIL_GROUP_NAME = 'email';
+const PASSWORD_GROUP_NAME = 'password';
+const USERNAME_GROUP_NAME = 'given_name';
+const FAMILY_NAME_GROUP_NAME = 'family_name';
+
+describe('Register', () => {
+  let component: Register;
+  let fixture: ComponentFixture<Register>;
+  const authSpy = { register: vi.fn() };
+  const userServSpy = { setCurrentUser: vi.fn() };
+  const routerSpy = { navigate: vi.fn() };
+
+  afterEach(() => { vi.restoreAllMocks(); });
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [
+        NoopAnimationsModule,
+        ReactiveFormsModule,
+        RouterTestingModule,
+        IgxButtonModule,
+        IgxIconModule,
+        IgxInputGroupModule,
+        IgxRippleModule,
+		Register
+      ],
+      providers: [
+        { provide: Authentication, useValue: authSpy },
+        { provide: UserStore, useValue: userServSpy },
+        { provide: Router, useValue: routerSpy }
+      ]
+    })
+      .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(Register);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+
+  it('should submit login data', async () => {
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[USERNAME_GROUP_NAME].setValue('John');
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[MAIL_GROUP_NAME].setValue('test@example.com');
+    expect(component.registrationForm.valid).toBeFalsy();
+    component.registrationForm.controls[PASSWORD_GROUP_NAME].setValue('123456');
+    expect(component.registrationForm.valid).toBeTruthy();
+    component.registrationForm.controls[FAMILY_NAME_GROUP_NAME].setValue('Doe');
+    vi.spyOn(component.registered, 'emit');
+    authSpy.register.mockResolvedValue({
+      error: null,
+      user: { name: 'John Doe' }
+    });
+    await component.tryRegister();
+    expect(authSpy.register).toHaveBeenCalledTimes(1);
+    expect(authSpy.register).toHaveBeenCalledWith({
+      given_name: 'John',
+      family_name: 'Doe',
+      email: 'test@example.com',
+      password: '123456'
+    });
+    expect(userServSpy.setCurrentUser).toHaveBeenCalledWith({ name: 'John Doe' });
+    expect(component.registered.emit).toHaveBeenCalled();
+    expect(routerSpy.navigate).toHaveBeenCalledWith(['/auth/profile']);
+    authSpy.register.mockResolvedValue({
+      error: 'Reg error'
+    });
+    vi.spyOn(window, 'alert').mockImplementation(() => {});
+    await component.tryRegister();
+    expect(window.alert).toHaveBeenCalledWith('Reg error');
+  });
+
+  it(`should properly emit when 'showLoginForm' is called`, () => {
+    vi.spyOn(component.viewChange, 'emit');
+    component.showLoginForm();
+    expect(component.viewChange.emit).toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,52 @@
+import { Component, EventEmitter, Output } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';
+import { Router } from '@angular/router';
+import { IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective, IgxInputDirective, IgxButtonDirective,
+	IgxRippleDirective } from 'igniteui-angular';
+import { RegisterInfo } from '../models/register-info';
+import { Authentication } from '../services/authentication';
+import { UserStore } from '../services/user-store';
+
+@Component({
+  selector: 'app-register',
+  templateUrl: './register.html',
+  styleUrl: './register.scss',
+  imports: [ReactiveFormsModule, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, IgxLabelDirective,
+	IgxInputDirective, IgxButtonDirective, IgxRippleDirective]
+})
+export class Register {
+
+  public registrationForm: FormGroup;
+
+  @Output()
+  viewChange: EventEmitter<any> = new EventEmitter();
+  @Output()
+  registered: EventEmitter<any> = new EventEmitter();
+
+  constructor(private authentication: Authentication,
+    private fb: FormBuilder,
+    private userStore: UserStore,
+    private router: Router) {
+    this.registrationForm = this.fb.group({
+      given_name: ['', Validators.required],
+      family_name: ['', Validators.nullValidator],
+      email: ['', Validators.required],
+      password: ['', Validators.required]
+    });
+  }
+
+  async tryRegister() {
+    const response = await this.authentication.register(this.registrationForm.value as RegisterInfo);
+    if (!response.error) {
+      this.userStore.setCurrentUser(response.user!);
+      this.router.navigate(['/auth/profile']);
+      this.registered.emit();
+    } else {
+      alert(response.error);
+    }
+  }
+
+  showLoginForm() {
+    this.viewChange.emit();
+  }
+}

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

@@ -0,0 +1,42 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { ExternalLogin, Login } from '../models/login';
+import { RegisterInfo } from '../models/register-info';
+import { LoginResult, User } from '../models/user';
+import { parseUser } from './jwt-util';
+
+/** Authentication API Service */
+@Injectable({
+  providedIn: 'root'
+})
+export class Authentication {
+
+  constructor(private http: HttpClient) { }
+
+  /** Send basic credentials to login endpoint. */
+  public async login(userData: Login): Promise<LoginResult> {
+    return this.loginPost('/login', userData);
+  }
+
+  /** Send user info from 3rd party provider to external login endpoint. */
+  public async loginWith(userInfo: ExternalLogin): Promise<LoginResult> {
+    return this.loginPost('/extlogin', userInfo);
+  }
+
+  /** Send user info to register endpoint. */
+  public async register(userData: RegisterInfo): Promise<LoginResult> {
+    return this.loginPost('/register', userData);
+  }
+
+  protected async loginPost(endpoint: string, userData: any): Promise<LoginResult> {
+    let user: User;
+    try {
+      const data = await this.http.post(endpoint, userData).toPromise() as string;
+      user = parseUser(data);
+    } catch (e: any) {
+      return { error: e.message };
+    }
+
+    return { user };
+  }
+}

package/igx-ts/projects/side-nav-auth/files/src/app/authentication/services/external-auth-configs.ts

@@ -1,18 +1,13 @@
+export const AUTH_BASE_PATH = 'auth';
+
 export enum ExternalAuthProvider {
   Facebook = 'Facebook',
   Google = 'Google',
   Microsoft = 'Microsoft'
 }
 
+/** Configuration for Facebook-based external authentication. */
 export interface ExternalAuthConfig {
-  stsServer: string;
   client_id: string;
-  scope: string;
-  provider: ExternalAuthProvider;
   redirect_url: string;
-  response_type: string;
-  post_logout_redirect_uri: string;
-  post_login_route: string;
-  auto_userinfo: boolean;
-  max_id_token_iat_offset_allowed_in_seconds: number;
 }