toruitas / complete-jwt-authentication

Companion code for the tutorial: "Complete JWT Authentication with Django & React - 2020"

Complete JWT Authentication with Django & React

By: Stuart Leitch

This GitHub repo accompanies my tutorial on the subject of how to use JWT Authentication with Django and React.

If you want to use React as a frontend with Django Rest Framework as a backend, you'll notice that getting the Authentication system set up presents one of the largest early hurdles. Follow this tutorial to build a really ugly website demonstrating the process from start to finish, including Custom Users, refreshing tokens, and protected views. It's the tutorial I wish I had when I first started.

The full tutorial on Hackernoon lives here: https://hackernoon.com/110percent-complete-jwt-authentication-with-django-and-react-2020-iejq34ta

Tutorial content

Part 1 - Django:

1. Django Custom User

2. DRF serializers and auth

Part 2 - React:

3. Installing React inside our Django project as a standalone app

4. Preparing React for Authentication, with routing, and the signup & login forms

5. Axios for requests and tokens

6. Logging out & blacklisting tokens

Part 3 - Improvements to Axios Interceptor

7. Fixing Axios infinite loop

Requirements:

• Django 2 or 3
• Django Rest Framework
• Python 3
• React 16.8 and up

complete-jwt-authentication's Issues

Code blocks broken in article

So far, the article on Hackernoon has been a great resource; thanks for writing it!

Code blocks in Hackernoon appear to be broken, though. There are no line breaks, making the examples in the article itself really hard to read.

Does this article reside anywhere else that doesn't have issues with code blocks in the article?

Django Rest Framework Testing

Hi,

I have gotten this working and am very grateful for your work, well done!

Something that I think needs to be done is the addition of testing. Could you add an example of how to go about using the Django testing framework to create user and login.

The part I get stuck at is that when I go to login(using the testing, I get the index.html page back and not the aceess and refresh token.

I have two functions:

def setUp(self):
        
    try:
        response = self.client.post('/user/create/', {"username":TEST_USER_LOGIN_NAME, "password":TEST_USER_LOGIN_PASSWORD, "email":TEST_USER_LOGIN_EMAIL}, format="json")
    except:
        print("Error occured while creating the user login")

and

    def test_GetListProducts(self):
        response = self.client.post("/token/obtain/", {"username":TEST_USER_LOGIN_NAME, "password":TEST_USER_LOGIN_PASSWORD}, format="json")
        # print(response) <-- This gives me back the index.html instead of the response with access and refresh tokens

        #self.client.credentials(HTTP_AUTHORIZATION='Token ' + response.data['access'])
        response = self.client.get('productss/')
        self.assertEqual(status.HTTP_200_OK, response.status_code)
        self.assertEqual(True, True)

any help would be greatly appreciated. Or if you want to put up your own example it would be helpful too

Thank you for making this

Seriously. I'm just trying to get an MVP off the ground, and man is it difficult to get auth right. I'm so grateful to you for making this and sharing it with me, especially since it's only been a few days, and because now I don't have to come up with the workflow myself. I think it's very much worth the switch away from Flask.

NO VALIDATION

Seems like we are enable to validate whether password is incorrect or is there a duplication

DRF-React-auth

Social Login

How would you implement authentication when using Social Login with Facebook or Google instead of manual user creation?

400 Errors

When I set up the project in a virtualenv and started it up, I can create a user. It is added to the database. But attempting to login is just 400 bad request errors. I am trying to debug it but that is becoming tricky.

Also there doesnt seem to be any error handling when it comes to a wrong password. I might be completely wrong on this aspect though. but the 400 errors make the project unusable.

Httponly cookie method

First of all thanks for this amazing tutorial. can you please shed some light on how to send tokens using axios by Httponly cookie method!!.

How do I cancel the axios request?

Tried to use this https://github.com/axios/axios#cancellation

But, when I try to cancel the request in componentWillUnmount(), I get a bunch of errors saying Uncaught (in promise) TypeError: can't access property "status", error.response is undefined in the axiosApi file.

React Development with Hot Reload

Thanks for the writeup was extremely easy to understand. My only question is how do you do active development on the React side and hot reload or something in order to develop?

Seems like the current setup you would have to do the npm run build each time to build out the static content, wasn't sure if there was a easy way to hot reload somehow on this for active react development or if its better to just do that via normal npm start type options or something.

Thanks

hello page show error if not login

as the subject, please advise it.

thanks

Regarding failing axios interceptor

Final Aproach on jwtAuth

is token getting refreshed

Hi,
I failed to see how/if you refresh the access token.
the access token is valid for 5 minutes. what happens after 5 minutes? starting getting 401?