Currently, my authentication system has an issue:

When I log out and then log in again, the first login attempt shows “Invalid username or password.”

Then, when I try to register again with the same username, it says “Username already exists.”

After that, logging in again with the same credentials works.

I want you to fix this issue and build a simple but proper authentication system with the following behavior:

✅ Requirements

Users should be able to register (sign up), log in, and log out properly.

When a user logs out, all their session data and chat history should be cleared.

Chat history does not need to persist between sessions — it’s fine if it resets on logout.

Users should still be able to log back in with the same username and password anytime.

Passwords must be securely stored (hashed).

Once logged in, users should be redirected to the chat interface.

Each user will get their OpenRouter API key stored and retrievable after login.

The system should handle authentication and session management cleanly and consistently.

index.html

@@ -275,22 +275,35 @@ const settingsBtn = document.getElementById('settingsBtn');
         function generateChatId() {
             return 'chat_' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
         }
+        async function hashPassword(password) {
+            const encoder = new TextEncoder();
+            const data = encoder.encode(password);
+            const hashBuffer = await crypto.subtle.digest('SHA-256', data);
+            const hashArray = Array.from(new Uint8Array(hashBuffer));
+            return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+        }
+
+        async function loginUser(username, password) {
+            const hashedPassword = await hashPassword(password);
+            const storedHash = localStorage.getItem(`chatRouterPass_${username}`);
+            
+            if (storedHash !== hashedPassword) {
+                alert('Invalid username or password');
+                return false;
+            }
 
-        function loginUser(username, password) {
-            // Simple auth - store user in localStorage
             localStorage.setItem('chatRouterUser', username);
-            localStorage.setItem(`chatRouterPass_${username}`, password); // Not secure for production!
+            sessionStorage.setItem('chatRouterSession', username);
             updateAuthUI();
             
-            // Create a new chat session
             createNewChat();
-            
-            // Load user's chat list
             loadChatList(username);
+            return true;
         }
         function logoutUser() {
             const username = localStorage.getItem('chatRouterUser');
             localStorage.removeItem('chatRouterUser');
+            sessionStorage.removeItem('chatRouterSession');
             updateAuthUI();
             
             // Clear current chat and sidebar
@@ -298,8 +311,17 @@ const settingsBtn = document.getElementById('settingsBtn');
             chatList.innerHTML = '';
             currentChatId = null;
             addMessage('system', 'Please log in to start chatting.');
+            
+            // Clear all chat history for this session
+            for (let i = localStorage.length - 1; i >= 0; i--) {
+                const key = localStorage.key(i);
+                if (key.startsWith(`chatHistory_${username}_`) || 
+                    key.startsWith(`chatTitle_${username}_`)) {
+                    localStorage.removeItem(key);
+                }
+            }
         }
-        function createNewChat() {
+function createNewChat() {
             const username = localStorage.getItem('chatRouterUser');
             if (!username) return;
             
@@ -671,38 +693,34 @@ async function sendMessage() {
         authToggleBtn.addEventListener('click', () => {
             showAuthModal(!isRegistering);
         });
+        authActionBtn.addEventListener('click', async () => {
+            const username = regUsername.value.trim();
+            const password = authPassword.value.trim();
+            
+            if (!username || !password) {
+                alert('Please enter both username and password');
+                return;
+            }
 
-        authActionBtn.addEventListener('click', () => {
             if (isRegistering) {
-                const username = regUsername.value.trim();
-                const password = authPassword.value.trim();
-                
-                if (!username || !password) {
-                    alert('Please enter both username and password');
-                    return;
-                }
+                const hashedPassword = await hashPassword(password);
                 
                 if (localStorage.getItem(`chatRouterPass_${username}`)) {
                     alert('Username already exists');
                     return;
                 }
                 
-                loginUser(username, password);
+                localStorage.setItem(`chatRouterPass_${username}`, hashedPassword);
+                if (await loginUser(username, password)) {
+                    authModal.classList.add('hidden');
+                }
             } else {
-                const username = regUsername.value.trim();
-                const password = authPassword.value.trim();
-                const storedPass = localStorage.getItem(`chatRouterPass_${username}`);
-                
-                if (!storedPass || storedPass !== password) {
-                    alert('Invalid username or password');
-                    return;
+                if (await loginUser(username, password)) {
+                    authModal.classList.add('hidden');
                 }
-                
-                loginUser(username, password);
             }
-            authModal.classList.add('hidden');
         });
-        newChatBtn.addEventListener('click', createNewChat);
+newChatBtn.addEventListener('click', createNewChat);
         newSidebarChat.addEventListener('click', createNewChat);
         
         // Sidebar toggle for mobile
@@ -724,9 +742,15 @@ messageInput.addEventListener('keydown', (e) => {
         });
         // Initialize
         loadSettings();
-        updateAuthUI();
         
-        // Welcome message
+        // Check for active session
+        const activeUser = sessionStorage.getItem('chatRouterSession');
+        if (activeUser && localStorage.getItem(`chatRouterPass_${activeUser}`)) {
+            localStorage.setItem('chatRouterUser', activeUser);
+        }
+        
+        updateAuthUI();
+// Welcome message
         setTimeout(() => {
             if (!localStorage.getItem('chatRouterUser')) {
                 addMessage('system', 'Welcome to ChatRouter! Please log in to start chatting.');