Full stack Django: Quick start with JWT auth and React/Redux (Part I)

Django Viewflow
Aug 31, 2017 · 4 min read
Image for post
Image for post

This article shows how to quick-start with SPA applications development using Django and React/Redux.

It’s hard to imagine a Django application without user authentication and authorization. So we start with a simple application that can authenticate a user and perform an authorized request to an API.

In addition, you will see how to setup redux-router, local state persistence with redux-persist and write a simple UI with reactstrap (bootstrap 4 binding for the React)

In the first part of the tutorial we will create a simple Django backend with JWT token authentication. shows how to setup React/Redux frontend application and the shows how to implement JWT refresh token workflow.

At the end, you will have tiny, ready to extend application with Django back-end and React/Redux front-end.

To work over first part of the tutorial, you need to have Python 3.6 installed (under Ubuntu ensure that you have python3.6-dev and python3.6-venv packages)

What is JWT

JSON Web token is the stateless authorization method. Server-generated tokens may be kept on the client only. A JWT token itself could contain an additional payload inside. It could be a username, email or user permissions signed by a server side key. That became very handy when you going to split your Django monolith into different servers without shared users database or even perform authenticated requests to backends implemented in other technologies.

You can read more about JWT internals in the article

JWT authorization endpoint can offer two token types — a short-living Access Token and a long-living Refresh Token. Short-living Access Token could be used to perform API calls over different services, whereas the long-living Refresh Token suited to obtain new Access Token when previous going to be expired.

Long-living tokens allows you to ask the user for his username and password only one time once he authenticates for the first time, and the user will stay logged for a while

Constant refresh of short living access tokens allows keeping in sync token payload (remember the user name or permissions)

Another reason to have two kinds of tokens is the ability to block a user from receiving new Access tokens.

The server side

The servers side project is pretty straightforward. Start with new and install required Django packages

$ mkdir backend/ && cd backend/$ python3.6 -m venv env
$ source env/bin/activate
$ pip install coreapi django djangorestframework \
djangorestframework-simplejwt
$ pip freeze > requirements.txt
$ django-admin startproject config .

We installed package, to allow to auto generate an API schema describes what resources are available, what their URLs are, how they are represented and what operations they support.

And the package that implements JWT authorization and authentication with Refresh and Access tokens.

Let’s edit config/settings.py to enable it

INSTALLED_APPS = [
...
'rest_framework',
]
# Rest FrameworkREST_FRAMEWORK = {
'DEFAULT_PERMISSION_CLASSES': (
'rest_framework.permissions.IsAuthenticated',
),
'DEFAULT_AUTHENTICATION_CLASSES': (
'rest_framework_simplejwt.authentication.JWTAuthentication',
'rest_framework.authentication.SessionAuthentication',
),
}

We added rest_framework into INSTALLED_APPS settings, protect by default all API resource with IsAuthenticateguard, and enable JWTAuthentication alongside with SessionAuthentication. We going to use standard django session authentication to get access to the protected schema view.

Let’s edit config/urls.py to enable authentication endpoints

from django.conf.urls import url, include
from django.views import generic
from rest_framework.schemas import get_schema_view
from rest_framework_simplejwt.views import (
TokenObtainPairView,
TokenRefreshView,
)
urlpatterns = [
url(r'^$', generic.RedirectView.as_view(
url='/api/', permanent=False)),
url(r'^api/$', get_schema_view()),
url(r'^api/auth/', include(
'rest_framework.urls', namespace='rest_framework')),
url(r'^api/auth/token/obtain/$', TokenObtainPairView.as_view()),
url(r'^api/auth/token/refresh/$', TokenRefreshView.as_view()),
]

We’ve got enabled a schema view, session authentication URLs from the django-rest-framework, and TokenObtainPairView with TokenRefreshView for JWT authentication.

At the last step, let’s make a simple echo API endpoint, to test calls from our front-end. when we would be authorized. For the demo project, we could add this directly into config/urls.py

from rest_framework import views, serializers, status
from rest_framework.response import Response
class MessageSerializer(serializers.Serializer):
message = serializers.CharField()
class EchoView(views.APIView):
def post(self, request, *args, **kwargs):
serializer = MessageSerializer(data=request.data)
serializer.is_valid(raise_exception=True)
return Response(
serializer.data, status=status.HTTP_201_CREATED)
urlpatterns = [
...
url(r'^api/echo/$', EchoView.as_view())
]

Now we can run the server

$ ./manage.py migrate
$ ./manage.py createsuperuser
$ ./manage.py runserver

Open http://127.0.0.1:8000 login and see auto-generated schema of our API.

Image for post
Image for post

Go to api/auth/token/obtain/ enter credentials, and see that we got new Access and Refresh tokens in response

Image for post
Image for post

And on the api/echo we could check our echo endpoint.

Image for post
Image for post

So, we a ready to create a front-end. Let’s go to the

Netscape

A community dedicated to those who use JavaScript every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store