RTL/src/app/shared/components/login/login.component.ts
saubyk 030592ac23 Address review: fix logout -> re-login under session-bound CSRF tokens
Session-bound tokens broke re-login after logout: logoutUser destroys
the session, but the SPA navigated to the login page without a
document reload, so the surviving _csrf/XSRF-TOKEN cookies stayed
bound to the destroyed session id and the next login POST failed with
403 until a manual refresh. Hit both manual logout and the idle-timer
auto-logout.

Two coordinated fixes:

1. Frontend: the logout effect now performs a full document navigation
   to the login page (after the server logout completes, so the
   request is not aborted by the reload), which re-runs the handshake
   and mints a token bound to the fresh session. The logout reason
   previously travelled on the NgRx action stream, which cannot
   survive a reload - it is now handed over via sessionStorage (set
   after clearAll) and picked up and cleared by the login component.
   The SSO branch is unchanged (it already left the document).

2. Backend: the EBADCSRFTOKEN error path now re-mints the token for
   the current session before responding 403, so any client holding a
   stale token (e.g. after a server restart rotates the boot secret)
   self-heals on retry instead of looping on 403.

Verified on the fixture: reviewer's repro now shows login 200 ->
logout 200 -> stale-token login 403 (binding intact) with re-minted
cookies on the 403 -> retry 200; and the reload path (fresh GET /
after logout, what the full navigation does) logs in on the first
attempt. Both API suites, the CSRF battery, rtl.effects specs and the
full frontend suite pass; frontend and backend artifacts rebuilt.
2026-07-19 22:01:23 -07:00

117 lines
4.7 KiB
TypeScript

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject, combineLatest } from 'rxjs';
import { filter, take, takeUntil } from 'rxjs/operators';
import * as sha256 from 'sha256';
import { Store } from '@ngrx/store';
import { Actions } from '@ngrx/effects';
import { faUnlockAlt } from '@fortawesome/free-solid-svg-icons';
import { LoginTokenComponent } from '../data-modal/login-2fa-token/login-2fa-token.component';
import { RTLConfiguration } from '../../models/RTLconfig';
import { APICallStatusEnum, PASSWORD_BLACKLIST, RTLActions, ScreenSizeEnum } from '../../services/consts-enums-functions';
import { CommonService } from '../../services/common.service';
import { LoggerService } from '../../services/logger.service';
import { SessionService } from '../../services/session.service';
import { RTLEffects } from '../../../store/rtl.effects';
import { RTLState } from '../../../store/rtl.state';
import { login, openAlert } from '../../../store/rtl.actions';
import { rootAppConfig, authorizedStatus, loginStatus } from '../../../store/rtl.selector';
@Component({
standalone: false,
selector: 'rtl-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit, OnDestroy {
public faUnlockAlt = faUnlockAlt;
public appConfig: RTLConfiguration;
public logoutReason = '';
public password = '';
public rtlSSO = 0;
public rtlCookiePath = '';
public accessKey = '';
public flgShow = false;
public screenSize = '';
public screenSizeEnum = ScreenSizeEnum;
public loginErrorMessage = '';
public apiCallStatusEnum = APICallStatusEnum;
private unSubs: Array<Subject<void>> = [new Subject(), new Subject(), new Subject()];
constructor(private actions: Actions, private logger: LoggerService, private store: Store<RTLState>, private rtlEffects: RTLEffects, private commonService: CommonService, private sessionService: SessionService) { }
ngOnInit() {
this.screenSize = this.commonService.getScreenSize();
combineLatest([this.store.select(loginStatus), this.store.select(authorizedStatus)]).pipe(takeUntil(this.unSubs[0])).
subscribe(([loginCallRes, isAuthorizedCallRes]) => {
this.loginErrorMessage = '';
if (loginCallRes.status === APICallStatusEnum.ERROR) {
this.loginErrorMessage = this.loginErrorMessage + ((typeof (loginCallRes.message) === 'object') ? JSON.stringify(loginCallRes.message) : loginCallRes.message);
this.logger.error(loginCallRes.message);
}
if (isAuthorizedCallRes.status === APICallStatusEnum.ERROR) {
this.loginErrorMessage = this.loginErrorMessage + ((typeof (isAuthorizedCallRes.message) === 'object') ? JSON.stringify(isAuthorizedCallRes.message) : isAuthorizedCallRes.message);
this.logger.error(isAuthorizedCallRes.message);
}
});
this.store.select(rootAppConfig).pipe(takeUntil(this.unSubs[1])).subscribe((appConfig) => {
this.appConfig = appConfig;
this.logger.info(appConfig);
});
this.actions.pipe(filter((action) => action.type === RTLActions.LOGOUT), take(1)).
subscribe((action: any) => {
this.logoutReason = action.payload;
});
// Logout navigates with a full document load (to re-mint the CSRF token),
// so the reason arrives via sessionStorage instead of the action stream.
const storedLogoutReason = this.sessionService.getItem('logoutReason');
if (storedLogoutReason) {
this.logoutReason = storedLogoutReason;
this.sessionService.removeItem('logoutReason');
}
}
onLogin(): boolean | void {
if (!this.password) {
return true;
}
this.loginErrorMessage = '';
this.logoutReason = '';
if (this.appConfig.enable2FA) {
this.store.dispatch(openAlert({
payload: {
maxWidth: '35rem',
data: {
component: LoginTokenComponent
}
}
}));
this.rtlEffects.closeAlert.
pipe(take(1)).
subscribe((alertRes) => {
if (alertRes) {
this.store.dispatch(login({ payload: { password: sha256(this.password), defaultPassword: PASSWORD_BLACKLIST.includes(this.password.toLowerCase()), twoFAToken: alertRes.twoFAToken } }));
}
});
} else {
this.store.dispatch(login({ payload: { password: sha256(this.password), defaultPassword: PASSWORD_BLACKLIST.includes(this.password.toLowerCase()) } }));
}
}
resetData() {
this.password = '';
this.loginErrorMessage = '';
this.logoutReason = '';
this.flgShow = false;
}
ngOnDestroy() {
this.unSubs.forEach((completeSub) => {
completeSub.next(<any>null);
completeSub.complete();
});
}
}