In today’s digital world, user authentication is a fundamental feature in any web application. Whether you’re creating a social media platform, an internal tool, or a simple login system, handling authentication efficiently is crucial. This article walks through building a custom Instagram-style login system using Flask , MySQL , and basic HTML/CSS/JS for the frontend.
🔗 Get files at GitHub.
🔗 View sample login ui Open.
Why Flask and MySQL?
Flask is a lightweight yet powerful Python framework, ideal for handling authentication systems without unnecessary overhead. MySQL, a robust relational database, efficiently stores user credentials, making it a great choice for structured authentication workflows.
Setting Up the Backend (Flask + MySQL)
1️⃣ Install Required Packages
Before diving into the code, ensure you have the necessary dependencies installed:
pip install flask mysql-connector-python flask-cors
2️⃣ Creating the Database and Users Table
We’ll start by setting up a MySQL database for storing user credentials.
CREATE DATABASE user_auth;
USE user_auth;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(255) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL
);
3️⃣ Writing the Flask Backend
Now, let’s create a Flask application that handles user registration and login.
from flask import Flask, request, jsonify
from flask_cors import CORS
import mysql.connector
app = Flask( __name__ )
CORS(app)
# MySQL Configuration
db_config = {
"host": "your-mysql-host",
"user": "your-mysql-username",
"password": "your-mysql-password",
"database": "user_auth"
}
# Connect to MySQL
def connect_db():
return mysql.connector.connect(**db_config)
# User Registration
@app.route('/register', methods=['POST'])
def register():
try:
data = request.json
username = data.get('username')
password = data.get('password') # Stored directly without hashing
if not username or not password:
return jsonify({"error": "Missing username or password"}), 400
conn = connect_db()
cursor = conn.cursor()
cursor.execute("INSERT INTO users (username, password) VALUES (%s, %s)", (username, password))
conn.commit()
cursor.close()
conn.close()
return '', 204 # No response
except Exception as e:
return jsonify({"error": str(e)}), 500
if __name__ == ' __main__':
app.run(host='0.0.0.0', port=5000, debug=True)
Creating the Frontend (HTML + JavaScript)
The frontend consists of a simple login page where users enter their credentials.
1️⃣ index.html (Frontend UI)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login</title>
</head>
<body>
<h2>Login</h2>
<form id="loginForm">
<input type="text" id="username" name="username" placeholder="Username" required>
<input type="password" id="password" name="password" placeholder="Password" required>
<button type="submit">Login</button>
</form>
<script>
document.getElementById("loginForm").addEventListener("submit", async function(event) {
event.preventDefault();
const username = document.getElementById("username").value;
const password = document.getElementById("password").value;await fetch("http://127.0.0.1:5000/register", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ username, password })
});
});
</script>
</body>
</html>
Running the Project
1️⃣ Start MySQL and create the database
2️⃣ Run the Flask backend
python app.py
3️⃣ Open index.html in a browser and test the login form
Final Thoughts
This setup provides a foundation for handling user authentication. If security is a concern, consider hashing passwords before storing them. This project can be extended by adding features like user sessions, password encryption, and email verification.
For more insights on working with Instagram-style UI and automation, check out this detailed experience shared on Medium:
🔗 Cloning Instagram UI: My Struggles with HTTrack, Selenium, and the Final Success with Wget
