Simplified Login Page Setup with Flask: A Step-by-Step Guide

Building a web application can be a challenging task, but using Flask can simplify and streamline the process. Flask is a micro web framework written in Python, and it allows developers to create web applications quickly and easily.

One crucial aspect of building a web application is implementing a login system. In this article, we’ll explore the steps involved in setting up a login page and route in Flask.

Setting up Login Page and Route

1) Defining the Login Route

Before we start building our login page, we need to define a URL route for it. Flask allows us to define routes easily using decorators.

In this case, we will define a route for the login page. The following code shows how to define the login route:

from flask import Flask
app = Flask(__name__)

@app.route('/login')
def login():
   return 'Login Page'

The @app.route decorator creates a URL route for the login page. Here, we define the login URL as ‘/login’.

The login() function is called when the ‘/login’ URL is accessed. In this example, the function simply returns the string ‘Login Page’.

2) Handling Login Page Logic

After defining the URL route for our login page, we need to implement the logic behind the login page. The user will enter their login credentials on the login page, which will be validated on the server-side, and the user will be redirected to the dashboard page if their credentials are valid.

We can handle the login page logic using HTTP methods, POST and GET, which are used to send data and receive data from the server.

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

@app.route('/login', methods=['GET', 'POST'])
def login():
   if request.method == 'POST': # Check if HTTP method is POST
      username = request.form['username'] # Get username from POST request
      password = request.form['password'] # Get password from POST request

      # Validate the login credentials
      if username == 'admin' and password == 'admin':
         return redirect('/dashboard') # Redirect to dashboard page if credentials are valid
      else:
         return 'Invalid username or password. Please try again.' # Return error message if credentials are invalid
   else:
      return render_template('login.html') # Render the login template if HTTP method is not POST

In the above code snippet, we have defined the login() function to handle GET and POST requests.

If the HTTP method is POST, the function retrieves the entered username and password values from the POST request. The function then checks if the entered credentials are valid.

If the credentials are valid, the function redirects the user to the dashboard page. If the credentials are invalid, the function returns an error message.

If the HTTP method is not POST, the login() function simply renders the login template. For that, we’ll need to create a login page template.

3) Adding a Login Template

Creating the Login Template

To create the login template, we need to create a new HTML file named ‘login.html’ in the ‘templates’ directory. Flask automatically looks for templates in this directory.

We’ll use the Bootstrap framework to style our login page. Here’s an example HTML code for a simple login template:

   
   


   

      

      
Login
      

         

            Username:
            
         
         

            Password:
            
         
         Submit
      
   

In the above code snippet, we have defined a simple login template using Bootstrap classes.

The form tag has been set to the POST method to allow the user to enter their login credentials. The input fields capture the user’s username and password values.

The submit button triggers the form submission and sends the entered values to the server.

Conclusion

A login page is an essential part of any web application that requires user authentication. Implementing a login page in Flask is a straightforward process that involves defining a URL route and handling the logic for validating user credentials.

We have also seen how to create a simple login page template using the Bootstrap framework. With Flask’s flexibility and simplicity, building a web application’s login system can be a breeze.

3) Testing the Login Page and Template

After creating the login page and template, we need to ensure that it works as expected. We can test the login functionality by submitting form data to the server and verifying the controller’s response to the data.

Testing Login Functionality

To test the login functionality, we need to enter valid and invalid login credentials in the login page and verify the response. For that, we can use tools like Chrome Developer Tools that allow us to inspect and debug web pages.

To test our login functionality, we can enter valid credentials such as ‘admin’ as the username and ‘admin’ as the password and submit the form. We should see that the controller redirects us to the dashboard page upon successful login.

If we enter invalid credentials such as a wrong username or password, we should see an error message that informs us of the mistake. If we do not enter any credentials, we should see another error message indicating that the input fields are required.

It is also essential to ensure that the controller redirects unauthorized users attempting to bypass the login page. We can protect specific URLs that are only accessible to logged-in users by setting up URL protection, which requires authentication to access the resource.

Using Jinja2 Template Logic

Jinja2 is a templating engine used in Flask that allows us to create dynamic HTML templates for our web pages. With Jinja2, we can add template logic to our templates, enabling us to render dynamic content and add conditional statements.

For instance, we can use Jinja2 to display an error message on the login page if the user enters invalid credentials. To accomplish that, we add the following code to our login template:

{% if error %}
   
{{ error }}
{% endif %}

In our Flask controller, we can pass the error message to the login template as a variable named error.

If the error variable is not None, Jinja2 displays the error message on the login page using the template logic above.

@app.route('/login', methods=['GET', 'POST'])
def login():
   if request.method == 'POST':
      username = request.form['username']
      password = request.form['password']

      if username == 'admin' and password == 'admin':
         return redirect('/dashboard')
      else:
         error = 'Invalid username or password. 
Please try again.'
         return render_template('login.html', error=error)
   else:
      return render_template('login.html')

With this implementation, when the user submits invalid credentials, the controller sets the error variable to the error message. The Jinja2 template engine then displays the error message on the login page using the template logic we added.

4) Upcoming User Management

Once we have set up the login page, the next step is to handle user management and authorization. We need to ensure that only authorized users access their content while preventing unauthorized access to sensitive information.

For proper user management, we need to set up a user database that stores user login credentials, including usernames and passwords. We also need to protect sensitive URLs that require authentication to access them.

Protecting URLs involves setting up middleware that checks whether a user is logged in before allowing them to access the protected URLs. If the user is not authenticated, they should be redirected to the login page. We can also use jQuery to add interactivity to our login page, improving user experience and enhancing the page’s functionality.

For example, we can add a “Remember me” checkbox that allows users to save their login credentials for future use. We can use jQuery to store the user’s login credentials securely in the browser’s local storage.

In conclusion, implementing a login page in Flask is a crucial step in building a web application that requires user authentication. Ensuring that the login page is functional, secure, and user-friendly is essential for a website’s success.

With Flask’s flexibility and Jinja2’s templating engine, achieving these goals is relatively easy. By building on the login page’s foundation, we can implement user management and URL protection to create a fully functional authentication system for our web application.

In summary, creating a login page and route using Flask is a crucial aspect of web application development. With Flask’s flexibility, we can easily define URL routes and handle login page logic using HTTP methods.

Jinja2 templating engine enables us to create dynamic HTML templates and display error messages on the login page. Protecting URLs, setting up user databases, and using jQuery for interactivity are essential steps to ensure proper user management and secure authentication in web applications.

The implementation of a fully functional authentication system that includes URL protection and user management plays a significant role in building a successful web application.