README.md

---
title: Flask Login
emoji: 💻
colorFrom: green
colorTo: indigo
sdk: docker
pinned: true
license: mit
short_description: A simple yet comprehensive Flask-based user authentication.
---

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

---

# Flask Login System 🔐

A simple yet comprehensive Flask-based user authentication system with SQLite database integration, featuring user registration, login, session management, and "Remember Me" functionality.

**Live Demo:** [https://rahul23232-flask-login.hf.space/](https://rahul23232-flask-login.hf.space/)

## 📋 Table of Contents

- [Features](#features)
- [Technologies Used](#technologies-used)
- [Installation](#installation)
- [Usage](#usage)
- [Project Structure](#project-structure)
- [API Routes](#api-routes)
- [Database Schema](#database-schema)
- [Security Considerations](#security-considerations)
- [Contributing](#contributing)
- [License](#license)

## ✨ Features

- **User Registration**: Create new user accounts with unique usernames
- **User Authentication**: Secure login system with credential verification
- **Session Management**: Server-side session handling for user state
- **Remember Me**: Optional persistent login that survives browser restarts
- **Cookie Management**: Last visit tracking with customizable expiration
- **SQLite Integration**: Lightweight database for user storage
- **Responsive Design**: Clean, user-friendly interface
- **Error Handling**: Proper validation and error messages

## 🛠️ Technologies Used

- **Backend**: Python 3.x, Flask
- **Database**: SQLite3
- **Frontend**: HTML, CSS (Bootstrap-compatible)
- **Session Management**: Flask Sessions
- **Deployment**: Hugging Face Spaces

## 📦 Installation

### Prerequisites

- Python 3.7 or higher
- pip (Python package installer)

### Local Setup

1. **Clone the repository**
   ```bash
   git clone https://github.com/yourusername/flask-login-system.git
   cd flask-login-system
   ```

2. **Install dependencies**
   ```bash
   pip install flask
   ```

3. **Run the application**
   ```bash
   python app.py
   ```

4. **Access the application**
   - Open your browser and navigate to `http://localhost:5000`

### Docker Setup (for Hugging Face Spaces)

The project includes Docker configuration for deployment on Hugging Face Spaces:

```dockerfile
FROM python:3.9-slim

WORKDIR /app

COPY requirements.txt .
RUN pip install -r requirements.txt

COPY . .

EXPOSE 7860

CMD ["python", "app.py"]
```

## 🎯 Usage

### Getting Started

1. **Access the Application**: Navigate to the home URL
2. **Create Account**: Click "Sign Up" to create a new user account
3. **Login**: Use your credentials to log in
4. **Remember Me**: Check the "Remember Me" option to stay logged in
5. **Logout**: Click "Logout" to end your session

### User Flow

```mermaid
graph TD
    A[Visit Homepage] --> B{User Logged In?}
    B -->|No| C[Redirect to Login]
    B -->|Yes| D[Show Dashboard]
    C --> E[Login Form]
    E --> F[Submit Credentials]
    F --> G{Valid Credentials?}
    G -->|No| H[Show Error]
    G -->|Yes| I[Create Session]
    I --> J{Remember Me?}
    J -->|Yes| K[Set Permanent Session]
    J -->|No| L[Set Temporary Session]
    K --> D
    L --> D
    D --> M[Logout Option]
    M --> N[Clear Session & Cookies]
    N --> C
```

## 📁 Project Structure

```
flask-login-system/
├── app.py                 # Main Flask application
├── templates/            # HTML templates
│   ├── base.html        # Base template
│   ├── login.html       # Login page
│   ├── signup.html      # Registration page
│   └── home.html        # Dashboard/home page
├── static/              # Static files (CSS, JS, images)
│   └── style.css       # Custom styles
├── users.db            # SQLite database (created automatically)
├── requirements.txt    # Python dependencies
├── Dockerfile         # Docker configuration
├── README.md          # Project documentation
└── .gitignore         # Git ignore rules
```

## 🛣️ API Routes

### Public Routes

| Route | Method | Description | Parameters |
|-------|---------|-------------|------------|
| `/login` | GET, POST | User login page | `username`, `password`, `remember` |
| `/signup` | GET, POST | User registration | `username`, `password` |

### Protected Routes

| Route | Method | Description | Authentication Required |
|-------|---------|-------------|------------------------|
| `/` | GET | Homepage/Dashboard | Yes |
| `/logout` | GET | User logout | Yes |

### Route Details

#### `/` (Homepage)
- **Method**: GET
- **Authentication**: Required
- **Description**: Main dashboard showing welcome message and last visit info
- **Response**: Redirects to login if not authenticated

#### `/signup` (Registration)
- **Methods**: GET, POST
- **Parameters**: 
  - `username` (string): Unique username
  - `password` (string): User password
- **Validation**: Username must be unique
- **Response**: Redirects to login on success

#### `/login` (Authentication)
- **Methods**: GET, POST
- **Parameters**:
  - `username` (string): User's username
  - `password` (string): User's password  
  - `remember` (checkbox): Optional "Remember Me"
- **Response**: Redirects to homepage on success

#### `/logout` (Session Termination)
- **Method**: GET
- **Description**: Clears session and cookies
- **Response**: Redirects to login page

## 🗄️ Database Schema

### Users Table

```sql
CREATE TABLE users (
    id INTEGER PRIMARY KEY AUTOINCREMENT,
    username TEXT UNIQUE NOT NULL,
    password TEXT NOT NULL
);
```

| Column | Type | Constraints | Description |
|--------|------|-------------|-------------|
| `id` | INTEGER | PRIMARY KEY, AUTOINCREMENT | Unique user identifier |
| `username` | TEXT | UNIQUE, NOT NULL | User's login name |
| `password` | TEXT | NOT NULL | User's password (plain text) |

### Database Operations

- **Connection**: SQLite3 with `sqlite3.Row` factory for dictionary-like access
- **Initialization**: Automatic table creation on first run
- **Queries**: Parameterized queries to prevent SQL injection

## 🔒 Security Considerations

### Current Implementation

- ✅ SQL injection protection via parameterized queries
- ✅ Session-based authentication
- ✅ CSRF protection through Flask's secret key
- ✅ Input validation and error handling

### Production Recommendations

- ⚠️ **Password Hashing**: Currently stores plain text passwords
  ```python
  from werkzeug.security import generate_password_hash, check_password_hash
  
  # For registration
  hashed_password = generate_password_hash(password)
  
  # For login verification
  check_password_hash(stored_hash, provided_password)
  ```

- ⚠️ **Environment Variables**: Move secret key to environment variables
  ```python
  import os
  app.secret_key = os.environ.get('SECRET_KEY', 'fallback-secret-key')
  ```

- ⚠️ **HTTPS**: Enable HTTPS in production
- ⚠️ **Rate Limiting**: Implement login attempt limits
- ⚠️ **Input Validation**: Add comprehensive input sanitization
- ⚠️ **Session Security**: Configure secure session cookies

### Recommended Security Enhancements

```python
# Enhanced security configuration
app.config.update(
    SESSION_COOKIE_SECURE=True,      # HTTPS only
    SESSION_COOKIE_HTTPONLY=True,    # No JS access
    SESSION_COOKIE_SAMESITE='Lax',   # CSRF protection
    PERMANENT_SESSION_LIFETIME=timedelta(hours=1)  # Shorter sessions
)
```

## 🎨 Frontend Templates

### Template Structure

All templates extend `base.html` for consistent styling:

```html
<!-- base.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{% block title %}Flask Login System{% endblock %}</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-4">
        {% block content %}{% endblock %}
    </div>
</body>
</html>
```

### Form Examples

#### Login Form
```html
<form method="POST">
    <div class="mb-3">
        <label for="username" class="form-label">Username</label>
        <input type="text" class="form-control" name="username" required>
    </div>
    <div class="mb-3">
        <label for="password" class="form-label">Password</label>
        <input type="password" class="form-control" name="password" required>
    </div>
    <div class="mb-3 form-check">
        <input type="checkbox" class="form-check-input" name="remember">
        <label class="form-check-label">Remember Me</label>
    </div>
    <button type="submit" class="btn btn-primary">Login</button>
</form>
```

## 🚀 Deployment

### Hugging Face Spaces

The project is configured for deployment on Hugging Face Spaces:

1. **Create Space**: Create a new Space on Hugging Face
2. **Upload Files**: Push your code to the Space repository
3. **Configuration**: Ensure `app.py` runs on port 7860
4. **Environment**: The Space will automatically build and deploy

### Local Development

```bash
# Development mode with auto-reload
export FLASK_ENV=development
export FLASK_DEBUG=1
python app.py
```

### Production Deployment

```bash
# Use a production WSGI server
pip install gunicorn
gunicorn -w 4 -b 0.0.0.0:5000 app:app
```

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch (`git checkout -b feature/amazing-feature`)
3. Commit your changes (`git commit -m 'Add amazing feature'`)
4. Push to the branch (`git push origin feature/amazing-feature`)
5. Open a Pull Request

### Development Guidelines

- Follow PEP 8 style guidelines
- Add comments for complex logic
- Update documentation for new features
- Test all functionality before submitting

## 📝 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 🐛 Known Issues

- Plain text password storage (security concern)
- No password strength validation
- No account recovery mechanism
- Limited input sanitization

## 🔮 Future Enhancements

- [ ] Password hashing with bcrypt/scrypt
- [ ] Email verification system
- [ ] Password reset functionality
- [ ] User profile management
- [ ] Role-based access control
- [ ] OAuth integration (Google, GitHub)
- [ ] Rate limiting and brute force protection
- [ ] Advanced session management
- [ ] API endpoints for mobile apps
- [ ] Unit and integration tests

## 📞 Support

For questions, issues, or contributions:

- **Repository**: [GitHub Repository](https://github.com/yourusername/flask-login-system)
- **Live Demo**: [Flask Login System](https://rahul23232-flask-login.hf.space/)
- **Issues**: Use GitHub Issues for bug reports and feature requests

---

**Note**: This is a demonstration project for educational purposes. For production use, implement proper security measures including password hashing, HTTPS, and comprehensive input validation.