Authentication

1login(email: string, password: string) {
2  return this.http.post<{ token: string }>('/api/auth/login', { email, password })
3    .pipe(tap(res => this.setSession(res.token)));
4}
5readonly isLoggedIn = computed(() => this.session() !== null);

1import { Component, Injectable, computed, inject, signal } from '@angular/core';
2import { HttpClient } from '@angular/common/http';
3import { Router } from '@angular/router';
4import { FormsModule } from '@angular/forms';
5import { tap } from 'rxjs';
6

7type Session = { token: string; name: string; roles: string[]; expiresAt: number };
8

9function decodeJwt(token: string): { name?: string; role?: string | string[]; exp?: number } {
10  const payload = token.split('.')[1] ?? '';
11  return JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
12}
13

14@Injectable({ providedIn: 'root' })
15export class AuthService {
16  private http = inject(HttpClient);
17  private router = inject(Router);
18  private readonly session = signal<Session | null>(this.restore());
19

20  readonly isLoggedIn = computed(() => {
21    const s = this.session();
22    return s !== null && s.expiresAt > Date.now();
23  });
24  readonly userName = computed(() => this.session()?.name ?? '');
25  readonly token = computed(() => (this.isLoggedIn() ? this.session()!.token : null));
26  hasRole(role: string) { return this.session()?.roles.includes(role) ?? false; }
27

28  login(email: string, password: string) {
29    return this.http.post<{ token: string }>('/api/auth/login', { email, password })
30      .pipe(tap(res => this.setSession(res.token)));
31  }
32

33  logout() {
34    this.session.set(null);
35    sessionStorage.removeItem('token');
36    this.router.navigate(['/login']);
37  }
38

39  private setSession(token: string) {
40    const claims = decodeJwt(token);
41    const roles = Array.isArray(claims.role) ? claims.role : claims.role ? [claims.role] : [];
42    this.session.set({ token, name: claims.name ?? 'user', roles, expiresAt: (claims.exp ?? 0) * 1000 });
43    sessionStorage.setItem('token', token);     // survives refresh, cleared when the tab closes
44  }
45

46  private restore(): Session | null {
47    const token = typeof sessionStorage !== 'undefined' ? sessionStorage.getItem('token') : null;
48    if (!token) return null;
49    try {
50      const claims = decodeJwt(token);
51      const roles = Array.isArray(claims.role) ? claims.role : claims.role ? [claims.role] : [];
52      return { token, name: claims.name ?? 'user', roles, expiresAt: (claims.exp ?? 0) * 1000 };
53    } catch {
54      return null;
55    }
56  }
57}
58

59@Component({
60  selector: 'app-login',
61  imports: [FormsModule],
62  template: `
63    @if (auth.isLoggedIn()) {
64      <p>Signed in as {{ auth.userName() }} <button (click)="auth.logout()">Log out</button></p>
65    } @else {
66      <form (ngSubmit)="submit()">
67        <input name="email" [(ngModel)]="email" type="email" placeholder="Email" required />
68        <input name="password" [(ngModel)]="password" type="password" placeholder="Password" required />
69        <button [disabled]="busy()">Log in</button>
70        @if (error()) { <p role="alert">{{ error() }}</p> }
71      </form>
72    }
73  `,
74})
75export class Login {
76  protected auth = inject(AuthService);
77  email = '';
78  password = '';
79  busy = signal(false);
80  error = signal('');
81

82  submit() {
83    this.busy.set(true);
84    this.error.set('');
85    this.auth.login(this.email, this.password).subscribe({
86      next: () => this.busy.set(false),
87      error: () => { this.busy.set(false); this.error.set('Wrong email or password.'); },
88    });
89  }
90}

Submitting valid credentials posts them to /api/auth/login; the returned JWT is decoded and the component shows “Signed in as Asha” with a Log out button. Wrong credentials show “Wrong email or password.”. Refreshing the tab keeps the session (sessionStorage) until the token’s exp time passes; Log out clears everything and goes to /login.