Merge pull request #745 from IT-Academy-BCN/fix/#104-localstorage

fix(auth): replace localStorage with sessionStorage in interceptor (#104)

Author: ivilarop

CHANGELOG.md

@@ -4,6 +4,12 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to
 [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+### [itachallenge-frontend-3.26.0-RELEASE] - 2026-02-16
+
+### Changed
+- Authentication now uses `sessionStorage` instead of `localStorage` for storing auth tokens and usernames.
+- Sessions are now tab-specific and expire when the browser tab is closed.
+- Users must log in again after closing the tab (no auto-login).
 ### [ita-challenges-frontend-3.25.1-RELEASE] - 2026-02-16
 
 ### Changed

conf/.env.CI.dev

@@ -1,2 +1,2 @@
 MICROSERVICE_DEPLOY=ita-challenges-frontend
-MICROSERVICE_VERSION=3.25.1-RELEASE
+MICROSERVICE_VERSION=3.26.0-RELEASE

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ita-challenges-frontend",
-  "version": "3.25.1-RELEASE",
+  "version": "3.26.0-RELEASE",
    "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.dev.json",

src/app/core/layout/header/desktop-nav/desktop-nav.component.spec.ts

@@ -4,7 +4,7 @@ import { NavService } from 'src/app/services/nav.service'
 import { TranslateModule } from '@ngx-translate/core'
 import { RouterModule, ActivatedRoute } from '@angular/router'
 import { AuthService } from 'src/app/services/auth.service';
-import { of } from 'rxjs';
+import { of, throwError } from 'rxjs'
 import { By } from '@angular/platform-browser'
 import { Component, Input } from '@angular/core';
 
@@ -36,6 +36,7 @@ class MockAuthService {
   getUserPhoto = jest.fn(() => of('https://mock-photo-url.com/avatar.png'))
 
   checkAndHandleExpiredToken = jest.fn()
+  switchRole = jest.fn((role: string) => of({ token: 'new-token-123' }))
 }
 
 const mockActivatedRoute = {
@@ -162,4 +163,23 @@ describe('DesktopNavComponent', () => {
     component.openRegisterUsersModal();
     expect(openRegisterUsersModalSpy).toHaveBeenCalled();
   });
+
+  it('✅ Should switch role successfully', () => {
+    sessionStorage.clear() 
+    component.onSwitchRole('USER')
+    expect(authService.switchRole).toHaveBeenCalledWith('USER')
+    expect(sessionStorage.getItem('authToken')).toBe('new-token-123')
+    expect(authService.updateUserRoleAndUserNameFromToken).toHaveBeenCalled()
+  })
+
+  it('❌ Should handle switch role error', () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
+    jest.spyOn(authService, 'switchRole').mockReturnValue(
+      throwError(() => new Error('Failed'))
+    )
+    component.onSwitchRole('ADMIN')
+
+    expect(consoleSpy).toHaveBeenCalled()
+    consoleSpy.mockRestore()
+  })
 })

src/app/core/layout/header/desktop-nav/desktop-nav.component.ts

@@ -89,7 +89,7 @@ export class DesktopNavComponent implements OnInit, OnDestroy{
   onSwitchRole (newRole: 'ADMIN' | 'USER'): void {
     this._authService.switchRole(newRole).subscribe({
       next: (data) => {
-        localStorage.setItem('authToken', data.token)
+        sessionStorage.setItem('authToken', data.token)
         this._authService.updateUserRoleAndUserNameFromToken()
       },
       error: (error) => {

src/app/core/layout/header/mobile-nav/mobile-nav.component.spec.ts

@@ -26,6 +26,7 @@ class MockAuthService {
   getUserPhoto = jest.fn(() => of('https://mock-photo-url.com/avatar.png'))
 
   checkAndHandleExpiredToken = jest.fn()
+  switchRole = jest.fn((role: string) => of({ token: 'new-token-123' }))
 }
 
 const mockActivatedRoute = {

src/app/core/layout/header/mobile-nav/mobile-nav.component.ts

@@ -88,7 +88,7 @@ export class MobileNavComponent implements OnInit, OnDestroy{
   onSwitchRole (newRole: 'ADMIN' | 'USER'): void {
     this._authService.switchRole(newRole).subscribe({
       next: (data) => {
-        localStorage.setItem('authToken', data.token)
+        sessionStorage.setItem('authToken', data.token)
         this._authService.updateUserRoleAndUserNameFromToken()
       },
       error: (error) => {

src/app/interceptors/jwt-interceptor.spec.ts

@@ -0,0 +1,46 @@
+import { TestBed } from '@angular/core/testing'
+import { HttpTestingController, HttpClientTestingModule } from '@angular/common/http/testing'
+import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http'
+import { JwtInterceptor } from './jwt-interceptor'
+import { CookieService } from 'ngx-cookie-service'
+import { environment } from 'src/environments/environment'
+
+describe('JwtInterceptor', () => {
+  let httpMock: HttpTestingController
+  let httpClient: HttpClient
+  const apiUrl = `${environment.BACKEND_ITA_CHALLENGE_BASE_URL}/test`
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientTestingModule],
+      providers: [
+        { provide: CookieService, useValue: {} },
+        { provide: HTTP_INTERCEPTORS, useClass: JwtInterceptor, multi: true }
+      ]
+    })
+    httpMock = TestBed.inject(HttpTestingController)
+    httpClient = TestBed.inject(HttpClient)
+    sessionStorage.clear()
+  })
+
+  afterEach(() => {
+    httpMock.verify()
+  })
+
+  it('should add auth header with token', () => {
+    sessionStorage.setItem('authToken', 'token')
+    httpClient.get(apiUrl).subscribe()
+    expect(httpMock.expectOne(apiUrl).request.headers.get('Authorization')).toBe('Bearer token')
+  })
+
+  it('should NOT add header without token', () => {
+    httpClient.get(apiUrl).subscribe()
+    expect(httpMock.expectOne(apiUrl).request.headers.get('Authorization')).toBeNull()
+  })
+
+  it('should NOT add header for external URLs', () => {
+    sessionStorage.setItem('authToken', 'token')
+    httpClient.get('https://ext.com').subscribe()
+    expect(httpMock.expectOne('https://ext.com').request.headers.get('Authorization')).toBeNull()
+  })
+})

src/app/interceptors/jwt-interceptor.ts

@@ -12,7 +12,7 @@ export class JwtInterceptor implements HttpInterceptor {
   private readonly cookieService = inject(CookieService)
 
   intercept (request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
-    const token: string = this.cookieService.get('authToken')
+    const token: string = sessionStorage.getItem('authToken') ?? ''
     const isApiUrl = request.url.startsWith(environment.BACKEND_ITA_CHALLENGE_BASE_URL)
     if (isApiUrl && token !== '') {
       // Agregar el token al encabezado Authorization

src/app/modules/mentor/mentor-login/mentor-login.component.spec.ts

@@ -150,34 +150,58 @@ describe('MentorLoginComponent', () => {
       environment.BACKEND_ITA_CHALLENGE_BASE_URL + environment.BACKEND_GITHUB_VALIDATE_ENDPOINT,
       { code: 'testCode' }
     )
-    expect(localStorage.getItem('username')).toBe('testUser')
-    expect(localStorage.getItem('authToken')).toBe('123456')
+    expect(sessionStorage.getItem('username')).toBe('testUser')
+    expect(sessionStorage.getItem('authToken')).toBe('123456')
     expect(authServiceMock.updateUserRoleAndUserNameFromToken).toHaveBeenCalled()
     expect(routerSpy).toHaveBeenCalledWith([], { queryParams: { code: null }, queryParamsHandling: 'merge' })
     expect(modalSpy).toHaveBeenCalled()
     expect(loginSuccessSpy).toHaveBeenCalledWith(true)
   })
 
+  it('❌ Should handle invalid GitHub response and clean storage', () => {
+    sessionStorage.setItem('username', 'testUser')
+    sessionStorage.setItem('authToken', '123456')
+
+    const mockResponse = { isValid: false, username: '', token: '' }
+    jest.spyOn(component.http, 'post').mockReturnValue(of(mockResponse))
+    const errorSpy = jest.spyOn(component, 'showError')
+
+    component.authenticateWithGitHub('testCode')
+
+    expect(errorSpy).toHaveBeenCalledWith('unauthorized')
+    expect(sessionStorage.getItem('username')).toBeNull()
+    expect(sessionStorage.getItem('authToken')).toBeNull()
+  })
+
   it.each<ErrorHandlingTestCase>([
     { statusCode: 401, expectedError: 'unauthorized' },
     { statusCode: 403, expectedError: 'unauthorized' },
-    { statusCode: 500, expectedError: 'server_error' }
+    { statusCode: 500, expectedError: 'server_error' },
+    { statusCode: 404, expectedError: 'unauthorized' }
   ])('❌ Should handle error %i and show error message', ({ statusCode, expectedError }, done) => {
-    localStorage.setItem('username', 'testUser')
-    localStorage.setItem('authToken', '123456')
+    sessionStorage.setItem('username', 'testUser')
+    sessionStorage.setItem('authToken', '123456')
 
     const httpSpy = jest.spyOn(component.http, 'post').mockReturnValue(
       throwError(() => ({ status: statusCode }))
     )
 
     const errorSpy = jest.spyOn(component, 'showError')
-
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation()
     component.authenticateWithGitHub('testCode')
 
     setTimeout(() => {
       expect(httpSpy).toHaveBeenCalled()
       expect(errorSpy).toHaveBeenCalledWith(expectedError)
       expect(component.isLoading).toBe(false)
+      if (statusCode === 403) {
+        expect(sessionStorage.getItem('username')).toBeNull()
+        expect(sessionStorage.getItem('authToken')).toBeNull()
+      }
+      if (statusCode === 404) {
+        expect(consoleSpy).toHaveBeenCalled()
+      }
+      consoleSpy.mockRestore()
 
       done()
     }, 100)
@@ -193,4 +217,13 @@ describe('MentorLoginComponent', () => {
     expect(component.isErrorVisible).toBe(false)
     expect(component.isShowTermsError).toBe(false)
   })
+
+  it('✅ Should redirect to GitHub signup', () => {
+    delete (window as any).location
+    window.location = { href: '' } as any
+    
+    component.redirectToRegister()
+    
+    expect(window.location.href).toBe('https://github.com/signup')
+  })
 })