refactor: set jwt token to a cookie instead of localStorage

apps/conduit/src/app/app.component.spec.ts

@@ -4,7 +4,6 @@ import { AppComponent } from './app.component';
 import { RouterTestingModule } from '@angular/router/testing';
 import { FooterComponent } from './layout/footer/footer.component';
 import { NavbarComponent } from './layout/navbar/navbar.component';
-import { LocalStorageJwtService } from '@realworld/auth/data-access';
 
 describe('AppComponent', () => {
   let component: AppComponent;
@@ -14,7 +13,6 @@ describe('AppComponent', () => {
     TestBed.configureTestingModule({
       imports: [RouterTestingModule],
       declarations: [AppComponent, FooterComponent, NavbarComponent],
-      providers: [LocalStorageJwtService],
     }).compileComponents();
   }));
 

apps/conduit/src/app/app.component.ts

@@ -1,7 +1,6 @@
-import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
+import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { RouterModule } from '@angular/router';
-import { AuthStore, LocalStorageJwtService } from '@realworld/auth/data-access';
-import { filter, take } from 'rxjs/operators';
+import { AuthStore } from '@realworld/auth/data-access';
 import { FooterComponent } from './layout/footer/footer.component';
 import { NavbarComponent } from './layout/navbar/navbar.component';
 
@@ -11,17 +10,10 @@ import { NavbarComponent } from './layout/navbar/navbar.component';
   imports: [FooterComponent, NavbarComponent, RouterModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class AppComponent implements OnInit {
-  private readonly localStorageJwtService = inject(LocalStorageJwtService);
+export class AppComponent {
   protected readonly authStore = inject(AuthStore);
 
-  ngOnInit() {
-    this.localStorageJwtService
-      .getItem()
-      .pipe(
-        take(1),
-        filter((token) => !!token),
-      )
-      .subscribe(() => this.authStore.getUser());
+  constructor() {
+    this.authStore.getUser();
   }
 }

apps/conduit/src/app/app.config.ts

@@ -1,6 +1,6 @@
 import { ApplicationConfig, provideExperimentalZonelessChangeDetection } from '@angular/core';
 import { provideRouter, withComponentInputBinding, withViewTransitions } from '@angular/router';
-import { authGuard, tokenInterceptor } from '@realworld/auth/data-access';
+import { authGuard } from '@realworld/auth/data-access';
 import { errorHandlingInterceptor } from '@realworld/core/error-handler';
 import { provideHttpClient, withInterceptors } from '@angular/common/http';
 import { API_URL } from '@realworld/core/http-client';
@@ -50,7 +50,7 @@ export const appConfig: ApplicationConfig = {
       withViewTransitions(),
       withComponentInputBinding(),
     ),
-    provideHttpClient(withInterceptors([errorHandlingInterceptor, tokenInterceptor])),
+    provideHttpClient(withInterceptors([errorHandlingInterceptor])),
     { provide: API_URL, useValue: environment.api_url },
   ],
 };

apps/conduit/src/environments/environment.ts

@@ -5,5 +5,5 @@
 
 export const environment = {
   production: false,
-  api_url: 'https://real-world-app-39656dff2ddc.herokuapp.com/api',
+  api_url: 'http://localhost:3000/api',
 };

libs/auth/data-access/src/auth.store.spec.ts

@@ -3,13 +3,12 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { inject, TestBed } from '@angular/core/testing';
 
 import { AuthStore } from './auth.store';
-import { LocalStorageJwtService } from './services/local-storage-jwt.service';
 
 describe('AuthStore', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
-      providers: [AuthStore, LocalStorageJwtService, ApiService],
+      providers: [AuthStore, ApiService],
     });
   });
 

libs/auth/data-access/src/auth.store.ts

@@ -5,7 +5,6 @@ import { inject } from '@angular/core';
 import { AuthService } from './services/auth.service';
 import { exhaustMap, pipe, switchMap, tap } from 'rxjs';
 import { tapResponse } from '@ngrx/operators';
-import { LocalStorageJwtService } from './services/local-storage-jwt.service';
 import { Router } from '@angular/router';
 import { LoginUser, NewUser, User } from '@realworld/core/api-types';
 import { setLoaded, withCallState } from '@realworld/core/data-access';
@@ -15,13 +14,7 @@ export const AuthStore = signalStore(
   { providedIn: 'root' },
   withState<AuthState>(authInitialState),
   withMethods(
-    (
-      store,
-      formErrorsStore = inject(FormErrorsStore),
-      authService = inject(AuthService),
-      localStorageService = inject(LocalStorageJwtService),
-      router = inject(Router),
-    ) => ({
+    (store, formErrorsStore = inject(FormErrorsStore), authService = inject(AuthService), router = inject(Router)) => ({
       getUser: rxMethod<void>(
         pipe(
           switchMap(() => authService.user()),
@@ -35,7 +28,6 @@ export const AuthStore = signalStore(
               tapResponse({
                 next: ({ user }) => {
                   patchState(store, { user, loggedIn: true });
-                  localStorageService.setItem(user.token);
                   router.navigateByUrl('/');
                 },
                 error: ({ error }) => formErrorsStore.setErrors(error.errors),
@@ -51,7 +43,6 @@ export const AuthStore = signalStore(
               tapResponse({
                 next: ({ user }) => {
                   patchState(store, { user, loggedIn: true });
-                  localStorageService.setItem(user.token);
                   router.navigateByUrl('/');
                 },
                 error: ({ error }) => formErrorsStore.setErrors(error.errors),
@@ -67,7 +58,6 @@ export const AuthStore = signalStore(
               tapResponse({
                 next: ({ user }) => {
                   patchState(store, { user });
-                  localStorageService.setItem(user.token);
                   router.navigate(['profile', user.username]);
                 },
                 error: ({ error }) => formErrorsStore.setErrors(error.errors),
@@ -76,11 +66,21 @@ export const AuthStore = signalStore(
           ),
         ),
       ),
-      logout: () => {
-        patchState(store, { user: initialUserValue, loggedIn: false });
-        localStorageService.removeItem();
-        router.navigateByUrl('login');
-      },
+      logout: rxMethod<void>(
+        pipe(
+          exhaustMap(() =>
+            authService.logout().pipe(
+              tapResponse({
+                next: () => {
+                  patchState(store, { user: initialUserValue, loggedIn: false });
+                  router.navigateByUrl('login');
+                },
+                error: ({ error }) => formErrorsStore.setErrors(error.errors),
+              }),
+            ),
+          ),
+        ),
+      ),
     }),
   ),
   withCallState({ collection: 'getUser' }),

libs/auth/data-access/src/index.ts

@@ -1,5 +1,3 @@
-export * from './services/token-interceptor.service';
-export * from './services/local-storage-jwt.service';
 export * from './services/auth-guard';
 
 export { AuthStore } from './auth.store';

libs/auth/data-access/src/services/auth-guard.spec.ts

@@ -41,7 +41,7 @@ describe('authGuard', () => {
   });
 
   it('should return login urlTree if the user is not logged in', () => {
-    jest.spyOn(storage, 'getItem').mockImplementationOnce(() => of(null));
+    jest.spyOn(storage, 'getItem').mockImplementationOnce(() => null);
 
     const result = TestBed.runInInjectionContext(() => authGuard());
 

libs/auth/data-access/src/services/auth-guard.ts

@@ -1,20 +1,14 @@
 import { inject } from '@angular/core';
-import { map, Observable, take } from 'rxjs';
 import { Router, UrlTree } from '@angular/router';
+import { AuthStore } from '../auth.store';
 
-import { LocalStorageJwtService } from './local-storage-jwt.service';
-
-export const authGuard = (): Observable<boolean | UrlTree> => {
-  const storage = inject(LocalStorageJwtService);
+export const authGuard = (): boolean | UrlTree => {
   const router = inject(Router);
+  const authStore = inject(AuthStore);
+
+  if (!authStore.loggedIn()) {
+    return router.parseUrl('/login');
+  }
 
-  return storage.getItem().pipe(
-    map((token) => {
-      if (!token) {
-        return router.parseUrl('/login');
-      }
-      return true;
-    }),
-    take(1),
-  );
+  return true;
 };

libs/auth/data-access/src/services/auth.service.spec.ts

@@ -3,13 +3,12 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { inject, TestBed } from '@angular/core/testing';
 
 import { AuthService } from './auth.service';
-import { LocalStorageJwtService } from './local-storage-jwt.service';
 
 describe('AuthService', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports: [HttpClientTestingModule],
-      providers: [AuthService, LocalStorageJwtService, ApiService],
+      providers: [AuthService, ApiService],
     });
   });
 

libs/auth/data-access/src/services/auth.service.ts

@@ -20,6 +20,10 @@ export class AuthService {
     return this.apiService.post<UserResponse, LoginUserRequest>('/users/login', { user: credentials });
   }
 
+  logout(): Observable<{ message: string }> {
+    return this.apiService.post<{ message: string }, void>('/users/logout');
+  }
+
   register(credentials: NewUser): Observable<UserResponse> {
     return this.apiService.post<UserResponse, NewUserRequest>('/users', { user: credentials });
   }

libs/core/http-client/src/lib/api.service.ts

@@ -12,22 +12,28 @@ export class ApiService {
     return this.http.get<T>(`${this.api_url}${url}`, {
       headers: this.headers,
       params,
+      withCredentials: true,
     });
   }
 
   post<T, D>(url: string, data?: D): Observable<T> {
-    return this.http.post<T>(`${this.api_url}${url}`, JSON.stringify(data), { headers: this.headers });
+    return this.http.post<T>(`${this.api_url}${url}`, JSON.stringify(data), {
+      headers: this.headers,
+      withCredentials: true,
+    });
   }
 
   put<T, D>(url: string, data: D): Observable<T> {
     return this.http.put<T>(`${this.api_url}${url}`, JSON.stringify(data), {
       headers: this.headers,
+      withCredentials: true,
     });
   }
 
   delete<T>(url: string): Observable<T> {
     return this.http.delete<T>(`${this.api_url}${url}`, {
       headers: this.headers,
+      withCredentials: true,
     });
   }