Building a user authentication app with React and Django Rest Framework

Django Rest Framework is a popular tool for building Django REST APIs. In this video we leverage DRF to build a user authentication app with session authentication.
We use ReactJS on the frontend. The React frontend runs at port 3000 and the Django backend at port 8000.
Link to code: github.com/dotja/authenticati...
Chapters:
---------------
0:00 intro
0:48 the setup
0:58 session authentication
1:24 coding the backend
7:32 backend in action
8:28 coding the frontend
14:20 demo
15:09 outro

[@godlyradmehr2004]

that was really awesome, i'v not seen such a tutorial with django and react befor. keep goin dude.

[@kelvinxg6754]

i'm not so new to django you got me subscribed right away! keep doing the good work brother

[@MrJgracias]

Thank you for making the video. It was the first time I have ever had to reduce the play speed!

[@djangoroad]

😂

[@MrJgracias]

@@djangoroad it was really good. I need to watch the rest because i don't understand ll of it and I want to you seem like you get it.

[@RecklessEngineering]

This deserves more likes, alot of effort into the illustrations. Well done!

[@resiluck]

I love your tutorials. Clean and easy.

[@andrew4066]

So much in 15 minutes! Thanks for this video

[@NeenuJose-ov7ng]

Hi Dotja, thank you for making this video 🙂

[@josuegarcia4280]

I loved your tutorial, very fast and easy to follow, keep up the good work!

[@maheerab5238]

Hi I just came across your channel and you're are a real pro at this like you explain everything and make it easy to follow, good job mate

[@djangoroad]

Thank you!

[@maheerab5238]

@@djangoroad Hey man so I've been trying to work with djangorestframework but it hasn't been going good, I get errors that djangorestframework could not be resolved when I try to import it and I've tried uninstalling, reinstalling, starting a new project, changing the virtual environment, using the old version and so on. What should I do?

[@Gyglir]

If ur in viscode, do ctrl + shift + P and select ‘Python:Select Interpreter’ and choose ur virtual environment

[@maheerab5238]

@@Gyglir Thank you so much bro, I didn't know what to do and was about to give up

[@raffritter6766]

Very nice tut again, thanks so much : )

[@al.e.k]

Hi! It's informative and short video! But what would you do if you will need to access same backend api's endpoints both from SPA (like you do in the video) and from another api clients (not browsers)?

[@mariohurtado2180]

So great!! Thanks for your effort.

[@eddielicea3740]

Got yourself another sub buddy. Thank you very very much.

[@ArseniyBendyukov]

Very nice and instructive video!

[@ahoymatey1234]

This seemed good but am I missing some setup steps? There is a bunch of django boilerplate code that appears right when the video starts without any mention of how to start other than installing 2 dependencies

[@henoelima9211]

great content, by far the best in simplifying django principles. are u planning on making more videos about djangoRest-react?

[@djangoroad]

Thanks! Anything in particular when it comes to DRF and React?

[@ilahazs]

@@djangoroad built a full SPA app sir

[@Latif127]

Looked good to me, thank you.

[@Plegeus-qk3jr]

short but complete, I like it, straight to the point. some webcam action at the start for personality? sure! but focus on the code throughout the video, this is what I like to see.

[@ricksmith261]

Great tutorial, thanks

[@hazydimension]

by far the best.

[@marvelouswololo6677]

awesome! thank you so much!

[@neliobila]

Hi Dotja, thank you for making this video, i would like to see how you protect a page and api from not logged users

[@evanmunro5188]

Why is it important to use the IP address rather than the localhost alias? In my own project based on this model I am seeing that making requests from localhost seems to have csrf issues. Can you clarify what is happening?

[@abdulabdullah6309]

this is just awesome video

[@Patricio4x4]

Hello! I have an issue with the code. I can not create superuser (user = self.create_superuser(email, username, password) [Previous line repeated 989 more times] RecursionError: maximum recursion depth exceeded ). The other error is that I can not access to admin panel Exception Value: 'AppUser' object has no attribute 'is_staff'

[@prabalpratap1367]

great work☺

[@pkorneev5226]

Hello, i am totaly 0 in backend but i have to create fullstack app for sceduling school subjects unfortunatly... If i would copypaste this, will i be able to add some roles on this ( like administrator, which would be able to add roles for the certain users etc. etc) ?

[@kingvon6820]

Hi i am stuck at 04:20 where you are using the .validations.I cant seem to understand where it is coming from

[@Plegeus-qk3jr]

I seem to be having issues with authentication. When I do the login everything works, though, when I refresh the page, the frontend does not seem to remember that I was logged in. I made a url in mu users app in Django: /user/authenticate/, the sole purpose is to authenticate a user base on the request (so if request.user.is_authenticated: blah blah), unfortunately this step fails, even when I did not refresh the page from react (and when I did the login successfully). Any ideas what might cause this? When I follow to urls in localhost:8000 and manually do the posts, everything works as expected.

[@garshockgayming]

same problem

[@hamaap7876]

so much information in this video thank you for this

[@Gyglir]

This video is a hidden treasure

[@keinermendoza4631]

I agree 🙋

[@DinnerHood]

If you are familiar with Django, but still trying to make sense of single page applications, this video is gold. You see the serializers, api's, forms, functions and states in action, and you get a working signup / signin / logout application, with not one line of code more than required. Highly to be saluted. It took me two evenings to get it working. There were issues with my node, requiring adding two variables in package json, and errors using email to create and authenticate user, so had to replace it with username in both back and front. All seems to work, now I can start learning from it. Thank you so much for this. I do have a question. The process uses session authentication, with Django again not making it too difficult to implement, it only seems to be adding some settings and in the code some repetitive snippets. How safe is this application?

[@DinnerHood]

Update. I'm 3 weeks into my journey of single page application with React and my head is spinning. I've managed to put the home, signin, signup in separate pages using React Router navigation links. I've separated the user check with Zustand to set a global 'is_authenticated' boolean, and calling it with useEffect on the homepage and profile page I've added. Apparently I have to call this function on all pages where I want to work with logged-in users only? This state concept is so different from Django-only, I can barely wrap my head around it, but I'm guessing this is the stateless vs stateful communication in action. I'm using the user response to display the users data where I want, and added a delete user functionality. After endless tries with post combinations, I finally got it working with a get method. Didn't expect that, not sure if what I'm doing is correct, and still trying to figure out how to delete the cookie, the empty brackets in the authentication classes seem to do that in the logout view, but that doesn't work for deleting users, at least not with my snippet. Some more CRUD functionality, together with error handling, would have been the cherry on the cake. But it's still the best cake out there for React beginners with Django experience. Thank you for this video.

[@DinnerHood]

In the mean time I've managed to add some error handling, both on the front upon submit, and from the back catching the status, wuhu. Today I woke up thinking 'but why use serializers if the user submits plain text?' It seems not needed, my login works fine without, but pretty sure I'm overlooking something.

[@ilahazs]

I gave up, Now im using Next

[@domjanzsoo]

Might be silly question. but unable to find straight answer to it. Why model instances are created in the serializer?

[@mohamedsmouni3051]

thanks for the video. and how to deploy such app in production ?

[@user-rl7oc2oc6y]

The operation of writing files regarding "from validations" is not shown in the video, but does it work without writing validations files?

[@jitaiya_____]

hey ! did u find a solution ?

[@user-sy6bx9lc3l]

That’s great!! I spent my 5 hour to solve by myself but it’s fail… I will try ur tutorial

[@aashayamballi]

Thank you!

[@aakashkothari5740]

Why do we use the 127 IP address and not the localhost?

[@Thomas-sx5uz]

Hi very nice but the problem is that in my react app everuthing is pack in his file and I have the problem of the refreshing of the variable user because my form is not direclty in the app component... How can I handle this problem ?

[@chomeloart]

Hi there, I have a question. When you modify the superuser in the user model before modifying it, it works. but when I modify the user for the new user model, it no longer allows me to create a super user, how can I create a separate user model?

[@FrEEze-0716]

Hi, i am unable to create the superuser and also login to the admin page, if like that how can I check how many users have registered?

[@rahuljb5296]

Authorization (only admin user can create normal user) how to do this in api

[@codedjango]

Can you explain the same with JWT Authentication(djangorestframework-simplejwt) instead of SessionAuthentication?

[@djangoroad]

Hi, you might be interested in this video I made on JWT and DRF kzbin.info/www/bejne/h6mYmXd5aJirh7c It's a bit old but might still be useful.

[@joaoarthurbandeira]

@@djangoroad could u do a video on how to integrate the JWT Auth from DRF with React? Thanks!

[@richardmcsharry]

A great tutorial, but doesn't your usermodel implemenation break Django Admin? If I viist /admin route it crashes (eg. 'AppUser' object has no attribute 'is_staff'). Surely it must be possible to have these api register, login etc endpoints but also keep /admin working so that internal staff can manage users, groups, etc?

[@andreasneacsu8466]

im having the same issue. Any luck figuring it out?

[@SaiHanhtetsan]

change the user model AbstractBaseUser to AbstractUser, because when you access with the django admin panel it need the fields like is_staff, and others. 😊

[@justice1915]

How can I move the user to the dashboard immediately after registration without having to login

[@elelanent]

Thank you

[@theolopes8574]

you are fucking perfect, foud EXACTLY what i was looking for

[@dapr98]

Amazing! I still can't get it to work :( I re adjusted my code using yours but I am getting a websocket error! Wish you could assist me with 5 minutes of your precious time!! Your videos are great!

[@louiseiden3898]

Thanks alot, Great Video! I just have the problem that I do not have a sessionid cookie don't know what I am doing wrong.

[@aliheidari4316]

test with ip(not local host)

[@nanu6440]

thank you ! i have one question how we connecting django to react front end ?

[@sophia_mary_r7914]

watch 9:41 to 9:47 Django's server url is given as baseURL in axios. Later POST requests are made through axios.

[@ahmadfikri4469]

where is the user_api custom model video link?

[@rajeshkarn2390]

Thanks ❤

[@lukeshawn3498]

thx a lot, but here is a problem, it log out automatically after I refreshed my page. why the app didn't keep the sessionid, what should I do

[@atulgupta-g]

Hey, I am also facing the same issue, did you resolved it yet by any chance?

[@BenChikh88]

please can you make a video on how we can deploy this app?

[@michaelhunt2770]

excellent example

[@michaelhunt2770]

needed to add CORS_ORIGIN_ALLOW_ALL = True as frontend complained with a CORS error ?

[@ShivamSharma-if1oh]

Thanks

[@neovickson]

Amazing How can I create a Google login authentication django and react js

[@ZurioSi]

Hi thanks for the video, but I have to give some tips. Please don't cut the videos randomly because some parts are missing and it makes the tutorial bad for the beginners, you have plenty of time so you don't have to rush.

[@kp9352]

Now I can login properly, but I can't logout it said "Request failed with status code 403" even if it works in server-side any suggestion?

[@tryundel]

I have the same problem probably. The error response message says "CSRF Failed: Origin checking failed - localhost:3000 does not match any trusted origins". And this is the case for all post requests after login. Did you have any luck figuring out what's wrong?

[@kp9352]

for that case try to use the ip address instead of localhost directly (localhost:3000 -> 127.0.01:3000) this method works for me.

[@snackandlearn]

Great tutorial. Only thing I saw as feedback is the serialized password is raw and exposed

[@imsntoo]

Where is the validation file?

[@ajay-pi5jj]

Nice video to brush up same knowledge

[@dairondanilo6067]

my password is not being hashed when creating a new user, what could be wrong?

[@persepofficial4215]

Ensure your create method for the registration serializer isn't under the meta class and is a direct child of registration serializer. It sounds like your serializer is using the create function from the inherited serializers.ModelSerializer class.

[@dani-xi4zd]

@@persepofficial4215 I am new to django and my mistake was that I wasn't rewriting the method of the parent class in the current class, I thought I could name those methods (on the current class) as I wanted LOL, and after some hours I finded out that my method wasn't the same as the one in the video, then I fixed it all worked just fine. Btw thanks for your reply.

[@Bobovino]

I mean Im using Tailwind but good video

[@prakharrastogi3725]

for me /api/user is giving me Forbidden: /api/user .....How to fix this ?

[@andrewfalcone3588]

Hi, have you solved the problem?

[@edwin.niwaha]

the same issue here

[@ImDoingItAll]

good video, but too fast and hard to follow...

[@michacz3230]

What's the point of showing only some steps required in the video? It's missing a lot of stuff and it's incomplete. Waste of time

[@Hellbending]

My brother, please, my only singular gripe is that I can hear the molecules of liquid moving around in your mouth with every small movement. Please lower your gain, or figure out where the suppression gate is on your mic software.

[@koalawanted5662]

is that women or men?

[@lecturer4912]

I don't understand why you make incomplete videos without specifying it's incomplete. You will make newbies frustrated trying to follow your tutorials. No models in this project? No database and migrations?

[@peanutbutter8242]

if ur a newbie learn django first and dont jump intp restapi like no offense bro

[@Smbrine]

This is a video about REST authentication, not about basic Django setup. Plus if the author would’ve decided to include those things you’re talking about, video would have been much longer!

[@robertpretorius7627]

dont mind this guy, the video is great! i want to know how react and django play together, this shows exactly that. Great stuff.

[@shopenggu4779]

Thank you