Django & React JWT Authentication Part 8 - Password Reset

how's it going guys welcome back to this exciting series where we are implementing a production level authentication system using django react and redux all right so in the last section we basically left off with something that looks like this so we did the home page made it look a little better we did the login page and we made it so that you can actually log into the application so my plan for this section is to implement the functionality to reset your password so before i get into all this i just want to quickly go into the simple jwt documentation here so i'm going to put a link in the description for this but something i want to do is make it so that the access and refresh token lifetime is a little bit longer since maybe if you were playing with this app you might have noticed that the expiration is not very long for the access token so you don't stay logged in very long so we're gonna fix that here um so gonna go into the settings here and then right here there's these two lines of codes right or two lines of code right here so this access token lifetime and refresh token lifetime i'm just gonna copy those go back to my application open my back end here and go into my settings.pi file and then i'm just going to want to find where the simple jwt i guess like header is so right here and then right below that i just want to paste these two lines and i want to change this to be like 60 minutes say so the access token will last for an hour and let's fix the indenting here there we go and then another thing i have to bring in this time delta so i'll do that right here so from date time import time delta there we go also i have my front end and my back end running so that i can just see if anything goes wrong and keep tabs on what i'm doing so all right so first thing i'm gonna do is go into the front end here i'm gonna work in this off action so right now i wanna make um i guess an action for resetting or i'm sending an email to request a password reset and then i'm also going to want a function for actually doing the password reset itself so i actually have the jose documentation here so if you remember to reset a password we're hitting this endpoint here and then this right here is going to do the like request it's going to send us an email and then all we're passing in is the email and then for the password confirm we're hitting this end point here passing in all this data so just a little refresher as for what we're gonna be trying to accomplish with these two actions all right so let's get started i'm gonna open up this types here and i'm gonna create four new types one two three four there we go so one of them is going to be let's say password reset all right then one of them is going to be fail one of them is going to be success and then actually these ones are going to be kind of similar so i'm just going to copy and put them here and then i'm going to do password reset confirm so password reset confirm fail and password reset confirm success so these are going to be the types that we have here so i'm just going to bring them in and what's going on here authenticated failures are even declared oops so let's go ahead and remove that right here there we go all right so i'm just going to bring those new types i just created right into here there we go so we have all the types we need and let's see where could i do this maybe right below this login i can start working on the first action here so we're gonna have export or export const rather and then reset password and then all we're passing in here is an email because we go back to the documentation that is all we need to pass here into the request so email there we go all right so we're gonna have to have one of these configs here so i'm just gonna go ahead put that in here and then all we need to do is content type application json so this one's fine we're gonna need const body json.stringify and we're gonna signify the email here and then we're going to do our request so we're going to try catch and then within this try here i'm going to have const response i actually don't even need to do response i can just do oh and it also reminds me what am i doing here so i need to have async dispatch there we go because we're going to be dispatching and i'm going to have a weight axios dot post and then i'm going to just copy this here and then paste that right into here and then and then the api request we're making is auth slash users slash reset password which is exactly what you see here users reset password all right and then we have to just pass in the body and and the config there we go and then we're just going to do our dispatch dispatching the type of password reset success and then if anything went wrong then it's going to dispatch a fail and there we go right so i'm gonna go into the where is it the reducers now i'm just gonna bring in these same um dispatch types that we created just gonna put them right into here there we go and then as for these dispatches they're not actually going to change the state or anything so i'm basically i'm just going to have them all be let's see at the bottom here so case let me just paste them in here to make this easier so password reset success and then case password reset fail so like technically like this wouldn't even have to be done through uh redux it's just i guess nice to see like the different dispatch types happening so that's kind of why i'm doing it like this and then of course the state is going to remain the same so that's all you need to do with the reducers so i'm just going to go back quickly in case you missed that right there all right and then back into the actions here let's make our last action so that's going to be export const reset password confirm this is going to take the uid it's going to take token new password and review password this is going to be an async dispatch then this should be const there we go all right so the config is going to be the same as right here there we go and then we're going to have the body so i'm just gonna grab this one paste it in here and then we're gonna have uid token new password and renew password and then i'm gonna grab this here i could have just copied the whole thing honestly so there it goes we're gonna have an axial stop post it's gonna go to reset password confirm so auth users reset password confirm and we're passing in the body and the config and then this right here is going to be confirm and there we go so just to go over this again so users reset password confirm so that is the end point we are hitting all right so now let's actually use these actions so i'm going to go ahead and open up where is it reset password and reset password confirm because these are the two we're going to work on and i'm also going to open up this login since both of these are going to be kind of similar to this login i'm just going to literally copy this whole login and just paste it right into this reset password i'm going to call this reset password oh i think i spoke that wrong password there we go and then right here we're not going to need any map state to props so i'm just going to have this as null then this i'm going to do in a little bit so we don't need link we're going to have reset password and then i'm going to bring that in here so reset password we only need email here and then another thing i'm gonna do is have a const of request sent so it's going to be a piece of state here so set request sent and then basically when this is true it's going to redirect us so instead of this is authenticated i'm going to have request sent and then within here i'm going to have reset password pass in the email and then i'm going to do set request sent to true and then this basically when we do the request i also have to get rid of this so when we do the request um password reset then it's going to redirect us to the home page and then also at the bottom here i'm going to need to bring in reset password i don't need any of this and i don't need this and then this is going to say reset password don't need this and then instead of signed in i can do something like request password reset all right let's see how that looks so reset password request password reset okay perfect um okay so now i'm just gonna copy this and i'm gonna paste it into here this is gonna be confirm and then this is also going to be confirmed all right and then this one's going to be a little bit different again i'm going to um have this request sent thing and then the function that we're bringing in here is going to be the password reset confirm function and then that's what we're going to be calling here so password reset confirm and then we're also going to have to bring in a few more actually just one more thing so match i'm gonna need and that is because right here i'm gonna have to grab the uid and the token from match dot params so i'm gonna have const uid is equal to match dot params dot uid i'm just gonna copy this down here and then i'm gonna have the token and this is gonna come from params token and then we're gonna pass in all these values so the uid we're gonna have the token we're gonna have new password and re new password so this new password and renew password i'm gonna have to do right now and then i'm just gonna remove this we're gonna have instead of email so what i'm gonna need is in here i'm gonna grab this password one and i'm going to put that in here i'm just going to paste that down in here as well and then i'm just going to have to change some of this up a little bit so this one's going to be new password as the placeholder and then i'm gonna have confirm new password so type is gonna be password that's good then the name this one's going to be renew password and this one's going to be new password that's good and then i'm going to have new password re-new password and then i guess this can be something like reset password that's probably fine and then in here i'm going to have new password re renew password and then in here new password re new password and all right that should be good i believe so let's oh reset password is not defined so that's line 64. ah yes reset password confirm all right perfect let's go ahead and build this so npm run build and then i can test out whether resetting the password works all right there we go so it built so we should have an updated build in here so i'm gonna navigate to localhost on port 8000 here and then i can go to the login and then say i forgot my password i can go to the reset password i'm gonna send that to john doe one three five seven nine one five i'm gonna go ahead click reset password that should have fired off that dispatch so password reset success okay so that worked so we should get an email let's go ahead and refresh this all right there we go so i have a password reset on this link okay so here we have the link that we click on so we have the uid right here and the token there we go so we have new password confirm new password so i'm gonna just set a new password here i'm gonna click reset password i can close this one and now we should get another email to confirm that so i have these two fields and then we have the on submit and that should have run this reset password confirm and that's what went wrong so reset password confirm we have to bring that in okay so i'm gonna have to rebuild this and do this again so all right now let's give this another go so we're gonna do the login or reset password here let's request that there we go i'm going to set the new password here so do that let's see password reset confirm success we got perfect and now we should have gotten the confirmation email there it is your password has been successfully changed so now we know that this actually worked and we can go ahead and log in now so we're going to test the old password i'm going to do log in and the old password doesn't work but if we do the new password i just made there we go we're logged in all right awesome so we can now go to the state we see we have our access refresh token we're authenticated and we have our user information here so perfect it all works so i hope you enjoyed this section make sure to leave a like and subscribe if you enjoy this content and i'll see you in the next section where we're going to implement the sign up and then after that we're going to do the verification all right so thank you

Channel: Bryan Dunn - Web Development Videos

Views: 4,656

Rating: 4.9245281 out of 5

Keywords: 2020-04-22, web development, web application, website, app, application, development, software development, engineering, software, mobile app development, mobile apps, website development, full stack, full stack development, python, django, react, redux, postgres, postgresql, SASS, postman, REST, REST API, API, SPA, web apps, authentication, JSON, JSON Web Tokens, Djoser, JWT, frontend, backend, server, frontend development, backend development, HTML, CSS, JavaScript, ES6, programming, coding

Id: ZUjlLN510Fo

Length: 17min 15sec (1035 seconds)

Published: Sat Jul 25 2020