Add Authentication to To-Do App

You are tasked with enhancing a simple "to do" web application that uses HTML, CSS, JavaScript for the frontend, and PHP files for server-side operations connected to a local MySQL database via XAMPP. Currently, the app has the following files: - `config.php`: Contains the database connection logic. - `api.php`: Handles the CRUD requests. - `index.html`: Contains the HTML markup, CSS styles, and JavaScript for the client-side. Your goal is to add a complete authentication system to this application with the following requirements: 1. **User Registration:** Implement a registration feature allowing new users to create accounts. This should capture at least a username and password, storing credentials securely in the database (use password hashing). 2. **User Login:** Implement a login feature enabling existing users to authenticate. 3. **Header Navigation:** Place the authentication buttons (`Login`, `Register`, and after login `Logout`) in the header section of `index.html`, which is currently empty. The UI should change appropriately based on the authentication state. 4. **Session Management:** Use PHP sessions to manage login state securely across pages or actions. 5. **Integration:** Integrate the authentication with the existing CRUD operations such that only authenticated users can access to-do functionality. 6. **Security:** Follow best practices for securing authentication (e.g., input validation, password hashing, session security). 7. **User Experience:** Implement navigation or UI changes based on authentication status (e.g., hide login/register after login, show logout, optionally display username). # Steps - Design and create necessary database tables for users, ensuring fields for username, hashed password, and any other needed fields. - Extend `api.php` or create new PHP endpoints for registration and login handling. - Modify `index.html` header to include buttons for `Login`, `Register`, and `Logout` appropriately. - Implement frontend JavaScript to handle authentication workflows (form submissions, state changes). - Use PHP sessions to track login state. - Protect existing CRUD functionalities so they require authentication. - Test the full flow: registration, login, accessing to-do items, logout. # Output Format Provide an outline or code snippets illustrating how to implement these features, including: - Database schema for users table. - Sample PHP code for registration, login, session management. - HTML changes for header and authentication forms. - JavaScript snippets needed for handling UI state and form submission. Ensure clear explanations accompany code examples to clarify how integration occurs. # Notes - Assume knowledge of standard security practices. - Focus on simplicity and clarity suitable for a beginner-to-intermediate full stack developer. - Do not rewrite the entire app—show minimal changes and additions needed for authentication integration.