Login form and verification in Flask - Mini Project: Build & Apply

Login form and verification

📖 Scenario: You are building a simple web app where users can log in with a username and password.This app will check if the username and password match a stored list of users.

🎯 Goal: Create a Flask app with a login form that verifies user credentials and shows a welcome message on success.

📋 What You'll Learn

Create a dictionary called users with exact username-password pairs

Create a Flask app with a route for /login that shows a login form

Add a variable error_message to hold login error text

Check submitted username and password against users dictionary

Show a welcome message if login is successful, or show the login form with error if not

💡 Why This Matters

🌍 Real World

Login forms are essential for websites and apps to control access and personalize user experience.

💼 Career

Understanding how to build and verify login forms is a key skill for web developers working with backend frameworks like Flask.

1

Create the users dictionary

Create a dictionary called users with these exact entries: 'alice': 'wonderland', 'bob': 'builder', 'carol': 'sunshine'.

Flask

# Create the users dictionary with username-password pairs
# Your code here

Hint

Use curly braces to create a dictionary with usernames as keys and passwords as values.

2

Set up Flask app and error message variable

Import Flask, request, and render_template_string from flask. Create a Flask app called app. Create a variable called error_message and set it to an empty string ''.

Flask

users = {'alice': 'wonderland', 'bob': 'builder', 'carol': 'sunshine'}
# Import Flask, request, render_template_string and create app
# Create error_message variable
# Your code here

Hint

Use from flask import Flask, request, render_template_string and then app = Flask(__name__).

3

Create the login route and check credentials

Create a route @app.route('/login', methods=['GET', 'POST']). Define a function login(). Inside it, check if the request method is POST. If yes, get username and password from request.form. Check if username is in users and the password matches. If correct, return a welcome message with f"Welcome, {username}!". Otherwise, set error_message to 'Invalid username or password.'. If method is GET or login fails, show a simple HTML login form with username and password fields and display error_message if any.

Flask

from flask import Flask, request, render_template_string

app = Flask(__name__)

users = {'alice': 'wonderland', 'bob': 'builder', 'carol': 'sunshine'}

error_message = ''

# Create /login route with GET and POST methods
# Define login() function
# Check request.method == 'POST'
# Get username and password from request.form
# Verify credentials against users dictionary
# Return welcome message if correct
# Set error_message if incorrect
# Show login form with error_message
# Your code here

Hint

Use @app.route with methods=['GET', 'POST']. Use request.form.get() to get form data. Use render_template_string to show the form and error message.

4

Run the Flask app

Add the code to run the Flask app only if the script is run directly: if __name__ == '__main__': and inside it call app.run(debug=true).

Flask

from flask import Flask, request, render_template_string

app = Flask(__name__)

users = {'alice': 'wonderland', 'bob': 'builder', 'carol': 'sunshine'}

error_message = ''

@app.route('/login', methods=['GET', 'POST'])
def login():
    global error_message
    error_message = ''
    if request.method == 'POST':
        username = request.form.get('username', '')
        password = request.form.get('password', '')
        if username in users and users[username] == password:
            return f"Welcome, {username}!"
        else:
            error_message = 'Invalid username or password.'
    return render_template_string('''
        Login
        
            Username:
            
            Password:
            
            Login
        
        {{ error_message }}
    ''', error_message=error_message)

# Add code to run the app
# Your code here

Hint

Use the standard Flask pattern to run the app only when the script is executed directly.

Practice

1. What is the main purpose of a login form in a Flask web application?

easy

A. To create database tables

B. To display images on the webpage

C. To collect username and password from users

D. To send emails automatically

Solution

1. Step 1: Understand the role of a login form

   A login form is designed to collect user credentials like username and password.

2. Step 2: Identify the correct purpose in Flask context

   In Flask, the login form collects these details to verify user identity before granting access.

3. Final Answer:

   To collect username and password from users -> Option C

4. Quick Check:

   Login form = collect credentials [OK]

Hint: Login forms always gather user credentials [OK]

Common Mistakes:

• Confusing login form with other features like email or images
• Thinking login form creates database tables
• Assuming login form sends emails automatically

2. Which Flask code snippet correctly defines a route to display a login form using GET method?

easy

A. app.route('/login', methods=['GET'])\ndef login():\n return render_template('login.html')

B. app.route('/login', methods=['POST'])\ndef login():\n return render_template('login.html')

C. app.route('/login')\ndef login():\n return redirect('/home')

D. app.route('/login', methods=['DELETE'])\ndef login():\n return 'Delete method not allowed'

Solution

1. Step 1: Identify the correct HTTP method for showing a form

   Login forms are usually shown with GET requests, so methods=['GET'] is correct.

2. Step 2: Check the route and function return

   The route '/login' with methods=['GET'] returns the login.html template to display the form.

3. Final Answer:

   app.route('/login', methods=['GET'])\ndef login():\n return render_template('login.html') -> Option A

4. Quick Check:

   Show form = GET method [OK]

Hint: Use GET method to display forms in Flask routes [OK]

Common Mistakes:

• Using POST method to show the form instead of GET
• Not specifying methods list defaults to GET but unclear
• Using DELETE method which is invalid for forms

3. Given this Flask login verification code snippet, what will be the output if username='admin' and password='1234' are submitted?

from flask import Flask, request, render_template_string
app = Flask(__name__)

@app.route('/login', methods=['POST'])
def login():
    user = request.form.get('username')
    pwd = request.form.get('password')
    if user == 'admin' and pwd == '1234':
        return 'Login successful'
    else:
        return 'Login failed'

medium

A. Login successful

B. Login failed

C. SyntaxError

D. No output

Solution

1. Step 1: Check the submitted username and password

   The code compares user to 'admin' and pwd to '1234'. Both match the submitted values.

2. Step 2: Determine the returned response

   Since both match, the function returns 'Login successful'.

3. Final Answer:

   Login successful -> Option A

4. Quick Check:

   Correct credentials = Login successful [OK]

Hint: Match input values exactly to get success message [OK]

Common Mistakes:

• Confusing POST and GET methods for form data
• Assuming wrong output when credentials match
• Ignoring case sensitivity in username/password

4. Identify the error in this Flask login route code:

@app.route('/login', methods=['POST'])
def login():
    username = request.form['username']
    password = request.form['password']
    if username = 'user' and password = 'pass':
        return 'Welcome!'
    else:
        return 'Invalid credentials'

medium

A. No return statement in the function

B. Missing 'methods' argument in @app.route decorator

C. Incorrect use of request.args instead of request.form

D. Using '=' instead of '==' in the if condition

Solution

1. Step 1: Check the if condition syntax

   The code uses single '=' which is assignment, not comparison. It should be '==' to compare values.

2. Step 2: Verify other parts of the code

   The methods argument is present, request.form is correctly used, and return statements exist.

3. Final Answer:

   Using '=' instead of '==' in the if condition -> Option D

4. Quick Check:

   Comparison needs '==' not '=' [OK]

Hint: Use '==' for comparisons, '=' is assignment [OK]

Common Mistakes:

• Using '=' instead of '==' in conditions
• Forgetting to specify POST method in route
• Using request.args for POST form data

5. You want to create a Flask login system that locks out a user after 3 failed attempts. Which approach correctly combines login verification and attempt tracking?

hard

A. Use a global variable to count attempts and reset on successful login

B. Store attempt count in session and check before verifying credentials

C. Check attempts only after successful login to reset count

D. Ignore attempt count and always allow login attempts

Solution

1. Step 1: Understand where to store attempt count

   Using session storage per user is best to track attempts individually without global conflicts.

2. Step 2: Implement logic to check attempts before verifying credentials

   Check if attempts exceed 3 before allowing login verification to prevent further tries.

3. Step 3: Reset attempt count on successful login

   Resetting attempts after success avoids locking out valid users.

4. Final Answer:

   Store attempt count in session and check before verifying credentials -> Option B

5. Quick Check:

   Session tracks attempts per user [OK]

Hint: Use session to track attempts and block after limit [OK]

Common Mistakes:

• Using global variables causing shared count for all users
• Resetting attempts only after success but not checking before login
• Ignoring attempt limits and allowing unlimited tries