Authentication with Flask, React, and Docker

Learn how to add authentication to a Flask and React microservice!

Learning Objectives

By the end of this course, you will be able to:

Use Test-Driven Development to develop a React application Work with React running inside a Docker Container Test a React application with Jest and React Testing Library Enable type checking with React PropTypes Manage form state with Formik and Yup Implement user authentication with JSON Web Tokens (JWTs) Configure silent login via JWT refresh tokens Develop RESTful auth endpoints with Python, Flask, and Flask-RESTX Test a Flask app with Pytest Configure Flask Bcrypt for password hashing Use React Router to manage client-side routes in React Containerize Flask and React with a single Dockerfile using a multi-stage build Deploy an app to Heroku with Docker Configure GitLab CI to deploy Docker images to Heroku Document a RESTful API with Swagger/OpenAPI

Tools and Technologies

Back-end

Python Flask Postgres Pytest Flask-RESTX Flask-SQLAlchemy Flask-CORS Flask-Bcrypt PyJWT Gunicorn Coverage.py flake8 Black isort Swagger/OpenAPI

Front-end

JavaScript Node React Formik Jest React Testing Library Axios React Router ESLint Prettier Formik Yup

Tools

Create React App Docker Nginx HTTPie

Services

GitLab Heroku

Prerequisites

This is not a beginner course. It's designed for the advanced-beginner -- someone with at least six months of web development experience. Before beginning, you should have some familiarity with the following topics. Refer to these resources for more info:

Demo

Info

Current version: 3.0.0

Last updated: March 26th, 2020

Author: Michael Herman

What will you learn?

Part 1

In this first part, you'll learn how to quickly spin up a reproducible development environment with Docker to manage a RESTful API powered by Python, the Flask web framework, Flask-RESTX, and Postgres. We'll then add React along with Jest (a JavaScript test runner) and React Testing Library (a testing library designed specifically for React) to the client-side. We'll also introduce type checking, on the client-side, with React PropTypes and continuous integration (CI).

Part 2

In part 2, we'll add password hashing in order to implement token-based authentication to the Flask app with JSON Web Tokens (JWTs). We'll then turn our attention to the client-side and add React Router to the React app to enable client-side routing along with Formik and Yup for managing and validating forms.

Part 3

In part 3, on the client-side we'll add an authentication flow via JSON Web Tokens (JWTs) and spend time refactoring and writing tests with React Testing Library. We'll then turn our attention to ops and deploy the application to Heroku using the GitLab CI pipeline.