Authentication with Flask, React, and Docker

  • Updated November 25th, 2024
  • v4.0.0
Michael Herman Michael Herman

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


This course details how to add user authentication to a Flask and React microservice. You'll use-

  • React Testing Library and pytest to test both apps
  • Formik to manage form state
  • GitLab CI to deploy Docker images to Heroku
Various logos sitting around an Octopus

What will you learn?

Select a Part

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 Vitest (a JavaScript test runner) and React Testing Library (a testing library designed specifically for React) to the client-side. We'll also add styling with Chakra UI and continuous integration (CI).

Learning Objectives

  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 Vitest and React Testing Library

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 Zod for managing and validating forms.

Learning Objectives

  1. Manage form state with Formik and Zod
  2. Implement user authentication with JSON Web Tokens (JWTs)
  3. Configure silent login via JWT refresh tokens
  4. Develop RESTful auth endpoints with Python, Flask, and Flask-RESTX
  5. Use React Router to manage client-side routes in React

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.

Learning Objectives

  1. Test a Flask app with pytest
  2. Configure Flask Bcrypt for password hashing
  3. Containerize Flask and React with a single Dockerfile using a multi-stage build
  4. Configure GitLab CI to deploy Docker images to Heroku
  5. Document a RESTful API with Swagger/OpenAPI

What do you need to know?

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:

Meet the Author

Michael Herman

Michael Herman

Michael is a software engineer and educator who lives and works in the Denver/Boulder area. He is the co-founder/author of Real Python. Besides development, he enjoys building financial models, tech writing, content marketing, and teaching.

What developers are saying

I really enjoyed the Test-Driven Development with Python, Flask, and Docker course! I built two Flask applications before going through the course that were very inconsistent. This course gave me production-level consistency as well as many advanced Flask features I did not know about. Previously, I had a Flask application driving both the front and back-end with just Jinja rendering the templates. Now I am building a more robust project with Flask as a REST API on the back-end and React as client-side app. So this course along with Authentication with Flask, React, and Docker are perfect for me. Thanks!

I've been reading quite a bit around the Internet on how to start moving our monolithic app that became a monster to a microservice architecture. I had a hard time wrapping my head around how to do it; and, I have to be honest, it was scary and I wasn't sure I could do it. After finding out about TestDriven.io and signing up for the Test-Driven Development with Python, Flask, and Docker and Authentication with Flask, React, and Docker courses, I finally was able to understand how to develop microservices with all the tools that are being used in the enterprise world. The courses are easy to understand and, at the same time, deep enough to get you started in the world of microservices.

As a practicing anesthesiologist and a computer geek from way back, I've had a number of projects (without confidential data, of course) that I've been trying to get off the ground. But I kept going around in circles with Docker, Flask, and React. Michael's book is well written, clear and has given me a great base of knowledge and best practice in regards to really getting my projects done. Best of all, it's given me the confidence to just get on and get coding. Thanks!!

Great resource! If you want to get practical knowledge about microservices, implementing Flask and React and Dockerizing it -- I'm sure you will be satisfied.

The Microservices with Docker, Flask, and React course bundle is the best course I've ever purchased! It teaches you how to design and build a microservices web application that can be deployed as a real production app. What really makes Michael's teaching unique is that after the basic guidelines, he pushes you to read and explore each tool, technology, and framework used in the course -- thus making you a better software engineer!

Frequently Asked Questions

What tools and technologies are used in this course?

This course covers a variety of technologies and services:

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. TypeScript
  3. Node
  4. React
  5. Chakra UI
  6. Formik
  7. Vitest
  8. React Testing Library
  9. Axios
  10. React Router
  11. ESLint
  12. Prettier

Tools

  1. Vite
  2. Docker
  3. Nginx
  4. HTTPie

Services

  1. GitLab
  2. Heroku

What support does TestDriven.io offer?

Since the courses mimic real-world development, support is provided via Stack Overflow. Helpful users, including the developers of the courses, read and respond to messages on Stack Overflow. If you get stuck and you can't find an answer via Stack Overflow, feel free to reach out via email directly. Just be sure to detail what you've tried. For more, review Support and Consulting.

How long does it take to complete the course?

It's dependent on your current skill level. On average, it takes approximately 12 hours to complete.