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:
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
- Introduction
- Changelog
- Getting Started
- React Setup
- Testing React
- React Forms
- Type Checking
- React and Docker
- Linting and Code Formatting
- Continuous Integration
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 3 Parts:
Join our mailing list to be notified about course updates and new tutorials.