GraphQL User Registration and Authentication with JWT Backend

hello and welcome back to graphql with django so this is part four now in the previous tutorial we went through a crud example and i gave you kind of a baseline idea of how you can work with graphql and crud create return update and delete in this tutorial we're going to work towards building a user management system with graphql so this is a big jump really from the past tutorials but this is get us straight into the middle of building with graphql and django so we're going to be able to or we're going to work towards a user management system we're only going to be working in this tutorial in the back end so we will build some queries with graph and then kind of extract information and perform some activities as if we were working on the front end but we won't actually build the front end in this tutorial so focusing on the back end we'll allow the user to be able to log in and log out of course we'll utilize jwt again with graph and then we'll allow the user to actually sign up and then we'll send them an email confirmation they need to click on that link and then activate their account so that kind of that's kind of like the process or flow that would build the core kind of features of this management system and then we go off and potentially have a look at some other areas so changing passwords if the user forgets their password an email will be sent to them and then they'll be able to actually then utilize that link to change their password and other kind types of features we might want to include delete accounts um update account details for example so i think this covers all the kind of basic elements you might want to build if you're using or building a user management system for your application right so we're visual studio code open let's get started so the first stage is obviously we're just going to build a simple application okay so i've had a few comments um about different things so we are just building an application for no particular reason other than to practice develop our understanding of how to use graphql and obviously we're using this vehicle um which is going to be our authentication system or our user system we're building to obviously learn a little bit more about graph so this doesn't represent a a production level application this just is a application to learn a little bit more about graphql okay so by means just skip ahead build a new application let's just go through this for anyone who's new so i'm going to create a new file here i'm going to just call this commands.txt this will be available in the repo if you need it so first of all i'm working on windows so i'm going to need to build a small virtual environment or i'm going to work in a in a virtual environment so i'm going to run these commands here and that's going to build a new folder you see in my working directory here and that's then going to allow me then to go into this virtual environment and i'm going to start this so this is a lightweight virtual environment that allows me kind of to build this program in this virtual environment and that just kind of separates this application from the the existing python that's installed on my machine and basically i'm just working in a small lightweight virtual environment so once you've installed that we just need to kind of activate this by going into the uh the folder for this so here i'm just going to navigate to that activate activate it you can see now it says vamp here or vmv and now i know that i'm inside my virtual machine so from here i can use pip the package manager to install django um that's a funny noise on my microphone apologize for that i'm not entirely sure where that is happening but that will go away in a second so once this is installed um we've now installed django so let's uh let's do that uh so now we've installed django we can use the django admin to create a new project so let's um start a new project i always call my project core and i'm using the dot as the extra parameter here so it loads or it saves so it creates the the application with inside of this folder and not within a new folder so some people work in different ways i just prefer to work with the on this level here so my core application folder is on the same level as the vent folder here okay so now we've got our core application in place um the first thing that we're probably going to need to do is we're working with users so we're going to build a new app here so now we've got the manage pi uh available we're going to use that to start a new app and then i'm going to call this app users so i'm going to create a new application where it's dedicated to users so i'm going to build a new custom model for my users as you would probably 99 of the time do for your application so let's just build a new application here for users i'm just gonna save that for you okay so now we've got a new application here obviously we need to go into core so in the settings and then we just need to change this so let's just add users here so that just registers the application that we've just built so that when we build our models etc they will get recognized and we can then build our our database okay so let's move to part two so if you've skipped to part two all we've done is we've created a new application and a new app for our users so now we're just going to focus on building a custom user model again if you're new to django what do you mean by a user model so obviously we want to capture information about the user their name their email address and so on so we can log them in now django by default has this model available this table that we can build for a user but generally what we want to do is we want to extend it or we want to completely override it and just make our own model so we've got two options here we've got abstract user which is going to allow us to kind of extend from the existing model that django provides for us we've got the abstract base user so this option allows us to kind of build from scratch so again have a look at the tutorial i made on customizing or building your own user model and that'll give you a little bit more in-depth knowledge on how to do that but we're just going to build a simple kind of extension so we're going to be utilizing extract abstract user here it's just to extend upon the user fields so this starts off uh by first of all we're just going to import the abstract user to allow us to kind of extend from the existing model so we we haven't um actually built any models yet so we haven't actually committed that to our database yet so let's go ahead and just do this so we've got models and then we're going to import the abstract user let me just zoom in a little bit so you can see what we're doing so here we are the abstract user so we've got the two options here remember i mentioned so we're going to use abstract user we're going to extend from the existing model so let's just go ahead and build a new class uh we're going to call this extend user and then we're going to bring in the abstract user and now we can start to define our our new fields that we want to include for the user so we're just going to go ahead and utilize or just build this uh emails uh field so we've got an email field here blank equals folks so that means obviously the user must have an email so we're going to force the user to include or use an email so by default django doesn't actually enforce this so we're just going to enforce this let's just give this a max length of 255 and then let's just give this a robust name of email okay so that's the email in place um so what we can now do in django is we can define what we want the user to utilize as the kind of the username field so we can here define username field equals and then we can define the username field so let's just go for username now username is obviously already provided in the default model the user model so we can utilize that and then we can also define here you can see the email field so we can also define the email field maybe you don't want to call it email for example but here we're going to define this as the email field so obviously we are we are enforcing the user to actually type in an email now obviously we can change this about some people prefer utilizing the user's email as the uh kind of the field that we want to use to to log in and some people will prefer the username field to be um the username okay so that's obviously an option that you can utilize so now we've got this custom table here for a user we just need to register that with fact we're going to utilize it so we want django to utilize this so what we need to do is just go into the settings here and maybe just at the bottom we just need to find or define the the auth user model and that's going to equal and that's going to be in this case users and then dot and then the class that we've just created so this is just telling django this is going to be the user model and obviously we're extending the default django user model so that just uh connects that up okay so that's pretty much it for extending the model so obviously here you can add new fields if you want to additional fields you might want to collect information about the user so let's just go ahead now and migrate this so let's just commit this and i'll just show you what's happening here so let's go for the let's go make migrations and you can see that we're going to build this new model called extend user that we've just built so we can now go ahead and just uh kind of migrate this so migrate is going to allow us to actually build the table and you can see that we built this database and it's appeared right here so we're here we're just going to be utilizing sqlite of course you can change this into postgres or mysql whatever you want to use okay so with that model built we can now move over to installing graphql so obviously we want to be utilizing graphql so we're going to need to set that up and we're going to be utilizing jwt to kind of authenticate users json web tokens so let's go ahead and just uh quickly install those ready it for the application so the first software that we're going to install here the first package is graphene django this is going to allow us to utilize graph in our django application so this is really simple we're just going to follow this so pip install graphene django here uh let's go back into our application there we go so that'll take a couple of seconds i'll just put that in the commands so that's the first thing that we want to install the other thing that we want to get ready is the django graphql jwt package so let's just see this one so this is just going to allow us to work with jwt with graph so let's just copy that and let's just go back into our application and we'll install that too okay so at this point what you can do is we can just make a requirements file so pip freeze and then let's make a requirements text file oh it's about freezer there you go okay so that's just going to give me a list of all the all the apps that have been installed or the packages that have been installed in this application of course when you replicate this you'll just need to utilize this to install all these packages so that you can get this application working if you just want to work from the repository okay so let's just go ahead and go into our course settings now we've installed those packages we're just going to need to just add them to the installed apps so we installed uh two packages um so we installed the graphene django so let's just add this in here so that's a graphene django and that's going to come with a few different models so this is why we're going to include it here within our installed app so it recognizes those models when we do the migration and then secondly we want to also utilize and have refresh tokens with our jwt application so refresh tokens allow us the users to activate um or to gather or collect a new token um if they haven't been logged in for some time potentially so let's go ahead and just add that in so this is going to allow us to create refresh tokens so if you've seen the previous tutorials what we know from the previous tutorials is that when we're working with graph we're going to need to build a schema and we need to tell django where the schema is so what we can do here at the bottom is just to find this now in the previous tutorials we did this in the url and i said that there was two ways of doing this so this is the the other way of doing it so we can just define it here in the settings so what we're going to do is uh define the the schema and basically where this is located now our schema is going to we're going to put this in the let's put it into the users here so let's say users dot then we're gonna say look for a file called schema and inside of that you'll find a variable with the schema inside of it uh called schema okay so obviously this doesn't exist yet we'll build this file in a second but that's just going to link us to our schema now what we also want to do is because we're utilizing jwt here is we're just going to need to bring in this kind of middleware so let's just bring this in here okay so that just kind of brings in jwt to allow us kind of to utilize that now because we're utilizing a different authentication method we're also going to need to bring in um and tell django about this new authentication back end so let's go ahead and do that and i won't type this out i just paste this in there we go so we've got two options here um we've got the we're going to include the jwt backend so that's going to allow us to kind of utilize our tokens and we've got the django backend okay i think that pretty much covers that so let's go ahead and just migrate that now you can see that i've got a problem here because i didn't use a comma there so let's just save that and migrate that again there we go so we've done some migrations now let's just see what's happening here let's just create a super user and let's just go into the admin and see if anything has changed so i'm just going to make a new user called admin and notice that it's enforcing me now to create a an email and i'll just build a password it's going to be admin if you want to kind of log in so i've created this uh no so i've created a new user here i've just run the server so let's just go in and uh go into the admin here so you can see that we've got refresh tokens available okay so that's going to show me all the tokens that are currently being utilized by any user that's logged in once we've got this started but you can see there isn't too much else to note at this point if we go back into our application here if you look at the extensions i've got this sql lite extension here that allows me to kind of right click and open the database and then i can start to have a look inside of my database and this can be pretty handy just to kind of see what's going on and you can see here that we've got a few different tables here so we've got the user extend user now notice here in the users extend user remember that was the model that i created all these fields are available but obviously i didn't include these in so obviously what's happened here is i've extended the django model and you can see that it's got username and first name it's got my email here so that's all the information i'm going to be storing about the user if i were to add any more fields to my user table obviously it's going to appear here if we have a look at the other kind of tables that have been made we've got the users extend users groups and there's nothing too much to say at that point at this point sorry in permissions [Music] and you can see the refresh tokens that sort of just been generated by jwt okay so there isn't really too much there the rest is just normal django tables so that brings us to part four so now we've got this uh bass line in place we've got the user model um we've set up um our back end authentication with jwt initially and now we not need to kind of move on to really what is the main focus of this tutorial one of the best things about django of course is the library that we can access here to add new functionality to django very easily now to get this all working this really is the core of this tutorial and what we're going to be utilizing to build all this functionality that i set out at the start of this tutorial so django graphql auth which is nicely updated last updated november the 16th this is going to provide us all the features we're going to build upon to actually build this system in our application so let's just go ahead and get this installed um let's just stop the server and let's just get that installed okay so that installs um what we need and it also installs any other dependencies that it requires so you can see here for example uh is installed the django filter for example off and it tried to also install django graphql see we've already already done that so that pretty much is that step now we've got that installed so we need to go into the installed apps uh just to tell django that we've installed that so let's go ahead and do that so what we need here is uh it was graphql alt okay so that with that in place um what we can now do is we can go back into our settings now what we want to do is allow we want to get rid of this item here this back end and we want to utilize and what we've just installed so so let's go ahead and just add a new authentication back end which is going to be the uh graphql auth backend um so we we want to utilize we want to utilize the the new package the backend that provides so there we go so we just swapped that over now if you just want to use a jwt without utilizing this off back end you can go and do that so have a look at this uh package here and the settings for you to be able to do that so we're gonna basically utilize this new package which is essentially just a wrapper around all the other applications we've installed and it's going to help manage those really kind of seamlessly so that we're not writing um extraordinary amount of code in order to achieve what we want to achieve so this now is our back end authentication our main authentication back end which is kind of a wrap around jwt and everything else we have in django here okay sorry for making that maybe a bit too long but let's go ahead now and just migrate again because this is going to come with a few different tables etc so now we've done that let's just refresh let's see what we've built here um so you can see uh what we got here i don't think there's any any changes um we've got the graphql of user status uh that i think maybe a new table that that has been built let's just go into our uh let's run the server just to see if there's any visual changes in our admin site okay it's not actually working no module named graph back end okay so it looks like we've got a little problem here okay i think i missed the s from this item here so let's just go back in and see if that works now there we go so there's nothing visual that's uh changed here at the moment but what we can do if we want to for example see all the the tables or register all the tables from a particular application and where it's not particularly obvious we can go ahead and do that here we're using an abstract user uh table you notice that the table doesn't actually exist in our admin area so let's just go ahead and just register our new table which we called in our model we call this extend user so let's go ahead into the admin of users here uh let's just kind of uh let's import this in first so we call this extend user so that just makes it available and then we go ahead and obviously do admin site register and then let's just bring this in so that just registers the model with the um admin here so that when we go and refresh we can now see we've got the users table so that's the first thing we want to maybe um play around with and this is the email field that we've created there so that's the first model now working with the new package that we've just installed that's going to come with some tables potentially now that isn't always massively clear if you're familiar with working with the with the admin area here it's not always massively clear how you can bring in a model if the model doesn't actually exist here because this is typically what we do we bring in the model into admin and then we obviously register it so what we can also do is we can register models based upon the installed application so let's go ahead and do that so uh let's go ahead and first of all we set out this new variable here so we apps dot get app config and graph ql auth so inside of our settings here we've created or we've um registered our application graphql auth so what we're going to do essentially here is we're going to grab that and then we're going to find to see if there's any models and then we're going to register the models onto admin so this is just going to be a simple kind of loop here so for model name model in app models item so if there's any models attached to this application that we've installed it's basically going to loop through them all and just register them okay so the last step here before we get this working there was a problem uh so we're also going to just need to import apps from django apps just to connect this up so with that in place um it still says app is oh apps um [Music] that should be that should be done yep okay so that now like i said is going to look for this application look for any models are attached to it and then just going to make them available in the admin area so if i refresh the home here you can see we now have our refresh tokens and user status this does come in handy later we can actually then go ahead and see who's logged in and their refresh tokens and so on but that just gives you an idea of how to access some of the models that might be not as clear as or might be not so obvious when they're not actually detailed inside of your model's file okay so we're kind of just about there with this um application we can start potentially utilizing this uh there's one thing that we need to do so or maybe there's two things that we need to do let's just do the one thing that we need to do first so in our side of our core we're going to need some urls for our graphql right so we can put this in our users or we can put it in the core it doesn't really matter where we put it um at this point at least now to get this working we're just going to be utilizing the csrf exempt um that's going to make our life a little bit easier at the moment and then we're going to need to import uh graph uh the view so we're going to use the graphical package to allow us to kind of use selyze or to create queries um in our browser and return data so if you've seen the previous tutorials you've seen that interface already and then we're going to need a new path for a graphql so typically we set up graphql as the the path and then we're going to use our csrf exempt so we can perform operations without worrying about our crf tokens and then you can see that we're going to utilize the views from the graphql package and that's pretty much it really at this point so that basically just is going to set up a path to allow us to access our graph um qr view we can utilize that kind of graphical interface to interface our system so yeah the final thing that we need to do uh before i forget is obviously build a schema so inside of here we're going to build a new file remember we've we put it inside the users we defined this in the settings so we're going to need to build a schema so let's call this schema.pi and yeah let's just go into settings i'm at the bottom here we defined our schemas inside of the users so let's just save that and close let's just close up here okay so in the users we have a schema right so the first thing we need to do in our schema is import graphene because that's what we want to use to support and to be able to utilize graphql on the back end and then what we're going to do now is from graphql awes we're going to bring in some pre-existing classes so there are a number of them and this is just going to allow us to kind of abstract some of the functionality that we don't need to build so graphql auth comes with loads of different great facilities so what we're going to do originally initially sorry is bringing in import user query and me query so this is going to allow us to run queries really quickly really easily the me query is really cool because we can find out about that particular user um utilizing the me query so obviously what we need to do now is build our query set so this is pretty much it so we're going to pass in um an abstract again a lot of the functionality because we're utilizing this new um tool graphql auth so our query is going to be made up of um user query uh the me query that's going to be brought in graphene object type so these are just two kind of classes that already been pre-made in the graph qr auth package we're just basically going to bring them into the query so there's nothing we need to do here everything is kind of sorted via the app that we've installed so the last thing obviously we need to do is just build schema now this might seem familiar if you've seen and gone through the previous tutorials obviously what we're not doing here is we're not defining any of the um the tables that's all going to be dealt with by our new package so yeah literally that is it so to build our query we're just going to bring that in the classes in um and our schema is going to be our query here so that's going to provide us access to our data it's pretty it's pretty much that simple so what we're going to need to do is just uh because when we install graphql off it did also install the django filters app so let's just go ahead in our settings and just make sure that that is that's included there we go so the django filters is just a handy kind of tool really that helps us write or create filters um on a query set uh so that's just something that the graphql or package utilizes to kind of simplify some of these um features that it offers okay so uh we've got these settings now complete we've got this in place so probably what we can now do is just remind ourselves of the url that we're using so graphql uh let's just go into the front end here and there we go so here we have the um the graph iql front end here this is where we can actually now type our graph queries so at this point we've only got one user installed remember um so um pretty much yeah the one user the admin user that's the only user we have here so you can go ahead and add some more data if you want or would like to but let's just now go ahead and well let's just add a another user let's just add so we've got two users let's just call this user one um today now so the username is going to be user one first name user first name just so we can see this data uh user last name so when we return data it just makes it a little bit more obvious what data we're returning um is active yep uh user one okay let's just press save okay so now we have a new user so we've got two users now okay so let's go back in and let's build a statement here okay so we've got query uh which seems to be wrong okay so we've got users now so let's bring in users um and in our users uh no doubt we've got some edges so edges are basically going to allow us to extract all the information about users or all users so here we're going to go into the node and then we're going to define the information we want to return so in this case we just basically want to return oh let's put that one basically we just want to return the username so let's just run this uh simple query here and there we go so we have two users uh admin and user1 and of course we can collect whatever information we want at this point so for example we want just their email and then so on so this is the query we're going to run from the front end if we were going to build in react etc and this is the data that's being returned you can see that um that's the data that's been returned so i mean clearly everything is working at this point so let's just clear this up in simple terms here so in previous tutorials this is going to look very familiar right so this is a little bit abstract here we know we utilize query users where does users come from so if you want to start asking yourself these questions here let's go back into our schema your schema should answer all those queries now in previous tutorials we built some classes or the query and we defined it we would have defined users for example now because obviously we're not doing that here because graphql auth already has those um it's just going to bring in those in in a really kind of abstract way we can't see them here so this is where you're going to have a look at the manual and see what's available so that you can i'm going to bring this data in so that's where that might be a little bit confusing what where does users where's users actually attach to now again it does help if you've seen the previous tutorials you should probably have a better idea of what i'm talking about here so maybe if you don't maybe if you go back to the previous tutorials just to give you a better idea of what's going on before you complete this tutorial maybe that's a good idea or something you can do later so that's why you're not seeing users here and while we're able to access the query users because it's being abstracted here by user query and me query which is coming from the graphql auth package so next up is edges so this is basically a way of getting a collection of objects edges um yeah that that's let's just leave it that say we want users and we're saying here we want to collect all the users we want to get a collection of users okay so that's what that keyword there is so node is another keyword that we've not used before um so basically here what we're saying is that each edge has data so each ed edge has a record or data and we're referring to that data as node so essentially what we're saying here is look for users on the user table inside the user table collect all the data and now i want some data so i define what data i want by utilizing node and then i can now define the items that i want to collect and return so username and email there we go so we can obviously collect more data depending on what's available um if i type in a letter you can see it's picking up all the different fields that is available so for example um is active there we go so it's over true or false etc so again remembering this is what we're going to run from the front end in react or view or whatever this is the data that's going to get returned so what we've done there really with the user queries we were using the user query here so let's have a look at what this me query provides us here um or this me query functionality sorry so what this is going to enable us to is to collect information about the user very directly so we use me and then we can basically just define what data we want to collect now we are collecting only one item from one user so here we don't need to utilize edges and nodes et cetera so me and then just username and there we go so i am logged in as the admin so you can see that i'm returning the admin information back and there we go so you can see that's going to be pretty useful later on particularly in your application to get information about the particular user that's currently logged in okay right so next up we'll have a look at some registrations uh so part five then uh let's now try and set up user registration now i did mention at the start of this tutorial um that we'll go ahead and we have some sort of email confirmation now again in django there's plenty of ways we can set up different email clients and facilities etc no doubt that your business or your plan to utilize x y and zed service for your emails now apologize again because i always get a few different comments asking me to set up with this email client or this email service etc in this tutorial we're just going to be utilizing um the back end here so we're going to set up the parameter email back end to use utilize the the django backend for emails and the email is then going to basically be sent to this console here so let's just go into the settings maybe i didn't explain that very well uh but basically django is going to handle the emails by sending the email to this terminal we're going to print out the email that would have been sent to the user now obviously you can change these settings go into the django um documentation have a look for the documentation to kind of set up with your particular email client i have done a tutorial on utilizing for example gmail how to set up django with gmail have a look at those tutorials if you want to set up with gmail now like i said this is basically going to send the email to the console simulating the email sending to the user okay so that's what the the email sets up now um for that uh so now we can now go ahead and set up the uh the mutations we're going to need to register a user so let's go over to our schema now obviously the schema here again if you've seen the previous tutorials this is where we're going to set up our query and if we want to add data we need to set up a mutation right so first thing that we need to do uh from graph uh qr off is we're going to need to implement the mutation or import mutations to allow us to kind of save some data and now we need to set up a mutation for this so uh let's just move that up there so we've got our query so now let's add a new class here for mutation so we're going to call this author mutation and we've set up the graph object type and then we've got the register equals mutation register field now these are parameters here they're just set in stone hence why i didn't write it out so if you look at the graphql off package you'll see there are a number of different settings that already predefined so this is what we need to utilize for registration now obviously we now need to this is obviously passing in the fields so what we need to do now we've got the fields and the data we're going to need to set out a new class for mutation like we do the query there we go so here we're bringing in the auth mutation that's essentially the fields that we're utilizing and of course we now need to just extend our schema to utilize uh our new mutation which is uh called mutation there we go so now we've kind of connected that up again i keep repeating myself if you've seen the previous tutorials that it's going to make a little bit more sense what's going on so i'm running the server now so the server is turned on so what we can probably do now um in a second is register but what we're going to need to do first is set up because we want to connect this to jwt of course so what we're going to need to do is create a new setting for graph j wt in our settings let's go to settings here um so here we're going to set out um to build that connection between graphql and jwt graphql jwt um we're going to set that up here we're going to bring in the graphql of mutations register so that's basically just going to connect things up in the background so that graphql off is working with graphql jwt package and we can kind of connect those up and provide jwd tokens to the user once they've registered so now we've got that in place everything is nicely connected and we should now be able to go back into our front end and well register in a user so this time we want mutation because we want to run a mutation and it should maybe not okay let's just say refresh we should get a little bit more yeah it should now pop up okay so um don't forget obviously uh most of the time you're going to need to uh just refresh this page if you make any changes to your um to your files uh particularly the schema um so you can see it's automatically picking up the register so right so to register we're gonna need an email username password yep so email um that's going to equal a new email so let's go c so we've got b and a already so that's the email in place um then we're going to need a username so this is just going to follow your um your database so don't forget the email was mandatory and we made that mandatory so the username we're going to call call this user two so we've already got user one and then so on so what we're going to need here is password one you can see that password one and password two so it's prompting us with all the fields um so let's just uh let's just set up a new password uh so we need password one and password two there we go um and there we go so what's great about this is we can now start to define what we actually want to return now if we think about this as an application when we create a new user really what we want is a signal from the server remember this is the front end we're working with here what we want is a signal from the back end to tell us that a user was successfully created so we can pass or we can bring back a lot of different data so what we can do down here now is we can bring back a a boolean true or force whether it was successful or not we can also return any errors so this is um this is a great package that we're utilizing here that provides this type of functionality and this really kind of speeds up production of your application a lot so obviously what we also want is our token um so we're going to bring back two things for the user we're using jwt if you're not familiar with that apologies i'm not going to explain or give any information about jwt there are plenty of other tutorials uh on the in the channel kind of give you some background to that uh so we also want the refresh token uh so let's uh bring in the refresh token i'm not too sure why that isn't coming up automatically um so we'll see that in a second so we've got the refresh token as well that we want to bring back to the user so let's go and the refresh token isn't quite working at this second so let's have a look to see what the problem is okay so if you go into the settings in the graphql jwt settings i forgot to add the jwt verify exploration and that needs to be true so that's just basically saying that jay the jwd token um will expire and we're gonna need a a refresh token so that's just going to trigger the fact that we're going to build or utilize a refresh token in our application so if you want any more details there just have a look at the graphql jwt documentation that's going to give you a little bit more information about that but essentially that's going to be needed if we want to use a refresh token as well as remember at the top here we added that into our installed app here okay so with that in place i refresh um my graph iql page and i go and you can see here that um there seems to be an error cannot query field refresh token okay so that's just a refresh i'll just make sure that that is saved and refresh okay so we've still got a problem here so if we just consult the documentation again um we're going to also probably need the other setting which is uh jwt long running refresh so this is uh this is also going to be connected to the uh refresh token um set to obviously refresh tokens and obviously normally set to a longer expiry date or time than the jwd token um so with that setting in place everything seems to be working now so we can press uh execute to execute our query now you can see here that the password we've got some messages here which is great so you can see here straight away that success equals false so this is what's returning to the front end and this is great information because now we can obviously set up our front end to perform these different actions based upon what's being returned and this is really clear this is really simple to work with so obviously the password is too common so let's just go ahead and just create something crazy there we go so let's uh change our password again and let's press uh to execute and there we go so we've now just registered a new user we've got our token we've got a refresh token obviously that would be passed to the front end and we can deal with that and we can now utilize that to work with this user in our system okay so that was incredibly easy to register a user hopefully you agree uh let's go back into our front into our admin here and let's just refresh and see that so we now have our new user that's what we've just set up okay so if you remember the start of the previous task i said about the email and setting up the email for account verification so let's have a look at this now the account verification now if we go back into our console here um you can see if i just move up a little bit when we activated this user this email was sent to the user now remember that i've set up the settings so that we would just capture the email and print it into the terminal that's what we've got at the moment obviously you can change this email back end like i said previously and add it to whatever email service you want to utilize you can see this is the email um so hello user 2 please activate your account so the user can utilize this link follow this link and activate their account so if we go into the um the admin again you can see that uh by going to users and user two um you can see it does say active here so the user is active but if i go into the user status and go to user number two you can see here that they're not verified okay so that's the important bit so graphql auth has created a new table and this new table is designated to uh be utilized to verify the user so the user signs up an email sent to them and then when they click on that then they become verified and then they can log in to the system so what's going to happen here then just to explain if you're working on the front end if you're trying to do this on the front end obviously this link doesn't work it won't work because we haven't set up the url so what we would need to do on the front end is we'd need to make a new path and a page that can handle this link and take this code here and utilize this code to verify the user so what would happen is this user would click on this link from their email that would take him to that page and we'd need to build that page so it extracts this this key here and then sends it off to the server to verify the user so obviously now we're just working in the back end here so let's set up that verification option so obviously this is going to need for us to change our schema because we want to now also set up a new kind of mutation because we want to make a change in the database we want to take that box and that we saw in the admin area here so we're going to need to make a mutation so let's go ahead now and just extend so we've got register so now we want verify so again this is directly from the graphql off package and we're just going to copy and paste that in okay so now we've got that in place and we now also need to go into our uh settings and let's go back up here into our graphql so we've done register and now we're going to be doing a verify account okay so we want to kind of connect that up with jwt so let's go back into our schema um that's all done okay so literally that's it that's all we need to do so let's go back into our front end here let's just close that right so how we're going to do this so we're going to need the code so let me just go back into here uh so this is the code that we're going to need right here so let me just take that and just make sure i've copied just make sure i've copied that i think i've copied that yep okay so we're going to need that so let's build our new query here so this is going to be another mutation uh we're going to utilize okay we're gonna need a refresh oh and the server's not on that doesn't help okay let's just turn the server on so we're going to need a mutation and this time we're going to verify count notice it kind of picks it up so what we're going to need to do is pass in parameter right so we know how to do that from the previous tutorial so token and then we're going to need our token so that's my token that i want to utilize that's from my email so that's my token and then i can just now define what i want to return so again this is great package to utilize because i can return for example uh if i do this properly i can return success for example and then any errors so let's go ahead and try this see if we can verify this user and there we go so success and we didn't have any errors so we've just verified that user so let's go back into here we'll refresh for user two and you can see now we're verified and now the user can log in okay so hopefully you agree that was incredibly simple to set up uh we now have a verification service available uh like i keep saying apologies now you can obviously go ahead and set up your email with your provider okay so now we can go ahead and part seven and log a user in so let's uh set up everything we need to get a user to log in so as you might imagine we're going to need to on the front end we would build a front end with a form and the user is going to need to type in their their username and their password so what we're going to need to do is obviously extend our schema again we're going to utilize um the tools from graphql auth to do that of course so let's do that there we go so that's our token auth and then as you might imagine um you can see kind of the pattern here in our settings we're now going to add um our graphql or for mutation obtain json web token so obviously when the user logs in we want to obtain a json web token for them okay so that is going to go there and now what we need to do would you believe it or not is just log the user in okay so it should be as simple as that so let's go back into our front end here i've run it and let's go ahead and just refresh this right so now we have a mutation because we want to make a user so we're going to change the database so it is a mutation um so we're going to have tokenorth um we're going to need the username so these are the parameters we want to pass in the username we're going to just use the admin uh and then password now this isn't going to work but i'm just going to show you this and because the admin hasn't actually registered because we made the admin before we built the system it isn't part of the system yet so this um actually won't work so i might as well just make a new user haven't i night so let's just go ahead and do that uh let's go to users admin so let's just uh let's just delete this admin okay and let's just make a new cpu user so like i said because we've made this admin user before we set up the system um it won't be registered for us to be able to kind of activate them onto the system so um let's just build another super user so this just makes things a lot easier to work with okay so we've made a new user let's just log them in again now the reason or another reason why i showed you how to access the user status is because you can see now when i go to use the stasis i've got my admin and the admin isn't verified so this may allows me to easily verify them so i can actually log them in just to show that's the case so i just press save there so now i've got that in place let's just go back apologies to here and now we can kind of just finish this off so password is going to be admin 2 that's what we've just set up so um that's that in place and now of course what we can do as per normal is just return anything that we want so success we can check to see if they're logged in um errors and this is going to help us on the front end to build what we need to build so we obviously want a token and we want the refresh token so let's just bring that back now lots of questions from the other tutorials i've made about how do i access user information because obviously what you want to do is log the user in and get their information too so you can use it within the system so this is incredibly simple because what we can now do is we can just uh define user here and then we can now say what data we want from the user so let's just get their username for example so this is just going to extend the query into the user and allow me to gather that information too so let's see if we can use it do that and there we go so we've logged in successfully we've got our tokens refresh and normal token and we've got the user information too so that was really simple so let's move over to the update account so someone's can now register they can um log in and of course they may want to update their account details so let's take a look at how to do that so this is super simple what we need here is just the update account um the mutation from the graphql off package there we go and that is literally it so the problem here now is if we go to the front end we run this mutation here so we can update the first name for example obviously that isn't going to work for users because in order for us to update we need to be able to authenticate ourselves so if i were user 1 and i wanted to update my details you'd expect i'd need a jwt token a session active so that i can update my details now if you were to log in as the admin in django and to run this mutation here to update you can see that it works and i've updated the user so just let me just show you this again so i'm logged in as admin remember so i can press go you can see that it's updated the admin user information so when i go to my admin user in the background you can see it's updated the first name and that's just because really that i'm i'm logged in as the admin here obviously what we want to do is uh to update users um who are logged in but we need to utilize the jwg token and pass that across to the server to identify the user as logged in so what we're going to do now i've opened up postman here uh i've showed you this a few times in a different tutorials this is going to allow us to uh simulate the front end uh so we can pass details across to our back end and so just think of this as a react but um we're going to set up all of our queries here and send it across to our server so let's have a look what we've got here so first of all let's go ahead and go into our post just make sure the selected post here and obviously we want to define the endpoint of graphql which is right here right so then we go into the body so we want to make a a this is a password reset so what we want to do here is go into graphql um and let's just go back into our interface here so we're going to copy this across so inside of our graphql here this is our mutation so we want to change um the password okay so right so let's just add extend order let's just change this password to something else i'll show you username sorry so something else so let's uh we're going to send the post it to graphql endpoint and we're going to send this here and we'll press send okay so notice what we is returned is false so this isn't working now that's obviously what i'm expecting and wasn't expecting it to work because what i also need to do is send across my json token because i want to authenticate with the server so if i go into headers here i can actually set up authorization and the value so apologies um it's kind of really a small here um hopefully you can just about see what's going on here so we need to set up two parameters here all for authorization and our jwt token notice that there's a prefix of jwt that's important to remember so um this is the key values i need to send so i need to find out what my jwt token is so let's just go back into our graph front end here uh what we're going to do now is just uh you can see we're going to log in as admin so we do that and you can see that we're now provided our token right here so this is our jwt token so i'm going to copy that in go back into postman here so this is a new tab we're inside of headers we're going to add the key as authorization and the value is jwt and then our new key so i'm going to paste my key right there so that's my new key and then go back to body and just make sure that i'm going to update my details just make sure that the uh graphql statement is correct looks okay and let's just change that and then press send and there we go so now we've got success now we're utilizing our jwt token that's the token that has been given to the user when they've logged in to authenticate them we can now see we've got the success so we can check that by going into our admin and our first name should have changed if i refresh and there we go so that's what i've just typed in aaa blah blah so you can see that our jwt token and our update user details is working correctly okay so there might be occasions where the user has not received an email when they've created an account so they can't confirm or they can't activate themselves to be able to log into the system so let's have a look at how to resend a confirm email so let's go back into our schema what we need to do now is just uh incorporate the graphql off resend activation email setting here so there we go so that's pretty much the mutation that we're going to need resend activation email so once we've got this in place we can now go back into our front end so let's do that and we now can set out or we'll just do a refresh we can now set this out so we're going to need a page where a user can click on a button and that button will send off or fire off this mutation here so we're going to use a resend activation email so this is what we want to send to the server and then what we need the user to be able to define is their email so in actual fact this page is going to look like a form so the user's going to type in their email they're going to press the button and this is going to be sent off to the server and that's going to activate an email to send to the user again if their email has been registered when they built the account so let's go ahead and just add this parameter here so let's do the we know the the admin has a.a.com so that's the email we want to send to um and then we can also as per normal we can just set out if we want any errors etc now this is where you probably don't want to utilize success because we don't want for example someone who's trying to look to see what emails are available in the system can access some sort of success boolean of true so let's just go for uh maybe errors or we would deal with this differently in the system but we're just going to have errors here so let's just try this um so account already verified so we can't do that so let's just do b and there we go so that should have been sent off now let's go back into our terminal here go down to the bottom you can see that we've captured the email that's been sent please activate your account on this link and there we go sorry i say there we go obviously utilize what we did before whereby we use this this would be the same page so the the normal page where we ask people to um when they click on this link and that then registers them or activates them this can be utilized on that same path okay so let's move over now to for example how to activate or change your password if you've forgotten it okay so i think it's part 10 forgotten password so obviously there's users who will forget their password we want to email a link to them so that we can then um allow them to change their password so again this is going to involve an email so let's just go back into here so what we've got now is the option to send password reset email here we go so that's the mutation that we want to bring in from graph of package so once that's in place what we need is a query for that so let's go back in here and refresh okay so we're going to need a mutation for this um this one is going to be send password email reset and then obviously what we need to do at this point is define the email and then the email address so let's just do b b.com there we go and the same rules apply again we can just set up any kind of error control um or message which is that we want to include for any logic on our front end so let's send an email reset for this there we go so success equals true so let's go back in so in our terminal we should have received a new email so the bottom here it says reset your password on this link so now we need to actually allow them to reset their password so let's go back into our schema add in password reset field there we go so we're going to need the the code from the password so the code from the email here to make a password reset so let's go back in uh make a new mutation so we want the password in this case it's going to be password refresh again password reset uh and then from here the password reset uh we're going to need to pass in a few different things here so we want the token that's the token from the email um we're then going to also take in the parameter for the new password one um i should have done this in separate lines new password one and then that's going to be whatever new password one is and then of course uh new password two sorry for the format in here you get the idea obviously they need to be the same and then as per normal we can just take in success and so on so that's pretty much the format i won't press go on that because i don't want to change the password but that's essentially what needs to be included from the front end to make the password change so at this point you probably got the idea what's going on here and how the pattern of which to work to get this working so predominantly we're using django graphql auth okay so that's what we've been using that's what we've been building upon to build all the functionality that we've mentioned in this tutorial now if you head over to the uh documentation you'll see many of what much of what i've already covered and so if you go over to for example the quick start that'll take you through the basic steps um to get to the point where you're i think you log in a user in so that'll take you through the steps again if you need to follow that at the end here this has all the full schema that's available so here you go register verify account resend password reset password change uh delete account update account send secondary email activation verify second and so on so you got these are all the different um classes that we have available or mutations that we have available and all the features that it offers so the idea is that we utilize these now if we go over to the api that's then going to give you an idea of on the right hand side here you can see all the different options are available so if you need to work out or need the code for example refresh token uh here's the graphql that you're going to need for that and of course you'll just need to match that across and make sure that you incorporate the right mutation for that and there we go um that's literally that is how simple it is to utilize this to build a login logout or user management feature for the back end of your system so this if this is something you seriously want to use for your application then have a look through the documentations get a full idea of what's what's included in this package um obviously now we need to kind of incorporate this all into the front end and this isn't really part of this series um but at some point like i said up i'll put this into a react or view application so that we can see it working with the front end so thank you very much for listening and hopefully this was useful and it's kind of pointed you into the right direction if this is something that you want to develop thank you very much and hopefully i'll see you in the next tutorial

Channel: Very Academy

Views: 7,367

Rating: 4.9792747 out of 5

Keywords: graphql, django, django graphql, graphql schema, django objects, django generic views, django tutorial, djangotutorial, django tut, django beginners, djangoproject, django examples, learn django, beginners django, django framework, django 2020, django example, graphql tutorial, graphql queries, DjangoListField, graphql arguments, graphql crud, graphql user authentication, graphql jwt

Id: pyV2_F9wlk8

Length: 72min 21sec (4341 seconds)

Published: Mon Dec 07 2020