@pagopa/selfcare-common-frontend 1.37.0 → 2.0.0

package/CHANGELOG.md

@@ -4,8 +4,18 @@ All notable changes to this project will be documented in this file. Dates are d
 
 Generated by [`auto-changelog`](https://github.com/CookPete/auto-changelog).
 
+#### [v2.0.0](https://github.com/pagopa/selfcare-common-frontend/compare/v1.38.0...v2.0.0)
+
+#### [v1.38.0](https://github.com/pagopa/selfcare-common-frontend/compare/v1.37.0...v1.38.0)
+
+> 24 July 2026
+
+- feat: implement onSuccess redirect logic for login/logout flows [`#349`](https://github.com/pagopa/selfcare-common-frontend/pull/349)
+
 #### [v1.37.0](https://github.com/pagopa/selfcare-common-frontend/compare/v1.36.0...v1.37.0)
 
+> 9 June 2026
+
 - chore: release v1.36.0 [`#346`](https://github.com/pagopa/selfcare-common-frontend/pull/346)
 - [SELC-8631] Feat: integration of UTM for PNPG [`#8631`](https://pagopa.atlassian.net/browse/8631)
 

package/lib/components/Header/Header.js

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 import { CONFIG } from '../../config/env';
 import { buildAssistanceURI } from '../../services/assistanceService';
+import { withOnSuccess } from '../../utils/login-utils';
 import { isPagoPaUser } from '../../utils/storage';
 const SELFCARE_PRODUCT = {
     id: 'prod-selfcare',
@@ -35,7 +36,7 @@ const Header = ({ withSecondHeader, productsList = [], selectedPartyId, selected
     const renderedPartyId = fixedParty ? fixedParty.id : selectedPartyId;
     // Memoize the product list
     const fullProductList = useMemo(() => (addSelfcareProduct ? [productToRender, ...productsList] : productsList), [addSelfcareProduct, productToRender, productsList]);
-    return (_jsxs(Fragment, { children: [_jsx("header", { children: _jsx(HeaderAccount, { rootLink: ROOT_LINK, loggedUser: loggedUser, onAssistanceClick: () => onExit(() => window.location.assign(buildAssistanceURI(assistanceEmail))), onLogin: () => onExit(() => window.location.assign(CONFIG.URL_FE.LOGIN)), onLogout: onLogoutClick ?? (() => onExit(() => window.location.assign(CONFIG.URL_FE.LOGOUT))), enableLogin: enableLogin, userActions: userActions, enableDropdown: enableDropdown, enableAssistanceButton: enableAssistanceButton, onDocumentationClick: onDocumentationClick }) }), withSecondHeader === true ? (_jsx("nav", { children: _jsx(HeaderProduct, { productId: selectedProductId || productToRender.id, productsList: fullProductList, partyId: renderedPartyId, partyList: renderedPartyList, onSelectedProduct: onSelectedProduct, onSelectedParty: onSelectedParty, maxCharactersNumberMultiLineButton: maxCharactersNumberMultiLineButton, maxCharactersNumberMultiLineItem: maxCharactersNumberMultiLineItem, ...(isPagoPaUser() &&
+    return (_jsxs(Fragment, { children: [_jsx("header", { children: _jsx(HeaderAccount, { rootLink: ROOT_LINK, loggedUser: loggedUser, onAssistanceClick: () => onExit(() => window.location.assign(buildAssistanceURI(assistanceEmail))), onLogin: () => onExit(() => window.location.assign(withOnSuccess(CONFIG.URL_FE.LOGIN))), onLogout: onLogoutClick ?? (() => onExit(() => window.location.assign(CONFIG.URL_FE.LOGOUT))), enableLogin: enableLogin, userActions: userActions, enableDropdown: enableDropdown, enableAssistanceButton: enableAssistanceButton, onDocumentationClick: onDocumentationClick }) }), withSecondHeader === true ? (_jsx("nav", { children: _jsx(HeaderProduct, { productId: selectedProductId || productToRender.id, productsList: fullProductList, partyId: renderedPartyId, partyList: renderedPartyList, onSelectedProduct: onSelectedProduct, onSelectedParty: onSelectedParty, maxCharactersNumberMultiLineButton: maxCharactersNumberMultiLineButton, maxCharactersNumberMultiLineItem: maxCharactersNumberMultiLineItem, ...(isPagoPaUser() &&
                         !isAdminPage && {
                         chipLabel: t('common.header.chipLabel'),
                         chipColor: 'primary',

package/lib/hooks/useLogin.js

@@ -2,6 +2,7 @@ import isEmpty from 'lodash/isEmpty';
 import { useDispatch } from 'react-redux';
 import { CONFIG } from '../config/env';
 import { userActions } from '../redux/slices/userSlice';
+import { withOnSuccess } from '../utils/login-utils';
 import { isPagoPaUser, storageTokenOps, storageUserOps } from '../utils/storage';
 const testToken = CONFIG.TEST.JWT;
 const mockedUser = {
@@ -29,7 +30,7 @@ export const useLogin = () => {
             // Remove any partial data that might have remained, just for safety
             storageUserOps.delete();
             // Go to the login view
-            globalThis.location.assign(LOGIN_URL);
+            globalThis.location.assign(withOnSuccess(LOGIN_URL));
             // This return is necessary
             return;
         }

package/lib/utils/api-utils.js

@@ -3,6 +3,7 @@ import { AbortableFetch, setFetchTimeout, toFetch } from '@pagopa/ts-commons/lib
 import { isRight, toError } from 'fp-ts/lib/Either';
 import { CONFIG } from '../config/env';
 import { appStateActions } from '../redux/slices/appStateSlice';
+import { withOnSuccess } from './login-utils';
 import { isPagoPaUser } from './storage';
 /** To show an error popup to inform of the not valid session */
 export const onRedirectToLogin = (store) => store.dispatch(appStateActions.addError({
@@ -22,7 +23,10 @@ export const buildFetchApi = (timeoutMs = 300000) => {
     // tslint:disable-next-line: no-any
     return fetchWithTimeout;
 };
-const LOGIN_URL = isPagoPaUser() ? CONFIG.URL_FE.LOGOUT_GOOGLE : CONFIG.URL_FE.LOGOUT;
+/** Resolved when the session turns out to be invalid, and not at import time: the applications
+override CONFIG.URL_FE and write the logged user in the storage inside their own entrypoint, which
+ESM evaluates after this module. */
+const buildInvalidSessionUrl = () => withOnSuccess(isPagoPaUser() ? CONFIG.URL_FE.LOGOUT_GOOGLE : CONFIG.URL_FE.LOGOUT);
 /** Extract the response of a @pagopa/openapi-codegen-ts generated client rest invocation having status code successHttpStatus.
 If notValidTokenHttpStatus is not null and the returned status is equal to notValidTokenHttpStatus, it will call the onRedirectToLogin function and will schedule the redirect towards logout path.
 If notAuthorizedTokenHttpStatus is  not null and the returned status is equal to notAuthorizedTokenHttpStatus, it will throw an Error with message "Operation not allowed".
@@ -36,7 +40,8 @@ export const extractResponse = async (response, successHttpStatus, onRedirectToL
         }
         else if (notValidTokenHttpStatus && response.right.status === notValidTokenHttpStatus) {
             onRedirectToLogin();
-            window.setTimeout(() => window.location.assign(LOGIN_URL), 2000);
+            const invalidSessionUrl = buildInvalidSessionUrl();
+            window.setTimeout(() => window.location.assign(invalidSessionUrl), 2000);
             return new Promise(() => null);
         }
         else if (notAuthorizedTokenHttpStatus &&

package/lib/utils/login-utils.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Adds to a login/logout URL the `onSuccess` param that the login FE reads to send the user back to
+ * the page they came from. It is resolved when the redirect happens, so it also covers a session
+ * expiring in the middle of the navigation, and not only the entry point of the application.
+ * A destination already present in the URL wins: applications building it on their own keep working
+ * and the param is never duplicated.
+ */
+export declare const withOnSuccess: (url: string) => string;

package/lib/utils/login-utils.js

@@ -0,0 +1,19 @@
+const ON_SUCCESS_PARAM = 'onSuccess';
+/** Where the user is right now, in the form the login FE expects in order to bring them back */
+const currentDestination = () => globalThis.location.pathname + globalThis.location.search;
+/**
+ * Adds to a login/logout URL the `onSuccess` param that the login FE reads to send the user back to
+ * the page they came from. It is resolved when the redirect happens, so it also covers a session
+ * expiring in the middle of the navigation, and not only the entry point of the application.
+ * A destination already present in the URL wins: applications building it on their own keep working
+ * and the param is never duplicated.
+ */
+export const withOnSuccess = (url) => {
+    const queryStart = url.indexOf('?');
+    const query = queryStart === -1 ? '' : url.slice(queryStart + 1);
+    const destination = currentDestination();
+    if (!destination || new URLSearchParams(query).has(ON_SUCCESS_PARAM)) {
+        return url;
+    }
+    return `${url}${queryStart === -1 ? '?' : '&'}${ON_SUCCESS_PARAM}=${encodeURIComponent(destination)}`;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pagopa/selfcare-common-frontend",
   "description": "Shared React components for the pagopa selfcare project",
-  "version": "1.37.0",
+  "version": "2.0.0",
   "license": "MIT",
   "repository": "https://github.com/pagopa/selfcare-common-frontend",
   "author": "https://www.pagopa.gov.it",