SvelteKit & PocketBase #1 - Authentication & User Management

what's going on everyone my name is Hunter and welcome to the first episode of the highly requested spell kit and pocket based mini-series in this series we're going to build and deploy a full stack application using spell kit and pocketbase and in this video in particular we're going to be implementing the core user management and authentication functionality into our application which is going to include registration login email verification and password resets so I know that my previous video covered the basics of authentication with pocketbase however we're going to be using pocket bases 0.8 release candidate for this which introduced a ton of breaking changes so I felt that it was best just to go ahead and start over from scratch to to start this series off on the right foot and not cause any confusion now I'm not going to go as deep into the pocket-based documentation as I did in my previous video because the off store has not changed much the methods have not changed much it's more so the collections themselves inside of pocketbase so please do go check out that video I'll leave a link in the description with times stamps to the specific part where I go over the off store and how pocketbase handles authentication and how we handle it on the server side as well and so yeah so to get started we'll just need to do some initial setup at first which is going to include creating our directory structure downloading the latest version of pocket base and then initializing our spell kit application all right so we're going to be creating a mono repo which is going to contain an apps directory and then within that apps directory we're going to have backend which is going to contain our pocket base executable as well as any of the pocket-based configurations that we might need and then we're also going to have a web directory inside of apps and that's where we're going to initialize our smoke application that's where that's going to live so let's go ahead and start out by creating this we're going to call this showcase for now the name may change in the future but for now we're going to call it showcase and then within this I'm going to create an apps directory and then within apps I'm going to create a backend directory and then let's navigate into backend and this is where our pocket base is going to live like I had just mentioned uh so we actually need to download that so we can download that if we go to our browser here and I'm actually going to be downloading the release candidate uh 0.8.0 release candidate two but if you're watching this video in a few weeks or a few days whenever the actual B 0.8 is out of release candidate stage you will just be able to download from the website but I just went to releases uh pocketbase Slash pocketbase releases and then I scroll into assets here and I'm going to download the AMD 64 version so all I have to do is just say curl Dash L Dash o and then pb8 and then I will have the link pasted here and that's going to download a zip file and then we can unzip that zip file with unzip pb8 and then now you'll be able to see that we just have a license PBA and pocket base I'm going to remove pb8 here because that's the zip file we don't need that and I'm gonna do something that's very important I'm actually going to create a DOT get ignore which is going to ignore our PB data directory because we don't want to commit our database to our public git repository right so I'm going to create a git ignore here and I'm just going into ignore PB underscore data for now and then we can go ahead and see if this works we can just dot backslash pocketbase serve and that's going to start our pocket base server on localhost or 127001 and we can actually navigate to this URL in our browser right now if we go here you'll see that it's going to prompt us to create our first admin account and we are now logged into pocketbase so a few things that we're going to do first uh the first thing I'm going to do is to set up an extra admin user I've locked myself out a couple times and I wasn't using a proper email you can obviously edit the database as well but I think it's best practice just to create another admin user so I'm going to create another one with another dummy email account that I have that's just in case uh again you forget your password you lock yourself out okay awesome we can also edit the application settings so we'll change the application name to showcase the URL is fine and we'll save changes there we are going to be setting up mail we're going to be using mail gun but you could use any of the options that pocketbase supports I think they have a few different recommended providers but we're going to be using mail gun for this video just to send our email verification our password resets and our email change confirmations okay so I think this is all we need to do here for right now again if you've used pocketbase in the past you'll notice that things are different I'm not going to focus too much on the differences today we're going to be starting out as if you're new to pocketbase and you have no idea how any of this has looked in the past but for now let's go ahead and go back into our terminal here we're gonna actually instantiate our spoken application so I'll navigate back into the directory that we just created and I'm going to actually just initiate initialize a fresh spoken application and I'm going to call it web and then I'm going to opt out of all this here and just keep these three and then I'll navigate into web here and then we're going to actually do something first I'm going to initiate initialize Tailwind CSS so you can just run MPX svelt Dash add and then add latest Tailwind CSS it'll take care of setting up all the proper Tailwind stuff behind the scenes for you and then we can also just run npmi to install all the dependencies okay so now we have these we can actually install Daisy UI as well that's we're going to be using as our UI component library for this which is super nice super easy to use extend extendable and then the last thing that we need to add for now is going to be the latest pocket base or the next pocket base SDK for JavaScript and again if you're watching this video in the future you may just need to install pocket base you know regularly but for now since this is still in a release candidate stage I'm going to install the next version of it so I'll do npm install pocketbase at next and then we should be good to go ahead and open this up in vs code all right so one thing we have to do first is we actually have to edit our Tailwind config to add days UI as a plugin for this so we'll say required days UI here that way it knows to use days UI and then we can go ahead and start to set up some of the pieces of the application that we're going to need so I think the first thing that we want to do is probably set up our hooks because the hooks are the most important piece to this puzzle everything else you know we'll have to do extra work if we don't do this first so inside of our source directory we're going to create a new file and we're going to call it hooks Dot server.js and we're going to first import pocketbase and then we're going to set up export cons handle which is the hook function it's going to be asynchronous and it's going to take in an event and a resolve and then we're going to set event.locals.pb to a new pocket base instance and it's going to take in the URL of our pocketbase instance itself which is localhost 8090 or 12700 1890 depending on how your host files are set up and then we're going to set the Astor load from cookie method which is basically going to take in the cookie so basically if we have a cookie called PB underscore off it's going to grab that cookie out and then update the off store with information from that cookie if we don't it's just going to set the off store to empty or unauthorized right so we'll say load from cookie and then we'll say event dot request headers.get so right now we're getting the header right we're getting the cookie and then if there's not one we're going to just pass an empty string there and then what I like to do here is I actually like to kind of set some things up for myself so I would say if event.locals.pb.ostore.isvalid again if you're confused as to what I'm doing here I've done this in a previous video there's a link in the description with a time stamp that talks just about this section here please go watch that piece so you have an understanding as to what's going on I just don't want to drag this video out when a lot of people have already seen that one so I'm basically checking to see if the user is valid so if there's a if the off store is valid I want to set event.locals.user equaled to the event.locals.pb.uster.model now before we can do this though pocketbase is going to return non-pojos or non-planal JavaScript objects it's going to have methods and different data data types than what JavaScript is aware of so what we actually need to do is we actually need to serialize those models first or those objects first and convert them into a pojo uh we can do that let me make sure that I'm running on the proper node version here so I am running on version 18.12 so you do need to be I think above 17 in order for this to work what we're going to do is inside of our source directory we're actually going to create a new directory called lib and then we're going to create a file called utils.js and then inside of this we're actually going to export const serialize non-pojos and that's going to take in an object and then it's going to return a structured clone of the object now a structured clone from what I have researched and actually just recently found out about this it's again a deep clone of an object but it's essentially like doing json.parse json.stringify except I believe it's faster and just better overall you don't have to download anything to this this is included with JavaScript after node version I think I believe 17. so now that we have this helper or this utility function here we can now bring this into our hooks so import this and then what we'll say is we'll say serialize non-pojos and then we'll pass in event.locals.pb.offstore.model and again the reason I'm doing this is just so that when I'm accessing the user inside of locals throughout my application I don't need to type this this long thing in I guess I'll just make it a little bit shorter right I cut down on some of the typing and then we'll say else we'll set the user to undefined so event.locals dot user equals undefined and then so once this happens we'll actually await resolve here and then what we're going to do is we're going to say response.headers.set and we'll say set cookie event.locals.pb.offstore.export to cookie so we're doing is we're now taking all the information from the current auth store and exporting into a cookie and then passing it to and then setting it in the headers before we return the response back to the client and then for the time being I'm going to set this to false because our pocket-based server right now is not running on https nor is our application itself and then we can return response so just to I guess go over again what What The Hook is doing here is essentially right now is hooks are run on every single request to our spell kit application what's going to happen first is it's going to set pocketbase to a new pocket base instance and then it's going to grab the cookie from our browser if we have one and it's going to this load from cookie method actually will check the cookie to make sure if it's expired or not and then it'll pull all the information from the cookie and then set that to our off store and then we're checking to see okay is this off store valid so if for example the cookie was expired or there wasn't a cookie at all this is obviously going to be false so it will set the user to undefined but if it is valid it's going to then serialize that model that user model and set that to our event.locals.user and then anything else that happens within our application is going to take place under the await resolve event so basically anything else that we're doing if we're updating the database if we're you know adding to Do's which is not what we're going to be doing in this video but if we're editing the user profile anything else that we're doing server side is going to happen here right so once all that happens what we want to do is we want to take that latest off store because things in the off store could have changed since the last time since the last request right when when all this happens something could have changed then we're going to set the cookie to the latest off store right we're going to export the latest austor into a cookie and return that to the client so the next time they make a request they go through this process again they have the latest and greatest all store in their cookie to load in and that's essentially how this hook works okay so now I think we can go ahead and start to set up some of the other pieces of our application like the layout so the first thing that I'm going to do is inside of my routes directory I'm going to create a plus layout Dot server.js and this is going to take in or it's going to return a or export a load function right which is going to load information and pass it down into our application and this is going to take in locals right and that's the same locals that we were manipulating in the handle function and we'll say if locals.user so basically if this is not undefined in our case right we're going to return the user as locals.user and then otherwise we're going to return the user as undefined and again this is going to give us access to user in the data prop of our entire application right so we can use it wherever we can get the user's name there we can check to see if they even exist that'll tell us if they're you know logged in or not so we can set this for now I think this is all we're going to need here and then inside of our layout dot spell what we'll do is we're going to set up the initial app structure and a lot of these are going to be days UI components but let's go ahead and set the initial structure up so I'm going to set the minimum height to full I believe this is going to go underneath the slot I'm also going to set up a nav bar which can be class of navbar BG base 100 again all of these are days UI components I've just manipulated some of them to fit our specific needs and we're gonna have this is where our logo is going to go so it's going to be an a the class A Button button ghost normal case and text XL and then we're going to just pass this a slash for the href and it's gonna be called showcase and that's going to be our our application's name for the time being all right and then we're going to set up another class with a or another div with a flex none and we're going to do here is we're actually going to check to see if there's no data.user right and this is where we're going to be able to show the um login or registration buttons if their user is not logged in but if they are logged in we obviously don't want to show that so we'll say if not data.user and actually need to export let data here to accept that data prop then we're going to create another div with a drop down class and drop down Dash end and we're going to have two links both of them are going to be classed as buttons one of them is going to be for login that's going to go to our login page once we create that and then the other is going to be for register and that's going to go to our register page once we create that okay and then we're going to say l so basically if there is a user then right we want to show another drop down this is going to be an ad projects button so I'm going to name this I'm going to make a button and we'll say this is going to go to slash project Slash new again we haven't created these directories yet but we will and we'll say add project and then beside that we're going to have the user's Avatar right so we'll say div.class I'm sorry div dot drop down drop down n again and then we're going to set up a label and a class of Avatar there and it's going to yell at us so we can do is we can actually just fix this here in just a second and then we're also going to have a div with the class of wit 10 and rounded full and we'll have an image and we're going to use a placeholder image for the time being we'll eventually update this to the user's Avatar once we get to that step and this is going to have a it won't have a class at all because the Avatar class here will take care of the proper styling of this for us so we can actually do Quick Fix here and I can disable these when I was reading the day's UI documentation the reason this has to be here is because of an issue with the Safari browser apparently it doesn't recognize buttons or it doesn't recognize them if the tab index is not there I'm not sure what the specific error was but there is an issue I guess with Safari that that's why we have to use this and that's why we have to ignore these errors okay so now for the actual menu that's going to drop down from this I'm just going to copy this over here this is basically just gonna be the drop down menu and again we're gonna have to ignore this as well and it's just going to have a few different things it's going to have my projects settings and log out and now we can actually start the application up I believe and we make sure we don't have we're not missing anything we actually are we actually need to wrap this in a container as well our slot or the rest of our application and now we should be good to actually run our application so let's do npm run Dev and then now if we go to localhost 5173 we're going to see that we are on showcase and I think I actually need to adjust the register button here I'm going to change the color of that to secondary and then I'm also going to adjust the theme so I'm actually going to go into the app.html and I'm going to say data Dash theme is light and there we go so now we have our login and register navbar once we're actually logged in you'll see the Avatar in the top right as well but this is essentially the uh skeleton of our application here so now I guess the first thing that we want to do is probably set up the registration page because that's where we're going to actually create our users so let's go into our and I'm actually going to minimize this terminal now so I quit switching back and forth to it let's go into our routes and we'll create a register and we'll have a plus page that's felt we'll also have a plus page.server.js and then for the Post page.s vote we're going to have a div which we're going to actually go ahead and set up the outside structure for the form and then we're going to have like a title at the top uh which is going to say register for an account and then register for an account and then we'll have a paragraph tag we'll set the text to Center and a little bit of margin at the top and we'll say or and we'll set up a link and we'll say log in right we'll say log in if you already have an account right and this will say text primary will change the color of that we'll make the font a little bit thicker and then we'll set a hover cursor pointer and hover underline we'll say sign in if you already have an account we can see what it looks like real quick if we go to our login page I actually made this register sorry register page so register for an account it looks like my Styles aren't updating so let me just save my app.post CSS sometimes you have to do that in order to get the styles to take place so this looks pretty good and again I'm pretty zoomed in right now so obviously it won't be taking up this much screen real estate in your application but um I want to make sure everybody can see it even on mobile devices awesome so we can register for an account now now let's go ahead and set up our form so again I'm going to be using today's UI components for this I'm going to be using the form inputs or the text inputs here and that's going to be inside of our register page here so let's first set up the form so it's going to be a form the action is going to be question mark slash register it's going to hit our register form action that we're going to set up the method is going to be post and we're going to set up some classes here so we're gonna have Flex Flex call Item Center space Y2 with full and padding top two and then inside of this we're going to have our actual inputs so I'm going to actually just copy over one of them and this is going to be our name so the user is going to put in a name we're also going to have an email as well so we'll change this to email the label 4 is going to be email and then the type is going to be email and the name is going to be email and then we're also going to have one for password and password confirm and so we'll copy this down one more time here and we'll say password we'll change up these labels here to password and then we'll copy this again for our password confirm is it password yeah I think it's password confirmed see their password confirm or confirm password I can never remember which one uh which one it actually is okay so we're also going to need a button so let's just set that up too as well uh div and we'll set a width of full and a Max width of medium so that it lines up with the rest of our form here and then we'll have a button the type is going to be submits and the classes are going to be button but in primary and with full and we're going to say register here so now we take a look at this it looks pretty good we have our inputs we have our password fields and the nice thing about this is that we can just copy this over to our sign in page and just keep the email and password and update some links and we'll be good to go so now that we have the front end logic taken care of we actually need to set up the actual registration piece of this pie so what we're going to do is we're actually going to first go ahead into our page.server.js inside of register and we're going to export cons actions and then we're going to set up a register action it's going to be asynchronous it's going to take in locals and request and then what we're going to do is we're going to take out the form data we need to get all that form data out of the registration form that we submit right so what we can say is we can say const body equals object Dot from entries await request.form data it's going to give us access to an object with all of the fields mapped to the name of our registration form and with the latest version of pocketbase we actually have usernames as well and this is again something that I think is debated upon whether you should ask for username at the beginning or just generate one for them and then allow them to edit it later and I think that's what we're going to do first we don't want to add any extra friction to the registration process so we'll automatic we'll generate a random or we'll let pocket base generate a random username for them actually we could probably do something similar to this ourselves actually we could probably just create a generate username helper function here so let's just create that now so instead of our lived inside of our utils we can actually just create and Export cons generate username and what we're going to do is we're just going to generate a random username based off of their name as well as some random bytes right so we'll take in the name and we're going to set an ID so we're just basically get a random ID and we need to actually import const random bytes equals await import node crypto and this is again from the crypto Library that's included with node.js and then what we can set up is we can say random bytes and we'll say 2 and we'll say that two string hex right and then we can just return name dot slice and we'll take the first few characters of the name and then also append the ID to this as well so let's just close that bracket there so This Is Us generating a random username the user will have the ability to change it later pocketbase generates One automatically as well but I think it's just called like user and a bunch of numbers this will give them a little bit more of a custom username but something we'll have to handle in the future is checking to see if the username exists or not but we can take care of that in the future okay so now that we have this set up we can continue on with our registration piece so what we'll do is we'll say let username equals generate username we need to import that from our utils and then we'll get the body.name dot split and the reason that we're splitting this so basically the name could have spaces right and we want to actually just take all the spaces away and then generate the username without any spaces right and we'll say dot join and we'll join it like that and then we'll also set it to lowercase as well okay so now we can set up a try catch and we're actually going to create the user so what we'll do is we'll say await locals.pb.collection and we'll say users create and then we're going to pass an object here so we're going to pass in username and then we're also going to pass in dot dot form data so we're going to spread form or I'm sorry body so we're actually going to spread body and we're also going to add username as well to this we're essentially just adding one object with all the properties of body as well as username and then what we want to do is we actually want to send the verification email but for right now we actually are going to need to set that up first so let's just kind of set that up and then we'll comment it out and we'll set that up here in a second so we'll say away locals.pv.collection users and then we'll say request verification and then we'll pass in body.email right so that to that email address that they just provided to us then we need to catch the errors and I'm just going to console log the errors for now as well so we can see them in our console when they do occur and then we can just say Throw error and there's much better ways to handle these errors again I'm just trying to kind of make the best use of our time here and then what we're going to do is we're actually going to throw a redirect to the login page I actually need to adjust where this just imported from so what's going to happen is the user is going to register and then once they register it's going to redirect them to the actually it should really redirect them to the login page so they can log in and then this request verification is actually going to send out the email to them which we're going to set up in a second and then they'll have to verify that email before we'll actually let them log in so I think now is a good time to go ahead and set up mail gun for our email so mail gun is one of the SMTP providers that pocketbase has listed on their site but I'm pretty sure that you could use any of them we're just going to use this because it's free to get started it's easy to set up and I've used it before so you're going to come to mailgun.com and you're going to want to click get started you're going to go through the account creation process you do not need to add payment info at this point in time you can uncheck this box you only be able to allow to send to five authorized recipients but I'm going to go ahead and register with a new account and then walk you all through how that's going to look okay so now that we've signed up for mail gun and verified our account I had to put in my phone number I think probably because I've made 10 accounts in the past couple days but what you want to do is we actually need to add some authorized recipients to our account here so we can do is we can go into our sandbox this is going to show my I key probably in just a second it may have already shown you I'm not sure but again I'll obviously change that before this video is released but with the free account we actually have to confirm the recipients or verify the recipient's email addresses and what I'd like to do with Gmail is it's a nice little trick I can just put the email I use to create this account I can add a plus sign and I can just say alt for example this is one email and I'm just going to add a few of them so I'm going to have volts I'm going to have Iris I'm going to have Nala and I'm going to have Hunter and I think four is going to be good for now okay so now we have four authorized email addresses that we can use now you can only send emails to these addresses unless you upgrade your account again you can look at other providers if you'd like to see which one is the best pricing I haven't really looked too much into that just yet but that's something that definitely you want to consider so now we need to actually set up SMTP so we're going to select this to get our credentials here it's going to show the SMTP hostname the port the username and the password so let's copy over this username now let's go into our pocket base back end under settings we're going to go to mail settings and then we're going to check this use SMTP mail server box we're going to paste in our username and I believe it was smtp.mailgun .org they are using Port 587 and then the password will copy this default password over and then we'll change the sender name to support at Showcase and then the sender address will actually set to this postmaster username here and then we can click save changes now we can send a test email so let's just send the verification template for example to one of the emails that we created and they're all going to go to the same inbox here it's just going to have a different to address okay so I actually didn't verify these so let me actually verify these first so I have to check agree on all of these email addresses that I added here okay so now that I've confirmed those I should be able to send this email to this address now okay so it says successfully Sent test email and if I go into my inbox now here it's probably going to go into my spam folder once it gets here okay so here's the email it came through finally and I can just say look safe here because again it's coming from a strange address they think it's spam which is fine um it now pops up my inbox and you can see it says hello thank you for joining us at Showcase click on the button below to confirm your email address thanks showcase team click verify and then that's obviously going to be for in this case is going to be invalid or expired because of the fact that it was just a test email but it does in fact get to our inbox which is fantastic so that means that when we register a new user now we should also get this here as well so I'm going to delete this from my inbox so I'm not confusing myself and I'm going to come back to my application and I'm going to create a new user with that email address that I had set up and verified with nail gun okay so we got an error here so let's take a look at what we did wrong here it's saying that the username object is the issue um so it's probably just a little typo on my end if I go to utils yeah so I actually have two if you look here I have two of these brackets so trying to put a bracket in the username and later on in the application we're going to implement form validation which will allow us to essentially run a regex that will catch any of these things being passed into our name for example but for right now we're just going to set this up okay so that should work now okay and we got redirected to a four if we're not fine found that's fine because we haven't set the login page yet but let's just check to see if our username or email actually got sent so let's go into our spam here and we can see that it says verify your showcase email I don't recall resetting the password did I send a password reset I don't believe so but okay so we can see here that it did send all these emails here I'll say look safe this is probably because I clicked on send test email about 10 times while I was waiting but we can actually just go ahead and verify this now so I can click on verify and we can see that we successfully verified our email address so now we go back into pocketbase if we go to our users and we refresh we're going to see that Walt is verified and it also has a randomly generated username Walt w103c great so this is working now we can actually set up a login form as well so let's go ahead and do that and then what we're going to do is we're going to create another user and I'm going to show you how we can verify or I guess inform them that if their email Isn't verified they can't log in okay so let's go into our application let's close out actually I'm going to copy over the email and password from this actually I'll just copy all of this from the register page for now and I'm going to create a login route with a plus page Dot svelt and a plus page.server.js I'll paste all this in and I'm going to just take away the name field I'm going to take away the password confirm and I'm going to change this to login and then I'm going to change up the title a bit so log in to your accounts or register if you don't already have an account so now if we go to login you can see that we do in fact have a login page that takes us to register this takes us to login which is great okay now we actually need to set up some of the functionality of this and we can do that inside of our page.server.js so we're going to say export const actions and we're going to set up a login action it's going to be asynchronous of course and it's going to take in request and locals and then we're going to say we're going to do the same thing we're going to say const body equals awaits object whoops object Dot from entries oh wait request.form data and then what we're going to do is we're going to say try oh wait locals.pb.collection users dot auth with path auth with password then we're going to say body.email and body.password so now what's going to happen is this is actually going to update our off store with that model right that user model so what we can actually do is we can check to see if they're verified because they actually have a verified property on them so we can say if not locals.pb .offstore.model dot verified then we want to say locals.pb.austore.clear so basically we want to log them out instantly so if they're not verified we're going to instantly log them out before we even let the user do any type of interactions and then we're going to do is we're going to turn not verified is true okay and that'll be returned in that form prop if you're not familiar with that how that how form props work or how the form gets uh form data gets passed back into the page through action data you can watch my form actions video I go into that a bit as well as the form validation video we're going to catch the error and we're going to console log the error for now and throw an error and again we'll probably do some error refinements later on in the in the video so don't stress too much about this we'll probably also Implement some form validation as well in this series to kind of catch any of those gotchas people trying to pass in symbols and things like that in their usernames to break things and then if everything is successful so basically if this is not true or if this is true if they are verified then we're just going to redirect them to the home page so they'll be nice and signed in right okay so let's just make sure I think I actually still need to update the action here so it's not going to be slash login instead of Slash register um this all looks good this all looks good everything looks okay and then what we're going to do is we actually need to set up an alert for the not verified right so what we'll do is we'll first take in scripts and we'll say export let form and then what we're going to check for is we're going to say I guess we'll put this underneath of the button I think that'll work just fine if I just put it underneath the button and still within the form though I will say if form dot not verified then we're going to get an alert from Daisy UI so let me just go to DayZ UI and grab an alert component and I guess this would be an error so we'll just copy this over and paste it in and then we'll say You must verify your email before you can log in so now let's go into our application and let's attempt to register with another user and we're not going to verify the email address and we'll try to log in and see what happens so I just registered and now let's try to log in and we can see that we get you must verify your email before you log in uh it doesn't seem to be styled here actually I should probably put that is am I not within my form container at the moment I thought the form had a let me change this Max width uh set the width of full it's the max width to medium and let me actually just re-save my Styles here okay there we go so now it's showing so you must verify your email before you can log in so now let's go ahead and verify that email I know this looks confusing because I'm in one inbox but if you look here at the two I can see that these these went to two different people right so for this one I'm going to verify here I successfully verified the address now I can actually log in and we get redirected to the home page and now you can actually see that we do have this add project button here as well as a nice drop down with a user picture okay great so now we have the login and register set up now we can actually set up the logout functionality as well and that's just going to be an endpoint so let's go into our routes and we'll create a new folder called log out and then what we'll do is we'll create a new file called plusserver.js and this is going to say export cons post it's going to take in locals and all we have to do here is either say locals.pb.ausstor.clear and then we'll set locals.user to undefined and then we'll throw a redirect to uh Slash login so this should clear out our cookie if we open up our Dev tools here and we go to application and we go to cookies we can see that we have the PB underscore off cookie here let me Zoom that in so you guys can see it and then if we click on log out now I want to actually fire off that action so let me go ahead and edit the layout real quick so for our log out button it actually is already set up because I copied it over so we have action is going to slash logout which is the root logout route endpoint here making a post request and it's just going to clear the off store we don't actually have to pass a user ID or anything in there it's just going to handle it all for us so let's go ahead and click log out you can see that the cookie was cleared and we are logged out of our account all right so now what we want to implement is the ability for users to reset their password if they forgot it right and if we look at pocketbase and we come into users we can go to API preview it's going to show us all these methods here and we want to do is we look at the request email change and this is the method we actually have to run here so what we're going to do is we're actually going to set up a different page we're going to take the users to if they say they forgot their password for example and then we'll enable them to put in their email address and then once they put the email address in we'll send them an email where they can go and actually change the password so let's go ahead and set it up inside of our application and I'm going to close out of all these for right now actually except for the login page I'm going to copy this form I'm gonna copy all of this actually and I'll just take out what I need we'll create a new route called reset Dash password it's going to have a plus page dot svelt it's also going to have a plus page.server.js in the plus page asphalt we'll just paste in all this stuff and we'll say reset your password and I think we can just get rid of actually we can just take care of this link and then we'll just say we'll send you an email with a link to reset your password and then all we need is the email form we don't need our email field we don't need password we also don't need to do this form not verified thing right here either and then this will say reset or request password reset and then for the action we're actually going to say reset password we'll have to create that action here in a second but I think that'll be good to go let's look at that page now if we go to slash reset password yeah this looks pretty good so they just type the email in and then it should send them a reset password link so let's go ahead and set up those actions now or the action I guess you could say uh so let's go ahead and say export cons actions on our reset password page.server and we're going to say reset password it's going to take in a request and locals per usual and then what we're going to do is we're going to do the same thing we're going to say const body equals object Dot from entries and then we'll say oh wait request.form data and then what we'll do is we'll set up a try block we'll say I'll wait locals.pb.collection and that's going to be the users collection and then we're going to say request password reset and we're going to pass in body.email and then what we'll do is here for the time being uh we'll just return success is true and then catch the error console log it and then we'll throw an error and again like I said we will fix these up I promise okay so the reason I want to return success is true here is because I want to show like an alert for example if their email was successfully sent so that you know to go ahead and check it um so what we can do is instead of our reset password page we can accept the form prop and then we'll grab an alert component from DayZ UI again we'll grab a success colored alert and then this time we'll say if form.success then we want to show this right and then we say with full Max width medium so it lines up with the rest of the form and we'll say an email has been sent to reset your password okay so let's go ahead and test this out now so if I type this email in we can see that an email has been sent to reset your password and for some reason my styles are acting a little weird today I keep having to resave this okay so an email has been sent to reset your password so let's check our email to see if that did in fact come and we go into a Spam we can see it says reset your password I think this was just sent actually this was sent a while ago oh here it is it just popped up okay reset your showcase password so I can say look safe and then it'll go to my inbox and then I can actually click on this and it brings me to a pocket base type interface and this is what I mentioned that we can actually set up our own custom Pages for eventually but for right now this is functional it works and I can change the password so I'll change it to something else and I click set new password and then I can now sign in with my new passwords I close out of this and I go back my old password was password let's try to log in with that so something went wrong so there was an error logging in but if I type in the right password which is password123 now you can see that we now get back the home page and we have our user logged in so now let's make that a little bit easier for the user to actually go ahead and access that and we can set up like a little link on our login form that'll have them it'll say forgot password question mark and they can click on that and access that page so let's go back into our login form and then we'll put this underneath of password here so above the button we'll set up another div with a width full Max width of medium and we'll just add an a tag here and we'll make the font a bit bigger the primary color and we'll say hover cursor pointer and it'll take us to reset password I actually do hover underline as well and then I'm going to say forgot password and make sure to click that and it'll take them to the reset password page so it's log out now and then now we can see that we have this forgot password button here or this link we can click and it takes us to the reset password page okay so I think that's going to conclude today's video on user management with pocketbase and spell kit this is the first episode of the mini series The Next Episode is going to be we're going to actually manage the user's profile so be able to upload an avatar change the username change the name and things of that nature so that's all coming up in the next episode thank you all so much for watching and I will see you in the next one [Music] foreign [Music] [Music]

Channel: Huntabyte

Views: 14,442

Keywords: sveltekit, sveltekit tutorial, sveltekit crash course, sveltekit load functions, sveltekit endpoints, sveltekit routing, sveltekit form actions, sveltekit forms, sveltekit actions, form actions sveltekit, +server, api route svelte, sveltekit API routes, svelte routes, layouts, sveltekit layout groups, advanced layout sveltekit, pocketbase sveltekit, sveltekit pocketbase, pocketbase auth, pocketbase users, pocketbase tutorial, pocketbase ssr, pocketbase auth sveltekit

Id: vKqWED-aPMg

Length: 44min 17sec (2657 seconds)

Published: Thu Nov 10 2022