Django Rest Framework Series - JWT Token Authentication with React - Part-3

[@harunozkok7888]

I dont know why this content doesnt have so much visualization.. This is the best content that i have seen related to setup of Django rest with react js.. I have paid a course for this.. explanations were much worse.. i didnt understand anything related to custom user models and tokens.. Too much respect for this guy

[@veryacademy]

Thank you!

[@alpstinger5083]

Couldn't agree more.

[@VskiDevs]

agreeeeeed💯 its 2022 and this is the best react-django tut for sure

[@agroforestryconsultancyroz3157]

It feels like this channel provides tutorials from the teacher with the highest programming skills I've seen so far.

[@GaneshPatil-fs6cn]

We don't get such content even after paying. Hats off !!! Thank you for the great content !!

[@veryacademy]

It's my pleasure

[@animeshkumar1201]

Best tutorial on token authentication using django JWT and react. I liked the content very much. Your channel should become famous.

[@veryacademy]

Thank you so much 😀

[@sergeipoliakov1845]

For anyone using react-router-dom version 6 or newer, 'useHistory()' was deprecated and replaced by 'useNavigate()'. Also was deprecated and replaced with

[@veryacademy]

Thank you - I will have an update for this series over the next few months no doubt.

[@iaggocapitanio7909]

or just type: yarn add react-router-dom@5.2.0 to ad an old version

[@jiweihe3413]

thanks, no wonder I have not seen these hooks before.

[@burburchacha]

thanks so much for posting this!

[@gunnar6922]

You are a brilliant teacher! Thank you so much! After hours of frustration when trying to understand JWT i stumbled upon your playlist and i now do not feel dumb and lost. It's pure join to understand this stuff och get things to work as expected.

[@veryacademy]

Thanks Gunnar, its really simple I hope you would agree once you get things up and running.👍

[@alpstinger5083]

Love the "hello and welcome back". Another awesome tutorial.

[@veryacademy]

Hello there! 😂

[@prvizpirizaditweb2324]

The way you firstly explain why we need it and how does it work, with diagrams is really helpful, thank you very much

[@veryacademy]

Glad it was helpful! Looking at your other comments I can see you are someone who likes details

[@ummehanyarozshandaanny2846]

How can someone give such great work for free!!! It's the best tutorial to me till now for Django... I wish I could do more than subscription and like. Thanks a lot...

[@andogrando487]

Agreed with everyone this is the most succinct and understandable walkthrough of Django and DRF - thank you so much you deserve so many more views!

[@indojojon892]

I have a question. How does the frontend recognize if the user is logged in or not?

[@wolfisraging]

This is just a brilliant video. I mean the efforts you've put in, mad respect mate!

[@timothyclarke16]

Thank you so much for this tutorial! I was in a tailspin of whether to use Django's built-in token authentication or other 3rd party packages, which seemed like a pain to integrate into my project and had very little return of investment. This seems like it's by far the best way to go.

[@osamakhan5397]

the way you explained such a complex topic... sir ji you are great

[@gopalmatcha4436]

Hands down one of the best tutorials I've ever seen! Thank you good sir!

[@Thatguy-rh5ls]

Your channel is a lifesaver 😭😭😭❤️❤️❤️

[@TheBodybuildingG]

Issues with this : - the permissions are set to AllowAny so the login/logout does not affect the accessibility of the data from the server. An example where the posts cannot be seen only when logged in would been better. - the logout component keeps creating blacklist token even after the user is logged out . keep pressing the logout button and the blacklist tab in the admin page will fill up - again the last part of the series is rushed. Maybe in the future u can split this tutorials for better experience. (we obviously get tired by the end) Still I appreciate the hard work u put in to make this videos with topics that are not touched by the general youtubers in this field..

[@veryacademy]

Thanks George, appreciate the time you spent giving very constructive feedback. I take it all on-board, I am still developing better methods to present information in these longer tutorials. 👍

[@SonySupporter]

Yep, the blacklist table is filled with tokens without user.

[@jsr7599]

Is there a resource that is complete for JWT for react/django? Or could you kindly document the steps needed to do so?

[@Pmarmagne]

Thank you so much for posting that video. Liked, saved and subscribed! I'm starting to learn react and I use Django as the backend. This is just what I needed!

[@veryacademy]

Glad it helped!

[@AibekToroev]

Your explanations are very very very detailed and it is good for understanding how things actually work behind the scenes. Thank you so much!

[@brom18711]

My progression over the past three months has been FCC (HTML, CSS, JS, React), Dr Chuck (Python 4 everyone), Corey Schafer (Flask/Django), then building my own Flask/Django projects. It was then that I didn't know what to do next, until I discovered this!

[@veryacademy]

Hi Beale. Promise you this, you will never run out of something next to do. Welcome to development. 👍

[@indojojon892]

I have a question. How does the frontend recognize if the user is logged in or not?

[@elmanpathan4872]

Thank you so much, very few people can explain in such a simple and concise manner.

[@josephc3080]

Stellar tutorial! This has really helped me get past a big sticking point in my own full stack app.

[@veryacademy]

Great to hear!

[@azrmuradl6420]

Shout out to you for creating such a great content! Keep it up man!

[@successhycenth]

Best teacher online....

[@PraisPranav]

You explain everything very beautifully. Now node js is in trend.. but I think django is simple

[@veryacademy]

Hi Agni, yeah, I have come to the party late that is for sure with Django. Thank you for the support. 👍

[@paborlouise319]

Wow.... You're taking this to a greater level.

[@veryacademy]

Thank Pabor, things are slowly moving forward, any questions as per normal just please ask. Always happy to take feedback on how I can best deliver content for you

[@paborlouise319]

@@veryacademy that's what about you sir. Good work.

[@as5728-h1i]

This is exactly what I was looking for

[@veryacademy]

👍

[@as5728-h1i]

@@veryacademy One question, If I don't integrate other APIs (ex - google, FB sign in/up) then I don't need to implement OAuth at all right? I can only rely on JWT for authentication and authorization both

[@Luffy-hi6xw]

Wow :d ... a Lot of topics have been covered since i left... Actually i was sick ..but im fine now so wil continue watching from where i left

[@veryacademy]

Welcome back, sorry to hear you were ill, hope you are better now! 👍

[@aashayamballi]

1K Subs!! Congratulations 🎉🎉🎉

[@veryacademy]

Thank you ☺️

[@benukapunchihewa4125]

Thank you very much! Top level content. You're a life saver mate.

[@anjaladhikari8951]

If anyone faced problem during blacklisting it's probably because no response was sent from the blacklisting view in the try part. So make sure you include a Response("Sucessful", status=status.HTTP_200_OK) inside the try

[@DevBishwasBh]

Thanks but please do NextAuth with Django Rest Framework, with Google OAuth. Also, adding "email and password" based authentication on the same tutorial will be great. I am desperetely waiting for your response.

[@veryacademy]

Hey, I see you are desperately waiting for my response! Sounds like a good tutorial, I will put it on my list, thank you!

[@DevBishwasBh]

@@veryacademy Thanks a lot. You gave me internal peace. I searched a lot on the web about the NextAuth and DRF-based authentication but got very few really old articles. I am really waiting for your video.

[@DevBishwasBh]

Also, please remember the Google OAuth Part, that's the most essential for me right now. Thanks again.

[@DevBishwasBh]

@@veryacademy Is the video uploaded?

[@felixfigueroa]

Master of Masters 🙇‍♂️

[@veryacademy]

👍

[@gabrielmota3583]

Wow, this is very high quality content! Subscribed! I would find also interesting to learn how implement something like useContext, to keep the user info available through components, along with this React and Django/JWT configuration!

[@FreeDomSy-nk9ue]

I think you mistakenly named the function SignUp 1:24:00 This was very useful, thank you

[@johnanthony6612]

But where does the users information come from why does no one show this? Once you get the token how do you get and use the information from the logged in user with the token??

[@veryacademy]

Hi John, appreciate this is a little abstract. Maybe not help you but for anyone else, I will refocus on this topic soon and break everything down further. It is always interesting to know about content you can't find and am happy to support this when I can. If you can articulate what it is you need or think more tutorials would be beneficial, please just let me know.

[@sbarbeloa]

at 33:32 after creating a superuser my postman is showing bad request, what could be wrong?

[@veryacademy]

Hey Samarth, number of things - initially might be your postman settings - are we talking about a error 400 bad request?

[@sbarbeloa]

@@veryacademy yes 400 bad request is coming

[@elneto264]

did you manage to solve it? i got same error and I am doing step by step the tutorial

[@akashparit9418]

can you please put the link to the resource from where you get the code of the interceptors

[@darshmamtora2863]

Video is great, just pointing out that refresh URL in axios.js file, it returns only access token but in code refresh is also stored again as undefined, so simply remove the refresh token line else it will give error

[@samthompson5138]

I think I am experiencing this error. Which line exactly needs to be removed?

[@EUU100]

@@samthompson5138 did you end up finding out?

[@ram0973]

Thank you very much, gonna use this with Spring Rest Api, made some changes with React 18 and TypeScript

[@akashparit9418]

best content on DRF on entire YT

[@shawnbeans7389]

hey, I'm trying to log in with a user and it says "No active account found with the given credentials" but when I try to login with superuser it's working fine. cannot log in with a normal user edt:fixed it

[@indojojon892]

I have a question. How does the frontend recognize if the user is logged in or not?

[@shawnbeans7389]

@Joaquin Polonuer sorry bro i dont remember, I seeing this reply after 1 month

[@shawnbeans7389]

@@indojojon892 json web token

[@vainav5794]

@Joaquin Polonuer i think this problem will happen id you dont hash the password before saving try to hash it then the jwt will work

[@virajagharkar941]

@@vainav5794 do you have that solution

[@Troglodyte2021]

Hi Zander Your tutorial is as good as always. Salute first! I have a question (or request) : How can I make login and logout link in the navbar show based on login status( or localStorage null or not)? I have been trying but to no avail. The navbar doesn't render unless being refreshed after login and logout.

[@veryacademy]

Hi, without actually showing you. Just try and break it down. If you are using localstorage, first work out how to access the data. Check that it is changing when you log in/out and so on.

[@Troglodyte2021]

@@veryacademy I have checked another toturial and it just added windows.location.reload() after login or logout code. I was still wondering if I could do it without reload the page (kind of obsessed with this SPA thing). Or the bigger question is "Is it reasonable to have the navbar component to watch if my localStorage is null or not all the time?" Maybe reload is the correct way. The navbar should checks localStorage only when a user clicks login button or logout button. Would love to hear your take on this.

[@shn8822]

@@Troglodyte2021 Hi 👋, I have the same problem and I used reload , but this way is not good for React, I hope you fixed this problem because I tried all solutions but it did not work for me

[@shn8822]

This means that you changed all the code related to login or just added context? and is there a specific video you recommend I watch? Thank you so much for your response.

[@Troglodyte2021]

@@shn8822 I forgot how to implement it. But I think I had watched the net ninjia's React Context and Hooks Tutorial series for the knowledge.

[@robokopi00]

How do you test the /logout/ endpoint in Postman? Having a hard time trouble figuring it out...

[@nahasco]

May I ask would you prefer this over django rest auth?

[@giorgiomassignani8765]

Hello Zander, Thank you for the wonderful state-of-the-art tutorials. I am following this one and everything works fine so far. The only thing is that I would like to implement a function (in the frontend) that checks if the user is logged in and if they are, it should change the header buttons Register and Login to the username and a "Logout button" that calls the logout function. How can I do that? I have been looking around a lot but I wasn't able to find anything helpful. Thanks.

[@veryacademy]

Hi Giorgio - sorry to summarise my answer - this is a common question that I will address in the next tutorial of the new Quiz API series 👍 Thank you for the kind support.

[@giorgiomassignani8765]

@@veryacademy I understand it is a question that requires a pretty long answer. I can't wait wait for the new tutorial. Thank you again!

[@SonySupporter]

When I refresh the page and the token is expired it goes into infinite loop.

[@Sasuke-px5km]

Hello is this still usefull for today? using nuxt 3?

[@PhillippApetenok]

In the create.js file saying that by default the author of the video is the author with id 1. How can I make that if I signed with id 2, the author field is going touse the id 2?

[@ankitdawadi7932]

I have tried many ways to solve it like installing django cors header, cors_allowed_origin and all. The thing perfectly work for registering and I can register my user. But it shows cors error while showing blog data and login. What may be causing it?

[@TheWytzepakito]

I had the same error, I mispelled Authorization in one of the components. Also I added: CORS_ALLOW_HEADERS = ( 'Accept', 'Accept-encoding', 'Authorization', 'Content-type', 'Dnt', 'Origin', 'User-agent', 'X-csrftoken', 'X-requested-with', ) to the django settings

[@ed7590]

After logging in how could I display the current username in the header on every page? Is it available from the token in local storage?

[@dheerajreddykondakindi7689]

How to display the error if username or email already exist we are only receving 400 bad request

[@Freecashnow2023]

how safe is using localStorage with the access tokens?

[@veryacademy]

As safe as you make it. But lets be honest - nothing is really 100%. Sorry I know this isn't the answer you are looking for. You will no doubt read some say it is an ok way to work, some will influence you not to use this. There just needs to be a deeper knowledge of big picture and understand the best practices when working with localStorage. Just keep reading 👍

[@PatrykJagielski]

keeping token in local storage isn't safe due to XSS attack. But is it the better way there?

[@ssentumbweenoch3430]

Great tutorial, can you also make a tutorial to explain how to properly use axios. It is not easy to understand interceptors. Overall, the tutorial is great, got me glued till the end.

[@parthokr]

Best channel for django stuff. Do you have any udemy course?

[@dennisdigiacinto4758]

Hello, thanks for this series, it's really helpful! I was wondering if you also made a video on how to show/hide login/logout button based on logged in state. I've seen other people in the comments asking for the same thing and you said you would have made a video about it eventually, I tried to look for it in your channel but I did not find it.

[@abhinavjha9231]

thanks bro.. Love From India

[@veryacademy]

👍

[@BenniK88]

Thanks for sharing so much insider knowledge. What I don't understand is why you use JWT instead of the build-in ´'rest_framework.authentication.TokenAuthentication'`? I currently work with the build-in Token Authentification. What are the reasons to switch? Should I?

[@ikazuchi-san5772]

jwt allows for stateless authentication and stuff, which removes the need for the server to verify your credentials on the database after the login, reducing its workload and stuff and its pretty safe if you know how to implement cuz the jwt is signed so if anyone comes and alters it the server will know t hat it has been altered without even checking the database it can also get your user data without having to go to the database for most of the stuff, it just reads it directy from the jwt

[@jhonyalberto4814]

Hi, thanks for your tutorial. I have been struggling to config a custom user model. I have configured the model and I have referenced it on the settings and it always leads me to the following error - "AttributeError: Manager isn't available; 'auth.User' has been swapped". Can anyone help please.....

[@KKLdynasty]

who is here in 2024

[@Martt6]

Great tutorial, thanks

[@veryacademy]

Thank you!

[@mimseridge]

Is it possible to send the jwt refresh token as an http-only cookie? That would improve security and avoid the need to store it in localStorage

[@veryacademy]

Hi Kieran, yes - this is something that was requested a while back that I haven't delivered on yet. 👍

[@joaoarthurbandeira]

@@veryacademy Hey! How could I do that? Did u manage to put a video showing this? Is it really safer? Thanks!

[@virajagharkar941]

In this tutorial I'm Stuck at one place where I'm sending correct data and user info is present still I'm not able to login that user showing : "detail": "No active account found with the given credentials" .In Django Admin panel I'm able to see that users data

[@bipinon]

you are just awesome 🍀

[@sergeysergey6682]

Just like I said before this content is next level! even comparing it to paid ones! Whats the advantage of using DRF with React instead of nodejs with React and how often DRF + React is used in production? thanks again ! Your efforts are greatly appreciated and your chanell will blow up in no time !

[@veryacademy]

The best place to look for info like that is insights.stackoverflow.com/survey/2020 - really interesting. It is a good question - I think ultimately you are deciding between JS in the whole stack or Django - which works with Python applications. Much will depend on the type of project you are running, thinking long term and the tech you want to use or bolt on. Thank you for your nice comments - most appreciated and I thank you for taking your time to watch them. 👍

[@orkhanrustamli2039]

Hello Sergey. I am also quite new to development world (only 9 months) but I would like to answer your question based on what I got on internet for the same question. In short, Django is great and almost perfect but it is not very light in comparison to Flask or Node. Django is first choice when talking about short term for project or in other terms developing quickly. It solves a lot of problem by default for which you would spend weeks to complete in other frameworks. It has a lot of by default security features and so on. In contrast, Node or Flask which are lighter frameworks rather than Django are perfect choice for microservices environment. In microservice environment, the application`s parts are separated by teams and each team is working on their own part and at then end different parts are talking with each other using API. Imagine using Django for each microservice and at the result the whole project`s volume will be huge. I am sure Zander will correct my mistakes. Moreover, I saw some poeple proposing that Python is slower than some other languages and that can also be a reason to prefer them over Django.

[@flashdaniel2796]

You are a brilliant teacher! I love your work sir But I have a problem getting the current user that is log in using JWT in reactjs.

[@veryacademy]

Have a look in the JWT token you probably have a user ID stored. You can extract that and use it to query the database to return the users info

[@flashdaniel2796]

@@veryacademy Yes I know sir I have already figured it out. Thank you for the quick reply sir I’m very much great full

[@darosaleh830]

@@flashdaniel2796 hi i am still having this problem do you know a fix? I cannot get the current user

[@HolliVids]

Thanks for the excellent tutorial. Do you happen to have any resources for accomplishing the token refresh with a fetch wrapper instead of axios?

[@theophylline2423]

Thanks for the great tutorial. I have a question about the security of refresh tokens: can the refresh token be copy/pasted and given to someone else, which allows them to get access tokens?

[@veryacademy]

yes exactly that - if someone else gets the token they can gain access. This is why you might choose to rotate them often and protect them using HTTPS for example

[@theophylline2423]

@@veryacademy sorry for another question: do you still have the link/resource that explains the axiosInstance interceptors? Not sure I understood that part.

[@satishkurakula]

Hi, I'm not able to see auth tokens in the inspect - > Application any help. not able to get the storage tab as you got in the video.

[@veryacademy]

Hi there - I am using just the latest version of chrome - should be all standard (f12 then Application then Storage)

[@satishkurakula]

@@veryacademy in mozilla there was no storage option in the application menu but in chrome I was able to get it.

[@veryacademy]

@@satishkurakula Great 👍

[@oscarparedez1417]

Any place I can find the Axios Instance adapted to React Native?

[@heroe1486]

Wanted to point out that if by any chance the refresh token in the localStorage is edited and doesn't match anything your code end up in an infinite loop calling "/api/token/refresh/" indefinitely. I modified it to check if it's in the Blacklist + using the /token/verify endpoint but even like this if you change its last character and it's not caught up by /token/verify/ you end up in a loop. The problem is that if the token isn't blacklisted you can't really tell if it's a fake one or not because OutstandingToken object isn't created when the pair is generated from /api/token/refresh but when you actually use the refresh token to ask for a new pair ( and it Blacklist it in the same time, kinda weird, why having these 2 models if it creates it and blacklist it directly ? The only time the outstanding token is created directly is at login when you manually provide credentials ). Because of that you can't ask the database if this token exist and you may end up in a loop if the fake one isn't detected by /api/token/verify/. If someone have a hint that'd be cool.. Edit : Finally creating another axios instance like AxiosSafeInstance without authorization headers and using it when you call /api/token/refresh does the job ( be sure to update the original Axiosinstance Authorization headers with tokens and not this one ).

[@EUU100]

hey i am very new to this, what topic should i research to learn about what you are talking about it seems important. Thanks for your time and your comment, best wishes

[@saharhoshia9418]

Do you have a code example?

[@aryanpandey2965]

I am getting "TypeError: posts.map is not a function" error in react posts.js at the line "{posts.map((post) => {" , what should I do?

[@veryacademy]

You have a syntax error I would imagine, just check the code repository and look at the syntax () and {} make sure you are using correctly...difficult to say with the code you provided

[@aryanpandey2965]

​@@veryacademy ok but one thing this error only occurs when i change PostList View permission from "IsAuthenticatedOrReadOnly" to any other permission. If I dont change the said permission, the error doesnt show up. But then even after logging out, the tokens don't get blacklisted and the same post still shows up even when the user is logged out.

[@veryacademy]

@@aryanpandey2965 Ok, just follow the permissions - it might start in the settings.py file - you might have defined a permission there - next the view permission. Thats pretty much the two places where you probably have permissions. Now you just need to work out if you have assigned permissions to the user. That should get you nearer to the answer

[@flaminiamazzitelli6017]

@@veryacademy I think people are having these issue (me included) because at the point in which you complete the login feature, you might have already changed the App.js file to point to axios.js. If you follow along the video exactly as it is, the App.js will still have the old fetch code which doesn't contain the JWT headers hence why we get the Unauthorized errors. I just found out and I thought I'd share it. Btw - this video series is AMAZING - thank you so much!

[@indojojon892]

I have a question. How does the frontend recognize if the user is logged in or not?

[@veryacademy]

Behind the scenes when you log in a cookie is created on your browser. The information in the cookie is sent every time you make a request to the server. The cookie holds a session number which matches a session on the django server. If the session number in your cookie matches the session on the server we could then determine the user is logged in. When you log out django destroys the session (this data can be store in a number of places, by default in the database). In the cookie data also if your user ID - so we can determine who you are.

[@indojojon892]

@@veryacademy do you have the video for that?

[@theCataras]

Thank you for the video. Everything works so far - although i definitely need to work on some feedback for the user with all the form data ; I am a bit confused though: What are the next steps after this? The user can log in and log out but how can i actually display data specific to individual users or wether or not someone is logged in? Do you have any references to your own videos or keywords i can search for when it comes to best practices for handling user specific data (user id etc.)?

[@veryacademy]

Hey Paolo, I will cover this in my next Quiz api tutorial👍

[@theCataras]

@@veryacademy Awesome! Thank you. I noticed when using the jwt django automatically assigns a user to the request. I assume that is managed by the authentication within django. I think it becomes very difficult for a beginner to keep track of all the best practices. When i search for some key ideas there always seem to be 5 different solutions for it. I wonder if you have any ressources for best practices? This even goes as far as structuring a project. Guess it's too much work to put all of this in one big series!?

[@alkfalfnsflgjslfj2127]

can we do this without creating custom user model and using django built in user model?

[@veryacademy]

Sure you can - thanks for all the questions

[@alkfalfnsflgjslfj2127]

Could you please do with allauth and react ??

[@kevinconnaughton9756]

Good morning. thank you for your course's. I don't know if you are going to see this. but i have a issue with postman, in spite of going over my code with fine tooth comb. I keep getting this message "detail": "Authentication credentials were not provided." can you please help

[@veryacademy]

Hi Kevin, only suggestion is that when you send a request you haven’t included authentication details, user pass and possibly token. Just double check you are passing everything over and have put the data in the right place and in the right format when sending it

[@aperson9991]

I think that error handling with alert could be vulnerable to XSS attack

[@AKshot60]

Hi very academy, can you make a tutorial on registering users through phone numbers? aka Twilio

[@veryacademy]

Noted it - cant promise when you will see it.

[@tommyeagen3763]

wow such a wonderful viseriez

[@harshitgangwar2162]

In the line .post('token/refresh/', { refresh: refreshToken }) .then((response) => { the response.data only contains access_token and no refresh_token, but we are updating the refresh_token localStorage.setItem('refresh_token', response.data.refresh); this sets 'refresh_token' = undefined and next time when the request is made 'refresh_token' is found to be undefined and atob can be executed on undefined and gives error I think this may be the reason

[@abdelrhmanahmed1378]

why session id still being send with each request cookie ?

[@markchukwuebuka6814]

hello, when i tried posting data with Postman using this endpoint "127.0.0.1:8000/api/user/register/", this was the response i got : {"detail":"Unsupported media type \"text/plain\" in request."}

[@veryacademy]

hey see answer in your other comment

[@ironheadmedia1625]

Hi. This tutorial is gold as others said. Thank you. I am a beginner so I could not get the point of putting the refresh token after user logs out. We already clean localstorage so if we did not put the reflesh token in blacklist how would the user could log in ?

[@veryacademy]

Hi C D - sorry, please could you simplify that question for me.

[@ironheadmedia1625]

@@veryacademy Thank you for the quick reply. My question is that 'when user logs out, we clean localstorage so this user can not be able to log in anymore with the token that we just deleted from localstorage. So after we deleted tokens in localstorage , why should we put the "tokens" in blacklist ? Is it for security reasons? '

[@cje8887]

@@ironheadmedia1625 I believe the reason is related to the statelessness - sure we deleted the token, but if anyone else (such as a malicious entity) still has access to the token, they could then just keep using it, because the server doesn't know that the user has logged out / deleted their token. Of course having a blacklist kind of defeats the "statelessness" purpose of JWTs, but that's an entirely separate debate and you can find many videos of people arguing about the pros and cons of session auth vs JWTs

[@GinesLA]

It saves 2 tokens for me on the blacklist, only 1 for you. In my case, one saves it when I log in and the other when I log out.

[@undergroundindy]

Great tutorial! You mentioned using a custom user model in favor of the tutorial moving along a bit quicker. How does creating a custom model make this faster over using the built in user model? What would I need to do differently if using the basic user model? Thanks! :D

[@harshitgangwar2162]

Posts are not loading even after i have recieved the acces and refresh tokes, when i redirect to '/' console says unauthorized, please helpp

[@veryacademy]

Hi, it can be difficult to line up everything to get it working. This isnt going to sound useful but, try and follow the process stage by stage and use print() in Django and console.log in JS to help output information that could help you determine where the problem is. unauthorized - this is suggesting that even though you have your tokens, when you request data - maybe you are not requesting it in the correct manor - or maybe your permissions need to be checked. If you use Postman - try on there - sometimes it gives you better feedback/info in the console by default.

[@harshitgangwar2162]

@@veryacademy Hey thanks, I found a typo, silly of me. But thanks anyway you are so great, people rarely take time out to read comments and help others. Also, this series is THE BEST right now on youtube fir DRF+React, its going to be a hit.

[@renzoblack5944]

Hello. I can't seem to install axios. it keeps giving me errors.

[@bringinglife2]

How can we extract the user information details from jwt token? Would you do a video on that?

[@veryacademy]

I nearly covered this in the first JWT tutorial - because it isn't too often you might send use info in the token I decided to leave it out. Okay, why not! 👍

[@bringinglife2]

@@veryacademy so isn't that safe? I just saw a video about context-api..and there they save user information and use it throughout the app. So i thought to try it out in this app from your tutorial I'm making but because of the Jwt token, got stuck. 😊

[@bringinglife2]

Hello Zander, I have a doubt.. Does using this package "jwt-decode" would decode the jwt in the front end so that we can get the current user information? Is it a good practice or is there any other widely used method? Thanks

[@veryacademy]

Hi, the short answer is that JWT doesn't concern itself with encryption. You can easily decode JWT whenever, where-ever. Also JWT isn't meant to store sensitive data - so be careful what you send across in the token. Sorry - that might not answer your question on reflection - so I will also say that, to gain access to data for a user the JWT token is used to authenticate the user at the back-end then allowing other operations for example accessing and returning user data. jwt.io/ blog.pentesteracademy.com/hacking-jwt-tokens-sqli-in-jwt-7fec22adbf7d stackoverflow.com/questions/27301557/if-you-can-decode-jwt-how-are-they-secure

[@veryacademy]

Let me know if that answered your question else just get back to me

[@bringinglife2]

@@veryacademy Thanks for the response. I am a bit confused as many of those things happen behind the scenes. So the access token is what we decode? And so the way we did it now is not that secure right?

[@veryacademy]

Ok - lets start here so we know we are both on the same page. 1. A user requests data from server. 2. If/when they log in the server sends back 2 tokens - the access the refresh token. Now the user/front-end doesn't need to do anything with these tokens - expect store them and use them to make data requests from the server. The server can then decode the token. When you decode the token there are 3 sections of information, header, payload and signature. jwt.io/introduction/. Just forget about adding data and passing data to and from with the tokens - this isn't thought as good practice. So the token for the user is a 'key' to access the servers data - the server can read the token (for example it will have information about the user, say the user ID so that the server knows who the token belongs to) and then can perform specific action based upon the user - maybe permissions etc. Ok let me know - lets take this idea forward if you need more explanation or not sure or I haven't answered your question lets continue

[@bringinglife2]

@@veryacademy Ok got you..I thought the token contains all the user's information so that I can decode that and use the username of the user in the header for the loggedin user's profile.. Thanks a lot for the detailed explanation 👍

[@AhmedAli-oc3xp]

I'm having trouble in setting Postman as it continuously showing.. { "email": [ "This field is required." ], "password": [ "This field is required." ] } Thanks in advance!!!

[@veryacademy]

It is telling you that Django is expecting that data and you need to define it in your frontend to pass that data to Django.

[@AhmedAli-oc3xp]

@@veryacademy Thanks a lot!!! I just figured out the problem...

[@media7588]

So thank you

[@bringinglife2]

I have one doubt again. Sorry for the trouble.. How can we change the states of button with use state for login button and logout button..like to render with 2 different conditions..so when a user login..he shouldn't be able to see login button or register like it does now.. Thanks 😊

[@veryacademy]

Hey Creately - I was going to make a video on state management - that is why I haven't done that yet. I was contemplating what approach to take - localstore - Redux / Hooks. But - yes the next part of this series - you will see this 100% - there is a few bits I want to tidy up - trying to keep the code and interface clean but not over complicate the code making it as easily readable as possible - please your questions are never any trouble - you have only ever been really helpful asking your questions - if I don't know what you are thinking / if I dont know what you need - I cant make tutorials to support you and no doubt others with similar questions. You are doing me the favour - so thank you and sorry to trouble you!

[@bringinglife2]

@@veryacademy Thank you and looking forward to it.

[@siddharthshukla3557]

something like this: const [isLoggedIn, setIsLoggedIn] = useState(False) (isLoggedIn ? : )

[@mehboobshaikh8396]

can you make a video on how to integrate django rest framework with keycloak?

[@veryacademy]

hmm noted it down

[@mehboobshaikh8396]

@@veryacademy Thank You....Please make it ASAP.

[@satyamsingh1387]

how you have connected react and django please show that...

[@indojojon892]

You can use webpack babel, check out Tech With Tim tutorial on React + Django

[@dawid_dahl]

Thank you so much!

[@veryacademy]

Glad it helped!

[@MrKeepItTrill]

Thanks for another great tutorial! One thing I noticed is, when a token gets put on the blacklist it still remains in the Outstanding Tokens as well. Is this intentional in terms of how JWTs work?

[@veryacademy]

Yeah there is a bit of work that needs doing, it’s not the cleanest.

[@indojojon892]

Do you have the video for the axios interceptors?

[@veryacademy]

Not just yet

[@ahmedelmawrdy4381]

keep it up bro!

[@dennisasamoah2213]

great stuff

[@vtm1ns]

Hello, when I try to use the code straight from the repo, on running it, it just loops: "POST /api/token/refresh/ HTTP/1.1" 401 65 Unauthorized: /api/token/refresh/ How do I fix this?

[@veryacademy]

Thank you! - I will take a look later tonight. I will post the result here.

[@vtm1ns]

@@veryacademy Hello there, no rush but you got any progress so far? Sorry for pressing this issue again haha

[@veryacademy]

@@vtm1ns Please just keep asking - I didn't look sorry - I got caught up with other things. I will look right now!

[@veryacademy]

@@vtm1ns download django ==== py -m venv venv venv\Scripts\activate pip install -r requirements ERROR djangorestframework-simplejwt==4.4.0 change to djangorestframework-simplejwt pip install -r requirements SUCCESS py manage.py createsuperuser py manage.py runserver Goto admin remove users React ==== npm install npm install react-router-dom npm start signup new user: SUCCESS Problem - no email sent Go into Django admin and activate user (is_active = True) Signin: SUCCESS

[@vtm1ns]

@@veryacademy Thank you!