Add session management and token verification with GraphQL integration

Author: DavideRodo

.github/copilot-instructions.md

@@ -26,6 +26,8 @@ You are an expert in TypeScript, Angular, and scalable web application developme
 - Prefer Reactive forms instead of Template-driven ones
 - Do NOT use `ngClass`, use `class` bindings instead
 - Do NOT use `ngStyle`, use `style` bindings instead
+- Use Angular Material components, avoid custom UI components when possible
+- Avoid CSS when a custom component is provided by Angular Material or us (e.g., app-flex)
 
 ## State Management
 
@@ -45,3 +47,8 @@ You are an expert in TypeScript, Angular, and scalable web application developme
 - Design services around a single responsibility
 - Use the `providedIn: 'root'` option for singleton services
 - Use the `inject()` function instead of constructor injection
+
+## Styling
+- Use Angular's built-in styling capabilities (e.g., component styles)
+- Prefer Angular Material CSS variables for theming
+- Avoid global styles; scope styles to components

PhantomDave.BankTracking.Api/Types/Queries/AccountQueries.cs

@@ -1,6 +1,7 @@
 using PhantomDave.BankTracking.Api.Services;
 using PhantomDave.BankTracking.Api.Types.ObjectTypes;
 using HotChocolate.Authorization;
+using Microsoft.AspNetCore.Http;
 
 namespace PhantomDave.BankTracking.Api.Types.Queries;
 
@@ -32,4 +33,12 @@ public async Task<IEnumerable<AccountType>> GetAccounts(
         var account = await accountService.GetAccountByEmail(email);
         return account != null ? AccountType.FromAccount(account) : null;
     }
+    
+    [Authorize]
+    public Task<bool> IsAValidJwt([Service] IHttpContextAccessor httpContextAccessor)
+    {
+        var user = httpContextAccessor.HttpContext?.User;
+        var isAuthenticated = user?.Identity?.IsAuthenticated ?? false;
+        return Task.FromResult(isAuthenticated);
+    }
 }

compose.yaml

@@ -1,5 +1,7 @@
 services:
   backend:
+    profiles:
+      - "containerized"
     image: banktrackingapplication
     build:
       context: .
@@ -8,6 +10,8 @@
       - "5095:5095"
 
   frontend:
+    profiles:
+      - "containerized"
     image: banktrackingfrontend
     build:
       context: ./frontend

frontend/schema.graphql

@@ -47,4 +47,5 @@ type Mutation {
 type Query {
   accountByEmail(email: String!): AccountType
   accounts: [AccountType!]!
+  isAValidJwt: Boolean!
 }

frontend/src/app/app.config.ts

@@ -1,12 +1,11 @@
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection, inject, importProvidersFrom } from '@angular/core';
 import { provideRouter } from '@angular/router';
-
 import { routes } from './app.routes';
-import { provideHttpClient } from '@angular/common/http';
+import { provideHttpClient, HttpHeaders } from '@angular/common/http';
 import { provideApollo } from 'apollo-angular';
 import { HttpLink } from 'apollo-angular/http';
 import { ApolloLink, InMemoryCache } from '@apollo/client';
-import { setContext } from '@apollo/client/link/context';
+import { SetContextLink } from '@apollo/client/link/context';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { environment } from '../environments/environment';
 
@@ -15,17 +14,20 @@ export const appConfig: ApplicationConfig = {
     provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
     importProvidersFrom(MatSnackBarModule),
-    provideRouter(routes), provideHttpClient(), provideApollo(() => {
+    provideRouter(routes),
+    provideHttpClient(),
+    provideApollo(() => {
       const httpLink = inject(HttpLink);
 
-      const authLink = setContext((_, { headers }) => {
-        const token = localStorage.getItem('auth_token');
-        return {
-          headers: {
-            ...headers,
-            ...(token ? { Authorization: `Bearer ${token}` } : {})
-          }
-        } as Record<string, unknown>;
+      const authLink = new SetContextLink((prevContext, _operation) => {
+        const prev = prevContext?.headers;
+        let headers = prev instanceof HttpHeaders ? prev : new HttpHeaders(prev ?? {});
+        const token = localStorage.getItem('sessionData');
+        if (token) {
+          headers = headers.set('Authorization', `Bearer ${token}`);
+        }
+
+        return { headers };
       });
 
       return {

frontend/src/app/app.routes.ts

@@ -3,11 +3,13 @@ import {LoginComponent} from '../components/welcome-layout/login-component/login
 import {RegisterComponent} from '../components/welcome-layout/register-component/register-component';
 import {HomeComponent} from '../components/home-component/home-component';
 import {authenticateGuard} from '../guards/authenticate-guard';
+import {ConfiguratorComponent} from '../components/configurator/configurator/configurator-component';
 
 export const routes: Routes = [
   {path: '', redirectTo : 'login', pathMatch: 'full'},
   {path: 'login', component: LoginComponent},
   {path: 'register', component: RegisterComponent },
   {path: 'home', component: HomeComponent, canActivate: [authenticateGuard]},
+  {path: 'config', component: ConfiguratorComponent, canActivate: [authenticateGuard] },
   {path: '**', redirectTo : 'login' }
 ];

frontend/src/app/app.ts

@@ -1,6 +1,5 @@
-import { Component, signal } from '@angular/core';
-import { RouterOutlet } from '@angular/router';
-import {MatSlideToggle} from '@angular/material/slide-toggle';
+import {Component, signal} from '@angular/core';
+import {RouterOutlet} from '@angular/router';
 import {SideNavComponent} from '../components/side-nav-component/side-nav-component';
 
 @Component({
@@ -15,7 +14,7 @@ export class App {
   isAuthenticated = signal(false);
 
   constructor() {
-    const token = localStorage.getItem('auth_token');
+    const token = localStorage.getItem('sessionData');
     this.isAuthenticated.set(token !== null);
   }
 }

frontend/src/components/configurator/configurator/configurator-component.css

@@ -0,0 +1,30 @@
+<mat-card appearance="outlined">
+  <mat-card-header>
+    <mat-card-title>Configurations</mat-card-title>
+  </mat-card-header>
+
+  <mat-card-actions align="end">
+    <button mat-flat-button color="primary" (click)="onCreateClicked()">
+      <mat-icon aria-hidden="true">add</mat-icon>
+      Create New
+    </button>
+  </mat-card-actions>
+
+  <mat-card-content>
+    <table mat-table [dataSource]="data()" class="mat-elevation-z8" style="width: 100%;">
+
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+      </ng-container>
+
+      <ng-container matColumnDef="description">
+        <th mat-header-cell *matHeaderCellDef> Description </th>
+        <td mat-cell *matCellDef="let element"> {{element.description}} </td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
+    </table>
+  </mat-card-content>
+</mat-card>

frontend/src/components/configurator/configurator/configurator-component.html

@@ -0,0 +1,45 @@
+import {ChangeDetectionStrategy, Component, output, signal} from '@angular/core';
+import {MatTableModule} from '@angular/material/table';
+import {MatCardModule} from '@angular/material/card';
+import {MatButtonModule} from '@angular/material/button';
+import {MatIconModule} from '@angular/material/icon';
+
+@Component({
+  selector: 'app-configurator',
+  imports: [MatTableModule, MatCardModule, MatButtonModule, MatIconModule],
+  templateUrl: './configurator-component.html',
+  styleUrl: './configurator-component.css',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ConfiguratorComponent {
+  readonly data = signal([
+    {
+      name: 'Sample Configuration',
+      description: 'This is a sample configuration for demonstration purposes.',
+    },
+    {
+      name: 'Sample Configuration',
+      description: 'This is a sample configuration for demonstration purposes.',
+    },
+    {
+      name: 'Sample Configuration',
+      description: 'This is a sample configuration for demonstration purposes.',
+    },
+    {
+      name: 'Sample Configuration',
+      description: 'This is a sample configuration for demonstration purposes.',
+    },
+    {
+      name: 'Sample Configuration',
+      description: 'This is a sample configuration for demonstration purposes.',
+    },
+  ]);
+
+  displayedColumns: string[] = ['name', 'description'];
+
+  createConfiguration = output<void>();
+
+  onCreateClicked(): void {
+    this.createConfiguration.emit();
+  }
+}