This is true. But when I try and implement the PrivateRouter and wrap the PrivateRouter in , React breaks because PrivateRouter isn't a Route. Did you find a solution to this?
Great Video! Just a note for anyone watching the video, "If you don't get it, you probably aren't ready for it yet" because Dennis explains pretty well.
For PRIVATE ROUTES: if you aren't redirected to login when you go to the home page from the header link, try wrapping the route tags (private and normal route) with the tag.
In React-Router-dom version 6 , there is bit difference.... We need to wrap the our tags inside and instead of using component attributes we need to use element as an attribute and pass the component like this .... element= {}
Hi everyone! if you are having trouble with at 49:50 with Route component.... component was replaced in favor for element! I also had to wrap my Route tags in a Routes tag, so it would look more like.
Very very very helpful video. Approach and explanations are great. Code is slightly outdated due to updates (router dom v6) but nothing a little research can't fix and you have updated videos on the subject too! Thank you.
oh dude you saved my life too, i was looking for a tutorial about this with react and django and nothing but i found out this video and just saved my life, thank u so much!!!!!! you're a genious thaaankks!!!!! so much
Replace components = {HomePage} to element={} do the same for login and then make you wrap the in a parent . Import from the 'react-router-dom'.... any confusion reply with your issue and also Note that in v6 of react Routes Redirect has been replaced with Navigate so just swap and it would work
Hey Dennis! Excellent tutorial, as always! Can you also show us how to do registration and also how a logged in authenticated user can do post requests to create/update notes? Cheers, bro!
My honest thoughts. I knew React Django but i restricted my self to build React +Django projects having authentication because i thought i can not handle authentication . And therefore build only projects with django templating language . Finally I got this playlist Thanks man
Thank you very much for the awesome content!! I have used React combined with firebase and Django (standalone) but never used them together. This video was really informative and helped me migrate my current frontends (Django Templates) to React.
why it is showing error when the code is exactly sale: "A is only ever to be used as the child of element, never rendered directly. Please wrap your in a ".
very sophisticated course, included with beginners mistakes (False, so on..) however I bought all of your courses, but sometimes just funny, but big respect you are trying to show us production ready things, not just useless , common educational apps
When creating the private route I am getting [PrivateRoute] is not a component. All component children of must be a or error. I had to wrap my routes in a Routes element because I got another error telling me to do it.
Just i want to ask Questions i didn't find another one explain django very good like Dennis i need this for my project the only thing that our project is Mobil application so the front end developed by flutter there is something changed in backend or rest the same
Thank you so much for this really, really high quality video. Very informative, explanations were on point and even the errores were interesting as it happens to everyone, even someone who knows their game like you (which makes me feel a little better :)) I finally understand the logic of JWT and can implement it in my django/angular project. My best wishes to you, and thanks again for this fine content.
Hi, how to issue jwt token based on role? For example, student access (5 min), Teacher access (15 min), Admin access (35 min), and access (50 days) if a request comes from a mobile device.
Thanks a lot! A very helpful video. The only remark or rather a question. Did anyone face an issue when an "Access" token disappears after multiple pages in different tabs being loaded simultaneously? E.g. one holds Ctrl and clicks on each item of the list. So the 1st and the 2nd item are loaded OK, and the rest end up with a "Login" page. I managed to fix it this way: in the file "AuthContext.js": let [loading, setLoading] = useState(true) _CHANGED_TO_ let [loading, setLoading] = useState(FALSE) and if(loading){setLoading(false)} ==> _CHANGED_TO_ if(loading){setLoading(true)}
hello everybody. Could you explain me why in App.js Dennis didn't use Routes component? Now as I see the structure is Router -> Routes -> Route. Sorry maybe for easy question.
Great video. I was wondering if it is possible to display some error message in LoginPage under form if login function inside AuthContext returns error (for example status 401 = wrong username/password). Currently im using alert, but how can i send error message between two components and display it on LoginPage? I'm new to React, thanks in advance.
If anyone is having issues with Redirects and Routes not rendering check your React version. React-router-dom v5 will not work properly in React 18 out of the box. React 18 changes strictmode behaviour, this causes issues with stale routes. redirect runs, the url changes, but no components are rendered. You will have to, disable strictmode, switch to React 17, or update to react-router-dom@6. I just downgraded to React 17 because i don't want to deal with other future breaks, and dont need React18 added features. Hope this saves someone some time.
Is it a good practice to store jwt in local storage? Is it easy to hack with XSS attack? I think, the best way to store jwt is to store them in cookies, which are available for http requests
i have a question or two or three. First, storing tokens on Localstorage is considered to be very dangerous. Secondly, how about blacklisting the access token as well (maybe a manual blacklist /deny list)? The access token is still vulnerable to being stolen and used for the duration it is valid. I understand the access token has a smaller time to live but it can still be a long enough duration that ANYONE who as that access token can impersonate the user. Hope that you will reply to this and if found relatable for many, make a video on this.
So I don't know a whole lot so take this with a grain of salt. At my current company(im an intern), we store refresh tokens in local storage. Ideally the tokens will expire soon enough to where even if the token is stolen, the intruder would only have minutes or several seconds to do whatever. So I don't believe it really metters. Could be wrong, thats what I was told. Sorry if I'm wrong
@@ethangordon3935 thabks for the reply man. I guess thats how it goes normally. But I am willing to do a research on how big companies like Facebook and Instagram make it work. Lot to learn.
First of all, this is a great tutorial. I have two questions 1. If there are multiple tab windows, won’t they send refresh token request multiple times 2. I saw blacklist token will be saved in Django database, what happens if table reaches the max limit ID, I mean it’s possible right?
I wish there was an explanation on why we have to go through this insane amount of trouble doing an extra 1.5 hours of work instead of just using the “login(request,user)” method in django lol. If JWT is so much better, there has to be a better way to encapsulate all of this rather than spend an extra hour every single time we make a project that needs this complicated setup
on login the user state is being set by decoded jwt access code , and access + refresh token is being placed inside local storage on refresh access + refresh token will be decoded and set the user won't this will cause a problem ?
When you refresh the access token, the server sends back a new access token (with the same user) and refresh token, and sets both in local storage. The frontend then uses the new refresh token to repeat the process, so there shouldn't be any issues with this process.
Private Routes component won't work in this version. Here is his updated video on how it's done in Router V6 : ruclips.net/video/2k8NleFjG7I/видео.html
That's what I was looking for, thanks for creating this usefully tutorial you help me alot, honestly you're a life server. But I can't wait to see another tutorial like this by using axios
Sir Thank you. I have watched your video and try to code self. I am fix and getting some error in 22:00 - Customizing JWT Settings . *cannot import name 'InvalidAlgorithmError' from 'jwt'*
This was awesome dennis, I have a question what if I want to authenticate user with more than one field, eg. user can generate toke with username and password, or email and password
Don't forget to check out my Complete Django course: dub.sh/rlKmDgY
Your Authentication tutorial is helping me complete my website. ThankYou
This is very high quality content Dennis... thank you for your time and effort put into this production.
This is the second time your tutorials have saved my life! I cannot thank you enough.
YOU ARE MY HERO!
React-Router-dom in video is the previous version, this is for anyone using React-Router-dom v6. The must be wrapped around as shown below
This works for v6
This is true. But when I try and implement the PrivateRouter and wrap the PrivateRouter in , React breaks because PrivateRouter isn't a Route. Did you find a solution to this?
@@honestoliveoil yaa i too got like that. any fix?
@@munawar1288 dont forget to initialize user variable
@@honestoliveoil
# BrowserRouter
...
sure
Came here for django authentication, along with the authentication part , this tutorial cleared my context API fundamentals too :)
Great Video!
Just a note for anyone watching the video,
"If you don't get it, you probably aren't ready for it yet" because Dennis explains pretty well.
That's exactly what I need. Thanks
Lol I was about to post that but I'm 8 months late.
Awesome lecture. Please watch this 2hr and it will save your whole one day in internet surfing
This is exactly what I have been looking for! Complete and well explained.
i think the jwt token must be decoded only in the server with a private key
For PRIVATE ROUTES: if you aren't redirected to login when you go to the home page from the header link, try wrapping the route tags (private and normal route) with the tag.
In React-Router-dom version 6 , there is bit difference.... We need to wrap the our tags inside and instead of using component attributes we need to use element as an attribute and pass the component like this .... element= {}
and also useNavigate instead of userHistory
Using PrivateRoute is also not displaying anything for me..
@@rizwanriaz8706p plz help same problem here
For me I get a problem of invalid token when a user opens his profile but sign in all is ok
Knock knock ○●○
you know what there is no teacher that teaches this for free, you're the best teacher i've ever seen ❤
Hi everyone! if you are having trouble with at 49:50 with Route component.... component was replaced in favor for element! I also had to wrap my Route tags in a Routes tag, so it would look more like.
Thanks bro. I was looking for this. Do you know why is that?
@@adnank7496 just the implementation changed with updates
Thank you, it was indeed helpful
Very very very helpful video. Approach and explanations are great. Code is slightly outdated due to updates (router dom v6) but nothing a little research can't fix and you have updated videos on the subject too! Thank you.
Bestest Tutorial about JWT with Django on RUclips. Thank you so much sir, for making this premium grade content for free.
oh dude you saved my life too, i was looking for a tutorial about this with react and django and nothing but i found out this video and just saved my life, thank u so much!!!!!! you're a genious thaaankks!!!!! so much
This is very high quality content. Very appriciated Thanks Dennis From INDIA, KERALA, THRISSUR, KODAKARA
Replace components = {HomePage} to element={} do the same for login and then make you wrap the in a parent .
Import from the 'react-router-dom'.... any confusion reply with your issue and also Note that in v6 of react Routes Redirect has been replaced with Navigate so just swap and it would work
Hey Dennis! Excellent tutorial, as always!
Can you also show us how to do registration and also how a logged in authenticated user can do post requests to create/update notes?
Cheers, bro!
Thanks Dennis Sir. You are my Best teacher.
agreed.
thank you very much. I learn JWT just in three day by your video.
My honest thoughts. I knew React Django but i restricted my self to build React +Django projects having authentication because i thought i can not handle authentication . And therefore build only projects with django templating language . Finally I got this playlist Thanks man
same went for me in my college project. I had to use django templating since it is so hard to make user authentication in react + django
Amazing content, Dennis! Your channel is helping a lot with my first Django+React application. Please continue, really rich video!
Thank you very much for the awesome content!!
I have used React combined with firebase and Django (standalone) but never used them together. This video was really informative and helped me migrate my current frontends (Django Templates) to React.
I almost never like videos, but ty bro you deserved it too much. I f*** love react + django and you just made everything for me so simple.
Thank you so much Dennis! Whenever I need anything related to Django, I just always come to your videos!!
What a perfect timing.. amazing .. last night I was looking for this kinda video and after 6 hours I hv seen my Django-guy made it!
I really was looking for any tutorial that explains how to apply the refreshing token, but no luck .. anyway you are a legend thanks a lot
why it is showing error when the code is exactly sale: "A is only ever to be used as the child of element, never rendered directly. Please wrap your in a ".
This tutorial is TOO GOOD!
very sophisticated course, included with beginners mistakes
(False, so on..) however I bought all of your courses, but sometimes just funny, but big respect you are trying to show us production ready things, not just useless , common educational apps
you saved my life of frustration thank you Dennis.
When creating the private route I am getting [PrivateRoute] is not a component. All component children of must be a or error. I had to wrap my routes in a Routes element because I got another error telling me to do it.
You are the best teacher and I love watching your video.
It will be very helpful if you make videos on vuejs.
please 😌 ...
You are my savior! Thanks for your content
This was exactly what I needed. Thanks Dennis
this is really useful and detailed video on authentication. It helped me a lot . Thanks Dennis.
Very Very good in-depth auth tutorial. Thank you. this is what the people need !
Suuuuuubscribed !
Thanks Dennis! Amazing tutorial... Congrats from Paraguay!
So much covered in one video, thank you !
Just i want to ask Questions i didn't find another one explain django very good like Dennis i need this for my project the only thing that our project is Mobil application so the front end developed by flutter there is something changed in backend or rest the same
Just what i was looking for + more. thanks!
Thank you very much for teaching this. I learned a lot from videos.
Thank you so much for this really, really high quality video. Very informative, explanations were on point and even the errores were interesting as it happens to everyone, even someone who knows their game like you (which makes me feel a little better :)) I finally understand the logic of JWT and can implement it in my django/angular project. My best wishes to you, and thanks again for this fine content.
Thanks Denis.. You have really been helping career
Thank yo so much. Very helpful and informative. Expecially for a beginer like me.
this is very valuable and thank you for explaining things thoroughly!
좋은 강의 영상 감사합니다 :)
Peferct time when i just finished a videos on it to implement on my project
Thank you so much. I was really struggle for this
Thank you!! It's super useful 👏🏻👏🏻👏🏻
beautiful tutorial man i love it been looking for this for while now
i was looking for exactly this!!
thank you so much!!
Great content, format and quality!!
Thank you for the helpful video. Do you have a video for adding different role permissions for rest frame work?
HIGH QUALITY CONTENT!!! THANKS U
Hi, how to issue jwt token based on role? For example, student access (5 min), Teacher access (15 min), Admin access (35 min), and access (50 days) if a request comes from a mobile device.
Thanks for the tutorial! I never worked with tokens and auth, and was really confused about them, but after this video everything became clear.
Aren't you supposed to be a Django expert?
@@zenande699 lol
The only subject missing in this tutorial is to add the old refresh tokens to the blacklistTokens when you log out
people suffering with changing the router version 5 to 6 for this tutorial " this guys has a video on that as well " might help"
Amazing video Dennis, really enjoyed it ♥
Awesome bro, respect
Thank You Very Much. This helps a lot!!!!
Thanks a lot! A very helpful video. The only remark or rather a question. Did anyone face an issue when an "Access" token disappears after multiple pages in different tabs being loaded simultaneously? E.g. one holds Ctrl and clicks on each item of the list. So the 1st and the 2nd item are loaded OK, and the rest end up with a "Login" page.
I managed to fix it this way: in the file "AuthContext.js": let [loading, setLoading] = useState(true) _CHANGED_TO_ let [loading, setLoading] = useState(FALSE)
and if(loading){setLoading(false)} ==> _CHANGED_TO_ if(loading){setLoading(true)}
hello everybody. Could you explain me why in App.js Dennis didn't use Routes component? Now as I see the structure is Router -> Routes -> Route. Sorry maybe for easy question.
Just what I needed. Thanks!
Great video. I was wondering if it is possible to display some error message in LoginPage under form if login function inside AuthContext returns error (for example status 401 = wrong username/password). Currently im using alert, but how can i send error message between two components and display it on LoginPage? I'm new to React, thanks in advance.
you are the man we need !
thank you for your useful tutorials
Good job (y)
Suggestion: You could have used setTimeout instead of setInterval so you don't have to return a clear interval method :)
Thank sir. So useful 🤟🏼
If anyone is having issues with Redirects and Routes not rendering check your React version.
React-router-dom v5 will not work properly in React 18 out of the box. React 18 changes strictmode behaviour, this causes issues with stale routes.
redirect runs, the url changes, but no components are rendered.
You will have to, disable strictmode, switch to React 17, or update to react-router-dom@6. I just downgraded to React 17 because i don't want to deal with other future breaks, and dont need React18 added features.
Hope this saves someone some time.
Amazing work, thank you!
Loved this Video!!
Thank you :))
thank you i made this with flutter and django .
Me:
*Bunking scool* to attend your videos 😄😆☺
27:31 google translate in chrome recognized those long JWT tokens as Polish lmao
make more video like this for react and backend thank you
Is it a good practice to store jwt in local storage? Is it easy to hack with XSS attack? I think, the best way to store jwt is to store them in cookies, which are available for http requests
Hey Dennis,
Thank you this is really helpful. do you have any other video for the registration and forgot password process?
i have a question or two or three. First, storing tokens on Localstorage is considered to be very dangerous. Secondly, how about blacklisting the access token as well (maybe a manual blacklist /deny list)? The access token is still vulnerable to being stolen and used for the duration it is valid. I understand the access token has a smaller time to live but it can still be a long enough duration that ANYONE who as that access token can impersonate the user.
Hope that you will reply to this and if found relatable for many, make a video on this.
So I don't know a whole lot so take this with a grain of salt. At my current company(im an intern), we store refresh tokens in local storage. Ideally the tokens will expire soon enough to where even if the token is stolen, the intruder would only have minutes or several seconds to do whatever. So I don't believe it really metters. Could be wrong, thats what I was told. Sorry if I'm wrong
@@ethangordon3935 thabks for the reply man. I guess thats how it goes normally.
But I am willing to do a research on how big companies like Facebook and Instagram make it work. Lot to learn.
First of all, this is a great tutorial.
I have two questions
1. If there are multiple tab windows, won’t they send refresh token request multiple times
2. I saw blacklist token will be saved in Django database, what happens if table reaches the max limit ID, I mean it’s possible right?
Hey Dennis please add a video on social login with drf and react
i have a suggestion to add token blacklist for refresh token after logging out, it prevent older user refresh his token after log out
I wish there was an explanation on why we have to go through this insane amount of trouble doing an extra 1.5 hours of work instead of just using the “login(request,user)” method in django lol. If JWT is so much better, there has to be a better way to encapsulate all of this rather than spend an extra hour every single time we make a project that needs this complicated setup
thank uuuuuuuuu so much you saved my life
on login the user state is being set by decoded jwt access code , and access + refresh token is being placed inside local storage
on refresh access + refresh token will be decoded and set the user
won't this will cause a problem ?
When you refresh the access token, the server sends back a new access token (with the same user) and refresh token, and sets both in local storage. The frontend then uses the new refresh token to repeat the process, so there shouldn't be any issues with this process.
Waiting for it 💙
Its here ;)
Private Routes component won't work in this version.
Here is his updated video on how it's done in Router V6 :
ruclips.net/video/2k8NleFjG7I/видео.html
Thank You!
In the updateToken function, would it be better to check if our access token is expired instead of asking for a new one ervery time ?
Best of the best!
Perect video. Thank you a lot
This is perfect, thanks!!
That's what I was looking for, thanks for creating this usefully tutorial you help me alot, honestly you're a life server.
But I can't wait to see another tutorial like this by using axios
Sir Thank you. I have watched your video and try to code self. I am fix and getting some error in 22:00 - Customizing JWT Settings . *cannot import name 'InvalidAlgorithmError' from 'jwt'*
Hi Dennis bro, your doing awesome video ❤, can you please tell me what theme your using in your vs code
thanks but I have a question how to implement JWT into regular Djagno not DRF?
This was awesome dennis, I have a question what if I want to authenticate user with more than one field, eg. user can generate toke with username and password, or email and password
Hello Dennis, thank you for this video, how do I incorporate password reset, and others with simple jwt
Can i add also a secret key in the backend for testing purposes?