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

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

@@ -0,0 +1,103 @@
+import { Location } from '@angular/common';
+import { Injectable } from '@angular/core';
+import { Router } from '@angular/router';
+import { OidcSecurityService } from 'angular-auth-oidc-client';
+import { ExternalLogin } from '../models/login';
+import { AuthProvider } from '../providers/auth-provider';
+import { FacebookProvider } from '../providers/facebook-provider';
+import { GoogleProvider } from '../providers/google-provider';
+import { MicrosoftProvider } from '../providers/microsoft-provider';
+import { ExternalAuthConfig, ExternalAuthProvider, AUTH_BASE_PATH } from './external-auth-configs';
+import { LocalStorageService } from './local-storage';
+
+export enum ExternalAuthRedirectUrl {
+  Facebook = 'redirect-facebook',
+  Google = 'redirect-google',
+  Microsoft = 'redirect-microsoft'
+}
+
+@Injectable({
+  providedIn: 'root'
+})
+export class ExternalAuth {
+  protected providers: Map<ExternalAuthProvider, AuthProvider> = new Map();
+  public get activeProvider(): ExternalAuthProvider {
+    return this.localStorage.getItem('extActiveProvider') as ExternalAuthProvider;
+  }
+  public set activeProvider(provider: ExternalAuthProvider) {
+    this.localStorage.setItem('extActiveProvider', provider);
+  }
+
+  constructor(
+    private router: Router,
+    private oidcSecurityService: OidcSecurityService,
+    private location: Location,
+    private localStorage: LocalStorageService) {
+  }
+
+  public hasProvider(provider?: ExternalAuthProvider) {
+    if (provider) {
+      return this.providers.has(provider);
+    }
+    return this.providers.size > 0;
+  }
+
+  public addGoogle() {
+    this.providers.set(
+      ExternalAuthProvider.Google,
+      new GoogleProvider(this.oidcSecurityService, ExternalAuthProvider.Google)
+    );
+  }
+
+  public addFacebook(clientID: string) {
+    const fbConfig: ExternalAuthConfig = {
+      client_id: clientID,
+      redirect_url: `/${AUTH_BASE_PATH}/${ExternalAuthRedirectUrl.Facebook}`
+    };
+
+    this.providers.set(
+      ExternalAuthProvider.Facebook,
+      new FacebookProvider(fbConfig, this.router)
+    );
+  }
+
+  public addMicrosoft() {
+    this.providers.set(
+      ExternalAuthProvider.Microsoft,
+      new MicrosoftProvider(this.oidcSecurityService, ExternalAuthProvider.Microsoft)
+    );
+  }
+
+  public login(provider: ExternalAuthProvider) {
+    const extProvider = this.providers.get(provider);
+    if (extProvider) {
+      this.activeProvider = provider;
+      extProvider.login();
+    }
+  }
+
+  /** Returns user info from the given external auth provider */
+  public async getUserInfo(provider: ExternalAuthProvider): Promise<ExternalLogin> {
+    const extProvider = this.providers.get(provider);
+    if (extProvider) {
+      const userInfo = await extProvider.getUserInfo();
+      userInfo.externalProvider = provider;
+      return userInfo;
+    }
+    return Promise.reject(null);
+  }
+
+  /**
+   * logout
+   */
+  public logout() {
+    if (this.activeProvider) {
+      this.providers.get(this.activeProvider)!.logout();
+    }
+  }
+
+  /** Returns an absolute URL like <app root URL>/path */
+  protected getAbsoluteUrl(path: string) {
+    return window.location.origin + this.location.prepareExternalUrl(path);
+  }
+}

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

@@ -0,0 +1,154 @@
+import {
+  HttpEvent,
+  HttpHandler,
+  HttpInterceptor,
+  HttpRequest,
+  HttpResponse,
+  HTTP_INTERCEPTORS
+} from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable, of, throwError } from 'rxjs';
+import { dematerialize, materialize, mergeMap } from 'rxjs/operators';
+import { ExternalLogin } from '../models/login';
+import { RegisterInfo } from '../models/register-info';
+import { UserJWT } from '../models/user';
+import { encodeBase64Url } from './jwt-util';
+import { LocalStorageService } from './local-storage';
+import msKeys from './microsoft-keys';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class BackendInterceptor implements HttpInterceptor {
+  users: StorageUser[] = [];
+
+  constructor(private localStorage: LocalStorageService) { }
+
+  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
+    const storedUsers = this.localStorage.getItem('users');
+    this.users = storedUsers ? JSON.parse(storedUsers) : [];
+    return of(null).pipe(mergeMap(() => {
+      // login user
+      if (request.url.endsWith('/login') && request.method === 'POST') {
+        return this.loginHandle(request);
+      }
+
+      // register user
+      if (request.url.endsWith('/register') && request.method === 'POST') {
+        const user = this.getStorageUser(request);
+        return this.registerHandle(user);
+      }
+
+      // login user with external provider
+      if (request.url.endsWith('/extlogin') && request.method === 'POST') {
+        const user = this.getStorageExtUser(request);
+        return this.registerHandle(user, true);
+      }
+
+      // Microsoft-specific OIDC discovery URI
+      if (request.url.endsWith('ms-discovery/keys') && request.method === 'GET') {
+        return of(new HttpResponse({ status: 200, body: msKeys }));
+      }
+
+      return next.handle(request);
+    }))
+      .pipe(materialize())
+      .pipe(dematerialize());
+  }
+
+  registerHandle(newUser: StorageUser, update = false) {
+    const duplicateUser = this.users.find(user => user.email === newUser.email);
+    if (duplicateUser && !update) {
+      return throwError({ error: { message: 'Account with email "' + newUser.email + '" already exists' } });
+    }
+    if (update && duplicateUser) {
+      Object.assign(duplicateUser, newUser);
+    } else {
+      this.users.push(newUser);
+    }
+    this.localStorage.setItem('users', JSON.stringify(this.users));
+
+    const body = this.getUserJWT(newUser);
+
+    return of(new HttpResponse({ status: 200, body: this.generateToken(body) }));
+  }
+
+  loginHandle(request: HttpRequest<any>) {
+    const foundUser = this.users.find(user => {
+      return user.email === request.body.email;
+    });
+    // authenticate
+    if (foundUser) {
+      const body = this.getUserJWT(foundUser);
+
+      return of(new HttpResponse({ status: 200, body: this.generateToken(body) }));
+    } else {
+      return throwError({ status: 401, error: { message: 'User does not exist!' } });
+    }
+  }
+
+  private getStorageUser(request: HttpRequest<any>): StorageUser {
+    const user = request.body as RegisterInfo;
+    let fullName = user.given_name;
+    fullName += user.family_name ? ` ${user.family_name}` : '';
+    return {
+      id: String(this.users.length + 1),
+      name: fullName,
+      email: user.email,
+      given_name: user.given_name,
+      family_name: user.family_name,
+      picture: ''
+    };
+  }
+
+  private getStorageExtUser(request: HttpRequest<any>): StorageUser {
+    const user = request.body as ExternalLogin;
+    return {
+      id: user.id,
+      name: user.name,
+      email: user.email,
+      given_name: user.given_name || user.name.split(' ').shift()!,
+      family_name: user.family_name || user.name.split(' ').pop()!,
+      picture: user.picture,
+      externalToken: user.externalToken,
+      externalProvider: user.externalProvider
+    };
+  }
+
+  private getUserJWT(user: StorageUser): UserJWT {
+    return {
+      exp: Math.floor(new Date().getTime() / 1000) + (7 * 24 * 60 * 60),
+      name: user.name,
+      given_name: user.given_name,
+      family_name: user.family_name,
+      email: user.email,
+      picture: user.picture
+    };
+  }
+
+  /** Note: This is used for example purposes only and does NOT generate a valid JWT w/ base64Url encoding */
+  private generateToken(payload: any): string {
+    const header = {
+      alg: 'Mock',
+      typ: 'JWT'
+    };
+    return encodeBase64Url(header) + '.' + encodeBase64Url(payload) + '.mockSignature';
+  }
+}
+
+interface StorageUser {
+  id: string;
+  name: string;
+  email: string;
+  given_name: string;
+  family_name: string;
+  picture?: string;
+  externalToken?: string;
+  externalProvider?: string;
+}
+
+export const BackendProvider = {
+  provide: HTTP_INTERCEPTORS,
+  useClass: BackendInterceptor,
+  multi: true
+};

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

@@ -1,16 +1,16 @@
 import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
-import { UserService } from '../services/user.service';
+import { UserStore } from '../services/user-store';
 
 @Injectable({
   providedIn: 'root'
 })
 export class JwtInterceptor implements HttpInterceptor {
-  constructor(private userService: UserService) { }
+  constructor(private userStore: UserStore) { }
 
   intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    const currentUser = this.userService.currentUser;
+    const currentUser = this.userStore.currentUser;
     if (currentUser && currentUser.token) {
       request = request.clone({
         setHeaders: {

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

@@ -4,6 +4,8 @@ import { decodeBase64Url, decodeJWT, parseUser } from './jwt-util';
 import { JwtInterceptor } from './jwt.interceptor';
 
 describe('JWT Tests', () => {
+  afterEach(() => { vi.restoreAllMocks(); });
+
   describe(`JWT Interceptor`, () => {
     const mockService = {} as any;
     const jwtInterceptor = new JwtInterceptor(mockService);
@@ -19,7 +21,7 @@ describe('JWT Tests', () => {
       const mockNext = {
         handle: () => new Observable()
       } as any;
-      spyOn(mockNext, 'handle').and.callThrough();
+      vi.spyOn(mockNext, 'handle');
       mockService.currentUser = false;
       // call w/o current user
       jwtInterceptor.intercept(mockRequest, mockNext).pipe(take(1)).subscribe(() => { });
@@ -34,7 +36,7 @@ describe('JWT Tests', () => {
       mockService.currentUser = {
         token: 'test_token'
       };
-      spyOn(mockRequest, 'clone').and.callThrough();
+      vi.spyOn(mockRequest, 'clone');
       jwtInterceptor.intercept(mockRequest, mockNext).pipe(take(1)).subscribe(() => { });
       expect(mockRequest.clone).toHaveBeenCalledWith({
         setHeaders: {
@@ -67,7 +69,7 @@ describe('JWT Tests', () => {
 
     it(`Should properly handle 'parseUser'`, () => {
       expect(() => parseUser('not valid user name')).toThrow();
-      spyOn(JSON, 'parse').and.returnValue({ payload: 'Mock payload' });
+      vi.spyOn(JSON, 'parse').mockReturnValue({ payload: 'Mock payload' });
       expect(parseUser('123.123')).toEqual({ payload: 'Mock payload', token: '123.123' } as any);
     });
   });