| --- |
| 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. |
