Django & React JWT Authentication Part 5 - React Setup

🔥 Subscribe to my YouTube + Turn on Notification Bells!

Hey, Bryan here. I share videos that help web developers up their development skills!

Today I'll be sharing the fifth part for setting up an authentication system that I will help you implement using React, Redux, and Django with the Django Rest Framework. I will also be using Bootstrap 4 for the styling in the application.

This is going to be an authentication system with some awesome production level features:
1. You will see how to customize the Django User Model.
2. You will see how to make it so that users are required to verify an account before they can log in.
3. You will see how to allow users to have the ability to reset their password if they forgot the password they signed up with.
4. You will learn how to implement these features using the JSON Web Token authentication scheme.
5. You will learn how to use the Djoser library in order to implement all these awesome features and easily be able to implement even more awesome production level authentication features!

In this part, I will be doing the initial setup for the React side of the project. I'll just be setting up the necessary components, and setting up the routes for those components.

To stay up to date with the best web development content, make sure you subscribe to My YouTube channel Today!

[forhadahmedkhan]

IMPORTANT NOTES:
Following keywords have been changed in newer version -

'Switch' replaced by 'Routes'
'component' in <Route /> changed to 'element'.

So now code look like this:

<Router>
<Layout>
<Routes>
<Route path="/" element={<Home />} />
</Routes>
</Layout>
</Router>


* Notice Home is now <Home />

[maximilianorivadeneira]

Great content!!
If anyone is wondering, reactv6 does not work with switch anymore. Thus, you have to wrap your Route component within Routes component and instead of "component" attribute set "element".

[anandraj]

hey bryan, thank you, i'm a newbie to react, but you guided well , Keep rocking

[nimanizky]

Hoping you have video for auth with google or social auth? Its so confusing

[mohammadali]

indeed a great video Bryan. but why you don't use md bootstrap or react semantic UI frameworks

[FloraSora]

Alright guys, I just went through this and suffered for 4-6 hours trying to get my page to not be blank. I started off with 12 errors* in the web console (ctrl+shift+i), then re-checked my Home.js, Login.js, etc, and discovered that I forgot to delete the (props) in each one.

Then, I simplified my urls.py routing in Django by moving it all to the main urls.py of the entire project (not just an app within the project).
I had initially changed my open parenthesis and close parenthesis to curly braces in 'const App =' because that saved me from errors, but that was actually not the problem. So don't bother with that so long as your const App looks very similar to the video's.
Third, make sure you follow the comments below, and to include Route and Routes after importing BrowserRouter as Router. Use Routes instead of Switch. Also don't forget that 'component' is replaced with 'element.'
Finally, double check your settings.py and make sure everything is good there, including static files, such that it suits your specific project's folder layout. This stuff can get tricky. Either hang in there and work through it slowly, or re-create your entire project from scratch. That one's on you.

I looked around online, gathered up some knowledge, saw how different people made different React apps, checked another YouTube video or two for how Django works with React.

After all that, I solved the issue eventually. Now my page does display the "Navbar" and "Home" text divs correctly. WOOHOOOO!
Good luck to the rest of you. And may the YouTube gods not delete my comment again.
Pastebin for my App.js source code: .pastebin.com/Q9XsYMb5
Pastebin for my urls.py in main project folder: .pastebin.com/SgP1yMwp

[arpitsamadhiya]

Which version of node and npm used in this project?

[thilakn]

i am getting the Navbar on the screen but no the Home how can i resolve this error

[fredi]

Hello, I love your tutorials but can you make something similar to this and not use Redux, thanks.

[aliasgar.burhani]

One question, Why axios and not fetch?

[FloraSora]

Did my comment just get deleted or am I going crazy?

[mahmudsajib]

Keep up the great content Bryan.
Wish you good luck!
Denis Ivy youtube channel also create Django Content & in last 6 months his subscribers increased from 500 to almost 50k.

[victorgrinan]

This tutorail doesnt tell you how to create a db connection so if you dont know how to do it dont watch this!