Authentication & Refreshing Tokens Implementation

Implementing JWT access and refresh token authentication with Django & React using the timed interval method.

Timestamps

00:00 - Intro
4:15 - Setting Up Django Project
12:15 - Adding Django REST Framework
15:24 - Adding Simple JWT
22:00 - Customizing JWT Settings
23:25 - Access & Refresh Token Lifespan
24:32- Rotating Refresh Tokens
26:25 - Blacklisting Refresh Tokens
30:00 - Customizing Token Claims
34:38 - CORS Configuration
38:30 - Setting up React Files
51:25 - Private Routes
58:25 - Setting up AuthContext
1:04:24 - Login User
1:20:00 - Get user state from local storage on load
1:29:45 - Logout User
1:31:30 - Refresh & Rotating Tokens
1:45:10 - Setting Up User Items in DB
1:52:20 - Adding Protected Endpoints
1:54:30 - Rending user items
2:01:35 - Logout user on fail
2:04:45 - Refreshing Token on load

[gregruiz]

This is very high quality content Dennis... thank you for your time and effort put into this production.

[mattiepro]

This is the second time your tutorials have saved my life! I cannot thank you enough.
YOU ARE MY HERO!

[theanonymous]

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.

[jasbirsingh-mvvh]

Came here for django authentication, along with the authentication part, this tutorial cleared my context API fundamentals too :)

[llraekll]

React-Router-dom in video is the previous version, this is for anyone using React-Router-dom v6. The <Routes> must be wrapped around <Route> as shown below

<Router>
<Routes>
<Route path="/" element={<HomePage />} exact />
<Route path="/login" element={<LoginPage />} />
</Routes>
</Router>

This works for v6

[kozol]

This is exactly what I have been looking for! Complete and well explained.

[NOTHING-enue]

you know what there is no teacher that teaches this for free, you're the best teacher i've ever seen ❤

[pushkarkumar]

Awesome lecture. Please watch this 2hr and it will save your whole one day in internet surfing

[Andremzsptm]

That's exactly what I need. Thanks

[MuhammadAyaz-gpxd]

Bestest Tutorial about JWT with Django on Youtube. Thank you so much sir, for making this premium grade content for free.

[victoralexandre]

Amazing content, Dennis! Your channel is helping a lot with my first Django+React application. Please continue, really rich video!

[mastermaster]

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 you're a genious so much

[unmesh]

This is very high quality content. Very appriciated Thanks Dennis From INDIA, KERALA, THRISSUR, KODAKARA

[RealSLK]

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.

[parthmittal]

Thank you so much Dennis! Whenever I need anything related to Django, I just always come to your videos!!

[usamausman-dev]

In React-Router-dom version 6, there is bit difference.... We need to wrap the our <Route> tags inside <Routes> and instead of using component attributes we need to use element as an attribute and pass the component like this .... element= {<ComponentName/>}

[raduciurca]

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 <Switch> tag.

[schalkolivier]

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.

[m.shahzaibafzal]

Thanks Dennis Sir. You are my Best teacher.

[jamesthomason]

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.

<Router>
<Routes>
<Route element = { <HomePage />} path="/' exact />
<Route element = {<LoginPage />} path="/login" />
</Routes>
</Router>