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. Test a Flask app with Pytest
  2. Configure Flask Bcrypt for password hashing
  3. Use Test-Driven Development to develop a React Application
  4. Work with React running inside a Docker Container
  5. Test a React Application with Jest and React Testing Library
  6. Enable type checking with React PropTypes
  7. Manage form state with Formik and Yup
  8. Implement user authentication with JSON Web Tokens (JWTs)
  9. Use React Router to manage client-side routes in React
  10. Containerize Flask and React with a single Dockerfile using a multi-stage build
  11. Deploy an app to Heroku with Docker
  12. Configure GitLab CI to deploy Docker images to Heroku

Tools and Technologies

Back-end

  1. Python
  2. Flask
  3. Postgres
  4. Pytest
  5. Flask-RESTful
  6. Flask-SQLAlchemy
  7. Flask-CORS
  8. Flask-Bcrypt
  9. PyJWT
  10. Gunicorn
  11. Coverage.py
  12. flake8
  13. Black
  14. isort

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: 1.0.1
  • Last updated: October 4th, 2019
  • 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, Postgres, and the Flask web framework. 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 users service 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

Get All 3 parts:




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