feat: TT-453 add Authentication with google locally

Author: ararcos

package.json

@@ -35,6 +35,7 @@
     "@types/datatables.net-buttons": "1.4.3",
     "angular-calendar": "0.28.26",
     "angular-datatables": "9.0.2",
+    "angularx-social-login": "^3.5.7",
     "bootstrap": "4.4.1",
     "datatables.net": "1.10.22",
     "datatables.net-buttons": "1.6.2",

src/app/app.module.ts

@@ -87,6 +87,8 @@ import { CalendarComponent } from './modules/time-entries/components/calendar/ca
 import { DropdownComponent } from './modules/shared/components/dropdown/dropdown.component';
 import { NgSelectModule } from '@ng-select/ng-select';
 import { DarkModeComponent } from './modules/shared/components/dark-mode/dark-mode.component';
+import { SocialLoginModule, SocialAuthServiceConfig } from 'angularx-social-login';
+import { GoogleLoginProvider } from 'angularx-social-login';
 
 const maskConfig: Partial<IConfig> = {
   validation: false,
@@ -184,7 +186,8 @@ const maskConfig: Partial<IConfig> = {
       provide: DateAdapter,
       useFactory: adapterFactory,
     }),
-    NgSelectModule
+    NgSelectModule,
+    SocialLoginModule
   ],
   providers: [
     {
@@ -194,6 +197,20 @@ const maskConfig: Partial<IConfig> = {
     },
     DatePipe,
     CookieService,
+    {
+      provide: 'SocialAuthServiceConfig',
+      useValue: {
+        autoLogin: false,
+        providers: [
+          {
+            id: GoogleLoginProvider.PROVIDER_ID,
+            provider: new GoogleLoginProvider(
+              '711486856840-f8u9pdmkk44nmkb0c9lbsjvolp2hulur.apps.googleusercontent.com'
+            )
+          }
+        ]
+      } as SocialAuthServiceConfig,
+    }
   ],
   bootstrap: [AppComponent],
 })

src/app/guards/login-guard/login.guard.spec.ts

@@ -4,6 +4,9 @@ import { Router } from '@angular/router';
 
 import { AzureAdB2CService } from '../../modules/login/services/azure.ad.b2c.service';
 import { LoginGuard } from './login.guard';
+import { LoginService } from '../../modules/login/services/login.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { SocialAuthService } from 'angularx-social-login';
 
 
 describe('LoginGuard', () => {
@@ -15,29 +18,42 @@ describe('LoginGuard', () => {
       return true;
     }
   };
+  let loginService: LoginService;
+  const loginServiceStub = {
+    isLogin() {
+      return true;
+    }
+  };
+  const socialAuthServiceStub = jasmine.createSpyObj('SocialAuthService', ['authState']);
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [ RouterTestingModule ],
+      imports: [ RouterTestingModule, HttpClientTestingModule ],
       providers: [
         { providers: AzureAdB2CService, useValue: azureAdB2CServiceStub},
+        { providers: LoginService, useValue: loginServiceStub},
+        { provide: SocialAuthService, useValue: socialAuthServiceStub }
       ]
     });
     loginGuard = TestBed.inject(LoginGuard);
     azureAdB2CService = TestBed.inject(AzureAdB2CService);
+    loginService = TestBed.inject(LoginService);
   });
 
   it('should be created', () => {
     expect(loginGuard).toBeTruthy();
   });
 
   it('can activate the route when user is logged-in', () => {
+    loginGuard.isProduction = true;
     spyOn(azureAdB2CService, 'isLogin').and.returnValue(true);
     const canActivate = loginGuard.canActivate();
     expect(azureAdB2CService.isLogin).toHaveBeenCalled();
     expect(canActivate).toEqual(true);
   });
 
+
   it('can not active the route and is redirected to login if user is not logged-in', inject([Router],  (router: Router) => {
+    loginGuard.isProduction = true;
     spyOn(azureAdB2CService, 'isLogin').and.returnValue(false);
     spyOn(router, 'navigate').and.stub();
     const canActivate = loginGuard.canActivate();

src/app/guards/login-guard/login.guard.ts

@@ -1,21 +1,37 @@
 import { Injectable } from '@angular/core';
 import { Router, CanActivate } from '@angular/router';
 import { AzureAdB2CService } from '../../modules/login/services/azure.ad.b2c.service';
+import { LoginService } from '../../modules/login/services/login.service';
+import { environment } from 'src/environments/environment';
 
 @Injectable({
-  providedIn: 'root'
+  providedIn: 'root',
 })
 export class LoginGuard implements CanActivate {
-
-  constructor(private azureAdB2CService: AzureAdB2CService, private router: Router) { }
+  isProduction = environment.production;
+  constructor(
+    private azureAdB2CService: AzureAdB2CService,
+    private router: Router,
+    private loginService: LoginService
+  ) {}
 
   canActivate() {
-    if (this.azureAdB2CService.isLogin()) {
+    if (this.isProduction) {
+      if (this.azureAdB2CService.isLogin()) {
         this.azureAdB2CService.setCookies();
         return true;
+      } else {
+        this.router.navigate(['login']);
+        return false;
+      }
     } else {
+      if (this.loginService.isLogin()) {
+        this.loginService.setCookies();
+        return true;
+      } else {
         this.router.navigate(['login']);
         return false;
+      }
     }
   }
 }

src/app/modules/home/home.component.spec.ts

@@ -3,6 +3,7 @@ import { MockStore, provideMockStore } from '@ngrx/store/testing';
 import { AzureAdB2CService } from '../login/services/azure.ad.b2c.service';
 import { LoadUser } from '../user/store/user.actions';
 import { HomeComponent } from './home.component';
+import { LoginService } from '../login/services/login.service';
 
 describe('HomeComponent', () => {
   let component: HomeComponent;
@@ -13,6 +14,9 @@ describe('HomeComponent', () => {
   const azureB2CServiceStub = {
     getUserId: () => 'user_id',
   };
+  const loginServiceStub = {
+    getUserId: () => 'user_id',
+  };
 
   beforeEach(
     waitForAsync(() => {
@@ -21,6 +25,7 @@ describe('HomeComponent', () => {
         providers: [
           provideMockStore({ initialState }),
           { provide: AzureAdB2CService, useValue: azureB2CServiceStub },
+          { provide: LoginService, useValue: loginServiceStub },
         ],
       }).compileComponents();
     })
@@ -30,7 +35,6 @@ describe('HomeComponent', () => {
     fixture = TestBed.createComponent(HomeComponent);
     azureAdB2CService = TestBed.inject(AzureAdB2CService);
     store = TestBed.inject(MockStore);
-
     component = fixture.componentInstance;
     fixture.detectChanges();
     store.setState(initialState);
@@ -41,6 +45,7 @@ describe('HomeComponent', () => {
   });
 
   it('onInit, LoadUser action is dispatched', () => {
+    component.isProduction = true;
     const userId = 'user_id';
     spyOn(azureAdB2CService, 'getUserId').and.returnValue(userId);
     spyOn(store, 'dispatch');

src/app/modules/home/home.component.ts

@@ -1,22 +1,25 @@
 import { Component, OnInit } from '@angular/core';
 import { Store } from '@ngrx/store';
 import { LoadUser } from 'src/app/modules/user/store/user.actions';
+import { environment } from 'src/environments/environment';
 import { AzureAdB2CService } from '../login/services/azure.ad.b2c.service';
+import { LoginService } from '../login/services/login.service';
 
 @Component({
   selector: 'app-home',
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss'],
 })
 export class HomeComponent implements OnInit {
-
+  isProduction = environment.production;
   constructor(
     private azureAdB2CService: AzureAdB2CService,
+    private loginService: LoginService,
     private store: Store
   ) { }
 
   ngOnInit(): void {
-    const userId = this.azureAdB2CService.getUserId();
+    const userId =  this.isProduction ? this.azureAdB2CService.getUserId() : this.loginService.getUserId();
     this.store.dispatch(new LoadUser(userId));
   }
 }

src/app/modules/login/login.component.html

@@ -7,8 +7,16 @@
     <h3>Please log in</h3>
   </div>
 
-  <div class="login-controls">
+  <div class="login-controls" *ngIf="!isDevelopment">
     <button (click)="login()" class="btn btn-primary">login</button>
   </div>
 
+  <div class="container" style="max-width: 550px" *ngIf="isDevelopment">
+    <div >
+      <div class="login-controls">
+        <button type="button" (click)="loginWithGoogle()"  class="btn btn-primary">Login with Google</button>
+      </div>
+    </div>
+  </div>
+
 </div>

src/app/modules/login/login.component.spec.ts

@@ -5,11 +5,15 @@ import { of } from 'rxjs';
 import { LoginComponent } from './login.component';
 import { Router } from '@angular/router';
 import { FeatureToggleCookiesService } from '../shared/feature-toggles/feature-toggle-cookies/feature-toggle-cookies.service';
+import { LoginService } from './services/login.service';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+import { SocialAuthService } from 'angularx-social-login';
 
 describe('LoginComponent', () => {
   let component: LoginComponent;
   let fixture: ComponentFixture<LoginComponent>;
   let azureAdB2CService: AzureAdB2CService;
+  let loginService: LoginService;
   let featureToggleCookiesService: FeatureToggleCookiesService;
 
   const azureAdB2CServiceStub = {
@@ -23,29 +27,46 @@ describe('LoginComponent', () => {
     }
   };
 
+  const loginServiceStub = {
+    isLogin() {
+      return true;
+    },
+    signIn() {
+      return of();
+    },
+    setCookies() {
+    }
+  };
+
   const featureToggleCookiesServiceStub = {
     setCookies() {
       return null;
     }
   };
 
+  const socialAuthServiceStub = jasmine.createSpyObj('SocialAuthService', ['authState']);
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [ RouterTestingModule ],
+      imports: [ RouterTestingModule, HttpClientTestingModule],
       declarations: [ LoginComponent ],
       providers: [
         { providers: AzureAdB2CService, useValue: azureAdB2CServiceStub},
-        { providers: FeatureToggleCookiesService, useValue: featureToggleCookiesServiceStub}
+        { providers: FeatureToggleCookiesService, useValue: featureToggleCookiesServiceStub},
+        { providers: LoginService, useValue: loginServiceStub},
+        { provide: SocialAuthService, useValue: socialAuthServiceStub }
       ]
     })
     .compileComponents();
   }));
 
   beforeEach(() => {
+    socialAuthServiceStub.authState = of(null);
     fixture = TestBed.createComponent(LoginComponent);
     component = fixture.componentInstance;
+    component.isDevelopment = false;
     fixture.detectChanges();
     azureAdB2CService = TestBed.inject(AzureAdB2CService);
+    loginService = TestBed.inject(LoginService);
     featureToggleCookiesService = TestBed.inject(FeatureToggleCookiesService);
   });
 

src/app/modules/login/login.component.ts

@@ -3,20 +3,41 @@ import { AzureAdB2CService } from './services/azure.ad.b2c.service';
 import { Router } from '@angular/router';
 import { FeatureToggleCookiesService } from '../shared/feature-toggles/feature-toggle-cookies/feature-toggle-cookies.service';
 
+import { SocialAuthService, SocialUser } from 'angularx-social-login';
+import { environment } from 'src/environments/environment';
+import { LoginService } from './services/login.service';
 @Component({
   selector: 'app-login',
   templateUrl: './login.component.html',
-  styleUrls: ['./login.component.scss']
+  styleUrls: ['./login.component.scss'],
 })
-
 export class LoginComponent {
+  socialUser: SocialUser;
+  isDevelopment = true;
 
   constructor(
     private azureAdB2CService: AzureAdB2CService,
     private router: Router,
-    private featureToggleCookiesService: FeatureToggleCookiesService
+    private featureToggleCookiesService: FeatureToggleCookiesService,
+    private socialAuthService: SocialAuthService,
+    private loginService?: LoginService
   ) {}
 
+  OnInit() {
+    this.isDevelopment = !environment.production;
+    this.socialAuthService.authState.subscribe((user) => {
+      if (user != null) {
+        this.featureToggleCookiesService.setCookies();
+        this.loginService.setLocalStorage('idToken', user.idToken);
+        this.loginService.getUser(user.idToken).subscribe((response) => {
+          this.loginService.setCookies();
+          this.loginService.setLocalStorage('user2', JSON.stringify(response));
+          this.router.navigate(['']);
+        });
+      }
+    });
+  }
+
   login(): void {
     if (this.azureAdB2CService.isLogin()) {
       this.router.navigate(['']);
@@ -29,4 +50,11 @@ export class LoginComponent {
     }
   }
 
+  loginWithGoogle(): void {
+    this.loginService.signIn();
+  }
+
+  logOut(): void {
+    this.loginService.logout();
+  }
 }