fix: no automatic logout and redirect when token invalid ml-174 (#335)

* feat(frontend): add  invalid token check ml-174

* refactor(frontend): fix protected route token check ml-174

* feat(frontend): add rejected payload type ml-174

* feat(frontend): add action status check ml-174

* refactor(frontend): fix invalid token check ml-174

* feat(frontend): add redirect variable ml-174

* refactor(frontend): fix error handling ml-174

* refactor(frontend): fix invalid token action notification ml-174

* refactor(frontend): fix invalid token notification while navigate ml-174

* refactor(frontend): fix get meeting details actions ml-174

Author: yehor-kostiuk

apps/frontend/src/libs/components/router-provider/protected-route.tsx

@@ -26,7 +26,11 @@ const ProtectedRoute: React.FC<Properties> = ({
 
 	if (shouldRedirect) {
 		return (
-			<Navigate replace state={{ from: location.pathname }} to={redirectTo} />
+			<Navigate
+				replace
+				state={{ from: location.pathname, showNotification: true }}
+				to={redirectTo}
+			/>
 		);
 	}
 

apps/frontend/src/libs/modules/middlewares/error-listener.middleware.ts

@@ -18,10 +18,10 @@ errorListenerMiddleware.startListening({
 		const payload = action.payload as RejectPayload | undefined;
 
 		if (payload?.status === HTTPCode.UNAUTHORIZED) {
-			notification.error(
-				payload.message ?? "Session expired. Please log in again.",
-			);
 			await listenerApi.dispatch(authActions.logout());
+			notification.error("Session expired. Please log in again.");
+
+			return;
 		}
 
 		const errorMessage =

apps/frontend/src/modules/meeting-details/slices/actions.ts

@@ -1,5 +1,6 @@
 import { createAsyncThunk } from "@reduxjs/toolkit";
 
+import { HTTPError } from "~/libs/modules/http/http.js";
 import { type AsyncThunkConfig } from "~/libs/types/types.js";
 import {
 	type MeetingDetailedResponseDto,
@@ -14,12 +15,23 @@ const getMeetingDetailsById = createAsyncThunk<
 	AsyncThunkConfig
 >(
 	`${sliceName}/get-meeting-details-by-id`,
-	async ({ id, sharedToken }, { extra }) => {
-		const { meetingDetailsApi } = extra;
+	async ({ id, sharedToken }, { extra, rejectWithValue }) => {
+		try {
+			const { meetingDetailsApi } = extra;
 
-		return await (sharedToken
-			? meetingDetailsApi.getMeetingByIdPublic(id, sharedToken)
-			: meetingDetailsApi.getMeetingByIdAuth(id));
+			return await (sharedToken
+				? meetingDetailsApi.getMeetingByIdPublic(id, sharedToken)
+				: meetingDetailsApi.getMeetingByIdAuth(id));
+		} catch (error) {
+			if (error instanceof HTTPError) {
+				return rejectWithValue({
+					message: error.message,
+					status: error.status,
+				});
+			}
+
+			return rejectWithValue({ message: "Something went wrong" });
+		}
 	},
 );
 

apps/frontend/src/pages/auth/auth.tsx

@@ -4,8 +4,10 @@ import {
 	useAppDispatch,
 	useAppSelector,
 	useCallback,
+	useEffect,
 	useLocation,
 } from "~/libs/hooks/hooks.js";
+import { notification } from "~/libs/modules/notifications/notifications.js";
 import { actions as authActions } from "~/modules/auth/auth.js";
 import {
 	type UserSignInRequestDto,
@@ -14,11 +16,24 @@ import {
 
 import { SignInForm, SignUpForm } from "./components/components.js";
 
+type LocationState = null | {
+	from?: string;
+	showNotification?: boolean;
+};
+
 const Auth: React.FC = () => {
 	const dispatch = useAppDispatch();
 	const { dataStatus, user } = useAppSelector((state) => state.auth);
 	const { pathname } = useLocation();
 	const hasUser = Boolean(user);
+	const location = useLocation() as { state: LocationState };
+
+	useEffect(() => {
+		if (location.state?.showNotification) {
+			notification.error("Session expired. Please log in again.");
+			location.state.showNotification = false;
+		}
+	}, [location.state]);
 
 	const handleSignInSubmit = useCallback(
 		(payload: UserSignInRequestDto): void => {