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:

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

Tools and Technologies

Back-end

  1. Python
  2. Flask
  3. Postgres
  4. pytest
  5. Flask-RESTX
  6. Flask-SQLAlchemy
  7. Flask-CORS
  8. Flask-Bcrypt
  9. PyJWT
  10. Gunicorn
  11. Coverage.py
  12. Flake8
  13. Black
  14. isort
  15. Swagger/OpenAPI

Front-end

  1. JavaScript
  2. Node
  3. React
  4. Formik
  5. Jest
  6. React Testing Library
  7. Axios
  8. React Router
  9. ESLint
  10. Prettier
  11. Formik
  12. Yup

Tools

  1. Create React App
  2. Docker
  3. Nginx
  4. HTTPie

Services

  1. GitLab
  2. Heroku

auth flask react logo

microservice architecture

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:

Topic(s) Resource(s)
Docker and Docker Compose Test-Driven Development with Python, Flask, and Docker, Get started with Docker, and Get started with Docker Compose
Flask and pytest Test-Driven Development with Python, Flask, and Docker and Flaskr TDD
React Intro to React

Demo

Info

  • Current version: 3.0.1
  • Last updated: November 25th, 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.



Table of Contents

Table of contents from Authentication with Flask, React, and Docker:


Part 1
Part 2
  • Flask Bcrypt
  • JWT Setup
  • Auth Routes
  • React Router
  • React Bulma
  • Formik And Yup
Part 3
  • React Authentication - part 1
  • Mocking User Interaction
  • React Authentication - part 2
  • React Alert Messages
  • Update Components
  • Deployment
  • Workflow
  • Structure
  • Next Steps



Join our mailing list to be notified about course updates and new tutorials.