feat: implement authentication with JWT and user management

This commit is contained in:
Constantin Simonis 2025-05-07 13:42:04 +02:00
commit 35d8fbaea0
No known key found for this signature in database
GPG key ID: 3878FF77C24AF4D2
42 changed files with 989 additions and 397 deletions

View file

@ -12,7 +12,8 @@
<div class="hidden md:flex items-center space-x-4">
@if (!isLoggedIn) {
<button (click)="login()" class="button-primary px-4 py-1.5">Anmelden</button>
<a routerLink="/login" class="button-primary px-4 py-1.5">Anmelden</a>
<a routerLink="/register" class="bg-emerald-700 text-white hover:bg-emerald-600 px-4 py-1.5 rounded">Registrieren</a>
}
@if (isLoggedIn) {
<div
@ -66,7 +67,8 @@
<a routerLink="/games" class="nav-mobile-link">Spiele</a>
<div class="pt-2 space-y-2">
@if (!isLoggedIn) {
<button (click)="login()" class="button-primary w-full py-1.5">Anmelden</button>
<a routerLink="/login" class="button-primary w-full py-1.5 block text-center">Anmelden</a>
<a routerLink="/register" class="bg-emerald-700 text-white hover:bg-emerald-600 w-full py-1.5 rounded block text-center">Registrieren</a>
}
@if (isLoggedIn) {
<button (click)="logout()" class="button-primary w-full py-1.5">Abmelden</button>

View file

@ -26,10 +26,13 @@ export class NavbarComponent implements OnInit, OnDestroy {
private userService = inject(UserService);
private userSubscription: Subscription | undefined;
private authSubscription: Subscription | undefined;
public balance = signal(0);
ngOnInit() {
this.userSubscription = this.userService.currentUser$.subscribe((user) => {
// Subscribe to auth changes
this.authSubscription = this.authService.currentUser.subscribe(user => {
this.isLoggedIn = !!user;
this.balance.set(user?.balance ?? 0);
console.log('Updated navbar balance:', user?.balance);
});
@ -41,13 +44,8 @@ export class NavbarComponent implements OnInit, OnDestroy {
if (this.userSubscription) {
this.userSubscription.unsubscribe();
}
}
login() {
try {
this.authService.login();
} catch (error) {
console.error('Login failed:', error);
if (this.authSubscription) {
this.authSubscription.unsubscribe();
}
}

View file

@ -1,21 +1,33 @@
import { HttpInterceptorFn } from '@angular/common/http';
import { inject } from '@angular/core';
import { OAuthStorage } from 'angular-oauth2-oidc';
import { AuthService } from '../../service/auth.service';
export const httpInterceptor: HttpInterceptorFn = (req, next) => {
const oauthStorage = inject(OAuthStorage);
const authService = inject(AuthService);
const token = authService.getToken();
if (oauthStorage.getItem('access_token')) {
// Always add CORS headers
if (token) {
return next(
req.clone({
setHeaders: {
Authorization: 'Bearer ' + oauthStorage.getItem('access_token'),
'Access-Control-Allow-Origin': '*',
Authorization: `Bearer ${token}`,
'Referrer-Policy': 'no-referrer',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': '*'
},
})
);
} else {
return next(req);
return next(
req.clone({
setHeaders: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
'Access-Control-Allow-Headers': '*'
},
})
);
}
};