Login-Signup

MK Studio User Authentication System

Project Overview

Project Name: MK Studio User Authentication System

Description: This web application provides user registration, login, and logout functionality for MK Studio, a platform with potential for studio or e-commerce use. It supports role-based user management (vendor, customer, admin) and integrates Google Sign-In for authentication. Built with PHP and MySQL for backend processing, the frontend uses HTML, CSS, and JavaScript with a responsive design, featuring modals for authentication, a welcome page with services, testimonials, and a contact form, and session-based alerts for user feedback.

Technologies Used

• Backend: PHP (with MySQLi for database interactions)
• Frontend: HTML5, CSS3 (Boxicons, Font Awesome), JavaScript (vanilla for modals, dropdowns, form validation)
• Database: MySQL (database: users_db)
• External Integrations: Google Identity Services, video background (grokvideo.mp4), favicon (icon.png)
• Libraries/CDNs: Boxicons, Font Awesome, Google Accounts GSI client
• Other: PHP sessions, password hashing (password_hash, password_verify)

Key Features

1. User Registration:

   • Users provide name, email, password, confirm password, and role (vendor, customer, admin).
   • Passwords are hashed for security.
   • Email uniqueness is enforced.
   • Success redirects to login form with a success alert.

2. User Login:

   • Authenticates via email and password with hashed password verification.
   • Stores user name in session and redirects to welcomepage.php on success.
   • Shows error alert on failure.

3. Logout: Clears session data and redirects to index page.

4. Google Sign-In:

   • Integrated via Google Identity API with a sign-in button.
   • Logs JWT token and redirects to welcomepage.php (backend handling incomplete).

5. Frontend Pages:

   • index.php: Landing page with video background, navigation, and auth modals.
   • welcomepage.php: Dashboard with hero, services, testimonials, contact form, and mobile menu.

6. Alerts System: Session-based success/error messages displayed in a sliding alert box (auto-hides after 6 seconds).

7. Form Validation: Client-side validation for contact form (empty fields, email format).

8. Styling and UI: Responsive design, blurred backdrops, animations, and video overlay.

Database Schema

Table: users

• name (VARCHAR): User’s full name
• email (VARCHAR): Unique email for login
• password (VARCHAR): Hashed password
• role (VARCHAR): Role (vendor, customer, admin)

Connection Details: Host: localhost, User: root, Password: empty, Database: users_db

File Structure

• auth_process.php: Handles registration and login POST requests.
• config.php: Database connection setup.
• logout.php: Session destruction and redirect.
• index.php: Landing page with auth modals.
• welcomepage.php: Post-login dashboard.
• script.js: JavaScript for modals, alerts, menu, smooth scroll, form validation.
• style.css: CSS with animations and responsive rules.
• Assets: grokvideo.mp4, icon.png

Setup Instructions

1. Prerequisites:

   • XAMPP/WAMP/MAMP (Apache, MySQL, PHP).
   • Create database users_db with users table.

2. Installation:

   • Place files in server directory (e.g., htdocs/mk-studio).
   • Update config.php credentials if needed.
   • Ensure grokvideo.mp4 and icon.png are present.

3. Run:

   • Start Apache and MySQL.
   • Access via http://localhost/LOGIN%20AND%20SIGNUP.

4. Google Sign-In Setup:

   • Replace data-client_id in index.php and welcomepage.php with your Google Client ID.
   • Expand handleCredentialResponse in script.js for backend JWT verification.

Potential Improvements

• Implement role-based access control (e.g., admin dashboard).
• Complete Google Sign-In backend (verify JWT, auto-register users).
• Add forgot password/reset functionality.
• Enhance security: Consistent prepared statements, CSRF tokens, server-side input validation.
• Expand database: Add user ID, timestamps.
• Improve error handling for database operations.
• Add unit tests and ensure cross-browser compatibility.

License

© 2025 Manikandan. All rights reserved.