now i want to add proper authentication where user can login only with their google account and Users should be able to sign up, log in, and log out securely Once logged in, users should automatically be taken to the chat interface. Each user should have their own chat history — so when they log in again later, they can see their previous conversations in the sidebar

.env

@@ -0,0 +1,16 @@
+```env
+# Google OAuth
+GOOGLE_CLIENT_ID=your_google_client_id.apps.googleusercontent.com
+GOOGLE_CLIENT_SECRET=your_google_client_secret
+GOOGLE_REDIRECT_URI=http://localhost:3000/auth/google/callback
+
+# Session
+SESSION_SECRET=your_session_secret_here
+
+# OpenRouter
+OPENROUTER_API_KEY=your_openrouter_api_key
+
+# Server
+PORT=3000
+NODE_ENV=development
+```

auth.js

@@ -0,0 +1,93 @@
+```javascript
+const { OAuth2Client } = require('google-auth-library');
+const express = require('express');
+const session = require('express-session');
+const dotenv = require('dotenv');
+const path = require('path');
+
+dotenv.config();
+
+const app = express();
+const client = new OAuth2Client(process.env.GOOGLE_CLIENT_ID);
+
+// Middleware
+app.use(express.json());
+app.use(express.static(path.join(__dirname, 'public')));
+app.use(session({
+  secret: process.env.SESSION_SECRET,
+  resave: false,
+  saveUninitialized: false,
+  cookie: { secure: process.env.NODE_ENV === 'production', maxAge: 24 * 60 * 60 * 1000 }
+}));
+
+// Google OAuth routes
+app.get('/auth/google', (req, res) => {
+  const url = client.generateAuthUrl({
+    access_type: 'online',
+    scope: ['profile', 'email'],
+    redirect_uri: process.env.GOOGLE_REDIRECT_URI
+  });
+  res.redirect(url);
+});
+
+app.get('/auth/google/callback', async (req, res) => {
+  const { code } = req.query;
+
+  try {
+    const { tokens } = await client.getToken({
+      code,
+      redirect_uri: process.env.GOOGLE_REDIRECT_URI
+    });
+
+    const ticket = await client.verifyIdToken({
+      idToken: tokens.id_token,
+      audience: process.env.GOOGLE_CLIENT_ID
+    });
+
+    const payload = ticket.getPayload();
+    req.session.user = {
+      id: payload.sub,
+      email: payload.email,
+      name: payload.name,
+      picture: payload.picture
+    };
+
+    res.redirect('/');
+  } catch (error) {
+    console.error('Auth error:', error);
+    res.redirect('/?auth_error=1');
+  }
+});
+
+app.get('/auth/logout', (req, res) => {
+  req.session.destroy();
+  res.redirect('/');
+});
+
+app.get('/auth/status', (req, res) => {
+  res.json({ isAuthenticated: !!req.session.user, user: req.session.user });
+});
+
+// Chat history routes
+app.get('/api/chats', async (req, res) => {
+  if (!req.session.user) return res.sendStatus(401);
+  
+  // In a real app, you'd fetch from a database
+  const chats = JSON.parse(localStorage.getItem(`chats_${req.session.user.id}`) || '[]');
+  res.json(chats);
+});
+
+app.post('/api/chats', async (req, res) => {
+  if (!req.session.user) return res.sendStatus(401);
+  
+  // In a real app, you'd save to a database
+  const chats = JSON.parse(localStorage.getItem(`chats_${req.session.user.id}`) || '[]');
+  chats.push(req.body);
+  localStorage.setItem(`chats_${req.session.user.id}`, JSON.stringify(chats));
+  
+  res.sendStatus(201);
+});
+
+const PORT = process.env.PORT || 3000;
+app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
+```

index.html

@@ -205,7 +205,7 @@
             <p class="mt-1">Your conversations stay private and secure</p>
         </footer>
     </div>
-
+    <script src="https://accounts.google.com/gsi/client" async defer></script>
     <script>
         feather.replace();
         // DOM Elements - New Sidebar Elements
@@ -215,17 +215,8 @@
         const chatList = document.getElementById('chatList');
         
         // DOM Elements - Original
-const authBtn = document.getElementById('authBtn');
-        const authModal = document.getElementById('authModal');
-        const authModalTitle = document.getElementById('authModalTitle');
-        const closeAuth = document.getElementById('closeAuth');
-        const regUsername = document.getElementById('regUsername');
-        const authPassword = document.getElementById('authPassword');
-        const authActionBtn = document.getElementById('authActionBtn');
-        const authToggleBtn = document.getElementById('authToggleBtn');
-        const authToggleText = document.getElementById('authToggleText');
-        const registerFields = document.getElementById('registerFields');
-        const newChatBtn = document.getElementById('newChatBtn');
+        const authBtn = document.getElementById('authBtn');
+const newChatBtn = document.getElementById('newChatBtn');
 const settingsBtn = document.getElementById('settingsBtn');
         const settingsModal = document.getElementById('settingsModal');
         const closeSettings = document.getElementById('closeSettings');
@@ -238,36 +229,49 @@ const settingsBtn = document.getElementById('settingsBtn');
         const typingIndicator = document.getElementById('typingIndicator');
         const modelIndicator = document.getElementById('modelIndicator');
         const themeBtns = document.querySelectorAll('.theme-btn');
-        // User management
-        let isRegistering = false;
+        // Auth state management
+        let currentUser = null;
 
-        function updateAuthUI() {
-            const loggedInUser = localStorage.getItem('chatRouterUser');
-            if (loggedInUser) {
-                authBtn.innerHTML = `<i data-feather="log-out" class="w-5 h-5"></i><span>Logout</span>`;
-                authBtn.dataset.state = 'logout';
-                document.querySelector('#newChatBtn').disabled = false;
-                document.querySelector('#settingsBtn').disabled = false;
-                sendBtn.disabled = false;
-            } else {
-                authBtn.innerHTML = `<i data-feather="user" class="w-5 h-5"></i><span>Login</span>`;
-                authBtn.dataset.state = 'login';
-                document.querySelector('#newChatBtn').disabled = true;
-                document.querySelector('#settingsBtn').disabled = true;
-                sendBtn.disabled = true;
-                showAuthModal();
+        async function checkAuth() {
+            try {
+                const response = await fetch('/auth/status');
+                const data = await response.json();
+                
+                if (data.isAuthenticated) {
+                    currentUser = data.user;
+                    authBtn.innerHTML = `<img src="${data.user.picture}" class="w-6 h-6 rounded-full mr-2"><span>Logout</span>`;
+                    document.querySelector('#newChatBtn').disabled = false;
+                    document.querySelector('#settingsBtn').disabled = false;
+                    sendBtn.disabled = false;
+                    loadChatList();
+                } else {
+                    currentUser = null;
+                    authBtn.innerHTML = `<i data-feather="user" class="w-5 h-5"></i><span>Login with Google</span>`;
+                    document.querySelector('#newChatBtn').disabled = true;
+                    document.querySelector('#settingsBtn').disabled = true;
+                    sendBtn.disabled = true;
+                }
+                feather.replace();
+            } catch (error) {
+                console.error('Auth check failed:', error);
             }
-            feather.replace();
         }
 
-        function showAuthModal(register = false) {
-            isRegistering = register;
-            authModalTitle.textContent = register ? 'Register' : 'Login';
-            authActionBtn.textContent = register ? 'Register' : 'Login';
-            authToggleText.textContent = register ? 'Already have an account? ' : 'Don\'t have an account? ';
-            authToggleBtn.textContent = register ? 'Login' : 'Register';
-            registerFields.classList.toggle('hidden', !register);
-            authModal.classList.remove('hidden');
+        function handleGoogleSignIn() {
+            window.location.href = '/auth/google';
+        }
+
+        async function handleLogout() {
+            try {
+                await fetch('/auth/logout');
+                currentUser = null;
+                chatList.innerHTML = '';
+                chatContainer.innerHTML = '';
+                checkAuth();
+                addMessage('system', 'Please sign in to start chatting.');
+            } catch (error) {
+                console.error('Logout failed:', error);
+            }
         }
         // Chat management
         let currentChatId = null;
@@ -276,30 +280,23 @@ const settingsBtn = document.getElementById('settingsBtn');
             return 'chat_' + Date.now().toString(36) + Math.random().toString(36).substr(2, 5);
         }
 
-        function loginUser(username, password) {
-            // Simple auth - store user in localStorage
-            localStorage.setItem('chatRouterUser', username);
-            localStorage.setItem(`chatRouterPass_${username}`, password); // Not secure for production!
-            updateAuthUI();
+        async function loadChatList() {
+            if (!currentUser) return;
             
-            // Create a new chat session
-            createNewChat();
-            
-            // Load user's chat list
-            loadChatList(username);
-        }
-        function logoutUser() {
-            const username = localStorage.getItem('chatRouterUser');
-            localStorage.removeItem('chatRouterUser');
-            updateAuthUI();
-            
-            // Clear current chat and sidebar
-            chatContainer.innerHTML = '';
-            chatList.innerHTML = '';
-            currentChatId = null;
-            addMessage('system', 'Please log in to start chatting.');
+            try {
+                const response = await fetch('/api/chats');
+                const chats = await response.json();
+                
+                chatList.innerHTML = '';
+                chats.forEach(chat => {
+                    addChatToList(chat.id, chat.title);
+                });
+            } catch (error) {
+                console.error('Failed to load chats:', error);
+            }
         }
-        function createNewChat() {
+
+function createNewChat() {
             const username = localStorage.getItem('chatRouterUser');
             if (!username) return;
             
@@ -309,54 +306,44 @@ const settingsBtn = document.getElementById('settingsBtn');
             saveChatHistory(username, currentChatId);
             addChatToList(username, currentChatId, 'New Chat');
         }
-
-        function loadChatHistory(username, chatId) {
-            const history = localStorage.getItem(`chatHistory_${username}_${chatId}`);
-            if (history) {
-                chatContainer.innerHTML = history;
+        async function loadChatHistory(chatId) {
+            if (!currentUser) return;
+            
+            try {
+                const response = await fetch(`/api/chats/${chatId}`);
+                const chat = await response.json();
+                
+                chatContainer.innerHTML = chat.history;
                 chatContainer.scrollTop = chatContainer.scrollHeight;
                 currentChatId = chatId;
+            } catch (error) {
+                console.error('Failed to load chat history:', error);
             }
         }
 
-        function saveChatHistory(username, chatId) {
+        async function saveChatHistory(chatId) {
             if (!chatId) chatId = currentChatId;
-            if (!username || !chatId) return;
-            
-            localStorage.setItem(`chatHistory_${username}_${chatId}`, chatContainer.innerHTML);
-            
-            // Update the chat title if it's the first message
-            const messages = chatContainer.querySelectorAll('.message-bubble');
-            if (messages.length === 1) {
-                updateChatTitle(username, chatId, messages[0].textContent.substring(0, 30));
-            }
-        }
-
-        function loadChatList(username) {
-            chatList.innerHTML = '';
-            const chats = [];
+            if (!currentUser || !chatId) return;
             
-            // Find all chats for this user
-            for (let i = 0; i < localStorage.length; i++) {
-                const key = localStorage.key(i);
-                if (key.startsWith(`chatHistory_${username}_`)) {
-                    const chatId = key.split('_')[2];
-                    const title = localStorage.getItem(`chatTitle_${username}_${chatId}`) || 'New Chat';
-                    chats.push({ id: chatId, title });
-                }
+            try {
+                await fetch('/api/chats', {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({
+                        id: chatId,
+                        title: chatContainer.querySelector('.message-bubble')?.textContent.substring(0, 30) || 'New Chat',
+                        history: chatContainer.innerHTML,
+                        updatedAt: new Date().toISOString()
+                    })
+                });
+            } catch (error) {
+                console.error('Failed to save chat:', error);
             }
-            
-            // Sort by most recent first
-            chats.sort((a, b) => b.id.localeCompare(a.id));
-            
-            // Add to sidebar
-            chats.forEach(chat => {
-                addChatToList(username, chat.id, chat.title);
-            });
         }
-
-        function addChatToList(username, chatId, title) {
-            const chatItem = document.createElement('div');
+        function addChatToList(chatId, title) {
+const chatItem = document.createElement('div');
             chatItem.className = 'flex justify-between items-center p-2 hover:bg-gray-700 rounded-lg cursor-pointer';
             chatItem.dataset.chatId = chatId;
             
@@ -395,37 +382,58 @@ const settingsBtn = document.getElementById('settingsBtn');
             chatList.prepend(chatItem);
             feather.replace();
         }
-
-        function updateChatTitle(username, chatId, title) {
-            localStorage.setItem(`chatTitle_${username}_${chatId}`, title);
-            const chatItem = chatList.querySelector(`[data-chat-id="${chatId}"]`);
-            if (chatItem) {
-                chatItem.querySelector('span').textContent = title;
+        async function updateChatTitle(chatId, title) {
+            try {
+                await fetch(`/api/chats/${chatId}`, {
+                    method: 'PUT',
+                    headers: {
+                        'Content-Type': 'application/json'
+                    },
+                    body: JSON.stringify({ title })
+                });
+                
+                const chatItem = chatList.querySelector(`[data-chat-id="${chatId}"]`);
+                if (chatItem) {
+                    chatItem.querySelector('span').textContent = title;
+                }
+            } catch (error) {
+                console.error('Failed to update chat title:', error);
             }
         }
 
-        function renameChat(username, chatId, titleElement) {
-            const newTitle = prompt('Enter new chat title:', titleElement.textContent);
+        async function renameChat(chatId, titleElement) {
+const newTitle = prompt('Enter new chat title:', titleElement.textContent);
             if (newTitle && newTitle.trim()) {
                 localStorage.setItem(`chatTitle_${username}_${chatId}`, newTitle.trim());
                 titleElement.textContent = newTitle.trim();
             }
         }
-
-        function deleteChat(username, chatId, element) {
-            if (confirm('Are you sure you want to delete this chat?')) {
-                localStorage.removeItem(`chatHistory_${username}_${chatId}`);
-                localStorage.removeItem(`chatTitle_${username}_${chatId}`);
+        async function deleteChat(chatId, element) {
+            if (!confirm('Are you sure you want to delete this chat?')) return;
+            
+            try {
+                await fetch(`/api/chats/${chatId}`, { method: 'DELETE' });
                 element.remove();
                 
                 if (currentChatId === chatId) {
                     createNewChat();
                 }
+            } catch (error) {
+                console.error('Failed to delete chat:', error);
             }
         }
-// Load saved settings
-async function loadSettings() {
-            const savedApiKey = localStorage.getItem('chatRouterApiKey');
+        // Event listeners
+        authBtn.addEventListener('click', () => {
+            if (currentUser) {
+                handleLogout();
+            } else {
+                handleGoogleSignIn();
+            }
+        });
+
+        // Load saved settings
+        async function loadSettings() {
+const savedApiKey = localStorage.getItem('chatRouterApiKey');
             const savedModel = localStorage.getItem('chatRouterModel');
             const savedTheme = localStorage.getItem('chatRouterTheme') || 'indigo';
 
@@ -655,54 +663,7 @@ async function sendMessage() {
                 typingIndicator.classList.add('hidden');
             }
         }
-        // Event listeners
-        authBtn.addEventListener('click', () => {
-            if (authBtn.dataset.state === 'logout') {
-                logoutUser();
-            } else {
-                showAuthModal();
-            }
-        });
-
-        closeAuth.addEventListener('click', () => {
-            authModal.classList.add('hidden');
-        });
-
-        authToggleBtn.addEventListener('click', () => {
-            showAuthModal(!isRegistering);
-        });
-
-        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;
-                }
-                
-                if (localStorage.getItem(`chatRouterPass_${username}`)) {
-                    alert('Username already exists');
-                    return;
-                }
-                
-                loginUser(username, password);
-            } 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;
-                }
-                
-                loginUser(username, password);
-            }
-            authModal.classList.add('hidden');
-        });
-        newChatBtn.addEventListener('click', createNewChat);
+newChatBtn.addEventListener('click', createNewChat);
         newSidebarChat.addEventListener('click', createNewChat);
         
         // Sidebar toggle for mobile
@@ -724,20 +685,19 @@ messageInput.addEventListener('keydown', (e) => {
         });
         // Initialize
         loadSettings();
-        updateAuthUI();
+        checkAuth();
         
         // Welcome message
         setTimeout(() => {
-            if (!localStorage.getItem('chatRouterUser')) {
-                addMessage('system', 'Welcome to ChatRouter! Please log in to start chatting.');
+            if (!currentUser) {
+                addMessage('system', 'Welcome to ChatRouter! Please sign in with Google to start chatting.');
             } else if (!localStorage.getItem('chatRouterModel')) {
                 addMessage('system', 'Please select a free model from settings to begin.');
             } else if (!currentChatId) {
                 createNewChat();
             }
         }, 1000);
-
-        // Close sidebar when clicking outside on mobile
+// Close sidebar when clicking outside on mobile
         document.addEventListener('click', (e) => {
             if (window.innerWidth < 768 && !sidebar.contains(e.target) && e.target !== sidebarToggle) {
                 sidebar.classList.add('hidden');