Python Django Tutorial: Full-Featured Web App Part 12 - Email and Password Reset

hey there how's it going everybody in this video we'll be learning how to use email to allow users to reset their passwords so Gengo has built-in functionality that can generate a secure token to ensure that only a specific user can reset their password and then we'll see how we can send an email a Django that has instructions for a user to reset their password so let's go ahead and get started so we're going to go back into our projects URL spy module and add some more built-in Gengo views so let's open that up so within my sublime text here I'm going to open the

Django project URLs so this is the URLs module where we have the admin route register route and things like that so just like our login and logout views down here towards the bottom these password reset views are built into the off views that we've already imported so we're going to create a few different paths using these built-in views and I'll explain along the way what each of these do so there are a lot of them so I'll try to keep this organized as we're walking through them so first let's

create a URL pattern called password reset so I'm going to create this down here below our login and logout views and I'm going to use our logout view as a template here to get started so I'm going to paste this in and now we want this path to be password - reset and the view that we're going to use here comes from off views as well and this is going to be password reset view and for the template name here we will put this in users forge / password underscore reset dot HTML and for the name we will simply do password underscore reset now this is a very long line so let's split this up so I will split this here and also after our off views I'll split that they're still going off the edge there a little bit but that's better than it was so this will be a route that provides a form for our user to fill out that will send a password reset instruction to their email so we specified that we wanted to use this password underscore set template so let's create that and we'll create that in the same place that we created the login and logout templates so that is here in our users app and in our user templates so in our users templates I'm going to create a new template here and I'm gonna call this password underscore reset dot HTML and within this template we're gonna have a form for filling out our email address so I'm gonna grab one of our other templates as a starting point so I think the login route would be a good starting point so I'm going to copy that template and paste it into our password reset template and now I just want to make a few changes here so the legend I will change the legend to reset password button here on the submit form to request password reset and we also don't need this link here at the bottom so I'm just going to remove that div that is underneath our form and save that okay so now that we've created that path with the built in view and also created the template we also need to create the page for after this form is submitted successfully so this will just be a route that confirms that the email has been sent and tells you to check your inbox so we need to create that so let's open up our urls module again here and this route will be very similar to the one that we just created so I'm going to copy this and paste this in now this still looks a little weird let me try to split this up a little more here ok so that looks a little strange but at least you all can see everything on the screen at the same time if I do it this way okay so like I said this next route is just going to be the page for when our password reset form is submitted successfully and this route will just confirm that the email has been sent and tell us to check our inbox so we can set this equal to password reset forged slash done as the URL for the route that we want to handle this is going to be password reset done view the name of the template that we're going to use is password underscore reset underscore done dot html' and the name that we will use for this route is going to be password underscore reset underscore done so now let's create a template for this password reset done view so again and our user templates let's create this so I will create a template in here called password underscore reset underscore done dot HTML so in here this is just going to be an informative page there aren't gonna be forms or anything like that in here so I think we can just copy the logout template and reuse most of that so within our password reset done template I'm going to paste that in now I'm actually just going to remove everything inside the content block here and I'm just going to put a bootstrap alert on this page so I will put in a div and this div I'll give a class equal to alert and this will just be an alert - info and within this alert I'm just going to say an email has been sent with instructions to reset your password okay so with those two routes complete let's actually pull this up in our browser and check if this is working so it isn't quite going to work just yet but I want to make sure that the air that we receive is at least what I expect it to be and that we haven't messed anything up along the way so let's make sure that our dev server is running and it is so now let's go back to our page and let's go to forge / password - reset okay so we can see that we get a form here now if we try to fill in this form and submit it then it's going to give us an error because it's going to try to reference a path that doesn't exist yet so I'm gonna fill this in with my email so khorium Schaffer at gmail. com and I will submit that then we can see that we get an error that it's looking for a password underscore reset underscore confirm route and if we look in the place where the actual error occurred which is down here in this template rendering then we can see that it occurred because it's trying to create a URL to this password reset confirm route with these weird values here and the name of the template that through this error is called password reset email HTML so that is a template that Django is using in the background to create the email to send to the user so that they can reset their password and when it's trying to create that email from the template it runs into an error because we don't have a route called password reset confirm and not only is it trying to access that route but it's also trying to pass two different things into the URL parameters so one of those things is called this UID be 64 and the other parameter is one called token now these are two parameters that we need to accept in our URL so that we know that the user who requested the password reset is the person trying to access that page so basically it's adding a layer of security to these routes the UID be 64 is the user's ID encoded in base64 and the token is the token to check that the password is valid and these are required since the view is expecting them so let me create this route that it's looking for and this will make more sense once we see this an action so like I said before these error pages are very useful for following the trail of exactly what changes we need to make in order to get things working so to add this route let's pull up our project URLs module again so I will pull this up and go to our other two routes here and now we need to create a route

for password reset confirm so let's just copy one of our other password reset routes here and paste in another one so now we want this URL to be password - reset - confirm and remember I said that it took in - URL parameters so within our angle brackets here one of those parameters that it is expecting is UI DB 6 4 and the other so Forge slash again another angle brackets here you put the trailing slash there at the end the other one is touken so you have to accept those URL parameters there because it expects those so now the view that we want to handle this is going to be password

reset confirm view and the template that we're going to want to use is within our users templates and this will be password reset confirm dot HTML and the name that we all set for this is password reset confirm and make sure all of that is spelled correctly okay and just like our other routes let's create a template for this and we called this template password underscore reset underscore confirmed HTML so within our user templates I'm going to create a new file and this is password underscore reset underscore confirm dot HTML and this one is going to have a form for us to actually reset our password so let's copy one of the templates with a form and I'm just going to use the password reset form as a starting point so back in our password reset template I'm going to copy that and paste that into our password reset confirm template and the only thing that I'm going to change in here is the text that is on our submit button so instead of request password reset this is actually going to be the form that resets our password so I'm just going to say let's see reset password okay so now that we have that password reset confirm route that password reset email template was trying to create now let's try to resubmit our password reset form and see what we get so I will go back to the browser here and reload our password reset page and now let's submit the password reset for that email one more time okay so we're still getting an error but this is a different error this says connection refused now this error is less helpful than most of the other error pages but I can tell you that what's going on here is that it's trying to send an email but it's failing so right now we don't have an email server or anything like that to send email so at this point you have some choices that you can make there are a lot of different ways to send email now in this video I'm to be using Gmail now if you don't have a gmail account then you can create one and use these same constants with your username and password now if you don't want to use Gmail then there are ways that you can set up your localhost to be used as an email server with Django but I feel like using something like Gmail is a better example of how this is actually going to be done in production and it also gives us practice of actually sending emails but just in case I'm also going to link to the Django documentation on how to set this up on your localhost just in case some of you want to do it that way but with that said in this video I'm going to be using Gmail okay so to do this with Gmail depending on how your account is set up you might have to let Google know to expect sign-ins from a Python application so let me pull up my browser to show you this so I have searched google app passwords here and by searching that there are instructions for how to sign in to your Google account through different applications now if you don't have two factor authentication then you can just tell Google to allow sign-ins from less secure apps but if you do have two-factor authentication which I have and which I would highly recommend by the way then you can create a password specifically for the application that you want to sign in from and that is what I did so the link to do this is the third link down here that says app passwords sign in and the other two pages up here are just two links with instructions and they'll just link you to that third page eventually anyway so I already went through that process and have put my password for this Jango app in a private environment variable on my machine so once you have gone through those google instructions that allow you to sign into your Gmail through a Python application and you have all that setup then now we can open our project's settings dot py file and set a few variables so I can open our projects settings dot py and I'm going to scroll all the way to the bottom to set a few more variables here that will set up our email so I'm going to say email underscore back end is equal to and within a string here I'm going to say Django cor dot mail dot backends dot smtp. gmail. com that is a class there at the end okay and now I'm going to set an email underscore host and these are all caps by the way so set an email host to smtp. gmail. com and now we want an email underscore port and we're going to set that equal to five eight seven and that is an integer not a string and lastly we will set one called email underscore use underscore TLS set that equal to true and now you need to pass in your username and password now for the username and password I'm not going to actually type those out here for obvious reasons because I don't want anyone to have access to my email so for this information I put this in an environment variable and I have a video on using environment variables to hide sensitive information for things like this so if you don't know how to do this then I would just give that video a watch so to access these I'm just going to say email underscore host underscore user is equal to and access those environment variables I can simply say oh s dot environment get and I put this an environment variable called email underscore user so now I'm going to copy that and for the next line here actually I'll just copy this entire line for the next line we are setting the email host password and the environment variable that I set for this is email underscore Pass and this email host user here this is actually your login email address for Gmail so be sure that you have an email address set for that value so with those settings set I should now be able to send an

email with Django and get this password reset email so let's try this out so first of all let's make sure that our dev server is still running and it is so I'm going to open up our browser go back to the password reset page try to send this to Cory M Schaefer gmail. com again I will submit that and it took a little second there but it says that an email has been sent with instructions to reset your email okay so now if I open my Gmail which I have open here in the browser we can see that this has already come in if it hasn't come in yet it might take a second you can just refresh your email until it comes in if it doesn't come in then you might have to go through those steps again and see if you miss something there but we can see that I got an email that says password reset on localhost port 8000 so if you were actually doing this from a website then this would actually be the domain name here so if I click on that we can see it says you're receiving this email because you requested a password reset please go to the following page and choose a new password your username in case you've forgotten is kori MS so I can click on this password reset link here and we can see that it's going to password reset confirm and then it has those two values in the URL so that's that UUID B value and then the token so it created those for us and now when we click on this it'll pass those two that route so now if those tokens and everything were correct which they'll only be correct if they come from your email so they know that it's you trying to change your password if they are correct then now we're redirected to a forum or if we can actually reset our password so I'm going to set this to something different so I did have testing one two three now I'm going to use capital testing and three two one so and then just confirm that so capital testing three two one and reset okay so finally we got to the last step and we got an error but this is going to be super easy to fix this is just one last route called password reset complete that tells us our password has been successfully changed and that we can log in with a new password so let's create this one last route and we should be finished up so let's open up our projects URLs module again and we need to create one last route so I'm going to copy this route here actually this one has a bunch of variables in the URL I'm going to grab this password a trout instead and paste this in so this last route here is going to be password - reset - complete and the view that we want to handle this is password reset complete view and for the template name we will set this equal to password underscore reset underscore complete dot HTML and for the name here we will do password underscore reset underscore complete and save that okay and just like the other routes let's create a template for this so we called this template so and within our user templates I'm going to create a new file this is going to be password underscore reset underscore complete dot HTML and this template is just going to be informative so it doesn't have any forms or anything like that so that's very similar to our password reset done template so let's just copy from there so I've still got that password reset done template here so I will copy that and paste it in here so currently on this page we just have an alert so I'm gonna have an alert on this page too and just say your password has been set and now we can link them to the sign-in page so right underneath that I'm just going to do an anchor tag and do a code block here and have this be a URL to our login page and then for the text of this link I'm just going to say sign in here and save that okay so with that last page created let's walk through all of this one more time and I'm going to point out every page that we are on throughout the whole process so I'm going to go back to our browser and let's go to our main page here and then go to forge / password reset so this here is the password reset page that displays the password reset template so now we'll fill out the form with the email that we want to request the password reset link be sent to so I will submit that so when we submit that form it sends the email and it directs us to the password reset template that just gives us this information that the email has been sent so now we can actually go to our email and see the message that was sent so if I go to my email then I've got one new message here so again this is a password reset on localhost so I will go here and click on the password reset link and now we're being asked to create a new password for our account so this is the

password reset confirm template and lastly if we fill out the new password so I'll do the old password of testing three to one and reset password then that resets our password and now we get redirected to the password reset complete page and this is the last page in that process and from here we can click on sign-in and if I sign in with that new password then if everything worked correctly then you should now be able to log in with your new password okay so that looks like that works oh that's awesome so now that we're done with that there's just one more thing that we need to do we haven't actually created a link anywhere for the user to reset their password and most web applications have this link on the login page since that's where they'll go to sign up and so I'm going to put a link there for them to reset their password if they forgot it or just want to change it so let's go to the login template and put that there so I'm going to open this up I'm going to close down some of our tabs that we have loaded up here now I'm going to open our login template and I'm just going to put this reset password link right after our submit button so I'll just even put it right in the same div so here's our submit button here to login and right underneath that I'm going to just put some small text here and I'm going to give this a class equal to text - muted and I'm also going to give it a margin left of 2 so within there let's create a an anchor tag so I'll create an anchor tag and the URL I will create a URL here and we want the URL to go to that password reset route so password reset and the text that we can put for this link I'll just say forgot password question mark okay so once we save that let's go back to our browser and let me log out and go back to the login page okay and it looks like we got an error here so reverse for password reset not found okay so that is I put a dash there that should actually be an underscore so back in our login template instead of URL for password - reset that should be password underscore reset is what I named that route so now let me reload that so now we can see that right beside the login button there is a link that asked if you forgot your password so if you forget your password or want to reset your password then you can just click there and it takes you to that

reset password form where you can type in your email and request your password reset link and at that point the user would go through that whole process that we solved before okay so I think that is going to do it for this video I hope that now you have a good idea for how you can create password reset emails using Jango now this is a nice secure way to do these password resets since Jango handles all of that token creation and everything else in the background it's definitely a feature that a lot of people overlook on applications but it's one that you're definitely going to need at some point so you may as well learn how to do it now and that really does it for the base functionality of the application that we've built now in the near future I'm going to release further videos on some improvements that we can make to this application so when it comes to web applications there's almost no limit to the improvements that you can continue to make so for example with this application we'll go over how to write unit tests for deploy this application on multiple different platforms we could learn how to send longer running requests off to a message queue and make it asynchronous we could add a commenting system a search feature there are just all kinds of things that we can do with this application in the near future so if you have any suggestions for future videos that you'd like to see with this application then feel free to leave a comment below and I'll do my best to work on a tutorial for that in the near future but if anyone has any questions about what covered in this video then feel free to ask in the comment section below and I'll do my best to answer those and if you enjoy these tutorials and would like to support them then there are several ways you can do that the easiest ways to simply LIKE the video and give it a thumbs up and also it's a huge help to share these videos with anyone who you think would find them useful and if you have the means you can contribute through patreon and there's a link to that page in the description section below be sure to subscribe for future videos and thank you all for watching