finalize auth refactoring

backend/src/middleware/cors-middleware/cors.middlware.ts

@@ -14,6 +14,7 @@ export class CorsMiddleware implements NestMiddleware {
       const requestOrigin = req.headers.origin;
 
       if (!requestOrigin || allowedOrigins.includes(requestOrigin)) {
+        res.header('Access-Control-Allow-Credentials', 'true');
         res.header('Access-Control-Allow-Origin', requestOrigin || '*');
         res.header(
           'Access-Control-Allow-Methods',

backend/src/middleware/csp-middleware/csp.middleware.ts

@@ -12,6 +12,7 @@ export class CspMiddleware implements NestMiddleware {
     if (cspDirectives) {
       res.setHeader('Content-Security-Policy', cspDirectives);
     }
+
     next();
   }
 }

backend/src/modules/auth-module/controller/auth.controller.ts

@@ -56,9 +56,9 @@ export class AuthController {
   })
   @HttpCode(HttpStatus.OK)
   @UseGuards(SessionGuard)
-  @Post('logout')
+  @Post('signout')
-  public async logout(@Req() request: Request): Promise<SuccessDto> {
+  public async signout(@Req() request: Request): Promise<SuccessDto> {
-    return this.authService.logout(request.sessionID);
+    return this.authService.signout(request.sessionID);
   }
 
   @ApiCreatedResponse({

backend/src/modules/auth-module/services/auth.service.ts

@@ -110,6 +110,18 @@ export class AuthService {
     }
   }
 
+  public async signout(sessionId: string): Promise<{ success: boolean }> {
+    try {
+      this.sessionService.deleteSessionBySessionId(sessionId);
+      return { success: true };
+    } catch (error) {
+      throw new HttpException(
+        'Fehler beim Logout',
+        HttpStatus.INTERNAL_SERVER_ERROR
+      );
+    }
+  }
+
   public async checkAuthStatus(
     sessionId: string,
     userAgend: string
@@ -145,16 +157,4 @@ export class AuthService {
 
     return responseData;
   }
-
-  public async logout(sessionId: string): Promise<{ success: boolean }> {
-    try {
-      this.sessionService.deleteSessionBySessionId(sessionId);
-      return { success: true };
-    } catch (error) {
-      throw new HttpException(
-        'Fehler beim Logout',
-        HttpStatus.INTERNAL_SERVER_ERROR
-      );
-    }
-  }
 }

backend/src/modules/session/services/session-init.service.ts

@@ -27,10 +27,14 @@ export class SessionInitService {
         maxAge: 86400000,
         httpOnly: true,
         secure:
-          this.configService.get<string>('NODE_ENV') === 'production'
+          this.configService.get<string>('NODE_ENV') === 'development'
-            ? true
+            ? false
-            : false,
+            : true,
-        sameSite: 'strict',
+
+        sameSite:
+          this.configService.get<string>('NODE_ENV') === 'development'
+            ? 'strict'
+            : 'none',
       },
     });
   }

frontend/src/app/app.component.ts

@@ -1,7 +1,6 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
-import { RouterOutlet, Router } from '@angular/router';
+import { RouterOutlet } from '@angular/router';
 
-import { AuthService } from './shared/service';
 @Component({
   selector: 'app-root',
   standalone: true,
@@ -10,24 +9,6 @@ import { AuthService } from './shared/service';
   templateUrl: './app.component.html',
   styleUrl: './app.component.scss',
 })
-export class AppComponent implements OnInit {
+export class AppComponent {
-  public constructor(
+  public constructor() {}
-    private readonly authService: AuthService,
-    private readonly router: Router
-  ) {}
-
-  public ngOnInit(): void {
-    this.checkAuthentication();
-  }
-
-  private checkAuthentication(): void {
-    this.authService.isAuthenticated$.subscribe((isAuthenticated: boolean) => {
-      if (isAuthenticated) {
-        console.log('User is authenticated');
-        this.router.navigateByUrl('dashboard');
-      } else {
-        this.router.navigateByUrl('signup');
-      }
-    });
-  }
 }

frontend/src/app/app.config.ts

@@ -3,12 +3,18 @@ import { ApplicationConfig } from '@angular/core';
 import { provideAnimations } from '@angular/platform-browser/animations';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
 
+import { Configuration } from './api';
 import { routes } from './app.routes';
-import { AuthInterceptor } from './shared/interceptors/auth.interceptor';
+import { ApiConfiguration } from './config/api-configuration';
+
+const apiConfiguration = new ApiConfiguration({
+  withCredentials: true,
+});
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideHttpClient(withInterceptors([AuthInterceptor])),
+    { provide: Configuration, useValue: apiConfiguration },
+    provideHttpClient(withInterceptors([])),
     provideRouter(routes, withComponentInputBinding()),
     provideAnimations(),
   ],

frontend/src/app/app.routes.ts

@@ -1,11 +1,12 @@
 import { Routes } from '@angular/router';
 
-import { AuthGuard } from './shared/guard/auth.guard';
-
 const publicRoutes: Routes = [
   {
     path: '',
-    loadComponent: () => import('./app.component').then((m) => m.AppComponent),
+    loadComponent: () =>
+      import('./pages/home-root/home-root.component').then(
+        (m) => m.HomeComponent
+      ),
   },
   {
     path: 'signup',
@@ -30,7 +31,7 @@ const protectedRoutes: Routes = [
       import('./pages/dashboard-root/dashboard-root.component').then(
         (m) => m.DashboardRootComponent
       ),
-    canActivate: [AuthGuard],
+    canActivate: [],
   },
 ];
 

frontend/src/app/config/api-configuration.ts

@@ -0,0 +1,9 @@
+import { Configuration, ConfigurationParameters } from '../api';
+
+export class ApiConfiguration extends Configuration {
+  public constructor(params?: Partial<ConfigurationParameters>) {
+    super({
+      ...params,
+    });
+  }
+}

frontend/src/app/pages/home-root/home-root.component.ts

@@ -0,0 +1,38 @@
+import { HttpErrorResponse } from '@angular/common/http';
+import { Component, OnInit } from '@angular/core';
+import { Router } from '@angular/router';
+
+import { SuccessDtoApiModel } from '../../api';
+import { AuthService } from '../../shared/service';
+
+@Component({
+  selector: 'app-foo',
+  standalone: true,
+  providers: [],
+  imports: [],
+  templateUrl: './home-root.component.html',
+  styleUrl: './home-root.component.scss',
+})
+export class HomeComponent implements OnInit {
+  public constructor(
+    private readonly authService: AuthService,
+    private readonly router: Router
+  ) {}
+
+  public ngOnInit(): void {
+    this.authService.status().subscribe(
+      (response: SuccessDtoApiModel) => {
+        if (response.success) {
+          this.router.navigate(['/dashboard']);
+        }
+      },
+      (error: HttpErrorResponse) => {
+        if (error.status === 401) {
+          this.router.navigate(['signup'], {
+            queryParams: { login: true },
+          });
+        }
+      }
+    );
+  }
+}

frontend/src/app/pages/register-root/register-root.component.html

@@ -1,9 +1,25 @@
 <div id="background">
   <div class="img-zone">
     <div class="img-wrapper">
+      @if (userSignupSuccess()) {
+        <div class="success">
+          <h1>Danke für deine Registrierung!</h1>
+          <h2>
+            Wir haben dir eine Mail geschickt an
+            {{ form?.get('email')?.value }}. Bitte bestätige deine
+            E-Mail-Adresse um fortzufahren.
+          </h2>
+          <p>Du kannst diesen Tab nun schließen</p>
+        </div>
+      } @else {
+        <div class="headline">
           <h1>Hi, Welcome to Ticket App.</h1>
         </div>
+      }
     </div>
+  </div>
+
+  @if (!userSignupSuccess()) {
     <div class="content-zone">
       <h1>
         @if (isSignupSignal()) {
@@ -29,7 +45,6 @@
             (click)="toggleAction('register')"></button>
         </div>
       }
-
       @if (isSignupSignal() || isRegisterSignal()) {
         <div class="register-wrapper">
           @if (form) {
@@ -91,4 +106,5 @@
         </div>
       }
     </div>
+  }
 </div>

frontend/src/app/pages/register-root/register-root.component.scss

@@ -12,11 +12,21 @@
     display: flex;
     align-items: center;
 
+    .success {
+      margin-left: 4em;
+      h1 {
+        font-size: 4em;
+      }
+    }
+
+    .headline {
       h1 {
         font-size: 4em;
         margin-left: 1em;
       }
     }
+
+  }
 }
 
 .content-zone {

frontend/src/app/pages/register-root/register-root.component.ts

@@ -25,8 +25,14 @@ import { CheckboxModule } from 'primeng/checkbox';
 import { InputTextModule } from 'primeng/inputtext';
 import { PasswordModule } from 'primeng/password';
 
-import { AuthService } from '../../shared/service';
+import {
-import { LoginCredentials } from '../../shared/types';
+  Configuration,
+  SigninResponseDtoApiModel,
+  SuccessDtoApiModel,
+  UserCredentialsDtoApiModel,
+} from '../../api';
+import { ApiConfiguration } from '../../config/api-configuration';
+import { AuthService, SessionStorageService } from '../../shared/service';
 import {
   customEmailValidator,
   customPasswordValidator,
@@ -47,13 +53,20 @@ type AuthAction = 'register' | 'signup';
     PasswordModule,
     HttpClientModule,
   ],
-  providers: [],
+  providers: [
+    {
+      provide: Configuration,
+      useFactory: (): unknown =>
+        new ApiConfiguration({ withCredentials: true }),
+    },
+  ],
   templateUrl: './register-root.component.html',
   styleUrl: './register-root.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class RegisterRootComponent implements OnInit {
   public verified: InputSignal<boolean> = input<boolean>(false);
+  public login: InputSignal<boolean> = input<boolean>(false);
   public email: InputSignal<string> = input<string>('');
   public form: FormGroup | undefined;
   public isRegisterSignal: WritableSignal<boolean> = signal(false);
@@ -62,12 +75,14 @@ export class RegisterRootComponent implements OnInit {
   public emailInvalid: WritableSignal<string | null> = signal(null);
   public passwordInvalid: WritableSignal<string | null> = signal(null);
   public termsInvalid: WritableSignal<string | null> = signal(null);
+  public userSignupSuccess: WritableSignal<boolean> = signal(false);
   private removeQueryParams: WritableSignal<boolean> = signal(false);
 
   public constructor(
     private readonly formBuilder: FormBuilder,
     private readonly authService: AuthService,
-    private readonly router: Router
+    private readonly router: Router,
+    private readonly sessionStorageService: SessionStorageService
   ) {
     effect(() => {
       if (this.form) {
@@ -90,13 +105,22 @@ export class RegisterRootComponent implements OnInit {
   public ngOnInit(): void {
     this.initializeForm();
     this.setupValueChanges();
+    this.preselectForm();
 
-    if (this.email() || this.verified()) {
+    if ((this.email() && this.verified()) || this.login()) {
       this.handleRedirect();
       this.removeQueryParams.set(true);
     }
   }
 
+  public preselectForm(): void {
+    if (!this.email() || !this.verified()) {
+      const email = this.sessionStorageService.getItem('email');
+
+      this.form?.get('email')?.setValue(email);
+    }
+  }
+
   public toggleAction(action: AuthAction): void {
     if (action === 'register') {
       this.isRegisterSignal.set(true);
@@ -113,7 +137,7 @@ export class RegisterRootComponent implements OnInit {
 
     if (this.form?.valid) {
       if (this.isRegisterSignal()) {
-        this.register(this.form.value);
+        this.signup(this.form.value);
       } else {
         this.signin(this.form.value);
       }
@@ -150,7 +174,6 @@ export class RegisterRootComponent implements OnInit {
   }
 
   private handleRedirect(): void {
-    console.log('handleRedirect');
     if (this.verified()) {
       this.isDisplayButtons.set(false);
       this.isRegisterSignal.set(false);
@@ -159,6 +182,12 @@ export class RegisterRootComponent implements OnInit {
     if (this.email()) {
       this.form?.get('email')?.setValue(decodeURIComponent(atob(this.email())));
     }
+
+    if (this.login()) {
+      this.isSignupSignal.set(true);
+      this.isDisplayButtons.set(false);
+      this.isRegisterSignal.set(false);
+    }
   }
 
   private clearRouteParams(): void {
@@ -237,11 +266,23 @@ export class RegisterRootComponent implements OnInit {
     }
   }
 
-  private signin(logiCredentials: LoginCredentials): void {
+  private signin(logiCredentials: UserCredentialsDtoApiModel): void {
-    this.authService.signin(logiCredentials);
+    this.authService
+      .signin(logiCredentials)
+      .subscribe((response: SigninResponseDtoApiModel) => {
+        if (response) {
+          this.router.navigate(['/dashboard']);
+        }
+      });
   }
 
-  private register(logiCredentials: LoginCredentials): void {
+  private signup(logiCredentials: UserCredentialsDtoApiModel): void {
-    this.authService.signup(logiCredentials);
+    this.authService
+      .signup(logiCredentials)
+      .subscribe((response: SuccessDtoApiModel) => {
+        if (response.success) {
+          this.userSignupSuccess.set(true);
+        }
+      });
   }
 }

frontend/src/app/shared/guard/auth.guard.ts

@@ -1,32 +0,0 @@
-import { inject } from '@angular/core';
-import {
-  ActivatedRouteSnapshot,
-  CanActivateFn,
-  Router,
-  RouterStateSnapshot,
-  UrlTree,
-} from '@angular/router';
-
-import { Observable } from 'rxjs';
-
-import { AuthService } from '../service';
-
-export const AuthGuard: CanActivateFn = (
-  route: ActivatedRouteSnapshot,
-  state: RouterStateSnapshot
-):
-  | Observable<boolean | UrlTree>
-  | Promise<boolean | UrlTree>
-  | boolean
-  | UrlTree => {
-  const authService: AuthService = inject(AuthService);
-  const router: Router = inject(Router);
-
-  authService.isAuthenticated$.subscribe((isAuthenticated: boolean) => {
-    if (!isAuthenticated) {
-      router.navigateByUrl('signup');
-    }
-  });
-
-  return true;
-};

frontend/src/app/shared/interceptors/auth.interceptor.ts

@@ -1,79 +0,0 @@
-import {
-  HttpInterceptorFn,
-  HttpRequest,
-  HttpHandlerFn,
-  HttpEvent,
-  HttpErrorResponse,
-} from '@angular/common/http';
-import { inject } from '@angular/core';
-import { Router } from '@angular/router';
-
-import { Observable, throwError } from 'rxjs';
-import { catchError, switchMap } from 'rxjs/operators';
-
-import { AuthService } from '../service';
-
-export const AuthInterceptor: HttpInterceptorFn = (
-  request: HttpRequest<unknown>,
-  next: HttpHandlerFn
-): Observable<HttpEvent<unknown>> => {
-  const router = inject(Router);
-  const authService = inject(AuthService);
-
-  const handleRequest = (
-    req: HttpRequest<unknown>
-  ): Observable<HttpEvent<unknown>> => {
-    const accessToken = authService.access_token;
-
-    if (accessToken) {
-      req = addAuthHeader(req, accessToken);
-    }
-    return next(req);
-  };
-
-  const addAuthHeader = (
-    req: HttpRequest<unknown>,
-    token: string
-  ): HttpRequest<unknown> => {
-    return req.clone({
-      setHeaders: {
-        Authorization: `Bearer ${token}`,
-      },
-    });
-  };
-
-  const handle401Error = (
-    req: HttpRequest<unknown>
-  ): Observable<HttpEvent<unknown>> => {
-    console.log(authService.refresh_token);
-    if (!authService.refresh_token) {
-      router.navigateByUrl('signup');
-      return throwError(() => new Error('Authentication required'));
-    }
-
-    return authService.refreshToken().pipe(
-      switchMap((tokens) => {
-        req = addAuthHeader(req, tokens.access_token);
-        return next(req);
-      }),
-      catchError((refreshError) => {
-        router.navigateByUrl('signup');
-        return throwError(() => new Error(refreshError));
-      })
-    );
-  };
-
-  const handleError = (
-    error: HttpErrorResponse,
-    req: HttpRequest<unknown>
-  ): Observable<HttpEvent<unknown>> => {
-    if (error.status === 401) {
-      return handle401Error(req);
-    }
-    return throwError(() => new Error('Unhandled error'));
-  };
-
-  return handleRequest(request).pipe(
-    catchError((error) => handleError(error, request))
-  );
-};

frontend/src/app/shared/service/auth.service.ts

@@ -1,12 +1,16 @@
 import { Injectable } from '@angular/core';
 
-import { BehaviorSubject, Observable, tap } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
+import {
+  SigninResponseDtoApiModel,
+  UserCredentialsDtoApiModel,
+} from '../../api';
 import { AuthenticationApiService } from '../../api/api/authentication.api.service';
-import { LoginCredentials, Tokens } from '../types';
 
-import { LocalStorageService } from './local-storage.service';
+type SuccessResponse = {
-import { SessionStorageService } from './session-storage.service';
+  success: boolean;
+};
 
 @Injectable({
   providedIn: 'root',
@@ -14,73 +18,28 @@ import { SessionStorageService } from './session-storage.service';
 export class AuthService {
   public isAuthenticated$: BehaviorSubject<boolean> =
     new BehaviorSubject<boolean>(false);
-  private _access_token: string | null = null;
-  private _refresh_token: string | null = null;
-
-  public get access_token(): string | null {
-    return this._access_token;
-  }
-
-  public get refresh_token(): string | null {
-    return this._refresh_token;
-  }
 
   public constructor(
-    private readonly localStorageService: LocalStorageService,
-    private readonly sessionStorageService: SessionStorageService,
     private readonly authenticationApiService: AuthenticationApiService
-  ) {
+  ) {}
-    this._access_token =
+
-      this.localStorageService.getItem<string>('access_token');
+  public signup(
-    this._refresh_token =
+    credentials: UserCredentialsDtoApiModel
-      this.sessionStorageService.getItem<string>('refresh_token');
+  ): Observable<SuccessResponse> {
+    return this.authenticationApiService.authControllerSignup(credentials);
   }
 
-  public signin(credentials: LoginCredentials): void {
+  public signin(
-    this.authenticationApiService
+    credentials: UserCredentialsDtoApiModel
-      .authControllerSignin(credentials)
+  ): Observable<SigninResponseDtoApiModel> {
-      .subscribe((response: Tokens) => {
+    return this.authenticationApiService.authControllerSignin(credentials);
-        this.handleSuccess(response);
-      });
   }
 
-  public signup(credentials: LoginCredentials): void {
+  public signout(): Observable<SuccessResponse> {
-    this.authenticationApiService
+    return this.authenticationApiService.authControllerSignout();
-      .authControllerSignup(credentials)
-      .subscribe((response: Tokens) => {
-        this.handleSuccess(response);
-      });
   }
 
-  public refreshToken(): Observable<Tokens> {
+  public status(): Observable<SuccessResponse> {
-    if (this._refresh_token) {
+    return this.authenticationApiService.authControllerStatus();
-      return this.authenticationApiService
-        .authControllerRefresh(this._refresh_token)
-        .pipe(tap((response: Tokens) => this.handleSuccess(response)));
-    } else {
-      throw new Error('Refresh token is missing');
-    }
-  }
-
-  public signout(): void {
-    this.authenticationApiService
-      .authControllerLogout()
-      .subscribe((response: boolean) => {
-        if (response) {
-          this._access_token = null;
-          this._refresh_token = null;
-          this.localStorageService.removeItem('access_token');
-          this.sessionStorageService.removeItem('refresh_token');
-          this.isAuthenticated$.next(false);
-        }
-      });
-  }
-
-  private handleSuccess(tokens: Tokens): void {
-    this._access_token = tokens.access_token;
-    this._refresh_token = tokens.refresh_token;
-    this.localStorageService.setItem('access_token', tokens.access_token);
-    this.sessionStorageService.setItem('refresh_token', tokens.refresh_token);
-    this.isAuthenticated$.next(true);
   }
 }

frontend/src/app/shared/types/index.ts

@@ -1,2 +0,0 @@
-export * from './login-credentials';
-export * from './tokens';

frontend/src/app/shared/types/login-credentials.ts

@@ -1,4 +0,0 @@
-export type LoginCredentials = {
-  email: string;
-  password: string;
-};

frontend/src/app/shared/types/tokens.ts

@@ -1,4 +0,0 @@
-export type Tokens = {
-  access_token: string;
-  refresh_token: string;
-};