Assignments > HW6: Adding Security + Authentication

Due on Wed, 05/07 @ 11:59PM. 35 Points.

Video Walkthroughs for Homework 6

I have created some video walkthroughs to help you with Homework 6, which have been posted to Google Drive.

1. Introduction

In this homework assignment, you are going to lock down your system so that only logged in users can interact with it by using JSON Web Tokens (JWTs). This requires the following changes:

REST API Changes

• Implementing two new API endpoints (/api/token and /api/token/refresh) so that third-party clients can also access your REST API.
• Locking down all of your endpoints so that they require a valid JWT.
• Deprecating the hard-coded session variable for user #12 and replace it with code that retrieves the user if from the JWT.

User Interface Changes

• Creating a login form to handle authentication via JWT cookies.
• Integrating your React App into Flask so that your front-end is secured.

2. Background & Relevant Concepts

1. Bearer Tokens (External) v. Cookies + CSRF Tokens (Internal)

You can pass JWTs between the client and the server in a variety of different ways: through cookies, through custom HTTP headers, through the request body, and/or as query parameters.

• External Clients: For HW3 & HW4, you created an external client – located on a different server than the API – to interact with your REST API. To do this, you passed the JWT Bearer token in the HTTP. In this context, you did not need the CSRF token or cookies.
• Internal Clients: For HW6 (this homework), you will be using an internal client that will be hosted within the same web app as the REST API. This allows you to take advantage of some additional security measures, namely using an http-only JWT cookie, and incorporating a CSRF token in the HTTP header.

2. External Client Workflow

External clients do not rely on cookies. Instead, they usually pass authentication information via “Bearer Tokens” passed using HTTP headers. Given this, you need to implement the following features within the REST API:

1. A way for a user to authenticate with the REST API order to receive an access and refresh token.
2. Security measures on all of your REST API endpoints that require an access token.

As you have already seen, the followint code shows how you might fetch a protected resource from an external web application (running on a separate server), using a Bearer token:

For JavaScript clients that issue requests from other servers (not one that you own):

async function getPosts() {
    const response = await fetch("http://localhost:5000/api/posts/?limit=3", {
        method: "GET",
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer access_token'
        }
    });
    const data = await response.json();
    console.log(data);
}

For Python clients:

import requests

response = requests.get(
    'http://localhost:5000/api/posts',
    headers={
        'Authorization': 'Bearer ' + access_token
    }
)
print('Status Code:', response.status_code)
print(response.json())

3. Internal Client Workflow

Internal, browser-based clients can take advantage of additional security measures that aren’t available to external clients. Namely http-only JWT Cookies and CSRF tokens. Specifically:

1. You will write code to generate a JWT cookie, which will sent back and forth between the browser and the server via request and response headers.

2. The flask-jwt-extended library has a few convenience functions that will help you generate and set these cookies:

   • create_access_token() – generates the token
   • set_access_cookies() – sets the access cookies on the response header

3. Workflow:

   1. User sends username and password to the server via a login form.
   2. If the credentials are valid, the server sets the JWT tokens using cookies.
   3. Because the JWT cookies are set, the system will know who is logged in.
      • Web applications will also pass an X-CSRF-TOKEN as an extra security measure (see below).
   4. When the JWT access token expires, the system redirects the user to the login screen.

Then, rather than using a Bearer Token, you will not only rely on the JWT http-only server cookie, but also on an X-CSRF-TOKEN token, which will be included in all POST, PATCH, PUT, and DELETE requests. This token will protect against Cross-Site Request Forgery attacks. Here is an example of how you might use fetch to access a protected REST Endpoint from within your UI:

async function getPosts() {
    const response = await fetch("http://localhost:5000/api/posts/?limit=3", {
        method: "GET",
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': csrf_token
        }
    });
    const data = await response.json();
    console.log(data);
}

4. The Flask-JWT-Extended Library

To help you implement the JWT workflow, you will be using the flask-jwt-extended library, which offers some common JSON Web Token functionality that will help you. Please refer to the full documentation to get a more comprehensive explanation. Some links that we have found to be particularly helpful:

• Token locations
• Creating access tokens
• Creating refresh tokens

3. Setup

1. Duplicate your COMPLETED hw05 folder

Before you do anything with the new code, make a copy of your hw05 homework folder. Rename the duplicated folder hw06. Your csci344/homework folder should now look something like this:

homework
├── hw01
├── hw02
├── hw03
├── hw04
├── hw05
└── hw06  <-- this folder is an exact copy of HW5

Verify your code still works

On your terminal:

1. Navigate to your hw06 folder.
2. Create a new python virtual environment and install the dependencies: poetry install
3. Run your flask server: poetry run flask run --debug
4. Run your tests (keep your flask server running, but run your tests in a new terminal shell):
   • cd tests
   • poetry run python run_tests.py

2. Integrate the new files

Download hw06-modifications.zip, unzip it, and also save it in your homework folder.

hw06-modifications.zip

Your csci344/homework folder should now look like this:

homework
├── hw01
├── hw02
├── hw03
├── hw04
├── hw05
├── hw06
└── hw06-modifications
    ├── decorators.py
    ├── models
    │   ├── __init__.py
    │   └── api_navigator.py
    ├── static
    │   ├── css
    │   └── js
    ├── templates
    │   ├── api
    │   ├── includes
    │   └── login.html
    ├── tests_updated
    └── views
        ├── __init__.py
        ├── authentication.py
        └── token.py

Please integrate the starter files VERY CAREFULLY from hw06-modifications into hw06 as follows:

1. Add (new files)

2. Replace

3. Install dependencies

On the command line / Terminal / shell, add the new required dependencies to support JSON Web Tokens (this may already be installed, but just in case):

poetry add Flask-JWT-Extended

4. Create a new environment variable

In your .env file, add a new environment variable for your JWT secret. You can make this secret anything you want:

JWT_SECRET=MY_SECRET

5. Run your old tests

Run your old tests one more time (in the tests directory). They should all still pass. Now, navigate to tests_updated and run all of those tests. They should not be currently passing, but they will pass after this assignment is complete!

4. REST API Tasks

4.1. Modify app.py

In order to integrate JWT security measures into your app, you will have to make some modifications to app.py. Please complete the following 4 steps:

(1) Add the new import statements:

# import statement at the top
import flask_jwt_extended                       

(2) Replace CORS statement:

# replace CORS statement with this one:
# update:
cors = CORS(app, 
    resources={r"/api/*": {"origins": '*'}}, 
    supports_credentials=True # new
)

(3) Turn on the JWT Manager:

# 4. Turn on the JWT Manager
app.config["JWT_SECRET_KEY"] = os.environ.get('JWT_SECRET')
app.config["JWT_TOKEN_LOCATION"] = ["headers", "cookies"]
app.config["JWT_COOKIE_SECURE"] = False
app.config['PROPAGATE_EXCEPTIONS'] = True 
jwt = flask_jwt_extended.JWTManager(app)

(4) Add the JWT user lookup convenience function (https://flask-jwt-extended.readthedocs.io/en/stable/automatic_user_loading/)

# Include JWT starter code for querying the DB for user info:
# Include JWT starter code for querying the DB for user info:
@jwt.user_lookup_loader
def user_lookup_callback(_jwt_header, jwt_data):
    # print('JWT data:', jwt_data)
    user_id = jwt_data["sub"]
    user_id = int(user_id) # cast to an integer
    return User.query.filter_by(id=user_id).one_or_none()

4.2. Secure the REST API (20 Points)

After updating app.py, you will make the following three changes to your REST API in order to implement JWT authentication:

{
    "access_token": "e0e.dsc.3NI6Ij",
    "refresh_token": "e0e.mcm.6ktQ"
}

{
    "access_token": "e0e.Ras.i3NyZ"
}

Note on Deprecating User #12

Deprecate app.current_user by commenting out the following lines in app.py

# set logged in user
with app.app_context():
    app.current_user = User.query.filter_by(id=12).one()

When you’re done, you will replace ALL instances of app.current_user with flask_jwt_extended.current_user.

When you’re done with the 4 tasks listed above all of the tests in tests_updated should pass (just run run_tests.py) EXCEPT for test_login.py and test_logout.py (you’ll do that in the next step).

5. UI Tasks

In addition to modifying the REST API Endpoints, you are also going to secure your React client by integrating it into your Flask App and creating a login screen to protect it. To do this, please complete the following tasks:

5.1. Integrate Your React Client

Copy your react client folder (from HW4) into the root of the static directory in your Flask app. Rename that folder to react-client (you can call it anything, but let’s keep it consistent for simplicity).

New Replace selected React files with the new ones

This step has been added since the videos were created. Please download the following zip file and replace your current version of the three React files with the ones listed below: hw06-react-updates.zip

.
├── src
│   ├── index.jsx
│   └── server-requests.jsx
└── vite.config.js

5.2. Modify app.py

When you’re done, you will need to make a few changes to app.py.

First, import two new modules at the top:

from flask import send_from_directory
import decorators # utility that Sarah made

Next, replace the routes that are defined below this line of code…

# Initialize routes for all of your API endpoints:
initialize_routes(api, flask_jwt_extended.current_user)

…with these routes…

# Route for serving static react files
@app.route("/<path:filename>")
def custom_static(filename):
    try:
        return send_from_directory(app.root_path + "/static/react-client/dist", filename)
    except FileNotFoundError:
        return "File not found, probably because you're in development mode.", 404


@app.route("/")
@decorators.jwt_or_login
def home():
    if os.getenv("ENVIRONMENT") != "development":
        return send_from_directory(
        app.root_path + "/static/react-client/dist", "index.html"
    )
    else:
        return f'''
            Hello, {flask_jwt_extended.current_user.username}.
            In development mode, React is served by Vite.
            In production mode, this route will serve your react app.
        '''


@app.route("/api")
@app.route("/api/")
@decorators.jwt_or_login
def api_docs():
    access_token = request.cookies.get("access_token_cookie")
    csrf = request.cookies.get("csrf_access_token")

    navigator = ApiNavigator(flask_jwt_extended.current_user)
    return render_template(
        "api/api-docs.html",
        user=flask_jwt_extended.current_user,
        endpoints=navigator.get_endpoints(),
        access_token=access_token,
        csrf=csrf,
        url_root=request.url_root[0:-1],  # trim trailing slash
    )


# enables flask app to run using "python3 app.py"
if __name__ == "__main__":
    app.run()

5.3. Build Your React Client

Navigate into your react-client folder from the command line and compile your react application by issuing the following command:

npm run build

This should create a new directory called “dist” that will house your compiled React app.

Finally, add one more environment variable called ENVIRONMENT and set it’s value to production, which indicates that you have a react app that will be served from the static directory.

ENVIRONMENT=production

When you’re done, restart your flask app and navigate to http://127.0.0.1:5000. You should see your react app running.

5.4. Secure the User Interface (15 Points)

Secure the user interface as follows:

When you’re done, all of the tests_updated tests should pass.

6. What to Turn In

Please review the requirements above and ensure you have met them. Specifically:

Moodle Submission

When you’re done, please submit the following to Moodle:

• Either a link to your GitHub Repo (preferred) or a zip file of your code (excluding node_modules and your .venv python environemnt)
• If you worked with a partner, please list your partner