Flask Login Page with MySQL
Introduction
This project is a simple login page built using Flask (a Python web framework) and MySQL as the
database. The application allows users to register, log in, and access a protected dashboard.
Technologies Used
• Python
• Flask
• MySQL
• Flask_bcrypt (to encrypt the password)
• flask_mysqldb (connecting frontend-backend)
Flask login page using MySQL to store usernames and passwords. This project consists of:
• A login.html template
• A register.html template
• A Flask server (app.py)
• A MySQL database to store user credentials
1. Install Required Packages
Run the following command to install the necessary libraries :
pip install flask flask-mysqldb flask-bcrypt
database and table creation
CREATE DATABASE flask_login;
USE flask_login;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(100) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL
);
Vs code setup
Front end code
Log in page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
<style>
/* General Styles */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
/* Login Container */
.container {
background: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
width: 300px;
text-align: center;
/* Headings */
h2 {
color: #333;
margin-bottom: 20px;
/* Input Fields */
input[type="text"],
input[type="password"] {
width: 100%;
padding: 10px;
margin: 8px 0;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
}
/* Button */
button {
width: 100%;
padding: 10px;
background-color: #007BFF;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
button:hover {
background-color: #0056b3;
/* Error Messages */
.error-message {
color: red;
font-size: 14px;
/* Register Link */
p{
margin-top: 10px;
a{
color: #007BFF;
text-decoration: none;
a:hover {
text-decoration: underline;
</style>
</head>
<body>
<div class="container">
<h2>Login</h2>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<p class="error-message">{{ message }}</p>
{% endfor %}
{% endif %}
{% endwith %}
<form method="POST">
<label>Username:</label>
<input type="text" name="username" required>
<label>Password:</label>
<input type="password" name="password" required>
<button type="submit">Login</button>
</form>
<p>Don't have an account? <a href="/register">Register</a></p>
</div>
</body>
</html>
Register page
<!DOCTYPE html>
<html>
<head>
<title>Register</title>
</head>
<body>
<h2>Register</h2>
{% with messages = get_flashed_messages(with_categories=true) %}
{% if messages %}
{% for category, message in messages %}
<p style="color:red;">{{ message }}</p>
{% endfor %}
{% endif %}
{% endwith %}
<form method="POST">
<label>Username:</label>
<input type="text" name="username" required>
<br>
<label>Password:</label>
<input type="password" name="password" required>
<br>
<button type="submit">Register</button>
</form>
<p>Already have an account? <a href="/login">Login</a></p>
</body>
</html>
App.py code
from flask import Flask, render_template, request, redirect, session, flash
from flask_mysqldb import MySQL
from flask_bcrypt import Bcrypt
app = Flask(__name__,template_folder='template')
app.secret_key = "your_secret_key"
# MySQL Configuration
app.config["MYSQL_HOST"] = "localhost"
app.config["MYSQL_USER"] = "root" # Change according to your MySQL user
app.config["MYSQL_PASSWORD"] = "shuvam1234@A" # Set your MySQL password
app.config["MYSQL_DB"] = "flask_login"
app.config["MYSQL_CURSORCLASS"] = "DictCursor"
mysql = MySQL(app)
bcrypt = Bcrypt(app)
# Home Route
@app.route("/")
def home():
if "user" in session:
return f"Welcome {session['user']}! <a href='/logout'>Logout</a>"
return redirect("/login")
# Register Route
@app.route("/register", methods=["GET", "POST"])
def register():
if request.method == "POST":
username = request.form["username"]
password = bcrypt.generate_password_hash(request.form["password"]).decode("utf-8")
cur = mysql.connection.cursor()
cur.execute("INSERT INTO users (username, password) VALUES (%s, %s)", (username, password))
mysql.connection.commit()
cur.close()
flash("Registration successful! Please log in.", "success")
return redirect("/login")
return render_template("register.html")
# Login Route
@app.route("/login", methods=["GET", "POST"])
def login():
if request.method == "POST":
username = request.form["username"]
password = request.form["password"]
cur = mysql.connection.cursor()
cur.execute("SELECT * FROM users WHERE username = %s", [username])
user = cur.fetchone()
cur.close()
if user and bcrypt.check_password_hash(user["password"], password):
session["user"] = user["username"]
return redirect("/")
else:
flash("Invalid credentials, please try again.", "danger")
return render_template("login.html")
# Logout Route
@app.route("/logout")
def logout():
session.pop("user", None)
return redirect("/login")
if __name__ == "__main__":
app.run(debug=True)
output
