Putting it All Together: IAM Lab (CodeGrade)

Learning Goals


Key Vocab


Introduction

This is the biggest lab yet for this phase, so make sure to set aside some time for this one. It's set up with a few different checkpoints so that you can build out the features incrementally. By the end of this lab, you'll have built out full authentication and authorization flow using sessions and cookies in Flask, so getting this lab under your belt will give you some good code to reference when you're building your next project with auth. Let's get started!


Setup

As with other labs in this section, there is some starter code in place for a Flask API backend and a React frontend. To get set up, run:

$ pipenv install && pipenv shell
$ npm install --prefix client
$ cd server

You can work on this lab by running the tests with pytest. It will also be helpful to see what's happening during the request/response cycle by running the app in the browser. You can run the Flask server with:

$ python app.py

Note that running python app.py will generate an error if you haven't created your models and run your migrations yet.

And you can run React in another terminal from the project root directory with:

$ npm start --prefix client

Models

Create a User model with the following attributes:

Your User model should also:

Next, create a Recipe model with the following attributes:

Add database constraints for the Recipe model:

Your Recipe model should also:

Run the migrations after creating your models. You'll need to run flask db init before running flask db revision autogenerate or flask db upgrade.

Ensure that the tests for the models are passing before moving forward. To run the tests for only the model files, run:

$ pytest testing/models_testing/

Once your tests are passing, you can seed your database from within the server directory by running:

$ python seed.py

Sign Up Feature

After creating the models, the next step is building out a sign up feature.

Handle sign up by implementing a POST /signup route. It should:

Note: Recall that we need to format our error messages in a way that makes it easy to display the information in our frontend. For this lab, because we are setting up multiple validations on our User and Recipe models, our error responses need to be formatted in a way that accommodates multiple errors.

Auto-Login Feature

Users can log into our app! 🎉 But we want them to stay logged in when they refresh the page, or navigate back to our site from somewhere else.

Handle auto-login by implementing a GET /check_session route. It should:

Make sure the signup and auto-login features work as intended before moving forward. You can test the CheckSession requests with pytest:

$ pytest testing/app_testing/app_test.py::TestCheckSession

You should also be able to test this in the React application by signing up via the sign up form to check the POST /signup route; and refreshing the page after logging in, and seeing that you are still logged in to test the GET /check_session route.

Login Feature

Now that users can create accounts via the API, let's give them a way to log back into an existing account.

Handle login by implementing a POST /login route. It should:

Make sure this route works as intended by running pytest testing/app_testing/app_test.py::TestLogin before moving forward. You should also be able to test this in the React application by logging in via the login form.

Logout Feature

Users can log into our app! 🎉 Now, let's give them a way to log out.

Handle logout by implementing a DELETE /logout route. It should:

Make sure the login and logout features work as intended before moving forward. You can test the Logout requests with RSpec:

$ pytest testing/app_testing/app_test.py::TestLogout

You should also be able to test this in the React application by logging in to check the POST /login route; and logging out with the logout button to test the DELETE /logout route.

Recipe List Feature

Users should only be able to view recipes on our site after logging in.

Handle recipe viewing by implementing a GET /recipes route. It should:

Recipe Creation Feature

Now that users can log in, let's allow them to create new recipes!

Handle recipe creation by implementing a POST /recipes route. It should:

After finishing the RecipeIndex resource, you're done! Make sure to check your work. You should be able to run the full test suite now with pytest.

You should also be able to test this in the React application by creating a new recipe with the recipe form, and viewing a list of recipes.


Resources

Powered by Forestry.md