Angular Login Flow — LoginComponent, AuthService and Token Storage

The Angular authentication flow is the bridge between the user’s credentials and the in-memory access token. The AuthService manages the complete session lifecycle — login, token storage, automatic refresh scheduling, session restoration on page reload, and logout. Components and guards interact with AuthService through read-only computed signals, never directly with the token storage.

Complete AuthService #

// ── auth.service.ts ────────────────────────────────────────────────────────
@Injectable({ providedIn: 'root' })
export class AuthService {
  private http    = inject(HttpClient);
  private router  = inject(Router);
  private config  = inject(APP_CONFIG);

  // ── In-memory token storage (XSS-safe) ───────────────────────────────
  private _accessToken = signal<string | null>(null);
  private _claims      = signal<JwtClaims | null>(null);
  private _refreshTimer?: ReturnType<typeof setTimeout>;

  // ── Public read-only state ────────────────────────────────────────────
  readonly accessToken = this._accessToken.asReadonly();
  readonly currentUser = this._claims.asReadonly();
  readonly isLoggedIn  = computed(() => this._claims() !== null);
  readonly displayName = computed(() => this._claims()?.displayName ?? '');
  readonly userRoles   = computed(() => this._claims()?.roles ?? []);
  hasRole = (role: string) => this.userRoles().includes(role);

  // ── Login ─────────────────────────────────────────────────────────────
  login(email: string, password: string): Observable<void> {
    return this.http.post<AuthResponse>(
      `${this.config.apiUrl}/api/auth/login`,
      { email, password },
      { withCredentials: true }     // receive httpOnly refresh token cookie
    ).pipe(
      tap(response => this.setSession(response)),
      map(() => undefined),
    );
  }

  // ── Logout ────────────────────────────────────────────────────────────
  logout(): Observable<void> {
    return this.http.post<void>(
      `${this.config.apiUrl}/api/auth/logout`, {},
      { withCredentials: true }
    ).pipe(
      finalize(() => {
        this.clearSession();
        this.router.navigate(['/auth/login']);
      }),
      catchError(() => {
        this.clearSession();         // clear locally even if API call fails
        this.router.navigate(['/auth/login']);
        return of(undefined);
      }),
    );
  }

  // ── Silent session restore on page refresh ────────────────────────────
  tryRestoreSession(): Promise<boolean> {
    return firstValueFrom(
      this.http.post<AuthResponse>(
        `${this.config.apiUrl}/api/auth/refresh`, {},
        { withCredentials: true }
      ).pipe(
        tap(response => this.setSession(response)),
        map(() => true),
        catchError(() => of(false)),
      )
    );
  }

  // ── Refresh (called by interceptor on 401) ────────────────────────────
  refreshToken(): Observable<string> {
    return this.http.post<AuthResponse>(
      `${this.config.apiUrl}/api/auth/refresh`, {},
      { withCredentials: true }
    ).pipe(
      tap(response => this.setSession(response)),
      map(response => response.accessToken),
    );
  }

  // ── Private helpers ───────────────────────────────────────────────────
  private setSession(response: AuthResponse): void {
    this._accessToken.set(response.accessToken);
    this._claims.set(this.decodeJwt(response.accessToken));
    this.scheduleRefresh(response.expiresIn);
  }

  private clearSession(): void {
    this._accessToken.set(null);
    this._claims.set(null);
    if (this._refreshTimer) clearTimeout(this._refreshTimer);
  }

  private decodeJwt(token: string): JwtClaims | null {
    try {
      const [, payload] = token.split('.');
      return JSON.parse(atob(payload.replace(/-/g, '+').replace(/_/g, '/')));
    } catch { return null; }
  }

  private scheduleRefresh(expiresInSeconds: number): void {
    if (this._refreshTimer) clearTimeout(this._refreshTimer);
    // Refresh 60s before expiry
    const refreshInMs = Math.max(0, (expiresInSeconds - 60) * 1000);
    this._refreshTimer = setTimeout(() =>
      this.refreshToken().subscribe(), refreshInMs);
  }
}

// ── app.config.ts — APP_INITIALIZER for session restore ──────────────────
export const appConfig: ApplicationConfig = {
  providers: [
    {
      provide:    APP_INITIALIZER,
      useFactory: (auth: AuthService) => () => auth.tryRestoreSession(),
      deps:       [AuthService],
      multi:      true,
    },
    ...
  ],
};

Common Mistakes #

Mistake 1 — Missing APP_INITIALIZER for session restore (guards fail on page refresh) #

❌ Wrong — no session restore; user refreshes page; isLoggedIn() is false; guard redirects to login despite valid session.

✅ Correct — APP_INITIALIZER calls tryRestoreSession() before routing begins; session restored before guards run.

Mistake 2 — Scheduling refresh without clearing previous timer (multiple timers accumulate) #

❌ Wrong — each token refresh schedules a new timer without clearing the previous one; multiple refresh calls fire.

✅ Correct — always clearTimeout(this._refreshTimer) before setting a new timer in scheduleRefresh().