Full-Stack Authentication App

A simple authentication system with React frontend and PHP backend using session-based authentication.

Tech Stack

• Frontend: React (functional components + hooks)
• Backend: PHP (with session handling)
• Data Storage: users.json (with hashed passwords)
• Authentication: Session-based

Project Structure

project-root/
├── backend/
│   ├── users.json         # Sample users with hashed passwords
│   ├── login.php          # Handles login, session creation
│   ├── dashboard.php      # Protected route, shows Welcome {user}
│   ├── logout.php         # Ends session
│   └── .htaccess          # CORS configuration
├── frontend/
│   ├── public/
│   │   └── index.html
│   ├── src/
│   │   ├── pages/
│   │   │   ├── Login.js
│   │   │   └── Dashboard.js
│   │   ├── App.js
│   │   └── index.js
│   └── package.json
├── .gitignore
└── README.md

Setup Instructions

Backend

1. Navigate to backend directory:

   cd backend

2. Start PHP development server:

   php -S localhost:8000

3. Backend will be accessible at: http://localhost:8000

Frontend

1. Navigate to frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Start React development server:

   npm start

4. Frontend will be accessible at: http://localhost:3000

Sample Users

The following test users are available in users.json:

Email	Password
test@example.com	password
admin@example.com	password

Features

• Login Form: Email and password authentication
• Session Management: PHP sessions for user state
• Protected Routes: Dashboard requires authentication
• Error Handling: Invalid credentials display error message
• Logout: Clear session and redirect to login
• Password Security: Passwords hashed using password_hash()

Security Notes

• Passwords are hashed using PHP's password_hash() function
• Sessions are properly managed with session_start()
• CORS headers configured for cross-origin requests
• Input validation on both frontend and backend