Django, Djoser & Simple JWT: Building a Secure API and Email Workflows

hey everyone so welcome and in this tutorial we are going to explore how to implement authentication in Django we'll also be using junglers framework to provide our API endpoints yes I use going to be using josa so just says user is another education library for a jungle you also be using the simple GWT package djangles framework simple JWT which will be used to provide tokens to our front end so that we can give them the clients front-end access to to our backend so these tokens are just like identifiers of who we are and who we are so yes so we are going to be using that and then we'll connect that with this react front end that we are seeing here so in this front end I've already built using react this one will actually authenticate to our backend so this is the live application we have a login page this one you have a login page where you you add your username and password and then this one is sent to the backend so if you try to cheat and go to the Home Route so this one when clicking on the logo will go to the Home Route but unless you authenticated you'll never go to the Home Route so this one won't happen so you also have a sign up endpoint we actually implement this so people can sign up from the front end and then the back end and all that will be configured so how would this work so when you register for account we'll send an email to your send an email to your account and that email will be saying like hey can we finish registering from this side so unless you click that link and then your account is activated that's when you are going to be active when you can actually log it but unless you do that that would happen so you can log it you can go to a forget password route this one is already built so we have the forget password route here so if you forget your password you add an email here and the email is sent to the backend and the backend sends a link to the your email the email that you provided when you're registering and then on that email you'll have another link and that link will help you reset your password so these routes are already built I've already built these all these routes so we have a route code reset password you can see these route so when you click your link from the email it should bring you here in this in this endpoint and then this endpoint needs the whatever you'll be provided in the email will have a uid and there token so when you come to this route you add your new password confirm your new password then click submit and then that would be sent to the back end and then everything will be synced so this is what we are going to be building you're going to be using josa for authentication C4 JWT framework now if you want to follow along with whatever you are doing I have this repo here so one phase 2.1 tutorial so you have this repo then you can go to this repo you can clone this repo make sure you clone the master Branch the master branch has the back end configuration starter files and then the front end so you go to this repo I will add the link in the description go to this repo and then clone this or fork or however you want and if you can you can start this report help others know that there is this step so in the email addresses I'll be using a temporary email address because I don't want to use my actual email address so this is a service that called temp mail that gives you a temporary email address so let me choose an email address this is the email address will be receiving so we register using this email and then the email will then whenever josa or the parking sends emails it will send to this service and then we can continue from there so let me show you actually I have an account here for the admin so you can see when you log in you go to this route this route is protected and you saw that we couldn't come to this route also this person is authenticated so if you try to cheat and go back to the authentication route you should never go to the authentication route so we are going to implement all these so we go to the logout we are going to be implementing all these using Jose and uh simple JWT so we also customize our API home page to display our information throughout this tutorial we'll encounter some common issues and bugs and we'll guide I'll guide you how to resolve them so by the end of this tutorial you'll have a strong understanding of how DWTS work and how to use them and how generous framework to power apis I hope you enjoyed this tutorial and I look forward to hearing your feedback so let's get started so now so this is the application you are going to be building so as you can see in this folder I have I have a 400 this is the front end that has everything that we are going to be building so this is the front end so these are front end so let me explain to you how this one will work so in this front end so if you have used react you know how to go about it but you don't necessarily need to know react to understand the concepts of JWT tokens so we'll also be using Postman so this is the postman we'll be using this one to send requests to a backend and test them before integrating with the front end so I'll show you that but now this one is a real world scenario so the first of you so if you know react you you'll understand whatever I'm going to explain but I'll only explain a little bit or what is happening and how the requests have been made for the back end so first off we have this concept of uh in react we have a concept of context where the context is the data that can be accessed anywhere in the application so when a user logs in we add the information in the context and then that information is available everywhere and then you can do whatever you want to use that information so don't worry about that so I have these this file I've named usefetch query.jsx you can see this one is using axios so axis is a library and we have to make request request to the server making any request so I have my base URL so you can see this base URL is pointing to actual Django server so here I have created two API instances we have there first one API instance and then the second one so why do I need to so in axios you can create API instances so that in each API instance maybe you want to inject a token to the API because the back end expects a token and that token has to be in the headers so I have some helper methods here so these helper methods the first one is reset token so this is going to be used to set tokens in the local storage for Dutch token we have the next one for removing the token so in case someone is logging out we have another one to check if our token is valid and these this one makes a request to the back end using this endpoint called all gwts Russia verify so this this one takes in the access token and checks whether the token is ready or not so I have this helper function to help me now here's the ideal power of access so I want in every request of a person who is authenticated to have that token so that they can be authenticated so what do you do you intercept all the requests being made to from that up and then you see I have some few checks here then you inject the authorization token to that header so I don't want to go deep into this but if in case you wanted to know how these this app is built you can write that in the comments so that you can go back and check that so we we are injecting the headers the authorization headers with the token that was given when you are logging in so we also have an Interceptor for the responses so in case the response is for one thing that this person is not authorized so in case of inner World scenario whatever you do is that you check if there is a refresh token then send a request to the backend to refresh refresh that token so but in my case if you are not authorized I'm going to redirect you to login and uh yeah so we have another helper function called who am I so this function sends a request to the back end with the Slash viso the slash me this one is the josia endpoint that gives you the information about the current logged in user using the token so we have another endpoint here for user activation so you post to this endpoint and then you can activate users we have another one here for getting all so this is for getting all this one is for so when you send a request to the all jwts create what will happen is that the all JWT slash create this one is for logging in user so this one requires a password and a username and then you'll get a token back we have others for creating new user this one is for creating a new user so this one is for the register Handler you can see I've added all the awarded the comments that you might need to go through these also we have another one for resetting the password you saw how to reset the password we have another one here for requesting an email to be sent I have already comments so we also have a redirect login we have an access token getter yes so so now next so I'll show you how this app works so our main entry point of the app is always the main in a react application so I'm using react query for making requests like it also it is also used as a crashing Library it is very good in managing the requests I'm also using the react router to Route the application so you can see here any request that comes through the slash that one goes Direct to the so the slash goes directly to the app and then you have the author out which goes directly to the authentication endpoint so okay and so yes so now we have the reactive query so this is how you create a query I'm also using chakra UI to style the application you can see how the application looks nice and just few lines of codes so if you enter now we go we'll start with the approach so in the application so this is the like any request that comes from the Home Route so the Home Route is the slash route so I have some few helper functions here but basically what is happening here so so this one is for just checking if this person is logged in so this person has rights to view these endpoints this is not endpoint this URL so you can see we are checking and then if some any of these checks don't pass you will be navigated back to the login route so I also have a function here this one is uh checking who am I so you remember that function I showed you the who am I function so where is that this one sends a request to the slash me endpoint and then that slash me endpoint slash me this one sends a request to the slash me endpoints and then our data is got back so now we get our data and then we do some few checks you can see you can check whether you are deactivated if you are deactivated no access to the server if you are active so I'm doing some few checks and then finally we'll set this user so this user will actually be set in the context so I don't want to go deep into react but I was just wanting to explain what what is happening so finally you will be sent to home so for home we have the handle log out so when someone logs out we set the user to null so this one is setting a user to another thing but yes also okay so we navigate you to the login if you log out and then you can see this one welcome home so if you remember the welcome home ESO it has a welcome home so when you are successfully authenticated you come to this endpoint so now let's go to the old Route because this is what we are interested actually in so now here in the other routes I have quite some URLs you have the first one is the activation route this one will be responsible for activating the login route so let me explain the login route first so we call the get all this get all the so is a function that sends a request so get all the service get all these according this function get all so you're sending a request to the JWT slash create URL and this one gives us the access token and the refresh token and you can customize it to return whatever thing you want so this is basically what you are doing here so you can collapse this one we send a request to that get the data back so using react query it is a it's a it's a bit nice working with these acronyms operations so you can see we are getting the access and a refresh setting these tokens to the local storage then setting that user so you can see it's a quite a nice thing to do basically that's it that's it for this so I'm also using something called react hook form so react hook form helps us to the react hook form helps us to working with the form so you can see any form you can attach this this register and then on your form there's a function called Hado submit from real quick form so yeah this one you can see use form use form is coming from the Outlook form so whatever you need to know if you are following along this one you don't need to know how a reactive form works but your main concern is on this unsubmit function so whenever this on submit function is called we get our credential and what's what's our credentials our credentials are the username and password so that's what we are getting here and then we call this mutation don't mutate the credentials this one is the actual react query function that sends a post request to the server so you can see it does that so whatever you need to know if you need to console log the credentials you can do here the credentials after request is sent you get this function called on success inside their own success you have the data returned by the server if there is an error you have the error from the server so that's how easy it is to work with these this stuff so now this happens throughout today so in the password reset we get the same structure whereby there is a request being sent so this one is password reset you can see we are sending a request to the research password function so this function reset password so let me show you that real quick um this one so you can see reset password you are setting you are sending a request to these with our data so which is the data so which is our data our data is so again here we have an unknown submit that receives the that receives the credential so you don't need to know the implementation details of how this works but anyway there is another submit function you get the credential credentials are actually what was in the form yes so the next one we have the register same structure the mutation that sends the request to the backend we have helper functions whatever you want to know is on this on submit you have the data so this is the data from the form and then we submit we call the mutation dot mutate the credentials we give it there on submit so we don't need to know any of these so this one is for the reset that is said we saw that on the request we on the reset we only need to provide there the email so that that workflow can work as it's expected so that's it for the front end so we are going to start off with the back end because this is what we this is what our main interest is so now we will create a backend real quick so let me create a folder called backend foreign has been made here back end now I want to go into the implementation but I'm going to use a tool called peep pip EnV so this is what I'll be using to manage my virtual environment I will not go deep into how vpnv Works maybe you can write down the comments if you wanted me to go deep into this how it is working but basically just install it using this and then all the other steps you follow instead of using pip so I don't want to make this tutorial too long so I will not go deep into how ppnp works so yes so you can go on so the first thing you need to it is to initialize this up so how do you initialize an app using ppnb so you write ppnv let me first see the version I'm running on so I'm using version print 23.9.8 so to start off uh virtue environment using ppnv you guess APK individual so you can see whatever it is doing it is creating a virtual environment but it is creating a virtual environment that is not even inside these uh so I was supposed to CD so I was supposed to CD into the back end I was not supposed to create outside so first step is to CD into back end so so the best thing about using ppnb is that so it has already created new so let me remove these these virtual environment real quick so let me remove that deactivate um CD into the back end foreign so let me clear all these little bit so our virtual environment was created at this location so if you really want to know more about vpnv so you can still use Virtual environment but I'm going to use this one because it manages everything that I do so it manages everything that I'm doing inside this virtual environment so not like people where you have to do freeze requirements dot txt but in this scenario you don't have to do all that so I'll not go deep into the working details of vpnb So currently I'm inside my backend folder so the first thing you do when you want to start a jungle project is vpnv install Django the first thing is to install Django we are going to install more packages so let's wait for it to finish so I'm going to install more packages that we are going to use so that we don't have to go back and install them so the first one is Jose I'm going to use josa we are also going to use another one called python decouple then you're going to use another one called younger s framework younger s framework we're also going to use another one for reading the this one we're going to use it by for postgres called psycho pg2 that one as I was going to use another one called Django because headers and finally we are going to use another one called the jungle rest framework simple GWT so these are all the libraries are going to or I link that the word installs my bad they're going to install all these and then you're going to start off our project so in case you are joining us right now so whatever you are doing now is a setting up the backend server for application so we have a link into the GitHub account that has the starter files for this project and also the final project so in that GitHub file that GitHub account we have two branches we have the master and then you have the progress Branch so yeah you can go here the progress branch has all the files you need for has all the files that you need so you can go to that and then if you are joining us right now then we can move forward so so you can see all the requirements that I need have been installed so now if if I was using people I would have to do phrase requirements dot txt but now using PPN we don't have to do any of these so I'm not going back deep into how to use vpnb also if you need to know about that you can reach out and then you can make a tutorial on that so sure so how do we start a Django application so you have to ask yourself about this data jungle application so to start a Django application you do Django admin start project and then give it a name so I'll go to say mine is tutorial and then so Django admins that project tutorial and then when you run this command as it is it will create a new folder and then inside that folder it will add our project but we don't want that so to specify that we want the project files to be created right here so I can simply run this one so that you can see whatever I'm talking about so you can see whatever it did it created a tutorial folder and then inside that folder I created our tutorial we don't want this so how do you prevent that so let me first remove that that one is gone so you run the previous command and then you specify the current folder so here you can specify any path you want maybe you want path slash word but since you want in the current folder we are in you provide a DOT so you can see our application has been created and then we also need an app so Django admin start up I'll call this up call so this one will be our core of authentication and authorization so which is the next step after installing all those and starting an app in Django so the first most of first most thing you have to do is going into the installed apps and adding your installed apps so we have rest framework so you have rest framework we have user so user is authentication we have because headers then finally we have the core app so the core app is just basically this app you're seeing here this is our core apps this is our Co-op so you you have to add it so we have few more configurations to do so before I go further we need a database configuration but before we do that let me add the configuration for our course headers so in our course headers you have to add the middleware for the course headers here so if in case you're ordering why these are coming from so Django because handers so you see you install the Django console course headers we installed that you come and add the Django course headers in the installed apps that's what you exactly have done you came and add the course headers middleware that's what we're actually doing also you need to configure the allowed origin so the allowed Origins specifies that who is supposed to make request to our server so in my case I'm going to add the origins to allow everyone because yeah that's it so I need so let me come here now this is a special variable which says that allow anybody to make requests but in a production server you don't need to do this you need to configure your allowed Origins like we have been shown here you see so you can also allow methods in the origins you can see all these all these okay so yeah so that's it so let's continue so the next thing we need to do is a database configuration So currently we are using the db.sqlite I'm not going to use sqlite in case you want to use sqlite you can still use SQL right but I like using Portuguese so I'm going to show you how to use postgres so I'm just going to comment up that and then bring on my the postgres configuration so so everything I'm doing here is provided in the the you can clone that repo and then you have anything so there is also another thing I forgot to do so the current interpreter path selected here is not the actual path we are using so we are using a using the python interpreter but you need to specify that our interpreter is there is there virtual environment so now I showed you how to install the python decouple package so so everything I'm doing is already here in the notes so PP install python from the decapo import coffee and then your secret Keys you can simply reference them using that config so anything you have in the dot EnV so that's also exactly is happening so in our database configuration so this is for postgres configuration so I'm saying I'm adding the engine the name the user and the password so I'm going to drop two files here in this folder the so I'm going to drop two files so the first one is the so I'm going to drop two files here now so one of these photos I'm not going to show you actually because it has my configurations so I'm just going to show you the env.sample so the DAV dot sample just specifies whatever you want to use so we have the secret key we have the site URL you have the DB name so these are the actual variables that have been sourced here so these are the actual variables that are being sourced here by postgres connections so if you not expose anything that is related to your application so I'm also going to I have a secret key defined in my so whatever you do here the config simply references the dot entry loads all those variables for you so that you can simply use them so now the next configuration you need to make is a email configuration so I'm also going to drop some files here for the email configurations so don't worry about so these are just email configurations that the email configurations I'm just using if you go to the DNB sample you can see we need an email backend I have already added that the media backend so now here in the email host you need to provide your emo email host your email password and then the host user sure so that will be searched by the email configs so there's also another settings that we need to add here so let me just drop these settings and then I'll explain whatever we need to do for these settings so I'll explain them so we also need to import the time Delta from that style import time Delta so this one will be used by simple GWT so you remember we used we we are using simple JWT so let me go here so now these are the what I've just added so the first configuration I've added is Forex framework so so interest framework you can specify the default permission classes so diff by default the default permission classes is for allowing anyone in this application to access it so we don't want that so we override that and we provide this permission provided by press framework now you also need to provide the authentication classes so we are going to be using simple JWT for authentication so our authentication class will reference the simple JWT so come here to the rest framework permissions so the default formation policy may be said globalizing the default permission classes for example so this is what I have just added so if you wonder where I got all those this is where they are from if not specified these settings default to allow and restricted access so this is what defaults do but I've just changed that to say that anyone must be authenticated to access our server yes so you can see we have allowed any either of indicated his admin user is authenticated or read only yes so that's it now let's go back to Joseph now so in josa let's go to the introduction so I want everyone to understand whatever is happening it's better even if we don't do much but you need to understand what is happening here so rest implementation of Django authentication system Joseph provides a set of jungle rest framework views to handle basic authentication such as registration login logout password reset account activation and so on so these are the endpoints that Jose provides us with okay so we did install user I showed you how to install yourself and then we get all these for free we get the slash users endpoint the slash users gives us the list of the users the slash me gives us the current user this one you have to provide the token users confirm resend activation set password so you saw we installed yosa we added user in the list of installed apps now the next step is to add URL a URL that will point to user URLs so I'm going to do that in the little bit but now they have also now you can see the josa web token authentication so this is what we are going actually to be using so now this you need to add this one into the rest framework configuration so we are saying default authentication classes this one you just copy paste and remember don't copy paste this one you add that that's what we have actually done design so though if you are wondering where these things coming from that's where they're coming from so you also need to configure the urls for the JWT because the JWT provides some few URLs to use so now we have the Jose configuration the user configuration variable specifies configurations for juicer so if I go back to our application so let me first stop using let me go back to that so that I can show you the simple GWT they want to go to the settings now this is it so we have another variable called the simple GW so I did import the time Delta because the c4jwt you can now configure the token the actual token that is being generated you can configure the way it is working you can see we have so many but I did I just used some few so I used two of them actually we have the first one called the old header types now this one is the prefix for our token we can add JWT you can say something like Bear all that this one will require to be added in the authorization right please so authorization authorization and then the key will be JWT then the space then the token okay so I hope you understood about that now let's go to the Jose configuration so the user configuration the now this one will go back to it later just didn't want to explain too much so the first one is send activation email true we are saying if a user logs in now if a user creates an account you have to activate that account so we will send an email to this endpoint now we'll send an email to you who have registered so that you can click on that link that you get and then you will be activated we have another URL called activation URL so the activation URL is the URL that will be sent to the email I'm going to add the comments here so that so what will it do we have rememberable check about this one so we have the site name now the site name is the name that will actually be used in the email so so let me change this one maybe I can say YouTube tutorial now this is the name that will be used in the email this is the actual domain that will be used and then this activation URL this one this whole year will be appended to this domain then sent to the bucket to the email and then when you click on that it will route to our fronted application which is our react and then that react will handle that and send the activation endpoint to our server we have another one called password reset confirm URL now this does the same thing text in this URL appends these tokens and uid adds them into the domain sends you that link so that you can reset your password okay no that's it so the next step to do is to go to the URLs of the app so if you go to the URLs so let me first remove all these so we have the first we have the admin URLs so we need to add more so let me add a path called activate so this is just for you can add this one so I'm just pointing to the code.urls so let me show you that in the browser so with the application progress Branch you can go to the progress branch then to go to the back end go to the URLs of the tutorial so you can simply go here and grab all these so that everything is working as we wanted it to be so now so let me import the include just to save one time so no let's just write this one so that you can understand what is going on so you're just saying from any part that's come from the activate go to our code.urls okay where is that code.orls you can simply come here and grab all those urls so you can grab these and go here to the Core add a file code urls.py and then dump that here so this is our call so we have to you have to URLs that so this is how it will work so we say activate slash exists and we don't even need to say the Slash but let's first use that let's use that for the meantime because that's what I have in my notes but this URL you can image call slash but I'm going to just leave it as activate because that's what I have in my notes because if you stop changing then you'll also have to change the front end and don't want to do that so in the URLs you can simply come here and grab the URLs for so let me grab everything here so that we don't waste time that we can directly go to so what is happening here so we have these path slash activate this one is going to our code.url so always include code.url so it will come to the call then include the URLs that are in the course so which URLs are in the call you have the exist and the home we are going to be creating these by hand don't worry so we have another endpoint so I'm going to remove these just demonstrate how I visit that so I know you are familiar with this you can be familiar with this because if we go to Jose um so go to the user this one so to configure our URLs you can see you you add URL your main URLs button you come and add all these two so these two you can just grab them and add them into the file so this these ones here so this one is to include the Jose URS and this one is to include the user Dot GWT you are URLs okay sure so the next step of is to go to our views module actually also this one are going to crop from the repository so that I can explain because we don't have don't want this tutorial to be too long so let me grab these two so in our views module grab everything there and move everything so you also need a serializers.pri file so let me explain what the these views are doing so we don't need these two so this is our end point so coming back to our URL we said if we have the exist so why did I make this one this one is what is used to check if a username is exist I want to use this one to check if a username is exists when someone is registering so when you are registering for an account you go to add your username we want to check whether that username exists so that we don't let you also and finish the feeding reform and then when you submit the server get an error that that username exists now when you are typing you'll send a request to the exist and then the exist will tell us whether that username is existing because we don't want you to finish feeding and then going back so you can see we get the username from the data if we don't get the name the username we return an error so we grab the username from the data so this one is a post request you get that data so from the request dot get data you can get there the data posted to the server so we use the dot get method to get to the username and then we try to check if username dot get username um if username.objects.get username I could simply use the dot exist but I don't want to so you can try this on to check if the username the username exists so if it exists we send a response back we're saying that the username exists if it doesn't exist you send a request since that it does not exist so if it does not exist we allow that user to use that username but I'm going to leave this one to you guys to work on because you don't have much time now in our settings file there is a place I told you guys that we needed to add the iso authenticated so everyone must be authenticated to access our server but the check username and no one needs to be authenticated so you can override whatever permissions are applied to a specific View using their ad permission classes so I'm using the function based views you can see here I switched to a class based views you can use whatever you want it's very easy to do that but the best thing about yeah you can use anyone any you want like if it was a model or just go directly to model view sets but yeah so in this route you can see I have overwritten that is authenticated to it indicates that anyone can access this endpoint now when we come to the slash home a do if you remember in our application fronted application after successfully logging in you could see that welcome so and so so this one actually requires you to be authenticated because it will inherit from the is authenticated from the settings file the global one so that's pretty straightforward no we have another one called custom token obtained player view so this one is a so this one is for now this one I won't talk about this one for now because we are not using it because I did comment it out so the next file you need is the serializers are also grabbed the civilizers from the Repository because I don't want to drive all these there is too much to type so to save on time I'm going to grab all these and explain to you whatever is happening here so so because we don't want to be this this concept called decoupling such that that's a specific app model is the specific file is dependent on this one so in case you change this one you have to change this one so due to that there's this helper function called the get user model so this one doesn't care which user model is but whatever the case is that there must be a user model so it will get you that user model so you don't have to be see from the dot dot import now so you just need to use this decorator to get the user so we have not used this one we have not yet used this one and also this one you have not just used it so I'll show I'll explain to you why we need these ones but in a little bit more later so now there is another thing we need to do so in a Django application the all the user model the user model that comes with the ninja Django does not has some few things that might need to change so like for instance if the user model that comes within Yahoo the email field is marked as blank equals to true so you can have a blank email you can also have one person having multiple emails so now that raises an issue that's why me as a developer or anyone else should try as much as possible to inherit from that model and provide your own all the user model so how do you do that so you go to the settings there is this settings called so there is this settings called all user models so let me show you so remember to type this one correctly so you have seen throughout the application I have not yet built a migration why did I not make communication because if I did a migration it would create database tables for the user model that is defined in Django I don't want that so you type this one as it is so you type auth underscore user model so copyright is helping me here so um let me under comment here so overwriting the old user model to our own user model to enable customization making the email field required such thing so this is what I'm doing so the all underscore user model used to override the user model that is defined in Jungle and then you have to create this model so I have to go to the models and create the old user model that I want so now going into the models so the first step you need to do here is from django.comtribe from django.country.org dot models import abstract user so the abstract user is the base user for Django so this is the user model we are talking about so if you click into a class in or a method that is a provided by the application you can go into the details and see so I did click here so this is the abstract user This One Imports from the abstract base user you can click into this one and see what the abstract base user has it has a password login active doesn't have much so so let me clear these clear these [Music] so let me go back to the models click into the abstract user so what are we doing so this is the concept of inheritance in python or oop framework so this is the class that is actually responsible for creating the user model so we are inheriting from this and then customizing it to fit our needs so you can see we have a username we have the first name we have the last name we have the email now look at what the email field they have marketed as it can be blank and it is not required and it's not unique okay so the email can be blank we don't want this so we inherit from this abstract user so inherit from this abstract user and create your own user class that inherits from the abstract base user and then so this GitHub copilot doing all this so so we inherit from that and then we add our email to be unique we add our is active class so for now we have used I'll have to use the executive tutorial so there's an issue here if you try to run the migration is if the is active is follows and then you create your own super user the super user will not be active and you have to go to the actually I can show you that guys so let me simply say first then you will update that so now this one is a is a tricky one because if you say there's active force and you create a super user then the super user will not be active and they will not be able to log into the system so you have to be very careful about this but I'm going to make that mistake so that you don't have to make the same same mistake so this one we can use to check if person is deactivated and then prevent them from doing anything in there or up so we are almost there doing everything you're almost there we have also configured everything that we needed to so the final file we need to make here is the dot Git You Know Git You Know I don't think I'll also use this one but let me just add the in case someone wants to deploy this will be simple by the way if you guys want me to deploy this application to Heroku to digital version you can just write down down so that you can go back and check that so I think we are pretty much done with all the configurations we need to make and then what is left is to migrate this application manage.poi make migration so then you migrate then we can run our server we have an issue here okay okay okay okay okay so let me go to the SQL this one is my postgres database so I did feel the password so if you fill the password in the SQL you have to so let me list the databases so there's a database I want to draw called jsr drop database then I create a new database so I had I had the same backend configuration so we have to migrate again now that's it so our migrations has been applied so we can go to the server and check whether the application is working so Local Host Port edit one two three so the server is not working or we have not okay we're going to rain this hour so python my grtp right on server so yeah that's it so we are inside our application let's try going to the oh there's another thing you need to do you need to create our super user I want to show you how I told you that it's very risky it's very risky it's very risky to it's very risky so python manage.poi create super user so I will say the admin add the mean at gmail.com The password should be add the mean I want to write that now the supervisor is I successfully created but we have an issue let me show you how the issue is so the issue is that we have our own user model and then in our user model we have said that every user that is created they will not be active even if it's a super user they will not reactive anyway it's who or who or who they will not be active so which issue will we Face let's try logging in in the admin interface so this is a Django admin so password admin username the password is also admin we can't log into our system because we specified that the admin now we specify that our model or model everyone should not be active so the admin is not active what do we do we are locked out of our own system how do we do this is it so this is where I was telling you guys that we make mistakes fix those mistakes so I hope you understanding what is happening we are using our own all user model provided by Django we are using um we are providing the josa add points so there's some of these that I've commented out so I'll actually show you that later so time is flying like something else so but let's finish up so we have the auth these are the user urls so if we go here um localhost 8000. watch eight one two three so we have your teeth we go to the URL as you can see all the URLs that user provides us so slash Alt no I know it so all these are the URLs that come with Joseph so this is from here to here these are from USA these are from JWT so the GWT slash create this one is for creating users and by creating we are logging them in creating logging them in to the slash me all these are coming from user so the issue we are facing is that we are locked out of our system because we did we did so let me close this shells first so we did say that is active to be so this is what we did so but we locked ourselves out so what is the issue so the issue is to go to the database that's why I did not want to use sqlite because SQL H is a bit tricky to start customizing it unless you have something like data grip to use so I'm logged in is in my shell so if you don't know SQL now this one would be tricky for you because you have to go to the database and update the admin correctly so let me connect to that it's a base called user so then I can see so you can see everything that was created by Jose you can see everything that was created by user you have the core dot you call underscore user so these are user model that we defined ourselves yes we have that so select so if you don't know SQL let me use actually the select everything from current underscore user so this is our user model so this one is not looking nice so I will select some view select so I want to select the first name let me check the ID username first name and is stuff email and then is active then is underscore super user don't worry about anything so our arduin is not active Okay you can see this false so we did bite ourselves so you can see admin first name we don't have is stuff yes it's super easy yes now what do we do it to do now we need to update this record manually so the update update is active so then we set now we need to specify so let me so update call underscore user then we set is active so this one is SQL you don't know SQL don't worry just follow along and don't make the mistake I made so it is active is equals to true ID equals one so if we run the previous command so we have just cheated and created my own user I've just activated the admission is SQL query if you don't know SQL don't worry about SQL you'll not make the same mistake that I'm making now so whatever you do is that uh when starting the application make sure the exactly is true and then when you create your own super user then you can return it to force okay so that the the admin can log into the system now the admin can still say at least as a clip or not so if you come here and try to log in we can successfully login so yeah you have successfully logged in and uh we need to see our user so what do you do if you need to see your users anyone so if you need to see your user then you go to admin I'll just copy from my notes Here the admin so what am I doing I'm using a class and then inheriting from the model admin and then specifying the fields that I want to see in the admin interface so don't worry about that so if you refresh here you can see now the users now you can see the how it is nicely formatted even this one is a cool you can still use this one too manage everything that you want to the admin admin Gmail everything you can still deactivate yourself and then you be faced by the same issue again but don't try that at all so that is it for all of that now we can start testing our application you can see our application is running you can go to postman so if you don't know Postman so here I'm going to show you the URLs that you mostly need to use so the JWT create is used for logging in users users who are activated there so we can send a request here and the request should be post and then the form data you send the username so our case we have the admin and then the password so the password is admin also so what will you get back we get our access and refresh token so on but now we we are also faced by an issue here whereby we don't necessarily need two details of the we don't we don't also need when someone is logging you we don't actually need the you don't need these two details because by using these two details that means you have to send another request after someone logs in to get the user details is this an admin which role is this person at what do you do because I don't want to keep sending requests back to the server so the actual thing that you need to do here is that so what do you need to do this one is coming from a serializer that simple GWT provides so what do you need to do if you need to customize this you need to inherit from that series and add your own data that you want here there so that when someone is growing in we get so much details that we need so I'm going back to let me go back to my app here now let me go back to the browser so that anyone can understand so you see this route at number 27 this is the so I hope anyone is seeing not so much so yeah so I hope everyone is seeing so this route 27 so how does these routes match they match one by one so we need to override this one but we don't also want to repeat this one and repeat this one that we Implement them ourselves no we want to override this one and then provide our own and inject more data into it so how do you go about that to go about that is simple so now you give it the exact part that was given by the this is the part we have actually seen all the DWTS create so let me go back so that no one says that I'm lying so all the JWT create we are adding a new route on top of these so that our new route matches and then this one doesn't match so yes sure so we add the same route path so that ours will match but the gwts won't match and then give us our custom pair as View okay where is this custom pair this custom pair is coming from views.com so if I go to the code.views this one is the custom there now this custom player we provided with our own serializer so we have to go back to the serializer what are we doing we are overriding we are importing the securizer that JWT provides and then adding more data to it so after validation of the data from the serializer so this is the username and password so I shown you how to go into inside the these applications you just click and then go and see whatever is implemented so you can see what they do they take that token so they take the token they grabbing the refresh token and the access token and inject that and then give up give us that back exactly what we get here but we want to add more details so how do we do that so we inherit from this and add our own details so you can do sort of things here what is some comment let's try some so you won't try this one I wanted to add these ones that you can try but now we are past one hour and I know guys don't like watching long tutorials so what are we doing here so we call the data and then the update okay so let me open a new shell here then say python so close to name at least five one here John myedict dot update H is equals to the same that is errored oh no no no no my dick underscore digital update so we're not using magical things here so you want to update the age and then say the age is 30. so if you look at my date our age has been updated so that's what I'm using here so this data that is being returned to the back to the server we take it then inject some new inject the ID of the user we get to the user from the cell dot user we inject the ID we check the first name we check the last name object the email is active and then now when you go back and refresh our view what should we see hooray we get more details from the server isn't it that great so we get more details from there server now you can say if someone is you can check whether this person is logging in is active or not and then if they are not active we give them a toast we can check if they are deactivated they are deactivated we tell them that your account is already activated and you cannot do anything else so the next step is to this one is actually login so when someone logs in we grab the access token so I can simply remove comment out this one then go to the headers and an authorization key you remember when I was telling you about the prefix so you add the prefix space and then the the actual prefix you want to add so why is this GWT coming from so this GWT is coming from our settings.poi file where we are specifying that the authorization has to come with the GWT prefix so so let me remove the authorization so that we can try going to the Home Route so the Home Route had a route like this one I remember telling you activate slash home so who is the attribute from slash home so in the urls.py we are saying anything that comes with the activator should go to home but now you can change this name but I didn't want to change this name because this is what exactly I had in my notes and then actually we couldn't even be having the Home Route in the in the co-op we could be having another app that is responsible for that but because this tutorial is about yosa you don't need to understand any of those so activate slash home this one goes to the home view we go to the views we have used that so you go to their views and then this Home Route we get that we just get a response welcome to the tutorial so let's go back to this one so that means that API endpoint is so you can see I've switched off the organization header the body is not this one is a get request so if I try to go to this one you can see the detail is authentication Creations were not provided so you are not authenticated to view this so what do you need to be authorized you need to supply your authorization header which have a JWT prefix and then the token so if you send this one to the server welcome to the tutorial we are in the status is okay switch this one off what happens polarization credit unions are not provided we switch on we are logged in so we are successfully logged in so we have another endpoint to list the users so now here we are faced with another we have another issue we might need more details of the user what do we actually now want what do we do let me show you another one of generally used to get the current users detail now see we have faced the same issue that we faced we are faced with the same issue that we are faced by the activation endpoint whereby we have few details but we need actually more details so what do we do it's pretty much simple we override whatever Joseph provides us and then so Joseph actually provides us with settings we don't have to operate the enemy so you can see here the serializer has to come here and write the series and provide your own civilizers so it had these already made so when I use a when is being created this is what we will be using so let me first remove this one so the current user the current user is the slash me endpoint which gives us the current login the current logged in user you see what we are getting here but I'm coming and overriding that so after overriding that I give it my code.serializers.user serializer and then I have another one for user so for the user is for listing the users so let me show you where the city lasers are so user serializer so I can inherit from the you see from joseph.c Razer user create and then user we have the user serializer so we inherit from the user securizer which I have used an alias name of Base user serializer and then I come and add more Fields I want the ID first name last name email username is active is deactivated then I can come here and do some simple validation so yes you can see doing some actual validation so we have provided our own user serializer and now when we come to this Rashmi endpoint we have more details now we can see whether this person is deactivated we can see whether they are active you can see whether they are their name you can add more Fields as you want to and then even if we go to the slash users and print you see now we still have a list of users then we can see the email the status is active yeah we get more details so I hope you got that point so we have another one to another series that I'm using which is called localhost a203 all slash users now we have another one here so in case you are creating a new user you might want more fields from here what do you do you just go and override the the implementation of the yes when a user is being created we want more Fields so we come in provide our own serializer which is from users so we come and provide our own user creates your laser we add some first name last name and yes so when you come and refresh you get all those details exactly as you wanted so this one is for user creation now let's now go dive deep into user creation actually creating a user so you have my email here just copy that email go back to postman so they I'm just going to create a new so this endpoint for creating users they all slash users so what is that all users coming from so they're all slash users is coming from let me show you real quick to the all the slash users is coming from josa so you see from all we first include the user.urls so the URLs from geosa user is providing the URLs for user creation but in our case we are providing our own serializer so go back to Jose settings so we go to now we go to the base endpoints then you can go to there users so you see whatever path you provide whatever path you provide we give it there and then the slash users and then in the request username provide the username provide the password and then the re-enter password and the first name and the last name in case we want to so this is the first request to the slash user's endpoint that's exactly what I'm doing here so I go to the slash user's endpoint go to the body then I want to create a new user so username so username will be let me go to the email today the email then I'll go the username I'll just use the first letters of the email so see bakayas and then the password so I can use a random password which password should I use so I don't know if they have some passwords to use oh let me go here create random password generator generator password here real quick I don't want these generate no I don't want uppercase I don't want a very wrong password and we reach here to the G control come here to the postman add that in then Supply the GS cups and then something like the that one so you can use this one the zone is for creating a user Ctrl C send so our user has been created and then we get this data if we go to the admin refresh this one you get there user has been created let's try logging it using this user so logging in we said you are going to there all WT slash create then we post the username and the password Ben C your account not activated so you actually need to activate your account to injection you need to activate your account to be able to use to login how do you activate the account so let's go back hooray then please grade we got an email from our own app so let's click into this one yay how good is this how good is this yes how good is good and how great is this so we get an email saying go to this endpoint and activate this user okay now this endpoint I'm providing my own front-end endpoint but we can still activate this user from the postman we need to send a slash so we need to send a post request so let me see the post request that we need to send so let me go to the front end and see the user's rush so which endpoint was that all the slash activate so we go to the slot of pages on slash activate activation then see which endpoint this one is hitting so activate user go to the users query activate so we are sending a request to the so yeah sending a request there to these copy these go back to postman and then like that and then Postman we want to activate this guy so our localhost so users then foreign that all the user slash activation then in the body we need to leave the form data so let's see the user slash activation and pointing user I want to show you how so you see the user slash activation uid and then token we provide the uid in the token so very fast so we have the uid in the token from the email so we provide the uid uid and the token so let me come and grab the uid here so let me copy this link don't know how to paste this link so I'll copy this one in a notepad and then grab the uid so my uid is equals to this one then my token is equals to this one so we are supposed to send this request and then we should be activated so we send hmm or we should send a post request so my bad so if you don't get any response but we get a 200 knock two or four node content that means we don't have any content to return but that means that person is activated so if we go back and try to log in with this user this user should be activated so we send boom this is another user we have so it's very much easy to do that so if you go back here to admin and refresh so we have let's see buyer buyer is active so we have just activated that person using Postman so the final thing I'm going to touch on is the reset password so the reset password you have to send so so we want to user activate so this one is for Activation I want to reset the password okay so we are going to send a request to the users reset password and then provide our email we want to say to reset the password for this user this user for so this is our user you want to reset the password for them and then this endpoint just requires the email field so just turn this off and use the email so I don't know whether I can remember the email so the email was ucfire or something this is on man if you send a request to this should you should reset that password for that user so we don't get a new content then you should check the email and see whether you have a new email that is popping up so let's switch to Boom we have a new email that is coming from jungle we still get the same same issue but now we have another endpoint Okay so we need reset password confirmation so this is the URL we need for password a person who is resetting the password so this one Ctrl C you grab that when the reset password confirmation what does it want it wants the uid token don't want the email so you can remove the email we need a new password so everything I'm getting from here I'm not even thinking about it so we need the uid token new underscore password and then renew okay so oh we don't need the renew so you can see here if your password type is required but you don't need that so new password so the previous password that I used was this is what I used this one this one JS to GGG something but now I'm going to just think of a username so let me say something right [Music] like that so so I'm resetting this user's password now before when I do this so you see this is the current user we are logging him in the C by a buyer with the previous password and this one is successful so let's reset our password and see what will happen so we need the uid the uid should come from this one so let me copy this one again so so the uid is mg still but the token is a so so it is changed so Ctrl C then we send this requests so I missed some typos there so the username has the password has been reset so let's go and check if you try to log in with our previous password that will work it's not working what if we provide the new password that we have just used so that's it we are in so this is how the authentication workflow Works in josa so finally I'm going to connect this one with the front end and then all the other details if you have in the question you should be willing to ask these questions because that's it for what I was supposed to show you guys so let me CD into my front end so this is my 400 application so now the front end is doing a request to the server not the request to server so the fronted is a so the front end is actually connected getting the token storing that into the local storage doing the authentication workflow if you are authenticated you cannot access the auth if you are previously authenticated all that is hooked up and I remember I was starting the tutorial shown you you can see the base URL now you can see everything is connected so only exit out of this and see deactivate these so CD front end so then you can start the server the same yeah run Dev so this one is react so localhost watch so I want to change the image so that we can do the workflow one more one more time so let me wait so I get a new user so I can use that one in my front end so you can use the this one you can see now you can't go to the Home Route this one is actually connected to our application and then we want to sign up starting the sign up give a username let me start with the email so that I can simply use a not that one I'm not even copied the email so this person is called select key select key so you can use simply use that so the password what did I use for the password um so I like using the random password so that I don't I want like eight stop stop generate these I don't want to dig this one should work and come here and then add that so so I think it doesn't want that so let me just say this password must contain at least one uppercase letter one lowercase letter and one number oh so we'll have to add a number here that's not okay but so let's sign this person up so registration successful check your email for verification let's go back to our app let's go back to our backend so you can see a request here is a post request by slash all slash users I hope everyone can see so let's Rush all slash is as you can see the previous team of trying to go to the login so this is actually our own server that is running so in case someone thinks that is someone might think yeah no this one is this is not uh your app this one is the previously made up so I want to show you that this one is actually working so we have a username seleki then the password I did I save that one that would be very wrong okay I did so you see you are an authorized you need to activate your own email how good is that that's very very cool so we go to our temporary email and exactly you get your own activation email now you'll actually click this one and see so let me copy this one so that because I don't want to move from this tab and then this is the end point we have going through so if we click this one email Activation so I don't know why it doesn't say email activation field but the email is activated you can log in so we try logging in select so the password was this one is logged in and then if select it tries to go to the all the route you can't welcome home select you can't you have to log out log out now select forget their password so the email was select key this one you want to reset our password so we send a request to the check your email for password reset so if you go back mm-hmm you can see we have an OS users reset password so the next step is to stop at the temporary mail so this is a temporary mail and uh let's just wait so we have a new you're receiving this email because you registered the password for your user account at youtube.com get this ring so actually this one will just click this one we are taken into our front end in a place where we can change the password so I want the password to be [Music] I love Django I love you love apis so this is the password I'm going to use confirm also if you cannot we have automatic validation so this one is called react book forming react but it is not worry about that so reset our password our password was reset if we try logging in select it with our previous password the previous password was something like this one Innovative account for the given credentials but if we give the you if you give them this one should be logged in so I think that's the artwork flow you can't go back you can log in as an admin yeah so that's it guys for this tutorial I hope you did learn something for Jose this application is even if you refresh in the admin you can see select is activated and we can deactivate saraki actually let's see what would happen if we deactivate select is deactivated we go here so admin is logged in we want to login and select key select key and then the password for select was a enough apis account deactivated so that's why I told you you override the serializers you do all that and then everything is into place so the account is deactivated you can add any field you want you can do whatever thing you want so all that code for this tutorial is here in this repo go to this wrapper Bonefish 21 slash user Dash tutorial I'll add this one into the description go there you can also start this repo you can Fork this rep or whatever you want you can follow this account to get more updates then see you next so I'll see you next in the next tutorial so if this tutorial did help you you can go on and subscribe to this Channel and uh see you next thank you guys

Channel: WebTech Guru

Views: 3,153

Keywords:

Id: eqck8cc7AIY

Length: 98min 39sec (5919 seconds)

Published: Sat Sep 30 2023