Assignments > HW5. PhotoApp: Authentication

Due on Fri, 05/27 @ 11:59PM. 35 Points.

Update (Tuesday, 5/17 @10:00AM)

One of your classmates just informed me (Sarah) that I accidentally posted code that had the answers (in the views)! LOL. Not to worry – there’s still some work involved w/this assignment – but less work that I intended :). Please do still look at how the answers were implemented so that you understand what’s going on. Y’all have been working hard, and I appreciate your engagment with this class all quarter. And Happy Dillo Day!

Collaboration Policy

Same deal as always:

• You are welcome to work in pairs (optional).
• You may share a GitHub repo.
• You must deploy your own Heroku instance.
• If you collaborate, you’ll just list your partner in the comments section of Canvas.

1. Introduction

In this homework assignment, you are going to lock down your system so that only logged in users can interact with it. This includes two big categories of changes:

1. User Interface Changes:
   • Create a login form to handle authentication via JWT cookies.
   • Modify your JavaScript fetch requests to pass the X-CSRF-TOKEN in the HTTP request header.
2. REST API Changes:
   • Implement two new API endpoints (/api/token and /api/token/refresh) so that third-party clients can also access your REST API.
   • Deprecate the hard-coded session variable for user #12 and replace it with code that retrieves the user if from the JWT.
   • Lock down all of your endpoints (from HW3) so that they require a valid JWT.

To do this, we will be using JSON Web Tokens (JWTs). Please review the Lecture 15 materials for the basic JWT workflow.

1. Cookies versus authorization headers

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. In this assignment, you will be two methods:

1. Within your web application interface, you will use an integrated approach that relies on an http-only JWT cookie and a CSRF token.
2. For third-party apps (i.e., apps outside of your web application who also interact with your REST API), you will pass the JWT as an “Authentication header” using a “Bearer token”. In this context, you will not need the CSRF token, nor will you use cookies.

1.1. The Cookie Approach (for Browser-Based Interactions)

1. Your Flask UI will rely on JWT cookies. You will write code to generate these cookies on the server. Subsequently, these cookies will sent back and forth between the browser and the server via request and response headers (respectively).

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.

For internal clients that use your REST API, you need to embed something called an X-CSRF-TOKEN in the header of your fetch requests. Here is an example of how you might use fetch to access a protected REST Endpoint from within your UI (like you did in HW4):

fetch("/api/posts", {
        method: "GET",
        headers: {
            'Content-Type': 'application/json',
            'X-CSRF-TOKEN': '5c4f034d-13d6-4aa2-b686-ee0add18426b'
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log(data);
    });

1.2. The Authorization Bearer Approach (for Third-Party Clients)

For external clients, you need to offer them another way to access your REST API without actually having to log into your UI. To do this, you will implement:

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

Here is an example of how you might use fetch to access a protected resource from an external python app, using a Bearer token:

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

fetch("/api/posts", {
        method: "GET",
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + access_token
        }
    })
    .then(response => response.json())
    .then(data => {
        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())

2. 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:

• Configuration options
• Verification & helper functionality
• Refreshing tokens

2. Setup

1. Configure your local git repo

1. On your terminal or command line, navigate to your photo-app folder.
2. Make sure that hw04 is still your active branch by typing git branch.
3. Make sure that you commit all of your HW4 changes before creating a new branch.
4. Next, create a branch called hw05 as follows: git checkout -b hw05. Since you created your hw05 branch from your hw04 branch, your hw05 branch should be currently be identical to your hw04 branch.
5. Type git branch to ensure that you are indeed on the hw05 branch (it should be green with an asterik next to it).
6. Push your hw05 branch to GitHub as follows: git push -u origin hw05
7. Open GitHub in your web browser and verify that your hw05 branch is there.

2. Integrate the new files

Download hw05.zip and unzip it.

hw05.zip

You should see a directory structure that looks like this:

hw05
├── app.py
├── decorators.py
├── models
│   └── api_structure.py
├── requirements.txt
├── static
│   └── js
│       ├── api.js
│       └── utilities.js
├── templates
│   ├── api
│   │   ├── api-docs.html
│   │   ├── include-endpoint-detail.html
│   │   ├── include-form.html
│   │   └── navbar-api.html
│   ├── includes
│   │   └── navbar.html
│   └── login.html
├── tests_updated
│   ├── __init__.py
│   ├── run_tests.py
│   ├── test_bookmarks.py
│   ├── test_comments.py
│   ├── test_followers.py
│   ├── test_following.py
│   ├── test_like_post.py
│   ├── test_login.py
│   ├── test_logout.py
│   ├── test_posts.py
│   ├── test_profile.py
│   ├── test_stories.py
│   ├── test_suggestions.py
│   ├── test_token.py
│   └── utils.py
└── views
    ├── __init__.py
    ├── authentication.py
    └── token.py

Please integrate the starter files VERY CAREFULLY (don’t rush) as follows:

Add (new files)

Replace

3. Install dependencies:

On the command line / Terminal / shell, activate your virtual environment. Then, install the new Flask-JWT-Extended dependency as follows:

python -m pip install -r requirements.txt

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 (in the tests directory). They should all still pass). By the end of the assignment, all of the new tests (in the tests_updated directory) should pass.

3. Your Tasks

For this assignment, you will be implementing an authentication system for your REST API and for your app. There are 4 tasks you need to complete:

1. Securing the user interface
2. Deprecating the hard-coded reference to User #12
3. Securing the REST API
4. Deploying to Heroku

1. Securing the User Interface (15 Points)

In order to implement authentication within your Photo App UI, you will:

2. Deprecating User #12 (4 Points)

Now that you’ve implemented a way for your user to log, you need display the logged in user’s data. However, the way the application is currently configured, you’re still displaying User #12. To fix this, you will need to deprecate app.current_user, which relies on the following code in app.py

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

Luckily, the flask-jwt-extended library provides a way to do this. The approach:

1. Define a function that retrieves the User object based on the user_id that is embedded in the token.
2. Add the @jwt.user_lookup_loader decorator to the top of the function. By doing this, you can use the built-in flask-jwt-extended.current_user property to access the logged in user (works like magic).

Sample code:

First, define a function for retrieving a user from the database using the embedded JWT user_id:

# defines the function for retrieving a user from the database
@jwt.user_lookup_loader
def user_lookup_callback(_jwt_header, jwt_data):
    # print('JWT data:', jwt_data)
    # https://flask-jwt-extended.readthedocs.io/en/stable/automatic_user_loading/
    user_id = jwt_data["sub"]
    return User.query.filter_by(id=user_id).one_or_none()

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

3. Securing the REST API (15 Points)

You will make the following changes to your REST API in order to implement JWT authentication:

1. Create an endpoint to issue a access / refresh token.
2. Create an endpoint to issue a new access token (using your refresh token).
3. Lock down all of your endpoints.

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

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

• When you’re done with parts 1-3, all of the tests in tests_updated should pass (just run run_tests.py).

4. Deploying to Heroku (1 Point)

Please commit all of your changes / additional files to git. When you’re done, create a NEW Heroku app for your hw05 branch. You will follow the same process as you did for the HW3 Heroku deployment, with two differences:

• Instead of creating a brand new Heroku Postgres database, just use the same DB_URL environment variable that you used in HW3. In other words, your HW3 and HW4 Heroku deployments will share a database.
• Make sure you push your hw05 branch to Heroku: git push heroku hw05:main
• You will have to create one additional environment variable called JWT_SECRET. We recommend that you use the same secret locally and on Heroku. To add an environment variable, go to the settings tab of your app and click the “Reveal Config Vars” button.

4. What to Turn In

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

Canvas Submission

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

• A zip file of your code
• A comment that includes the following:
  • A link to your Heroku app
  • The name of your partner (if applicable)