Flask Create Login Page - Vector Linux

Developing a login page is a crucial aspect of constructing a secure and user-friendly web application. In this post, I will lead you through the steps of crafting a login page utilizing Flask, a prevalent Python web framework that enables us to swiftly and effortlessly construct web applications.

Introduction to Flask

Flask is a micro web framework written in Python. It is lightweight and allows developers to build web applications quickly and with less code compared to other frameworks. Flask follows the model-view-controller (MVC) architectural pattern, making it easy to organize and manage your application.

Before we dive into the process of creating a login page, let's make sure you have Flask installed on your machine. If not, you can install it by running the following command:

pip install Flask

Creating the Login Page

Now that we have Flask installed, let's start building our login page. First, we need to create a new Flask application. Create a new Python file and add the following code:

from flask import Flask, render_template, request, redirect, url_for
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/login', methods=['GET', 'POST'])
def login():
    if request.method == 'POST':
        # Validate the login credentials
        username = request.form['username']
        password = request.form['password']
        # Add your authentication logic here
        if username == 'my_username' and password == 'my_password':
            return redirect(url_for('dashboard'))
        else:
            return render_template('login.html', error='Invalid username or password')
    return render_template('login.html')

@app.route('/dashboard')
def dashboard():
    return 'Welcome to the dashboard!'

if __name__ == '__main__':
    app.run(debug=True)

This code sets up a Flask application with three routes: the home route ('/') which renders the index.html template, the login route ('/login') which handles the login form submission, and the dashboard route ('/dashboard') which displays the dashboard page after a successful login.

Next, let's create the templates for our login and dashboard pages. In your project directory, create a new folder named 'templates' and inside it, create two HTML files: 'index.html' and 'login.html'.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My App</title>
</head>
<body>
    <h1>Welcome to My App!</h1>
    <p>Please <a href="/login">login</a> to continue.</p>
</body>
</html>


<!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>
    {% if error %}
        <p style="color: red">{{ error }}</p>
    {% endif %}
    <form action="/login" method="POST">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username" required>
        <br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password" required>
        <br>
        <input type="submit" value="Login">
    </form>
</body>
</html>

The 'index.html' template is a simple welcome page with a link to the login page. The 'login.html' template contains a login form where users can enter their credentials. If there is an error, it will be displayed at the top of the form.

Conclusion

Creating a login page in Flask is a straightforward process. By following the steps outlined in this article, you can build a secure login system for your web application. Remember to add your own authentication logic to validate user credentials and protect sensitive information.

Flask provides a solid foundation for building web applications with Python. Its simplicity and flexibility make it a popular choice among developers. So go ahead and start building your own login system with Flask!