feat: Added new notification for account session expiration

Added a new notification 'account-session-expired' with a warning status and message 'Your session has expired, please login again'. Also, updated UserSync to handle username changes and notify user to login again if session is expired.

src/pages/_app.tsx

@@ -113,20 +113,36 @@ const UserSync = (): ReactElement => {
   }>({
     queryKey: ['user'],
     queryFn: async () => {
-      const { data } = await axios.get<{ user: IronSession['token']; isAuthenticated: boolean }>('/api/user');
+      const { data } = await axios.get<{
+        user: IronSession['token'];
+        isAuthenticated: boolean;
+      }>('/api/user', {
+        headers: {
+          'X-Refresh-Token': 1,
+        },
+      });
       if (isNilOrEmpty(data)) {
         throw new Error('Empty session');
       }
       return data;
     },
-    retry: 1,
-    enabled: !checkUserData(user),
+    retry: false,
+
+    // refetch every 5 minutes
+    refetchInterval: 60 * 5 * 1000,
   });
 
   // Comparing the incoming user data with the current user data, and update the store if they are different
   useEffect(() => {
     if (data?.user && checkUserData(data?.user) && notEqual(data.user, user)) {
-      logger.debug({ msg: 'user data synced', data: data.user });
+      logger.debug('User Synced', { user: data.user });
+
+      // if the username has changed, we know it's a new user we should do a full reload
+      if (user.username !== data.user.username) {
+        logger.debug('Detected a username change, assuming session is expired');
+        void router.push('/user/account/login?notify=account-session-expired');
+        return;
+      }
 
       store.setState({ user: data.user });
 

src/store/slices/notification.ts

@@ -79,6 +79,11 @@ export const NOTIFICATIONS: Record<NotificationId, Notification> = {
     status: 'error',
     message: 'There was an issue logging in. Please check your credentials.',
   },
+  'account-session-expired': {
+    id: 'account-session-expired',
+    status: 'warning',
+    message: 'Your session has expired, please login again',
+  },
   'account-logout-failed': {
     id: 'account-logout-success',
     status: 'error',
@@ -134,6 +139,7 @@ export type NotificationId =
   | 'account-logout-failed'
   | 'account-logout-success'
   | 'account-register-success'
+  | 'account-session-expired'
   | 'account-reset-password-success'
   | 'api-connect-failed'
   | 'login-required'