Setting up & Deploying JWT based auth using Flask & React

Setting up & Deploying JWT based auth using Flask & React

In this article, I am going to take you from a fresh React project to a project with a fully functional login backed by flask-praetorian. I hope this article helps you fill all the knowledge gaps that you might have.

Hi everyone! πŸ‘‹ I was working on a React project these last couple of weeks and I had to implement login functionality. I searched around and most of the solutions I found relied on Redux or some other huge dependency that I wasn’t already using in my project. I didn’t want to introduce a big dependency so decided to continue looking. In the end, I found a wonderful library by Oleg Babichev that allowed me to implement the login functionality on the front-end fairly easily. The backend for the login was based on Flask and flask-praetorian. flask-praetorian allows us to use JWT for auth and handles most of the hard logic itself. We just need to define some endpoints and some basic logic.

In this article, I am going to take you from a fresh React project to a project with a fully functional login backed by flask-praetorian. I hope this article helps you fill all the knowledge gaps that you might have.

Note: All the code from this article can be found in this GitHub repository.

New React project

I am assuming that you already have npx installed and have access to the create-react-app command. Let’s start by creating a new sample-app project:

$ npx create-react-app sample-app

This command will take some time but you will end up with a sample-app folder with the following structure:

.
β”œβ”€β”€ README.md
β”œβ”€β”€ package.json
β”œβ”€β”€ node_modules
β”‚   └── ...
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ favicon.ico
β”‚   β”œβ”€β”€ index.html
β”‚   β”œβ”€β”€ logo192.png
β”‚   β”œβ”€β”€ logo512.png
β”‚   β”œβ”€β”€ manifest.json
β”‚   └── robots.txt
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ App.css
β”‚   β”œβ”€β”€ App.js
β”‚   β”œβ”€β”€ App.test.js
β”‚   β”œβ”€β”€ index.css
β”‚   β”œβ”€β”€ index.js
β”‚   β”œβ”€β”€ logo.svg
β”‚   β”œβ”€β”€ serviceWorker.js
β”‚   └── setupTests.js
└── yarn.lock

Now let’s start the development server for our React app:

$ yarn start

Sweet! You should see something similar to this:

React Default

Setting up Flask API

Now that we have the basic React app working, it is time to set up the Flask project that is going to serve as our API backend. We will create an api folder inside the sample-app folder and this is where all of our Flask (Python) code is going to be stored. While we are at it, we will also set up a virtual environment inside the api folder and activate it.

$ mkdir api
$ cd api
$ touch api.py
$ python3 -m venv env
$ source env/bin/activate

Our folder structure will look something like this now:

.
β”œβ”€β”€ README.md
β”œβ”€β”€ package.json
β”œβ”€β”€ node_modules
β”‚   └── ...
β”œβ”€β”€ api
β”‚   β”œβ”€β”€ env
|   β”‚   └── ...
β”‚   └── api.py
β”œβ”€β”€ public
β”‚   β”œβ”€β”€ favicon.ico
β”‚   β”œβ”€β”€ index.html
β”‚   β”œβ”€β”€ logo192.png
β”‚   β”œβ”€β”€ logo512.png
β”‚   β”œβ”€β”€ manifest.json
β”‚   └── robots.txt
β”œβ”€β”€ src
β”‚   β”œβ”€β”€ App.css
β”‚   β”œβ”€β”€ App.js
β”‚   β”œβ”€β”€ App.test.js
β”‚   β”œβ”€β”€ index.css
β”‚   β”œβ”€β”€ index.js
β”‚   β”œβ”€β”€ logo.svg
β”‚   β”œβ”€β”€ serviceWorker.js
β”‚   └── setupTests.js
└── yarn.lock

flask

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Download a Flask template ready to plug in your business logic

Let’s assume after lots of hard work you have your machine learning model running the way it should. This model could be one which responds to a user’s request to classify a tweet sentiment or identify objects in an image or recommend a product or...

Python Flask-Mail Library to Send Emails in Browser Using Flask Full Project For Beginners

Python Flask-Mail Library to Send Emails in Browser Using Flask Full Project For Beginners #python #flask #flaskmail Welcome Folks My name is Gautam

Python Flask - Introduction to Flask Templates

This is our second tutorial in Python Flask, in this tutorial we are going to have Introduction to Flask Templates, so for this Flask looks for the template

Flask How to Create Routes with Flask-Classy - Code Loop

In this Flask article we are going to learn How to Create Routes with Flask-Classy, Flask-Classy is an extension that adds class-based views to Flask. so

Creating a RESTFul API with Flask 3 - Handling GET and POST in Flask

In this tutorial series we will be building a ToDo list API from scratch using flask-restful. In this video, We start building our To-DO List Api!