Reset Password with Logging Out From Other Devices Lucia Auth Next 14 Full Tutorial

here I will update my password log out from other devices continue invalid password so okay I entered the wrong password let me try it again log out from other devices continue password updated so if I refresh this page as you can see I'm still logged in but if I go to incognito and refresh it I'm logged out hi everyone this is in this video we will Implement a password change implementation that we will also log out other sessions once we change the users password so we will prompt an alert we will say there are two more sessions do you want to log out from these sessions as well thanks well for this recommendation it's actually a good idea so let's do it I'm in the main branch which we have implemented username and password authentication with lu out and I have set up my DB with this script you can grab it from redmi and paste it in the local which we have set up a local postl container which is our database and then I have run the project and you can see that if I go to 3,000 we have a usern name password authentication let's sign up like this and account created successfully and I'm logged in I will open up a new incognito tab and go to Local Host 3000 I will log my account account once more we are trying to simulate like other device or other browser here right so I'm signning in successfully so I have now two Open Session and if I go to there is a studio here I can see that I have a user but in the sessions table I have two session which is fine if I refresh here my session will be there and if I refresh on this Incognito my session will stay there as well so I will quickly create a new component for forget password and I will Define a function here okay that's great let's go to shed's website here and I will go to form here and then I'll go to examples here let's copy it and paste it here so our form schema will be password and confirm password and a new password that's great let's go to next step and we will import Zod resolver and use form like this let's copy these functions as well for the default will use we will say password empty confirm password empty and all of them is empty basically and we will implement this in aat so let's go to UI let's copy this return statement and paste it here and of course it warns us to import the components we are all good now right now so I will make this password password let's get of this one hpe password then I will simply copy this form field and paste it twice one of them will be confirm password and the last one will be new password like this that's great then I will go to my page which is my homepage and for now we won't have a dedicated page for it for a resetting password word so I will import this component like this and we should be able to see a form such as this I will make this spacing to so that it will look better everything seems fine let's create a server action that will update the user password but before that we should be also sure that password and confirm password matches if I go to form schema and call refine here this function will return if this p password match with confirm password and we can also pass some a message like this this is great as you can see pass we get passwords do not match error but we should check this in the server action as well let's create another one reset password reset password actions action. TS so we will say export conses reset password I have created another file is because I will open up a new branch and push it here so that everyone can grab the code from this file without going into up. actions and look for the related code that's why I did this for the form schema we have actually a types folder here index.ts and we can export it from there reset password schema like this go back to our forget password TSX import this new schema and everything seems fine great and I will also import this here as well let's import Zod so we need to validate the form inside our server function as well so we can use this code block here each schema has a function parse and if it does not parse successfully it throws an error and we return this error here and we can make this like this I I I started using this approach which seems to be more developer friendly so I don't check for success and error but I check for success and if it's false we show this I I know this will be an error message anyway so if you pass this condition that means that we the form has validated password and confirmed password matches with it with their s and we have an wallid a new password after that we will will encrypt the new password using argon 2 here we can hash a password like this let's import argon 2 import as argon sorry as argon 2 from argon 2 this should be new password we have a an hash password right now which is great but we will also need to have the user right we can get the user with validate request function like this this and we should await if user is not exist let's return successful message user not found at this step we have a user and we have a hash password what we will do is call DV let's import DV and updates it expects to pass a table we will pass our user table and we will call set function here for the hash password we will give our new hash password and we will also need to have a work Cloud to update the correct users information and we will use equal from DM and we will say user table. ID equals to user. ID that's great and we will return success password updated I will wrap this whole function with a TR catch block I will return success fals and error message inside our catch block so we have AET password right now which is great let's go to forget password component and on submit we can call reset password and pass our values into that let's make this a sync function and if rest that success exist we can call our toast description actually it's it's not dependent on the success value so we will show show a toast whether it's a success or not but the dependent but the variance will be based on success like this but we don't have a success right now let's use default and destructive okay that's great so let's try it here I must say use server let's check string must contain at least okay password is not matching so it says password updated but I entered the wrong password so I actually we forgot to check one thing we didn't verify the users's password after getting the user here we should verify the current password of the user um and how we can do that is we should grab the existed user from database await DB query user table find first where we will use equal table. table. ID and I will pass user. ID ID that we get from the session here we can't use this user because it doesn't have hash password in it and it shouldn't be right way so here we have existed user with a password field now we should check verify if the given current password is matching with the password of the user we can use um two a verify function it expect a hash and we will pass our hash password and then we will pass we use that password like this but before that we should return an error if the user is not found okay since we didn't Define hash password as not null it gives an error but in our tutorial I know an hash password will be there so I that's why I use this exclamation mark but you shouldn't use that here you should put not null in your schema anyway so let's assign it to a variable like this and if it's not exist let's return an error invalid password so let's check I entered the wrong password and it says invalid password password not maging and I entered the correct password and make it a different password so it says password updated that's great but if I go to let's change it once more password updated okay so if I go to if I go to here this one was Incognito and if I refresh the page you will see that I'm still logged in even though I won't be able to log in if I don't know the password a new password and here before updating it we should ask user if they want to log out from all all sessions so let's make it for that we won't call this directly but we will use a new components it will be a dialogue so let's install this Shed from sheden I will paste this command and it will add alert dialog component into my project and it's done I will import this component components from this pad let's copy this example and paste it in our forget password component let's wrap them with a fragment and you may also want to move this into another page like our homepage or or forget password page but I won't do it and this is too much we will get rid of some of them so we don't need to have a trigger so let's remove it let's say update password here do you want to look out from other devices one of them is continue and other is cancel so let's go back to our app I click this nothing happens because we should give a property to alert dialogue so it's open for that we will have a state like this and the default is false and we will pass this into alert dialogue and also we will use onopen change function and we will give set open function to it then I will also go to onsubmit function call set open and I will make it through like this now once continue is Click we will call this one let's make it a sync function on continue and we don't have values anymore so we will use form. get Val use like this and I will go to alert dialogue action click and I will pass on continue function that we have created here so let's see what happens here I will click continue and it says invalid password let me add one more submit continue and it says password updated we didn't log out from the other device yet so we can actually see that it's still there we didn't give an option to not log out from the device so maybe we should have a checkbox here so let's install checkbox from shetan quickly import it and go to alert dialogue and let's use checkbox like this okay let's Flex item Center Gap 2 and okay it's better I'm I'm I'm sure you will you will make this UI better but anyway so we have a checkbox I will add a new field here which is log out from other devices and I will get an error so we will change we will need to change the type as well I will go to here and it said Boolean so now the error is gone as you can see then I will go to checkbox we will use on checked change props and it gets the value is that Boolean make it type Boolean and we will call form set value and we will use other newly defined variable here log out from other devices and we have a stringify values and I have loged all values just to see what has changed or what is not changed here I will hit submit and you can see password conf password and new password and also newly created field log out from other devices but even if I click on this it doesn't change so in this case I pass some options to set value and should validate and I will set it to true and each time we set a new value it will validate this field right away without waiting a change so as you can see now my value is changing as I click on this checkbox great let's get rid of this string stringify log and based on this I will go to reset password action now if I have on values I see log out from other devices here so let me scroll down a bit what I will do is after updating users password I will delete all the sessions session table where session table user ID equals to user ID like this but that means that our users the current users session will be also deleted along with this one this Incognito one and that's why we need to create a new session for the current user and set it to set it into cookies we already know how to do it so I will just paste it here so and we will create a new session using Lucia's create session function and we will pass existed users ID and then we will create a session we will use cookies from next headers to set this cookie so perfect and issue work let's try it Let me refresh this page and also refresh this Incognito here I will update my password log out from other devices continue invalid password so okay I entered the wrong password let me try it again log out from other devices continue password updated so if I refresh this page as you can see I'm still logged in but if I go to incognito and refresh it I'm logged out it's because we have created a new session and set it in the cookie for this session but here we directly delayed the session database even though this incognito tab has some cookie session before I refresh the page when I refresh it Lucia look for this session cookie when it doesn't find any corresponding session key inside database it just remove the cookies that's how it works that's great and we can also add a new logic to it so that if new password and old password matches we don't allow them can actually do it in here refine we can have another refine like this and if I enter same password it says new password must be different from the current password this yeah that's all thank you for watching and I feel really happy when I see your comments below the videos it feels amazing to help you and I also learn new things while recording these videos so that's a win-win for us anyway if you find this video helpful please like the video and subscribe to channel and this was Ur I take care see you in the next videos bye-bye

Channel: Ugur Codes

Views: 404

Keywords:

Id: 421U-b4MqAg

Length: 18min 2sec (1082 seconds)

Published: Wed Mar 27 2024