Using JWT for user authentication in Flask

JWT (JSON Web Token) is a compact, secure, and self-contained token used for securely transmitting information between parties. It is often used for authentication and authorization in web applications.

A JWT consists of three parts:

1. Header - Contains metadata (e.g., algorithm used for signing).
2. Payload - Stores user information (claims like user ID, roles).
3. Signature - Ensures token integrity using a secret key.

In Flask, JWT is commonly used to authenticate users by issuing tokens upon login and verifying them for protected routes. Let's see how to create a basic flask app that uses JWT tokens for authentication.

Installation and Setting Up Flask

Create a project folder and then inside that folder create and activate a virtual environment to install flask and other necessary modules in it. Use these commands to create and activate a new virtual environment-

python -m venv venv
.venv\Scripts\activate

And after that install flask and other relevant libraries using this command-

pip install Flask Flask-SQLAlchemy Werkzeug PyJWT

Create a "templates" folder, it will contain all the html files for the app.

To know more about creating flask apps, refer to- Creating Flask Applicaions

File Structure

After completing the project and running the app for atleast once so that the databse is created, our file system should look similar to this-

Creating app.py

Let's build our app step by step to implement authentication using JWT tokens. We'll also create an unprotected route to show that without a valid JWT, access is not restricted.

App Configuration

Before we start implementing authentication, let's set up our Flask application and configure necessary settings.

Explanation:

• Flask initializes the web application.
• SECRET_KEY is used to sign JWT tokens.
• SQLALCHEMY_DATABASE_URI specifies the SQLite database.
• SQLAlchemy is set up for database interactions.

Creating the User Model

We need a database model to store user details. For this app, we are going to use SQLAlchemy for our database. Here's how to create it.

Explanation:

• id is the primary key.
• public_id stores a unique identifier for each user.
• name, email, and password store user details.

Implementing Authentication (Login and Registration)

This section covers user authentication, including login and signup features.

Explanation:

• '/register' route stores user details securely with hashed passwords.
• '/login' route checks credentials and generates a JWT token.
• The token is stored in cookies and used for authentication.

Implementing JWT Token Verification

To secure routes, we create a decorator that checks for a valid JWT token.

Explanation:

• Retrieves the token from cookies.
• Decodes and verifies the token.
• Fetches the corresponding user from the database.
• Returns an error message if the token is missing or invalid.

Creating Routes for Home and Dashboar

These routes handle rendering pages and displaying user information after login.

Explanation:

• The home route renders the login page.
• The dashboard route is protected with JWT and displays the logged-in user's name.

Running the Application

Finally, we initialize the database and start the Flask server.

Explanation:

• db.create_all() - ensures the database is created before running the server.
• app.run(debug=True) - runs the Flask application in debug mode.

Complete app.py code

Creating Templates

Inside the templates folder create two files login.html file and register.html, these files will serve the page for registration and login, below is the code for these file-

login.html

register.html

Running and Testing Application

After setting up everything, let's test the JWT authentication using Postman. Make sure that Postman is installed on your system, download and install it from here if it isn't.

To test the application follow these steps-

1. Start the Flask app using the following command in terminal

python app.py

2. Register a new user

• Open Postman and send a POST request to http://127.0.0.1:5000/signup.
• Provide name, email, and password in the body (x-www-form-urlencoded).
• If successful, it redirects to the login page.

3. Login to get JWT Token

• Send a POST request to http://127.0.0.1:5000/login.
• Provide the registered email and password.
• If successful, a JWT token is set in cookies.

4. Test Unauthorized Access

• Open Postman and send a GET request to http://127.0.0.1:5000/dashboard without a token.
• You should receive a 401 Unauthorized error.