Use the XSRF-TOKEN cookie to set the x-xsrf-token header instead of the localstorage

package.json

@@ -47,7 +47,7 @@
     "mapbox-gl": "^0.54.1",
     "ng-inline-svg": "^8.2.1",
     "ng-lazyload-image": "^5.1.2",
-    "ngx-cookie-service": "^2.1.0",
+    "ngx-cookie-service": "^2.2.0",
     "ngx-infinite-scroll": "^6.0.1",
     "node-rsa": "^1.0.3",
     "rxjs": "^6.4.0",

src/app/app.module.ts

@@ -44,9 +44,6 @@ export function initAppConfig(appConfigService: AppConfigService) {
     BrowserModule,
     BrowserAnimationsModule,
     HttpClientModule,
-    HttpClientXsrfModule.withOptions({
-      headerName: 'x-xsrf-token',
-    }),
     CoreModule,
     EditorialisationModule,
     UserModule,

src/app/user/interceptors/xsrf-token.interceptor.ts

+import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+import { CookieService } from 'ngx-cookie-service';
+
+@Injectable()
+export class XSRFTokenInterceptor implements HttpInterceptor {
+
+  constructor(private cookieService: CookieService) { }
+
+  intercept(
+    req: HttpRequest<any>,
+    next: HttpHandler,
+  ): Observable<HttpEvent<any>> {
+    const xsrfToken = this.cookieService.get('XSRF-TOKEN');
+    let request = req;
+
+    if (xsrfToken) {
+      request = req.clone({
+        headers: req.headers.set('x-xsrf-token', xsrfToken),
+      });
+    }
+    return next.handle(request);
+  }
+}

src/app/user/services/user.service.ts

@@ -41,7 +41,6 @@ export class UserService {
   }
 
   resetAuth() {
-    localStorage.removeItem('xsrfToken');
     this.logout().subscribe();
     this._user = null;
     this._userStatusChangedSubject.next(false);

src/app/user/user.module.ts

@@ -6,6 +6,9 @@ import { UserComponents } from './components';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { UserGuards } from './guards';
 import { SharedModule } from '../shared/shared.module';
+import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { XSRFTokenInterceptor } from './interceptors/xsrf-token.interceptor';
+import { CookieService } from 'ngx-cookie-service';
 
 @NgModule({
   imports: [
@@ -18,6 +21,12 @@ import { SharedModule } from '../shared/shared.module';
   providers: [
     ...UserGuards,
     ...UserServices,
+    CookieService,
+    {
+      provide: HTTP_INTERCEPTORS,
+      useClass: XSRFTokenInterceptor,
+      multi: true,
+    },
   ],
   declarations: [...UserComponents],
 })