feat(sign-up): updated auth logic

Author: nsemets

src/app/app.routes.ts

@@ -4,7 +4,7 @@ import { Routes } from '@angular/router';
 
 import { BookmarksState, ProjectsState } from '@shared/stores';
 
-import { authGuard } from './core/guards';
+import { authGuard, redirectIfLoggedInGuard } from './core/guards';
 import { MyProfileResourceFiltersOptionsState } from './features/my-profile/components/filters/store';
 import { MyProfileResourceFiltersState } from './features/my-profile/components/my-profile-resource-filters/store';
 import { MyProfileState } from './features/my-profile/store';
@@ -20,7 +20,9 @@ export const routes: Routes = [
       {
         path: '',
         pathMatch: 'full',
-        loadComponent: () => import('./features/home/home.component').then((mod) => mod.HomeComponent),
+        canActivate: [redirectIfLoggedInGuard],
+        loadComponent: () => import('@osf/features/home/home.component').then((mod) => mod.HomeComponent),
+        data: { skipBreadcrumbs: true },
       },
       {
         path: 'dashboard',
@@ -29,14 +31,6 @@ export const routes: Routes = [
         data: { skipBreadcrumbs: true },
         canActivate: [authGuard],
       },
-      {
-        path: 'home',
-        loadComponent: () =>
-          import('@osf/features/home/pages/home-logged-out/home-logged-out.component').then(
-            (mod) => mod.HomeLoggedOutComponent
-          ),
-        data: { skipBreadcrumbs: true },
-      },
       {
         path: 'confirm/:userId/:token',
         loadComponent: () => import('./features/home/home.component').then((mod) => mod.HomeComponent),

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

@@ -11,8 +11,8 @@ 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 { MODERATION_MENU_ITEM, PROJECT_MENU_ITEMS, REGISTRATION_MENU_ITEMS } from '@core/constants';
-import { NavigationService } from '@core/services';
+import { MENU_ITEMS, MODERATION_MENU_ITEM, PROJECT_MENU_ITEMS, REGISTRATION_MENU_ITEMS } from '@core/constants';
+import { filterMenuItems } from '@osf/core/helpers';
 import { ProviderSelectors } from '@osf/core/store/provider';
 import { UserSelectors } from '@osf/core/store/user';
 import { AuthSelectors } from '@osf/features/auth/store';
@@ -29,7 +29,6 @@ export class NavMenuComponent {
 
   private readonly router = inject(Router);
   private readonly route = inject(ActivatedRoute);
-  private readonly navigationService = inject(NavigationService);
 
   private readonly isAuthenticated = select(AuthSelectors.isAuthenticated);
 
@@ -61,7 +60,7 @@ export class NavMenuComponent {
 
   protected readonly mainMenuItems = computed(() => {
     const isAuthenticated = this.isAuthenticated();
-    const menuItems = this.navigationService.getFilteredMenuItems(isAuthenticated);
+    const menuItems = filterMenuItems(MENU_ITEMS, isAuthenticated);
 
     if (this.isRegistryRouteDetails()) {
       menuItems.map((menuItem) => {

src/app/core/constants/ngxs-states.constant.ts

@@ -1,18 +1,20 @@
 import { ProviderState } from '@core/store/provider';
 import { UserState } from '@core/store/user';
+import { AuthState } from '@osf/features/auth/store';
 import { MeetingsState } from '@osf/features/meetings/store';
 import { ProjectMetadataState } from '@osf/features/project/metadata/store';
 import { ProjectOverviewState } from '@osf/features/project/overview/store';
 import { RegistrationsState } from '@osf/features/project/registrations/store';
 import { AccountSettingsState } from '@osf/features/settings/account-settings/store/account-settings.state';
 import { DeveloperAppsState } from '@osf/features/settings/developer-apps/store';
 import { NotificationSubscriptionState } from '@osf/features/settings/notifications/store';
-import { AddonsState, InstitutionsState, WikiState } from '@shared/stores';
+import { AddonsState, InstitutionsState, WikiState } from '@osf/shared/stores';
 import { LicensesState } from '@shared/stores/licenses';
 import { MyResourcesState } from '@shared/stores/my-resources';
 import { RegionsState } from '@shared/stores/regions';
 
 export const STATES = [
+  AuthState,
   AddonsState,
   UserState,
   ProviderState,

src/app/core/guards/index.ts

@@ -1 +1,2 @@
 export { authGuard } from './auth.guard';
+export { redirectIfLoggedInGuard } from './redirect-if-logged-in.guard';

src/app/core/guards/redirect-if-logged-in.guard.ts

@@ -0,0 +1,15 @@
+import { inject } from '@angular/core';
+import { CanActivateFn, Router } from '@angular/router';
+
+import { AuthService } from '@osf/features/auth/services';
+
+export const redirectIfLoggedInGuard: CanActivateFn = () => {
+  const authService = inject(AuthService);
+  const router = inject(Router);
+
+  if (authService.isAuthenticated()) {
+    return router.navigate(['/dashboard']);
+  }
+
+  return true;
+};

src/app/core/helpers/nav-menu.helper.ts

@@ -2,15 +2,15 @@ import { MenuItem } from 'primeng/api';
 
 import { AUTHENTICATED_MENU_ITEMS } from '../constants';
 
-export function filterMenuItemsByAuth(items: MenuItem[], isAuthenticated: boolean): MenuItem[] {
+export function filterMenuItems(items: MenuItem[], isAuthenticated: boolean): MenuItem[] {
   return items.map((item) => {
     const isAuthenticatedItem = AUTHENTICATED_MENU_ITEMS.includes(item.id || '');
     const shouldShow = isAuthenticated || !isAuthenticatedItem;
 
     const updatedItem = { ...item, visible: shouldShow };
 
     if (item.items) {
-      updatedItem.items = filterMenuItemsByAuth(item.items, isAuthenticated);
+      updatedItem.items = filterMenuItems(item.items, isAuthenticated);
     }
 
     return updatedItem;

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

@@ -10,14 +10,6 @@ export const authInterceptor: HttpInterceptorFn = (
   next: HttpHandlerFn
 ): Observable<HttpEvent<unknown>> => {
   const cookieService = inject(CookieService);
-  // TODO: remove this after the migration to the new auth approach is complete
-  const authToken = '2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt';
-  // UlO9O9GNKgVzJD7pUeY53jiQTKJ4U2znXVWNvh0KZQruoENuILx0IIYf9LoDz7Duq72EIm kyrylo
-  // 2rjFZwmdDG4rtKj7hGkEMO6XyHBM2lN7XBbsA1e8OqcFhOWu6Z7fQZiheu9RXtzSeVrgOt roman nastyuk
-  // yZ485nN6MfhqvGrfU4Xk5BEnq0T6LM50nQ6H9VrYaMTaZUQNTuxnIwlp0Wpz879RCsK9GQ NM stage3
-  const localStorageToken = localStorage.getItem('authToken');
-
-  const token = localStorageToken || authToken;
 
   const csrfToken = cookieService.get('api-csrf');
 
@@ -27,10 +19,6 @@ 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,10 +1,5 @@
-import { MenuItem } from 'primeng/api';
-
 import { Injectable } from '@angular/core';
 
-import { MENU_ITEMS } from '../constants';
-import { filterMenuItemsByAuth } from '../helpers';
-
 import { environment } from 'src/environments/environment';
 
 @Injectable({
@@ -15,8 +10,4 @@ export class NavigationService {
     const loginUrl = `${environment.casUrl}/login?service=${environment.webUrl}/login`;
     window.location.href = loginUrl;
   }
-
-  getFilteredMenuItems(isAuthenticated: boolean): MenuItem[] {
-    return filterMenuItemsByAuth(MENU_ITEMS, isAuthenticated);
-  }
 }

src/app/features/home/pages/home-logged-out/data.ts renamed to src/app/features/home/constants/data.ts

@@ -1,4 +1,4 @@
-export const slides = [
+export const SLIDES = [
   {
     img: 'assets/images/carousel1.png',
     name: 'Patricia Ayala',
@@ -22,7 +22,7 @@ export const slides = [
   },
 ];
 
-export const integrationIcons = [
+export const INTEGRATION_ICONS = [
   {
     title: 'home.loggedOut.integrations.categories.authentication',
     first: {

src/app/features/home/constants/index.ts

@@ -0,0 +1 @@
+export * from './data';