Django Authentication & User Management - Full Tutorial

Key Takeaways

[Music] in this django tutorial i'll show you how to set up authentication for a django website specifically how to create new user accounts sign in to those user accounts and then sign out i'll also talk to you about user permissions and groups so how to assign specific permissions to users and restrict parts of our websites to those users for example in the website that we're going to build out here we're going to have two groups of users a default user and a mod user the default user will have the ability to post and to delete posts that they've created themselves and then the mod user will have the ability to delete anyone's posts because they're moderating the website as well as to ban users and if a user becomes banned then they will no longer have the ability to post but they'll still be able to view specific posts this will give you a really in-depth and kind of thorough understanding of the django permission system and grouping and allow you to do a lot of advanced stuff on your website and manage different users lastly i will also show you how we build out a really cool dashboard where we can view all of our different users see what groups they are in change the groups of users really simply from this dashboard as well as view some statistics like the new users per day the number of posts per user what type of users we have so default users mod users and view it all from one page now this dashboard that i have in front of me is going to be built using something called retool now we'll slowly build this out throughout the video but i do need to mention that retool is the sponsor of this video they are free to use you do not have to pay for this and it just allows us to really easily visualize our different data and for people that aren't programmers to come in here and actually say make a modification to our database and affect our application without having to go into the django shell you know type in lines of code and we can also do stuff like add charts and add graphs and a bunch of other customizations that we can't really do from a regular django admin page so yes some of this stuff is going to be redundant with django admin but again if you weren't a programmer this is going to be a much more preferred way to go in and view the database change different aspects of the database like which users are in which groups and then create some different charts and statistics and really anything you want anyways let me give you a quick demo of what we're going to build out here i apologize for the long intro but it is necessary to talk about this so here you can see that we have a simple website where users are able to sign in right now i'm signed in as joey and i can do something like create a post so let's just say tutorial i am demoing the app exclamation point let's make a post okay post has been created now let's go and log out here and let's sign in as the user tech with tim which is a super user and notice here that this user has the ability to delete anyone's posts even posts that they have not made themselves and to ban users now of course i can't ban myself but we just have the button there anyways so let's do something like ban joey and if i ban joey now let's log out and let's sign in as joey and now notice that if i try to make a post here so no i don't want to save that you'll see that i'm not allowed to do that now we can make a custom page for this for now i've just made it forbidden i'm still able to delete my own post because i have that permission but i no longer have the permission to make a post now if i sign in as a different user let's sign in as say susan here you will see that i have the ability to delete anyone's posts and the reason i can do that is because if i go here susan is a mod so since susan is the mod they can't ban anyone but they have the ability to delete anyone's post so i could delete joey's posts i can delete the admins post we could change that if we want to but the point is we have different users that have different permissions and that changes what they're able to do on the website obviously kind of a more advanced thing but that's what i want to show you in this video so anyways with that said that is enough for this intro i apologize that this was long now let's head over to visual studio code and start working on this project alright so i'm inside of vs code and now we can go ahead and get started so there's a few setup steps that we need to go through we're going to start by installing everything kind of setting up a boilerplate django application linking our urls and views and all of that then we're going to create a remotely hosted database using postgres i'll talk about that when we get to that step then we will build out the website we'll build out the dashboard and all the other stuff that we need to do so to get started i've created a folder here called django user management tutorial doesn't really matter where you place it but i've opened it in vs code feel free to use any editor you want but i'm just going to use vs code now i'm inside of this directory here which is going to be important for the next step but first we need to install a few modules so since we're working with the django website i'm going to pip install django i already have that so i'm not going to run that command if that doesn't work if you try pip 3. if that doesn't work for you try python hyphen m pip install if that doesn't work for you try python 3 hyphen and pip install if none of those work i will leave two videos on the screen that show you how to fix the pip command now since we're here at this step we're also going to install a few other things we're going to type pip install and then we're going to install crispy and actually i don't know if this is what it's called uh it's going to be crispy hyphen bootstrap 5 like that now this is going to allow us to have some pre-built forms that we can render on the screen using bootstrap so that's why we're installing this and then you also want to install crispy forms although this should already be installed when you install crispy bootstrap so just install this in case it will probably tell you it's already there but let's just make sure that we have that before we move on okay so now that we installed that django crispy bootstrap 5 and crispy forms we can create a django project now i will mention here that this tutorial is not meant for complete beginners in django i do have a ton of django tutorials on my channel so you can check those out if you're getting a little bit lost here with what i'm doing but i'm going to kind of skim over some of the explanations of the most basic stuff regardless though let's create a project here so i'm going to say django admin and then this is going to be start project and the name of this project can be whatever you want i'm going to call mine website now make sure you run this command in the directory where you want this folder to be created so in this case i'm running it in this directory that's where i want it to be but if you want it on your desktop then you'd make sure the path here is desktop you just have to navigate through your terminal or command prompt to get to the right path okay so let's run that now we see that we get this website directory and inside of the website folder inner folder we have all of our files here that are containing the stuff that we need as well as dot pi so now that we've done that we want to make an application for our django project so i'm going to cd into website and i'm going to type the following python and this is going to be manage.pi and then start app and i'm going to call my app main now you can call your app whatever you'd like but if you do change the name from main then you're going to have to tweak some other things so i'd recommend you just call it main for now to follow along so make sure you're inside of the website directory where the manage.pi file is and you type python manage.pi start app and then main and then you'll see it makes this main directory here and in case you're unfamiliar the app is where we're going to write most of the logic for our website and we're going to kind of link the app to the main website so the way that we do that is inside a website we go to settings.pi and there's this thing called installed apps now the app that we just made is called main so we need to throw that in here so the way we do that is we type main dot apps dot and then main config now if you're wondering where this is if you go to main and you look at apps dot pi you can see we're referencing this main config class right here so that's what we're adding in here main.apps.mainconfig of course if you change the name of your app maybe it was auth or something then you need to change this and it would be auth.apps.auth.config okay and if you want to check then again you can go to apps.pi and you'll see exactly what the name is okay so now that we have that installed apps we're also going to add a few other installed apps specifically the crispy forms and crispy bootstrap 5 that we had before so we'll start with crispy underscore forms because we're going to want to use that later and then we will add crispy underscore boot strap 5 like that so that it styles our forms with bootstrap and they look nicer than the default forms okay now that we have that inside of settings.pi that's all we need for right now we've linked the main app to the website so let's just run our server and make sure everything's working so i'm going to type python manage.pi run server and when i do that i should see that we're getting this running on our localhost port 8000 so i'm going to control click on that to open it up and let's go to our browser here let me bring this over and you can see this install works successfully congratulations and you're seeing this page because debug equals true okay that's fine and we have not configured any urls so next what we're going to do is configure some urls so let me close this server here although i could have kept it running because when you keep it running it will just update when you change stuff but that's fine for now okay so we have some urls inside of urls.pi and actually before i do this let's make a new file here in our main app called urls.pi so what we need to do essentially is link the urls from this main app to our actual website so that we can access the different views from our main app so i guess we can really start wherever we want let's just start here we're going to import something called include alongside path and we're going to put a new path here and this is just going to be an empty path and this is going to go to and then this is going to be include and we're going to put main dot urls like that now what this is saying is that the prefix is going to be nothing and we want to get all of the urls from main.urls and access them with well this prefix which is nothing so that essentially means that now any urls we put inside of this file so the urls.pi file will be able to access on our website and notice we already have these admin urls which are pre-built for us which kind of give us the admin panel and admin page which we'll have a look at later for now though let's go to urls and let's actually set up the urls inside of here so what we need to write here is from django import and then this is going to be path and then from dot views import or sorry not from dot views from import from dot sorry import views now dot is referencing the current directory because this is a python package by the presence of the init.pi file and so we're able to access this views file okay so now we're going to type url patterns is equal to a list and this is where we can place all the urls for our app so for now i just want a url for the home page so i'm going to type path we're just going to make it an empty path so when you go to the default page this is what shows up and we want to display the views.home function which is a function we've yet to create okay so that's what we need for that now we want to go to the views file which is going to contain all of our different views and here we want to write the home view so we're just going to say define home we're going to take in request we don't need star args and star quarks okay and then for now we can just return a string and we can just put a p tag in here that says home and in a minute we'll write all of the templates so the html that we actually want to render from these different views so actually quick cut here i remembered that we can't actually do this i'm used to working in flask where this works this is going to cause an error for us so what we need to do is actually make a template a template is just html essentially that we're going to be rendering onto the screen so we need to do that before we can actually view anything from this root so let's go into this main app and it's very important here that you name everything what i'm about to name it sorry i keep opening and closing this but let's make a folder here and this folder needs to be named templates and it needs to be inside of the main app if you name it something else then it's not going to work so we're putting templates inside of here then we need to make another new folder and this folder needs to be the name of your app and i'm going to call this main okay and then while we're at it we're going to make one other folder and we're going to call this registration and we'll have a look at that in a second but this is going to contain all of our authentication urls or authentication templates sorry okay so we have main and we have registration we're going to go inside of main and we're going to make a template here called base.html and we're going to make another template here called home.html now django uses something called jinga which is a templating engine j-i-n-j-a i'm probably pronouncing that incorrectly what this allows us to do is write what's known as a base template and the base template can contain uh like a navigation bar and you know default stuff that we want on every single web page and then what we can do is inherit from that template in specific templates like home.html and just override parts of it like we can override the main content of the page without changing for example the nav bar so this is going to take a minute here but we're going to write the html now someone showed me a shortcut here i might not type it exactly correct but if you go here to the language if you're working in vs code this only works in vs code i believe if you have like the html extension i think that's what you need but most you will probably have this but if you change the language to just regular html apparently you can type html colon five like this yeah okay you can see and it actually generates a kind of boilerplate template for you so this is actually what we want so this is good we'll start with this for now and we want to write the rest of this base template now what i want to do is add bootstrap here so we can use bootstrap for styling of course you can style with whatever you want but it's just the easiest way for tutorials for me at least so let's go here yeah it's because this isn't running that's fine and let's just type in boot and i always spell this wrong boot strap okay come on and let's go to bootstrap here so here from the bootstrap website we can click on get started and we can just copy the cdn which is this right here so i'm going to click on copy as well as the different scripts that we need for bootstrap so i'm going to copy that i'm going to put this into my head tag so put this link right here again you can just search up bootstrap click on get started and then you know copy the the link put that in the head tag then what we need to do is copy a few scripts and we need to put those in the body so let's go back here to bootstrap okay for bootstrap it says if you decide to go with separate scripts okay include every bootstrap javascript plugin and dependency with one of our two bundles okay i think we can just copy this one right here for the bundle and this will give us everything that we need as opposed to copying the separate scripts so let's do that and just at the bottom of our body i guess in our body here we're just going to paste in this script and now we have added bootstrap to our website so now that we've done that i'll talk to you a little bit about template inheritance and how we override parts of this base template from another template so for now let's close that and what we're going to do here is create something called a block so i'm going to type percent percent like this block and i'm going to give the block a name and i'm going to call it title now what this does is it sets up a part of this html page here that can be overridden from a page that inherits this template so let me just end the block here so we're going to type n block and we can put a default value in here like my site and what this allows me to do now is go inside of this template i can rewrite this block and it will change what's inside of it with whatever i wrote in the home page you'll see when we start going through the example but for now that's what we want and then we're going to do the same thing inside of the body but first i'm going to say div i'm going to say class is equal to and i'm just going to make this a container which is a class from bootstrap and actually we'll make this container fluid and then what we want to do here is uh place the what is it the block so i'm going to percent percent block content and i'm going to do another block here and type and block and also i'll just note here that all this code will be available from the description in case you'd uh rather just copy this out or not copy this out copy it from github as opposed to typing it out and i realize i'm going to change the container back to regular container because i don't actually want this to be fluid okay so now i have two blocks a block for my title and a block for my content and what i want to do here is just place a nav bar that will let me navigate through the website so we're going to type nav let's end the nav here we want the class here these are going to be some bootstrap classes to be navbar nav bar expanded and then large like that and then nav bar this is going to be dark and then bg dark if you're unfamiliar with the syntax it's just from the bootstrap website you can kind of just copy it out we're just going to get a nicely styled nav bar here we're going to make a div this is going to be container and this time we want it to be fluid fluid makes it so it takes up the whole screen then we're going to make a div inside of here now the first div that we have is going to contain the links on like the left hand side of our page and then the next div that we have is going to contain the person that's logged in so it'll be like you know the left and right side of the navbar essentially so div here we're going to make a ul because we're going to have some different list items here and inside of ul we're going to have a class which is equal to navbar nav so we can just have navbar nav like that and then we want to have the different links on our nav bar so do li the class is going to be a nav and then item like that although that needs to be inside of a string and we should probably spell class correctly let's end our li and then inside of this we want to have a link so we're going to say a class equal to nav link we need the href to be equal to and then in this case i'll just make it slash home okay and then we'll end the link and it will say home okay so now let's copy this let's paste this and now let's just have another one for creating a post obviously we don't have these pages made yet but we'll make them later okay so clock slash create post and there we go we have now the left side of our navbar so now let me copy this div and paste it again and then we'll do a similar thing here for logging in so let's just make a button right now or a link that says login and we can deal with showing who's logged in later okay hopefully you guys are following for now though that is what we have for the base template we will add a few things to this uh but for now that's all we need okay so let's go to home and from home we essentially just want to take everything that's inside of here and we want to override the title so it says home we want to override the content so it shows like you know you're on the home page and eventually it will show all the posts that we have so the way that we do this is we type percent percent extends and then we're going to extend and make sure this is single quotes here the main slash and then base dot html template okay now that we've extended the template that's all we need to do to extend it we can use any of the blocks from the template so i can do something like block title and say home page and then i can end the block so percent percent and block like that and then let's do another blocks percent percent block content and then we will end the block and this is where we can place any html that we want to go inside of that div so if i go back to base here this is now where we can write essentially all the html and kind of inject it into this container so if i go to block content i can just do something like h1 and then let's just go home page exclamation point and then slash h1 and make sure when you save this uh it always does this it separates the block and the content you get an error if it's not on the same line so when i do this i just hit ctrl shift p and i hit save without formatting so save without formatting you can just type that in because my auto formatter like messes everything up you may not have the autoformatter you may not have to do that but i have one so i have to go ctrl shift p save that format okay apologize that we've just gone through a lot there very quickly but we created the base page we created the home page a lot of the html we need to write is done i'm going to go to views now and start rendering this page so from use we already have render so i'm now going to return render i'm going to render the request and then i'm going to render main slash home.html okay that's all we need for right now for the home page and if we go to urls we can see we're already referencing that home function so now everything should be good if i rerun the server so let's try python manage.pi run server and we should get a nav bar with some different links assuming that we've done everything correctly although it's possible we've made a mistake so let's refresh now and there we go we get a page we get home and post and these are on uh separate lines which is a bit messed up i don't want them to be on separate lines i want them to be beside each other so let me have a look at what i messed up there and i'll be right back all right so i found the error here i accidentally typed uh typed expanded instead of expand so just change this to navbar expand hyphen lg save and then if we go back here and we refresh we should see if this is large enough that they're going to be the sidechain now when the page shrinks yeah they do go on the same line but that's fine so we're all good for them okay so now that we have done that uh what we want to do is start setting up authentication right so we've created a homepage we have our views now we want to have the ability to create users log in as users and then do the different user management create posts all that type of stuff so let's go now to views and let's start creating what we need for authentication so actually i lied i forgot that for authentication we first need to set up our database so we could do all of this locally and not host a database remotely but i want to show you how we can host one using heroku completely for free you don't have to pay for this and then that's going to allow us from retool to actually connect to the database and use and modify the database without using the django application so you'll see what i mean but let's go to our browser and let's go to heroku and let's start creating the database so go to heroku you're going to need to create account if you don't already have one again it's completely free you don't have to pay for anything and then you should be able to get to this dashboard so if for some reason you can't get there then just type in https colon slash dashboard.heroku.com and then what you're going to do is type on new here and create a new application now this app is just going to host the database for us and it won't host it forever like i believe six hours of every day the database does go down but this is just for testing purposes and to show you how to connect to a remote database so let's call this something like tutorial tutorial is not available okay django tutorial is fine okay actually let's spell django correct though django tutorial how about one two three django1234 okay great let's go with that now for the region i mean you guys can select i'm gonna go united states okay and then we need to add an application to this so to do that we're gonna go to resources we're gonna go to add-ons and we're going to click on find more add-ons and it's going to bring us to a page that looks like this we are going to search for postgres which is the database that we're going to use hit enter and we should see heroku postgres so that's what we want we're going to install this and now what we need to do is select our plan in this case it's going to be hobby dev free i mean you could pay for this if you want but we're just going to use the free plan search for an app to provision so we need to select the one that we just created django tutorial1234 and then just submit the order form and what this will do is add this resource to our application okay so let's hit submit give this a second and there we go okay so it has been installed and now what i can do is click on roku postgres like this it's going to bring me to kind of the database view i guess and not found okay there we are everything is good so we have a database we have a maximum size i think of like 100 megabytes or one gigabyte or something like that again for testing purposes this will be more than enough now what we want to do here is go to settings and we want to click on database credentials now obviously you don't want to share this with anyone else but we're going to use these database credentials to connect to our database from django without having to do any major modifications inside of jenk so let me put this on the right side of my screen let's get this not in full screen mode and put this on the left now what we want to do is make it so that all of our data is not stored in this you know local database on our computer but again it's stored in heroku then we can access it from other places as well so we're going to go to settings.pi and let me just make this a little bit easier to read let's move that down and we need to add something uh let me just scroll through here and try to find this okay so where it says databases this is what we want to modify so that rather than connecting to our local sqlite database using our base directory we're going to connect to the database that is hosted on heroic so let's change this engine here first of all to be dot django.db.backends.com then this is going to be postgres like that and then ql okay because that's the type of database that we have then for the name of the database that's going to be the name that we have here from the credentials so let's copy that in the string okay then we need to pass our username password host and port so we're going to type user in all capitals and this is going to be the user that we have here so let's copy our user put that in the string okay next we need to have our password so let's go password like that and the password is going to be the password that we have here okay so let's paste that in uh continuing we need to have the port and the host so the host is going to be whatever host it says here so we're going to copy that okay and then lastly we want to have the port now this port should be the same for everyone but it's going to be five four three two and that needs to go into string as well okay so now that we've done that believe it or not that's pretty much all we need to have this connect to the um the postgres database that we have hosted remotely we don't actually really need to change anything else there may be one thing we need to install but we'll test that out in a second so what we can do now to make sure this is working is we can go to our command line and we're going to use manage.pi just to update the database here on postgres and then we can check here and see if it worked so we're going to type the following command it's going to be python manage.pi and then we're going to type migrate and what this will do is apply all of the changes in our database to now our new database which is hosted on postgres so python managed up pi migrate let me see if i can make this a little bit bigger so you guys can read this okay that's better python managed pi migrate this will take a second and then assuming this command runs fine for you that means that everything is all good and you have connected to the correct remote database now if that didn't work for you you can try installing the following library because i had to do this previously pip install and then this is cop g2 binary for some reason i had to install this previously when i was messing around with this so if that doesn't work try installing this and hopefully that should fix it for you if that doesn't work i'm not exactly sure what the problem is but this should be good okay so now that we have that let me just refresh the page over here and we should see that some data has been added to this database and notice we've gone from zero rows to 48 rows and we have a maximum of 10 000 that we can use and our database size is 8.6 megabytes so that's good that means all the tables that we need have been created successfully and now our database is hosted remotely on postgres so now that we've done that we're going to start setting up a retool application that allows us to view this database and view all the different tables then of course we'll go through all the authentication as i was talking about before so we're going to go to the retool website here so retool.com make a new account again this is completely free you don't have to pay for it or sign in if you already have one i'm going to sign into my account and notice i have a bunch of apps here so i'm going to create a new application i'm just going to make a blank app but you could make this from one of the default ones and we'll go django tutorial like that as my application name okay so i'm brought here now to retool so let me just give you a quick demo of how this works and how we connect to a database and all that kind of stuff so you understand kind of the power of this application so what we can do here is drag and drop different components directly into the app right now it's just showing me some sample data but i can you know modify this i can make it larger i can make it smaller and i can view all of the stuff related to it on the right hand side of my screen so there's stuff like event handlers pagination i can select the different columns i can select the data that i want to use and what retool allows you to do is connect to a bunch of different data sources so if i go down here you can see that i have some sources i've already connected to like a django database github history a managed database that i have but we can also add our own resources here and view multiple resources in the same place so that's what makes this really powerful is that i can connect to a ton of different data sources and then aggregate those data sources together and view them all in one place so let's start by making a new resource here in retool because we need to connect to our database and view information about our different users and tables and all that kind of stuff so just in case you don't see this you can toggle the bottom panel using these buttons or the left panel and the right panel as well but click here where it says resource you should have a default query for some reason you don't have that you can make a new query and go to where the resource is and just hit create new resource and we're going to select postgres because that's the resource we want of course there's a ton of different ones that you could connect to so let's go here and now we need to copy that information from the credentials page again into here so i won't bore you with doing that let me grab all that data then i'll be right back all right so i've added all of that data again you can find that from the credentials tab on heroku now just make sure you check connect using ssl you don't have to modify this but you need ssl otherwise this isn't going to work and actually let me have a look at this right here we are not going to check that we don't need the self-signed certificate that's fine for now though for the name of this we can call this whatever we want i'll just call this django tutorial okay as our resource all right so let me create this resource here and now what we should be able to do is actually send queries just regular sql queries to this and view that data so what i'm going to do here is just write a query that allows me to view all of the default tables that we have in our database just to get a sense of how this works and then we'll come back to this tool later on so for now i'm going to type select star from and then i want to select this from the pg underscore and then this is catalog i don't know if i spelled that correctly i think that's fine and then dot pg underscored tables and this will give you all of the tables that are in the database so let's just run this save and run and when i do that i should get a preview password authentication failed okay so let me just edit this resource because i guess the password i put in is wrong all right so i just updated the password looks like i just made a mistake there when i was typing in let's rerun this though and now you'll see that we actually get some data so let me make this a bit larger so that we can view this you can ignore this warning we don't need that oh we don't need to worry about that for right now i notice we can view all of the different tables that are by default going to be added into our uh what do you call it postgres database so we have django migrations django content type auth permission auth group auth group permissions pg type off user these are just by default in django in the database and then of course if we create our own models uh those will be added here as well anyways that is what i wanted to show you for now we also can make it so that this table shows us all of that if we want so to do that i would just click on this table here it's called table 1. i can say you know tables because we're going to view all the tables and for the data i can remove this and i can actually instead reference the value of this query now the way i reference the value of the query is i put this inside of two sets of curly braces and i type in the name which is going to be get tables.data so now it's accessing this query that we wrote here and i can just view all of the data that i'm viewing down here inside of this table so just a demo there of how easy it is to actually use retool to visualize some data okay anyways now that we have that let's leave that page open we don't need to look at it right now let's set up the authentication and then we can come back here and we can view all the users and stuff that's being created in our database okay so let's go back to vs code uh we can get out of settings for now and we can now go to actually where do we want to do this so sorry for the bit of confusion here i'm just trying to think what order i want to do this in because there's many different ways to go about doing this let's actually get it out of views my apologies let's go to urls.pi here for our website so what i need to add here is a path this is just going to be an empty path again and then this is going to be include and we're going to include django dot and then contrib dot auth dot urls now these are a bunch of pre-built urls that will actually automatically do things like login log out password reset uh there's a bunch inside of here and all you need to do to allow these to work is to write the forms for them or to write sorry the html templates for them so that's why i said we had to make this registration folder inside of templates because now what i can do is make a template called login.html i don't have to manually render this template what will happen is that the login route that's provided by django will automatically render this login page whenever i go to the slash login url hopefully this makes a tiny bit of sense but these are kind of pre-written urls or routes and they will render specific templates that have specific names now those templates need to be inside of the registration folder and they need to have whatever the corresponding name is of the url so login is one of them but you can also override like the forbidden template you can override password reset you can override a bunch of them i just want to override the login one though and i'll show you again how this works so let's go into login and what we're going to do is type extends and we're going to extend from the main slash and let's just make these single quotes to be consistent and then this is going to be based.html okay we want to extend that template we then want to override our two blocks so we're going to say percent percent block title let's end our block uh percent percent and block okay and let me just copy this and we'll do the same with content okay block content like that for the title we'll say log in and then for the content we're going to have a few more things now above the content i also need to write a another tag here and this is going to say load and we're going to load the crispy underscore form underscore tags like that and actually it's going to be crispy forms tags now this is going to allow us to get access to the following two tags uh the tags that we need are the percent percent crsf and then underscore token let me just make sure i spelt that right crsf nope cs cs and then rf token okay and then we need one more and this is going to be form and then we're going to pipe and we're going to put crispy okay let me just code out a bit of html here and then i'll explain why we need this so we're going to have a form and then we're going to end the form okay so what we're doing here for the login page is we want to display a form that's provided to us by django that's why we wanted to have crispy forms now whenever we have a forum that has an action like post because the method of this form is going to be a post form that means that we need to add the csrf token inside now this token is kind of a security feature i won't explain exactly how it works i'm not an expert on it but essentially whenever you have some type of form that has an action and it's going to be hitting an endpoint on your server you need the csrf underscore token so if you get something saying csrf token missing then add this inside of your form now you don't need to load the crispy form tags to be able to do this at least i'm pretty sure you don't but this part you do need the crispy forms tag loaded for so let me just take a quick pause here and explain what's going on so we have our form it has a method of post but if add another method like delete put whatever it'd be the same thing whenever we have that we need to place the csrf token inside of the form now this is kind of a security feature for django i won't explain it much more than that but if you ever get an error saying you're missing your csrf token it's because you need to embed it inside of every form on the page that's going to be actually interacting with the server or sending a request to it and of course this post is going to do that this form is going to do that because it's a post method then we have form crispy now what this is doing is saying there's going to be a variable here passed to this template called form now form is going to contain like the email address the password anything else that you would need to sign in in this case the form is going to have all of that and we put this little pipe here which i believe in django actually stands for filter uh and then we put crispy now what that means is we are going to use crispy forms to display this form that's essentially what's going on now in case you're unfamiliar with this whenever you want to embed a variable inside of your template you do it with two curly braces like this so that's why we're writing two curly braces writing form which is a variable and then we're kind of using this crispy i'm gonna call it a filter could be really it's probably called something else but we're gonna use this crispy filter to actually display the form okay that's pretty much all we need i will just add a few other kind of nice touches here so i'm going to add an a tag this is going to have an href equal to and this will be slash sign up and i'm going to say don't have an account question mark and we'll say create one and actually i realized that i've done this kind of wrong this needs to be a p tag and then inside of here we're going to have an a tag and we're going to create one here so that you can create a new account by clicking on that button okay that's good and then lastly we just need a button here and the button is gonna submit the form for us and allow us to log in so i'm gonna say button type is equal to submit for the class we're going to say btn btn success this just makes a green button and then we'll say log in and when you hit that button it will submit the form so i'm going to save this notice it kind of messes everything up right so i've got a change this manually to make sure these are on the same line let's save without formatting and now the login template has been created okay so pause the video if you need to complete that but going back here urls.pi since we've added these urls now you'll see when i go to the login page it will display this template automatically so let's run our server i'm not sure if it's running already it doesn't look like it is okay so python managed up high uh oops let's cd into website first cdn's website python manage dot pi run server okay and the file name directory or label is incorrect okay let me have a look here and see what's wrong okay so i'm just searching around for that problem kind of a weird error first of all go to your settings.pi and under your installed applications just drag in these two lines here or i guess type them in crispy allowed template packs and crispy template pack this just makes it so we're going to use bootstrap 5 as the default templates okay so drag those in you might not need to add those but for me at least i needed to add those and then what i'm going to do is rerun my server so python manage.pi run server and everything should be good now when you guys ran your server it may have worked for you um i had some other problem that i've fixed it's not really relevant to you it's just in my environment i was running a virtual environment that didn't have bootstrap 5 crispy template pack installed or whatever so i had to deactivate that anyways though now let's see what happens if we go back here we refresh and we go to slash login now when i go there notice it brings me to a login page so we have our login right we have this that we've added don't have an account create one here and then we have the login button and the form is automatically generated for us now you can customize this form if you want but i'm not going to do that in this video this is just kind of the default login form that django will provide you all right so now that we have all that this will actually handle signing in a user for us automatically so we don't need to do that manually and once you have users created you can go to login sign in with them and again that will be handled for you now a few other things we want to add here so go to our settings.pi go to the very bottom so just put inside of here two variables first login redirect url so this is where you want to go after you log in so i want to go to the slash home page after i log in and then we're going to change this to be the log out redirect url and where do you want to go when you log out well i want to go to slash login okay so you can change dynamically where you're going to be placed when you log in and log out and then we just want to add a root for slash home now so let's go to urls.pi and let's just add another path and let's just make this home okay so now if you go to home it will bring you to the same page as when you go to the empty root okay let's save let's what's it saying login is not defined we go to settings.pi i think we're fine let's rerun this everything should be good okay so now let's just have a look at something if i go here and i go slash log out notice it redirects me to the login page so i wasn't logged in so obviously it didn't need to do anything but when you go to log out it would log you out and then bring you back to the login page okay so now that we have done all of that we need to be able to create user accounts so to create user accounts we actually need to set up the route for that ourself so we're going to make a new template here inside of registration and this is going to be called sign underscore up dot html and we'll copy everything that we have from login and just place that into the sign up we'll just change this slightly so for sign up we just want to make it so that rather than having login we have register okay and then rather than don't have an account we're going to say have an account question mark and then we'll say log in log in here and then we'll change this to slash log okay uh for the page we'll do sign up and i mean i guess you can make this sign up as well i'm just going to make it register and that's actually all we need for the sign up page okay so let's save that all right so we now have sign up and we have login we now need to go to our views and we need to make a view here for sign up we actually have to write this ourselves so i'm going to say define sign up we're going to take in a request and since when we go to this page let's have a look here we have a form that has a method of post so that means when we go to the page what we want to happen is if we're having a get request we want to render the page so show the html but if we have a post request we want to read the data from the form and create a new account so we have to handle that here so i'm going to say if the request dot and then this is going to be method is equal to post then we're going to say form is equal to and this is going to be register form we're going to write this form in one second but we're going to pass to this the request.postdata okay now otherwise we're going to say form is equal to register form like that and we're going to say return render request we're going to render registration like that slash and then this is going to be signup.html and we're going to pass to this a form which is equal to our form variable now again i know a lot of this seems confusing if you haven't seen this before what we're going to do is create a register form now when you create these forms what that allows you to do is pass post data to them and then they can automatically validate the data for you and you can simply render the form using this kind of uh you know filter again it's probably not a filter but that's what i'm calling it uh inside of a template so now let's create the form and then this will make more sense so inside of main we're going to make a new file here it's going to be called forms.pi and we're going to make the registration form so the way that we do this is we say from django import and then we're going to import forms like that and then we're going to actually extend the user creation form which is the default form from django so i'm going to say from django dot contrib dot and then this is going to be auth and this is not forum this is from django.contrib.off dot forms i want to import the user creation field so user creation sorry form like that and then i'm going to say from django dot and then this is going to be actually contrib and then dot auth dot models i also want to import the user model okay so i'm going to say class registration form this is going to be uh user creation form like that i'm going to say email is equal to forms dot email field i'm going to say required equals true i'm going to say class meta i'm going to say the model is equal to user and then the fields is equal to and i'm going to list all of the fields that i want to be required uh when we sign in so i'm going to say username email and sorry not sign in this is create an account password1 and password2 okay i know i just went through a lot and didn't really explain it but i'm importing forms importing the user creation form which is the default form provided from django for creating new user i'm then importing the user and user is well where we're going to store different users so this is already built into django we don't have to make a user model it has one for us and all i'm doing here is adding a form to the default user creation form called email because i want this form to show kind of you know custom stuff i want it to show the username the email password1 and password2 and by