fix(Client): add time synchronization to fix authentication time window issues

Author: Nick-Maro

backend-servers/server/commandHandler.ts

@@ -114,6 +114,7 @@ export class CommandHandler {
                 message: "Client registered with success!",
                 client_id: username,
                 status: "registered",
+                timestamp: Date.now(),
                 ttl_info: {
                     client_ttl_hours: CONFIG.CLIENT_TTL / 3600,
                     message_ttl_hours: CONFIG.MESSAGE_TTL / 3600
@@ -587,6 +588,7 @@ export class CommandHandler {
                 };
                 break;
             }
+
             case command === "get_messages": {
                 const room_id = currentClient.room_id;
                 if (room_id) {
@@ -667,7 +669,8 @@ export class CommandHandler {
                 response = {
                     ...response,
                     message: "Heartbeat received",
-                    client_status: "alive"
+                    client_status: "alive",
+                    timestamp: Date.now() 
                 };
                 break;
             }

client/src/shared/authContext.tsx

@@ -7,6 +7,24 @@ import UsernameModal from '../components/UsernameModal';
 
 const ClientContext = createContext<ClientContextType | null>(null);
 
+let timeOffset = 0;
+let timeSynced = false;
+
+export const getAdjustedTimestamp = (): string => {
+  return new Date(Date.now() + timeOffset).toISOString();
+};
+
+const calculateTimeOffset = (serverTimestamp: number): number => {
+  const clientTime = Date.now();
+  const offset = serverTimestamp - clientTime;
+  console.log(`Server time: ${new Date(serverTimestamp).toISOString()}`);
+  console.log(`Client time: ${new Date(clientTime).toISOString()}`);
+  console.log(`Calculated offset: ${offset}ms`);
+  return offset;
+};
+
+
+
 const validateUsername = (username: string): boolean => {
   const regex = /^[a-zA-Z0-9_-]{3,16}$/;
   return regex.test(username);
@@ -18,6 +36,7 @@ export const ClientProvider = ({ children }: { children: ComponentChildren }) =>
   const [loading, setLoading] = useState(true);
   const [showUsernameModal, setShowUsernameModal] = useState(false);
   const [usernamePromptReason, setUsernamePromptReason] = useState<string>('');
+  const [isTimeSynced, setIsTimeSynced] = useState(false);
 
   const promptForUsername = (reason: string = 'Enter a username') => {
     setUsernamePromptReason(reason);
@@ -39,6 +58,15 @@ export const ClientProvider = ({ children }: { children: ComponentChildren }) =>
     }
   };
 
+
+  useEffect(() => {
+    if(status !== "open") return;
+    
+
+    setIsTimeSynced(false);
+    timeSynced = false;
+  }, [status]);
+
   useEffect(() => {
     if(status !== "open") return;
 
@@ -58,26 +86,42 @@ export const ClientProvider = ({ children }: { children: ComponentChildren }) =>
       }
 
       setUsername(savedUsername);
-      sendAuthenticatedMessage(sendMessage, { command: "heartbeat", client_id: savedUsername });
+      
+
+      sendMessage({ command: "heartbeat", client_id: savedUsername });
     })();
   }, [status, sendMessage]);
 
+
   useEffect(() => {
     if(!messages.length) return;
 
     const lastMessage = messages[messages.length - 1];
 
+
+    if((lastMessage.command === "upload_public_key" || lastMessage.command === "heartbeat") && lastMessage.timestamp) {
+      const newOffset = calculateTimeOffset(lastMessage.timestamp);
+      timeOffset = newOffset;
+      timeSynced = true;
+      setIsTimeSynced(true);
+      console.log('Time synchronized with server via', lastMessage.command);
+    }
+    
+
     if(typeof lastMessage.command === 'string' && lastMessage.command === "upload_public_key" && lastMessage.client_id){
       localStorage.setItem('username', lastMessage.client_id);
       setUsername(lastMessage.client_id);
       setLoading(false);
       return;
     }
 
+  
     if(lastMessage.command === 'heartbeat'){
       if(lastMessage.error){
         localStorage.removeItem('username');
         setUsername(null);
+        setIsTimeSynced(false);
+        timeSynced = false;
         promptForUsername('Session expired. Please re-enter your username.');
       }
       else{
@@ -88,8 +132,9 @@ export const ClientProvider = ({ children }: { children: ComponentChildren }) =>
     }
   }, [messages]);
 
+
   useEffect(() => {
-    if(!username || status !== 'open') return;
+    if(!username || status !== 'open' || !isTimeSynced) return;
 
     const heartbeatInterval = setInterval(async () => {
       try{ 
@@ -104,10 +149,13 @@ export const ClientProvider = ({ children }: { children: ComponentChildren }) =>
     }, 25000);
 
     return () => clearInterval(heartbeatInterval);
-  }, [username, status, sendMessage]);
+  }, [username, status, sendMessage, isTimeSynced]);
 
   return (
-    <ClientContext.Provider value={{ username, loading }}>
+    <ClientContext.Provider value={{ 
+      username, 
+      loading: loading || !isTimeSynced 
+    }}>
       {children}
       <UsernameModal
         isOpen={showUsernameModal}