fix(sign-up): update auth state and routes guards

Author: nsemets

src/app/app.component.ts

@@ -4,6 +4,7 @@ import { ChangeDetectionStrategy, Component, OnInit } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
 import { GetCurrentUser } from '@core/store/user';
+import { InitializeAuth } from '@osf/features/auth/store';
 
 import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
 
@@ -15,9 +16,13 @@ import { FullScreenLoaderComponent, ToastComponent } from './shared/components';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent implements OnInit {
-  actions = createDispatchMap({ getCurrentUser: GetCurrentUser });
+  actions = createDispatchMap({
+    getCurrentUser: GetCurrentUser,
+    initializeAuth: InitializeAuth,
+  });
 
   ngOnInit(): void {
+    this.actions.initializeAuth();
     this.actions.getCurrentUser();
   }
 }

src/app/app.routes.ts

@@ -67,7 +67,6 @@ export const routes: Routes = [
       {
         path: 'collections',
         loadChildren: () => import('./features/collections/collections.routes').then((mod) => mod.collectionsRoutes),
-        canActivate: [authGuard],
       },
       {
         path: 'meetings',

src/app/core/components/header/header.component.html

@@ -2,7 +2,7 @@
   <osf-breadcrumb />
 
   <div class="header-dropdown-button ml-auto">
-    @if (isAuthenticated) {
+    @if (isAuthenticated()) {
       <p-button
         class="custom-dark-hover"
         icon="fas fa-chevron-down"

src/app/core/components/header/header.component.ts

@@ -1,4 +1,4 @@
-import { select } from '@ngxs/store';
+import { createDispatchMap, select } from '@ngxs/store';
 
 import { TranslatePipe } from '@ngx-translate/core';
 
@@ -10,7 +10,7 @@ import { Router } from '@angular/router';
 
 import { NavigationService } from '@osf/core/services';
 import { UserSelectors } from '@osf/core/store/user';
-import { AuthService } from '@osf/features/auth/services';
+import { AuthSelectors, Logout } from '@osf/features/auth/store';
 import { LoaderService } from '@osf/shared/services';
 
 import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
@@ -24,11 +24,12 @@ import { BreadcrumbComponent } from '../breadcrumb/breadcrumb.component';
 })
 export class HeaderComponent {
   currentUser = select(UserSelectors.getCurrentUser);
+  isAuthenticated = select(AuthSelectors.isAuthenticated);
 
   private readonly router = inject(Router);
-  private readonly authService = inject(AuthService);
   private readonly loaderService = inject(LoaderService);
   private readonly navigationService = inject(NavigationService);
+  private readonly actions = createDispatchMap({ logout: Logout });
 
   items = [
     {
@@ -40,17 +41,12 @@ export class HeaderComponent {
       label: 'navigation.logOut',
       command: () => {
         this.loaderService.show();
-        this.authService.logout();
-        this.router.navigate(['/']);
-        this.loaderService.hide();
+        this.actions.logout();
+        this.router.navigate(['/home']).then(() => window.location.reload());
       },
     },
   ];
 
-  get isAuthenticated() {
-    return this.authService.isAuthenticated();
-  }
-
   navigateToSignIn() {
     this.navigationService.navigateToSignIn();
   }

src/app/core/components/nav-menu/nav-menu.component.ts

@@ -1,16 +1,19 @@
+import { select } from '@ngxs/store';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 import { MenuItem } from 'primeng/api';
 import { PanelMenuModule } from 'primeng/panelmenu';
 
 import { filter, map } from 'rxjs';
 
-import { Component, computed, effect, inject, output } from '@angular/core';
+import { Component, computed, inject, output } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterLinkActive } from '@angular/router';
 
 import { PROJECT_MENU_ITEMS, REGISTRATION_MENU_ITEMS } from '@core/constants';
 import { NavigationService } from '@core/services';
+import { AuthSelectors } from '@osf/features/auth/store';
 import { IconComponent } from '@osf/shared/components';
 
 @Component({
@@ -26,14 +29,26 @@ export class NavMenuComponent {
   private readonly route = inject(ActivatedRoute);
   private readonly navigationService = inject(NavigationService);
 
-  protected menuItems = this.navigationService.getFilteredMenuItems();
+  private readonly isAuthenticated = select(AuthSelectors.isAuthenticated);
+
   protected readonly myProjectMenuItems = PROJECT_MENU_ITEMS;
   protected readonly registrationMenuItems = REGISTRATION_MENU_ITEMS;
 
   protected readonly mainMenuItems = computed(() => {
-    return this.isCollectionsRoute()
-      ? this.menuItems
-      : this.menuItems.filter((item) => item.routerLink !== '/collections');
+    const isAuthenticated = this.isAuthenticated();
+    const menuItems = this.navigationService.getFilteredMenuItems(isAuthenticated);
+
+    if (this.isRegistryRouteDetails()) {
+      menuItems.map((menuItem) => {
+        if (menuItem.id === 'registries') {
+          menuItem.expanded = true;
+          return menuItem;
+        }
+        return menuItem;
+      });
+    }
+
+    return this.isCollectionsRoute() ? menuItems : menuItems.filter((item) => item.routerLink !== '/collections');
   });
 
   protected readonly currentRoute = toSignal(
@@ -52,21 +67,6 @@ export class NavMenuComponent {
   protected readonly isRegistryRoute = computed(() => this.currentRoute().isRegistryRoute);
   protected readonly isRegistryRouteDetails = computed(() => this.currentRoute().isRegistryRouteDetails);
 
-  constructor() {
-    effect(() => {
-      const isRouteDetails = this.isRegistryRouteDetails();
-      if (isRouteDetails) {
-        this.menuItems = this.menuItems.map((menuItem) => {
-          if (menuItem.id === 'registries') {
-            menuItem.expanded = true;
-            return menuItem;
-          }
-          return menuItem;
-        });
-      }
-    });
-  }
-
   private getRouteInfo() {
     const urlSegments = this.router.url.split('/').filter((segment) => segment);
 

src/app/core/interceptors/auth.interceptor.ts

@@ -27,6 +27,10 @@ export const authInterceptor: HttpInterceptorFn = (
       'Content-Type': 'application/vnd.api+json',
     };
 
+    if (token) {
+      headers['Authorization'] = `Bearer ${token}`;
+    }
+
     if (csrfToken) {
       headers['X-CSRFToken'] = csrfToken;
     }

src/app/core/services/navigation.service.ts

@@ -1,8 +1,6 @@
 import { MenuItem } from 'primeng/api';
 
-import { inject, Injectable } from '@angular/core';
-
-import { AuthService } from '@osf/features/auth/services';
+import { Injectable } from '@angular/core';
 
 import { MENU_ITEMS } from '../constants';
 import { filterMenuItemsByAuth } from '../helpers';
@@ -13,15 +11,12 @@ import { environment } from 'src/environments/environment';
   providedIn: 'root',
 })
 export class NavigationService {
-  private readonly authService = inject(AuthService);
-
   navigateToSignIn(): void {
     const loginUrl = `${environment.casUrl}/login?service=${environment.webUrl}/login`;
     window.location.href = loginUrl;
   }
 
-  getFilteredMenuItems(): MenuItem[] {
-    const isAuthenticated = this.authService.isAuthenticated();
+  getFilteredMenuItems(isAuthenticated: boolean): MenuItem[] {
     return filterMenuItemsByAuth(MENU_ITEMS, isAuthenticated);
   }
 }

src/app/features/auth/services/auth.service.ts

@@ -1,8 +1,11 @@
+import { createDispatchMap } from '@ngxs/store';
+
 import { CookieService } from 'ngx-cookie-service';
 
 import { inject, Injectable } from '@angular/core';
 
 import { JsonApiService } from '@osf/core/services';
+import { SetAuthenticated } from '@osf/features/auth/store';
 
 import { SignUpModel } from '../models';
 
@@ -14,14 +17,19 @@ import { environment } from 'src/environments/environment';
 export class AuthService {
   private readonly jsonApiService = inject(JsonApiService);
   private readonly cookieService = inject(CookieService);
+  private readonly actions = createDispatchMap({ setAuthenticated: SetAuthenticated });
 
   isAuthenticated(): boolean {
     const csrfToken = this.cookieService.get('api-csrf');
-    return !!csrfToken;
+    const authenticated = !!csrfToken;
+
+    this.actions.setAuthenticated(authenticated);
+    return authenticated;
   }
 
   logout(): void {
     this.cookieService.deleteAll();
+    this.actions.setAuthenticated(false);
   }
 
   register(payload: SignUpModel) {

src/app/features/auth/store/auth.actions.ts

@@ -21,3 +21,17 @@ export class ResetPassword {
     public newPassword: string
   ) {}
 }
+
+export class InitializeAuth {
+  static readonly type = '[Auth] Initialize Auth';
+}
+
+export class SetAuthenticated {
+  static readonly type = '[Auth] Set Authenticated';
+
+  constructor(public isAuthenticated: boolean) {}
+}
+
+export class Logout {
+  static readonly type = '[Auth] Logout';
+}

src/app/features/auth/store/auth.selectors.ts

@@ -1 +1,11 @@
-export class AuthSelectors {}
+import { Selector } from '@ngxs/store';
+
+import { AuthStateModel } from './auth.model';
+import { AuthState } from './auth.state';
+
+export class AuthSelectors {
+  @Selector([AuthState])
+  static isAuthenticated(state: AuthStateModel): boolean {
+    return state.isAuthenticated;
+  }
+}