feat: implement secure Supabase authentication system

- Replace custom authentication with Supabase Auth for real security
- Update login form to use email instead of username
- Implement proper RLS policies with auth.uid() for data isolation
- Fix database constraint to include user_id for multi-user support
- Add comprehensive authentication flow with session management
- Update documentation to reflect new authentication setup
- Remove sensitive data exposure and improve overall security

README.md

@@ -30,19 +30,10 @@ npm install
 Run these SQL queries in your Supabase SQL Editor:
 
 ```sql
--- Users table for authentication
-CREATE TABLE users (
-    id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-    username VARCHAR(50) UNIQUE NOT NULL,
-    password_hash VARCHAR(255) NOT NULL,
-    created_at TIMESTAMP WITH TIME ZONE DEFAULT NOW(),
-    updated_at TIMESTAMP WITH TIME ZONE DEFAULT NOW()
-);
-
 -- Task completions table for tracking progress
 CREATE TABLE completed_tasks (
     id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
-    user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+    user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
     task_id VARCHAR(50) NOT NULL,
     task_type VARCHAR(50) NOT NULL,
     category VARCHAR(20) NOT NULL,
@@ -52,21 +43,44 @@ CREATE TABLE completed_tasks (
 
 -- Indexes for better performance
 CREATE INDEX idx_completed_tasks_user_id ON completed_tasks(user_id);
-CREATE INDEX idx_users_username ON users(username);
 ```
 
-#### Create Sample Users
-Run these queries to create test users:
+#### Enable Supabase Auth
+Go to your Supabase project dashboard:
+1. **Authentication** -> **Settings** -> Enable email/password authentication
+2. **Authentication** -> **Email Template** -> Configure confirmation email template
+3. **Authentication** -> **Settings** -> Set your site URL for redirects
+
+#### Set Up Row Level Security (RLS)
+Enable RLS for proper security with Supabase Auth:
 
 ```sql
--- Create test users (passwords are stored as plain text for testing - in production, use proper hashing)
-INSERT INTO users (username, password_hash)
-VALUES ('testuser', 'password123');
+-- Enable RLS on `completed_tasks` table
+ALTER TABLE completed_tasks ENABLE ROW LEVEL SECURITY;
 
--- Verify users were created
-SELECT * FROM users;
+-- Users can only see their own completions
+CREATE POLICY "Users can view own completions" ON completed_tasks
+    FOR SELECT USING (auth.uid() = user_id);
+
+-- Users can only insert their own completions
+CREATE POLICY "Users can insert own completions" ON completed_tasks
+    FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+-- Users can only update their own completions
+CREATE POLICY "Users can update own completions" ON completed_tasks
+    FOR UPDATE USING (auth.uid() = user_id);
+
+-- Users can only delete their own completions
+CREATE POLICY "Users can delete own completions" ON completed_tasks
+    FOR DELETE USING (auth.uid() = user_id);
 ```
 
+#### Create Test Users
+Use the Supabase Auth UI or API to create test users:
+1. Go to **Authentication** -> **Users** in your Supabase dashboard
+2. Click **Add user** and create test accounts
+3. Or use the signup functionality in your app
+
 
 ### 3. Environment Configuration
 
@@ -106,9 +120,9 @@ SUPABASE_ANON_KEY=your_supabase_anon_key
 ## Usage
 
 ### Authentication
-- **Login**: Users must log in with valid credentials to access any content
-- **Session**: Sessions last for 1 week
-- **Logout**: Clears session and refreshes the page
+- **Login**: Users must log in with email and password to access any content
+- **Session**: Sessions are managed automatically by Supabase (persistent)
+- **Logout**: Clears session and shows login screen
 
 ### Task Management
 - **Browse**: Filter tasks by category, type, and completion status
@@ -164,20 +178,20 @@ astra/
 - `src/layouts/BaseLayout.astro` - Base layout component
 
 ### Authentication Flow
-1. Page loads -> Check localStorage for valid session
+1. Page loads -> Check Supabase auth session
 2. If no session -> Show login overlay, hide content
-3. User submits form -> Authenticate with Supabase
-4. If successful -> Store session, show content
-5. Session persists for 1 week
+3. User submits form -> Authenticate with Supabase Auth
+4. If successful -> Supabase manages session, show content
+5. Session persists automatically (managed by Supabase)
 
 ## Security Notes
 
-- **Important**: This is a demo implementation
-- In production, implement proper password hashing
+- **Important**: Now uses Supabase Auth for secure authentication
+- Row Level Security (RLS) ensures users can only access their own data
+- Supabase handles password hashing and session management securely
 - Use HTTPS in production
-- Consider implementing proper Supabase Auth instead of custom authentication
-- Add input validation and sanitization
-- Implement rate limiting for login attempts
+- RLS policies prevent unauthorized access to user data
+- No sensitive data exposed in frontend code
 
 ## Troubleshooting
 

src/components/LoginForm.astro

@@ -10,13 +10,13 @@ const { isVisible = true } = Astro.props
   <div class="login-modal">
     <div class="login-header">
       <h2>Login to Track Progress</h2>
-      <p>Enter your username and password to track completed tasks</p>
+      <p>Enter your email and password to track completed tasks</p>
     </div>
 
     <form id="login-form" class="login-form">
       <div class="form-field">
-        <label for="username">Username</label>
-        <input type="text" id="username" name="username" required autocomplete="username">
+        <label for="email">Email</label>
+        <input type="email" id="email" name="email" required autocomplete="email">
       </div>
 
       <div class="form-field">
@@ -30,7 +30,7 @@ const { isVisible = true } = Astro.props
     </form>
 
     <div id="login-error" class="login-error hidden">
-      Invalid username or password
+      Invalid email or password
     </div>
 
     <div class="login-footer">
@@ -162,4 +162,4 @@ const { isVisible = true } = Astro.props
     color: #8b949e;
     font-size: 0.8rem;
   }
-</style>
+</style>

src/pages/index.astro

@@ -246,29 +246,89 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
       console.error('Missing database environment variables');
     }
 
-    // Real authentication and task tracking functions
-    async function authenticateUser(username, password) {
+    // Real authentication and task tracking functions using Supabase Auth
+    async function signInUser(email, password) {
       if (!supabase) {
-        console.error('Supabase not initialized');
+        console.error('Database not initialized');
         return null;
       }
 
       try {
-        const { data: user, error } = await supabase
-          .from('users')
-          .select('*')
-          .eq('username', username)
-          .eq('password_hash', password)
-          .single();
+        const { data, error } = await supabase.auth.signInWithPassword({
+          email: email,
+          password: password
+        });
 
-        if (error || !user) {
+        if (error) {
           console.error('Authentication error:', error);
           return null;
         }
 
+        return data.user;
+      } catch (error) {
+        console.error('Error signing in user:', error);
+        return null;
+      }
+    }
+
+    async function signUpUser(email, password) {
+      if (!supabase) {
+        console.error('Database not initialized');
+        return null;
+      }
+
+      try {
+        const { data, error } = await supabase.auth.signUp({
+          email: email,
+          password: password
+        });
+
+        if (error) {
+          console.error('Sign up error:', error);
+          return null;
+        }
+
+        return data.user;
+      } catch (error) {
+        console.error('Error signing up user:', error);
+        return null;
+      }
+    }
+
+    async function signOutUser() {
+      if (!supabase) {
+        console.error('Database not initialized');
+        return false;
+      }
+
+      try {
+        const { error } = await supabase.auth.signOut();
+        if (error) {
+          console.error('Sign out error:', error);
+          return false;
+        }
+        return true;
+      } catch (error) {
+        console.error('Error signing out user:', error);
+        return false;
+      }
+    }
+
+    async function getCurrentUser() {
+      if (!supabase) {
+        console.error('Database not initialized');
+        return null;
+      }
+
+      try {
+        const { data: { user }, error } = await supabase.auth.getUser();
+        if (error) {
+          console.error('Get current user error:', error);
+          return null;
+        }
         return user;
       } catch (error) {
-        console.error('Error authenticating user:', error);
+        console.error('Error getting current user:', error);
         return null;
       }
     }
@@ -525,19 +585,18 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
       `;
     };
 
-    // Authentication functions
-    const checkAuthStatus = () => {
-      const sessionData = localStorage.getItem('userSession');
-      if (sessionData) {
-        const { user, expiresAt } = JSON.parse(sessionData);
-        if (expiresAt > Date.now()) {
+    // Authentication functions using Supabase Auth
+    const checkAuthStatus = async () => {
+      try {
+        const user = await getCurrentUser();
+        if (user) {
           state.user = user;
           updateUserUI();
           loadCompletedTasks();
           return true;
-        } else {
-          localStorage.removeItem('userSession');
         }
+      } catch (error) {
+        console.error('Error checking auth status:', error);
       }
       return false;
     };
@@ -548,7 +607,7 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
       if (state.user) {
         // User is authenticated - show main content and user info
         userInfo.classList.remove('hidden');
-        userName.textContent = `Logged in as ${state.user.username}`;
+        userName.textContent = `Logged in as ${state.user.email}`;
         mainContent.classList.add('authenticated');
         loginOverlay.classList.add('hidden');
         loginOverlay.classList.remove('visible');
@@ -575,12 +634,10 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
       }
     };
 
-    const login = async (username, password) => {
+    const login = async (email, password) => {
       try {
-        const user = await authenticateUser(username, password);
+        const user = await signInUser(email, password);
         if (user) {
-          const expiresAt = Date.now() + (7 * 24 * 60 * 60 * 1000); // 1 week
-          localStorage.setItem('userSession', JSON.stringify({ user, expiresAt }));
           state.user = user;
           loginError.classList.add('hidden');
           updateUserUI();
@@ -597,13 +654,16 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
       }
     };
 
-    const logout = () => {
-      localStorage.removeItem('userSession');
-      state.user = null;
-      state.completedTasks = [];
-
-      // Refresh the page to reset all UI state
-      window.location.reload();
+    const logout = async () => {
+      try {
+        await signOutUser();
+        state.user = null;
+        state.completedTasks = [];
+        updateUserUI();
+        applyState();
+      } catch (error) {
+        console.error('Logout error:', error);
+      }
     };
 
     const handleTaskToggle = async (event) => {
@@ -798,9 +858,9 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
     loginForm.addEventListener('submit', async (event) => {
       event.preventDefault();
       const formData = new FormData(loginForm);
-      const username = formData.get('username');
+      const email = formData.get('email');
       const password = formData.get('password');
-      await login(username, password);
+      await login(email, password);
     });
 
     logoutBtn.addEventListener('click', logout);
@@ -838,7 +898,7 @@ const initialPageInfo = totalItems === 0 ? 'Page 0 of 0' : `Page 1 of ${totalPag
 
     // Initialize
     const initializeApp = async () => {
-      const isAuthenticated = checkAuthStatus();
+      const isAuthenticated = await checkAuthStatus();
       updateTaskOptions();
       
       // Test SuperBase connection if user is authenticated