Django jwt authentication example with angular 5

When thinking about token authentication for our rest apis first think coming to our mind is JWT. JSON Web Token or JWT is a JSON-based open standard for creating access tokens that can use for purposes like rest api authentication.

This article contains a django application structure with jwt authentication, angular 5 and bootstrap 4 in front end.  This example uses django rest framework to create rest apis, and django-rest-framework-jwt for jwt authentication.

This example uses renowned professional angular 5 admin template SB admin. So it can be used as a starting point for your small or big scale projects. This example app will work fine with both Django 2 and 1.11 versions. I am using Ubuntu 16 for creating this example.

You can download the source code from this link:-
https://dl.dropboxusercontent.com/s/bd7bv2agd8y04q2/admin_proj.zip

Follow these steps to configure the example.
Download and extract the project. Then open a terminal window in the root directory of the project.

First, we need to create a virtual environment to run our project

For Django 1.11 run this command

virtualenv env

For Django 2 run this command

virtualenv -p python3 env

Then run the following command to activate the virtual environment

source env/bin/activate

Read this article for detailed description about creating virtual enviornments:- http://newprograminglogics.blogspot.com/2018/02/install-python-3-and-set-up-local.html

After that install django and related packages by run these commands

For Django 1.11

pip install certifi==2018.4.16
pip install Django==1.11
pip install django-cors-headers==2.4.0
pip install djangorestframework==3.8.2
pip install djangorestframework-jwt==1.11.0
pip install PyJWT==1.6.4
pip install pytz==2018.5

For Django 2

pip install certifi==2018.4.16
pip install Django==2.0.7
pip install  django-cors-headers==2.3.0
pip install djangorestframework==3.8.2
pip install djangorestframework-jwt==1.11.0
pip install PyJWT==1.6.4
pip install pytz==2018.5

Then run these to migrate database

python manage.py makemigrations
python manage.py migrate

Run this command to start django development server

python manage.py runserver

Make sure that the django development server is running at 8000 port.
Our backend is configured now.

Now open front_end directory in the project folder
open a terminal in that directory then run

npm install

Have any problems while install packages then use sudo

After all packages installed run

ng serve

Now the front end is available at http:127.0.0.1:4200
Open this in any browser. Click the register button, then create a user.
You can see the dashboard. Now start to add your custom functionalities.

Watch the video tutorial here (Click the gear icon and select video quality to 1080p HD, then click the full screen button for good quality)

Go to this link to subscribe to my YouTube channel to stay updated:- https://www.youtube.com/channel/UCxTp2yDew9m48Ch_hArOoYw