TT-15 fix: Keep the user logged in the browser

Author: Guido Quezada

package.json

@@ -38,6 +38,7 @@
     "minimist": "^1.2.5",
     "moment": "^2.25.3",
     "msal": "^1.2.1",
+    "ngx-cookie-service": "^11.0.2",
     "ngx-mask": "^9.1.2",
     "ngx-pagination": "^5.0.0",
     "ngx-toastr": "^12.0.1",

src/app/app.module.ts

@@ -16,6 +16,7 @@ import { AutocompleteLibModule } from 'angular-ng-autocomplete';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { CookieService } from 'ngx-cookie-service';
 import { NavbarComponent } from './modules/shared/components/navbar/navbar.component';
 import { UserComponent } from './modules/shared/components/user/user.component';
 import { SidebarComponent } from './modules/shared/components/sidebar/sidebar.component';
@@ -159,7 +160,8 @@ const maskConfig: Partial<IConfig> = {
       useClass: InjectTokenInterceptor,
       multi: true,
     },
-    DatePipe
+    DatePipe,
+    CookieService,
   ],
   bootstrap: [AppComponent],
 })

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

@@ -11,10 +11,11 @@ export class LoginGuard implements CanActivate {
 
   canActivate() {
     if (this.azureAdB2CService.isLogin()) {
+        this.azureAdB2CService.setCookies();
         return true;
     } else {
         this.router.navigate(['login']);
         return false;
     }
-}
+  }
 }

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

@@ -17,6 +17,7 @@ export class LoginComponent {
       this.router.navigate(['']);
     } else {
       this.azureAdB2CService.signIn().subscribe(() => {
+        this.azureAdB2CService.setCookies();
         this.router.navigate(['']);
       });
     }

src/app/modules/login/services/azure.ad.b2c.service.ts

@@ -1,19 +1,26 @@
 import { Injectable } from '@angular/core';
 import { UserAgentApplication } from 'msal';
 import { from, Observable } from 'rxjs';
+import { CookieService } from 'ngx-cookie-service';
 
 import { AUTHORITY, CLIENT_ID, SCOPES } from '../../../../environments/environment';
 
 @Injectable({
   providedIn: 'root',
 })
 export class AzureAdB2CService {
-  msalConfig = {
+
+  constructor(private cookieService: CookieService) {}
+
+  msalConfig: any = {
     auth: {
       clientId: CLIENT_ID,
       authority: AUTHORITY,
       validateAuthority: false,
     },
+    cache: {
+      cacheLocation: 'localStorage',
+    },
   };
 
   tokenRequest = {
@@ -27,6 +34,8 @@ export class AzureAdB2CService {
   }
 
   logout() {
+    this.cookieService.delete('msal.idtoken');
+    this.cookieService.delete('msal.idtoken');
     this.msal.logout();
   }
 
@@ -39,22 +48,32 @@ export class AzureAdB2CService {
   }
 
   isLogin() {
-    return this.msal.getAccount() ? true : false;
+    return this.msal.getAccount() && this.cookieService.check('msal.idtoken') ? true : false;
+  }
+
+  setCookies() {
+    this.cookieService.set('msal.client.info', this.getBearerClientInfo(), 2);
+    this.cookieService.set('msal.idtoken', this.getBearerToken(), 2);
   }
 
   setTenantId() {
     if (this.msal.getAccount() && this.msal.getAccount().idToken) {
       const pathArray = this.msal.getAccount().idToken.iss.split('/');
       const tenantId = pathArray[3];
-      sessionStorage.setItem('tenant_id', tenantId);
+      localStorage.setItem('tenant_id', tenantId);
     }
   }
 
   getTenantId(): string {
-    return sessionStorage.getItem('tenant_id');
+    return localStorage.getItem('tenant_id');
+  }
+
+  getBearerClientInfo(): string {
+    return localStorage.getItem('msal.client.info');
   }
+
   getBearerToken(): string {
-    return sessionStorage.getItem('msal.idtoken');
+    return localStorage.getItem('msal.idtoken');
   }
 
   getUserEmail(): string {