Overview
This prompt aims to guide developers in enhancing a web application with an authentication system. Beginner-to-intermediate full stack developers will benefit from clear instructions and code examples for implementing secure user management.
Prompt Overview
Purpose: This enhancement aims to implement a secure authentication system for the to-do web application.
Audience: The intended audience includes beginner-to-intermediate full stack developers seeking to learn about user authentication.
Distinctive Feature: The system will utilize PHP sessions and password hashing to ensure secure user management.
Outcome: Users will be able to register, log in, and manage their to-do items securely.
Quick Specs
- Media: Text
- Use case: Generation
- Industry: Development Tools & DevOps, General Business Operations, Productivity & Workflow
- Techniques: Few-Shot Prompting, Role/Persona Prompting, Structured Output
- Models: Claude 3.5 Sonnet, Gemini 2.0 Flash, GPT-4o, Llama 3.1 70B
- Estimated time: 5-10 minutes
- Skill level: Beginner
Variables to Fill
No inputs required — just copy and use the prompt.
Example Variables Block
No example values needed for this prompt.
The Prompt
You are tasked with enhancing a simple “to do” web application that utilizes HTML, CSS, and JavaScript for the frontend, along with PHP files for server-side operations connected to a local MySQL database via XAMPP. The application currently consists of 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.
– 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.
– Ensure the UI changes appropriately based on the authentication state.
4. Session Management:
– Use PHP sessions to manage the login state securely across pages or actions.
5. Integration:
– Integrate the authentication with the existing CRUD operations so 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, and optionally display the 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 the login state.
– Protect existing CRUD functionalities to require authentication.
– Test the full flow: registration, login, accessing to-do items, and logout.
# Output Format
Provide an outline or code snippets illustrating how to implement these features, including:
– Database schema for the users table.
– Sample PHP code for registration, login, and session management.
– HTML changes for the 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.
Screenshot Examples
How to Use This Prompt
- Copy the prompt to your clipboard.
- Open your preferred code editor for the project.
- Create necessary database tables for user authentication.
- Implement registration and login features in `api.php`.
- Update `index.html` to add authentication buttons in the header.
- Test the entire authentication flow thoroughly.
Tips for Best Results
- User Registration: Create a form to capture username and password, and store hashed passwords in the database for security.
- User Login: Implement a login form that checks credentials against the database and starts a session for authenticated users.
- Header Navigation: Update the header in `index.html` to show `Login` and `Register` buttons for unauthenticated users, and `Logout` for authenticated users.
- Session Management: Use PHP sessions to maintain user login state, ensuring only authenticated users can access to-do functionalities.
FAQ
- What is the purpose of user registration?
User registration allows new users to create accounts and securely store their credentials. - How do users log into the application?
Users log in by entering their username and password, which are validated against the database. - What changes are needed in the header navigation?
Add buttons for Login, Register, and Logout, adjusting visibility based on user authentication state. - How is session management implemented?
PHP sessions track user login states, ensuring secure access to protected functionalities.
Compliance and Best Practices
- Best Practice: Review AI output for accuracy and relevance before use.
- Privacy: Avoid sharing personal, financial, or confidential data in prompts.
- Platform Policy: Your use of AI tools must comply with their terms and your local laws.
Revision History
- Version 1.0 (February 2026): Initial release.
