SvelteKit Authentication Tutorial | Firebase Auth

what's good team welcome to another small James coding tutorial where today we're going to be talking about svelt Kit authentication with Firebase we're going to cover everything you need to know about implementing firebase's authentication into your spell kit project so that you can have private routes we'll learn how to do private routes handle sign up sign in reset password by email if you've forgotten it updating your password from within a private route and same with updating your email and ultimately just tons and tons of other best practices that are great for you to know so here's just a really quick demo of the finished project we can see that it's not styled but all the functionality and logic is there we can sign up and register a user or we can already have an account and log in we can click the forgot password button if we've typed in an email but what we're going to do is just sign up a new email so it's going to be new email dot gmail.com we're going to give it a password we're going to make sure that the password is the same if it's not the forms will not work we could submit that account and then we get brought to this private dashboard route where we can do all sorts of things we can see that if we come into our Firebase project we have a new user which is our new email.com so that's perfect we can from here update the email so new email to gmail.com we could submit that that gets updated and if we reload this page we can see that it's updated here as well just there equally we can update the password so before it was one two three four five six now it might be nice nice I can submit that uh and that will have updated the password I can refresh the page and the user is persisted we can see that we get a nice little loading screen and then I can log out to the front screen and if I try to log in again with new email to gmail.com and my new password nice nice and submit we once again get logged into our application now it's all protected so if I try to come to a private dashboard without being logged in we can see that we just get brought straight back home to the home screen and the authentication login screen so if you're looking to add authentication to your spout kit projects this is by far the easiest way to do it and it's totally protected 100 secure and fully functional so if you enjoy the video don't forget to like and sub super appreciate it let's get into it so to dive into the video the first thing I've done is opened up a terminal just here I'm inside of a directory that I want to create my project in and we're going to start off by running npm create spelled at latest and we're going to name our project which is just going to be spell kit auth just like that we're going to click enter install the required packages we're going to select a skeleton project we're not going to have any type checking we can have linting prettier yep sure playwright no and no testing and now we can CD into a felt kit off just like that and we can open that up inside of our Visual Studio code editor just here so now we can see we have all of the boilerplate code to run our spell kit project we have all the source files just here everything we need so the next thing we're going to do is initialize Firebase so now to get started on initializing our Firebase project we're just going to come over to Firebase in Google load that up that should log you in if you have a Google account I already do otherwise you might have to log in and what we're going to do is Click get started just here that's going to take us to the console we're going to add a new project name the project which is just going to be spell kit auth just like that continue we don't need any of the testing for this particular one if you're building a big application you can absolutely do that now we're just going to let our project create and then we can configure the authentication so now that's all done we can click continue and that will take us over to this home page just here where we have you know authentication firestore we've got some stuff over here let's like build all these different categories and the first thing is we're going to add authentication now if you wanted to add a database you can use the cloud Firestorm I'm going to make a follow-up tutorial on how to do a full stack project with both of these so stay tuned for that but in this case we're just going to focus on the authentication so we'll click here that's going to take us through to this page we'll click get started that will initialize the authentication system for us and what we're going to do from the screen is Click email and password we're going to enable that and then just click save so now we can see that that is enabled for us we can come over to you uses and see that we have no users here as we create them they will show up here but now the next thing that we have to do is come back into our project overview and decide what kind of Firebase implementation we're going to be having now you could do iOS Android or web we're going to need web so we're going to click here we're going to name our apps felt kit auth just like the regular name we don't need hosting and we're going to register it and now we're just going to follow these instructions and configure all of this so here we can see that we need to run npm install Firebase so we're going to copy that command and open up a new terminal and in here we're just going to run npm install Firebase and so now that's all done we can see that we have a node modules file come up so that's all good and the next thing we're going to do is create a file where we can configure all of this information so for this file what we're going to do is inside of our source folder we're going to create another folder called lib and in here we're going to have another folder and that one's going to be called Firebase and inside of here we're going to make a new file called firebase.client so that it only runs on the client side dot JavaScript so this is going to be a little Javascript file and in here we're just going to go ahead and copy all of this straight across just like that now we're going to have some further configuration to do on this because as these keys are they would not be protected and so if you were to push this code to your GitHub everyone could see all of these keys so that's not very secure so we're going to create a new file called dot EnV and we're going to copy all these Keys across into them so we're just going to go like this copy everything over and we're going to change the naming convention so that all of them start off with Veet underscore and then the name of the key so that's going to be veed underscore auth domain Veet Veet underscore project ID underscore storage bucket veed underscore messaging sender ID and finally feed underscore app ID just like that and so now I can go ahead and just delete all this other stuff just like that and now we're going to replace all of these quotations with just equals signs because you do not need the quotation inside of a EnV file for these keys and we're going to do the same and at the end of the file we're just going to remove all of the extra mumbo jumbo in there so just like that so now we have this dot EnV file and we can read these keys in from our EnV file by doing the following we can say import.meta dot EnV y dot name of key so Veet API key just like that now I'm going to copy that and do the same for this one so this is just going to be underscore auth domain this one will be project ID and here we're going to have storage bucket messaging sender ID and finally app ID just like that so now we have all of our keys protected and we're using our environment variables you want to make sure that dot EnV is added to your git ignore so that file does not get pushed to GitHub and now the next thing we're going to do is slightly less conventional so we're going to initialize Firebase slightly differently we're going to start off by saying let Firebase app just like this and now we're going to run some Logic the reason we want this logic is because of the way svalk initializes Firebase it's just a little bit fiddly so sometimes it can actually initialize a project that doesn't have any of our keys wired up correctly so it would just be an empty useless project so we just want to make sure that if that happens we delete it and we initialize our project correctly so we're going to run an if check that says F not get abs just like this and that's a function call and that is going to be imported from Firebase app so if that's not true and more specifically we want to get the length of that parameter because that's going to be an array so if that array is zero or empty then we want to run some logic and otherwise we want to run some other logic so in here what we want to do is we just want to say Firebase app is equal to and now we're going to initialize our app and pass in the Firebase config file and if the else statement is true so if we already have an app initialized what we're going to do is just say Firebase app is equal to get app just like that so it's not the get apps it's just the get the current APP we're going to import that up there as well and now what we're going to do is actually just delete this app so that will also need to be imported we're going to pass the Firebase app in there and then we're just going to re-initialize it properly because this app that already exists will not be configured with all of our keys so if we just re-initialize it with all of our keys then we should have a perfectly functioning Firebase config file so now the next thing we're going to have to do is configure some authentication Imports so what that's going to look like is we're going to import get auth just like that from Firebase slash auth and we're also going to get set persistence and in memory persistence just to handle some login stuff adequately and now down here what we're going to do is after we have initialized our project we're just going to say export const auth is equal to get auth and pass in our Firebase app and so that's going to give us an auth parameter that we can access from other files now that we have initialized Firebase so with that file all working we should actually be good to run npm run Dev and we can see that our project has started up on localhost 5173 so we can paste that over here and we see that that brings us to this Volcan home page which is just this and so if I add James and there we get James now we're going to be getting rid of this momentarily and instead what we're going to be replacing it with is a file in here that is layout.s felt now if we use the plus key that's going to be a layout that wraps everything in our entire project so files in this routes folder that start with the layout are special so this layout is going to wrap everything so we're going to first render out all of our content just in here with a slot component so we can see that that comes back on the page if we added something up here that said James we can see that James will get added on top and this would be consistent for any other pages that we had and this layout folder is where we're going to execute a lot of the second half of our Firebase initialization content so we're going to do that by opening up a script tag just in here and in the script tag the first thing we're going to have to import is an on Mount so we're going to type import on Mount from svelte and now we're going to call this on Mount and we're going to pass it in an arrow function so an anonymous Arrow function and this is where we're going to subscribe to our Firebase authentication so we're going to say const unsub scribe just like this is equal to oauth so we're going to access that auth from this other file over here so we'll have to import that that's going to be import auth from dot dot slash lib slash Firebase slash Firebase client so now we have access to auth and auth has a method that is called on auth state changed and this accepts a user as an argument and in here we can set the user to a store that can be accessed from any component so now that we're in here for the second what we're just going to do is console.log the user and we're actually going to now initialize our store that's going to save that's going to persist our user across all different components so for that we're going to create a new folder in here that's called store just like that and I'm actually just going to change this to stores in case you want to have multiple and we're just going to have one file that is authstore.js and inside of the store.javascript file the first thing we're going to do is import writable just like that from the svelte store and that should be a lowercase w and we're also going to have to import once again our auth from our special file so here we can see the import is just down there like that so that's perfect and now we can go ahead and Define our store so we can say export const auth store is equal to writeable and we can just pass it in the initialized value that we want so in my particular case what I'm going to do is have a parameter called is loading and that's going to be set to true and we're going to have a second one that's called current user and that's just going to be set to null so initially we're not going to have a current user so now that we've created our store the next thing we're going to do is initialize some auth handlers so I'm going to say export const auth handlers just like this and this is going to be equal to an object and in here we're going to have a whole lot of functions for example sign up and that's just going to have the value which is an anonymous function or an arrow function that we can call it to run these methods so when we sign up a user we're going to have an email and a password so we're going to accept those two things in his arguments it's going to be asynchronous so we're going to add async to the front and in here what we're going to do is we're going to go await create user with email and password we can see that that imports from the top and in here we're just going to have to pass in the auth the email and the password so that's our first function the next one we're going to need is a log out and so that's going to be the same async this time we don't need any arguments and we can just await sign out and pass in the auth just like that the next one is going to be reset password and this one is going to or well they're all going to be async this one's going to take an email we're not going to need a password because this is if you've forgotten your password so this is the send email reset password and in here what we're going to do is await send password reset email and that's just going to be auth and email the next one is update email that's going to be async email error function await update email just like that that's going to take the auth and the email and then the last one is going to be update password just like that and once again async password and we're just going to await update password pass in the auth and the new password so these are all of our auth Handler functions and we can import them into all of our different files so now that we have our store we can now come back into our layout file and add the end of our subscriber logic here so basically what we're going to do is once we get this user so when we authenticate we get the user and now we're going to set the user to our store so we can import auth store from dot dot slash stores slash or store.js just like that and now we can run auth store dot update we can take the current value of the store which is just going to be current and in here what we can do is return and we're just going to spread current so that we persist everything that is currently in there that doesn't need changing and we're going to say is loading is false and we're going to say current user to user that we have accepted just up here and so just like that we'll have saved our user to our store and that can be accessed from any component so now that we've done that we have no issues that's all going to be working the next thing we're going to do is start creating some routes so in here what I'm going to do is create a component and this is going to be an authentication component and this page is the page that runs at the Slash path so no path it's our home route and so I'm going to create a new folder called components and in here we're going to have a new file and it's going to be auth.s felt just like that so now that we have that we can render out auth just in here that comes up on the page and we're also quickly just going to come into this section just here and we're going to add a style tag to our entire component and we've got two things to do we're going to select everything we're going to say box sizing the Border box margin is going to be zero as is padding so that will push everything to the corner and the next thing we're going to do is Target the body which is where everything is rendered and we're just going to say Min height of 100 view height so occupies the full page we can see that that works by setting the background equal to Green so our whole page has gone green we obviously don't want that but what we will do is give it a display a flex a flex direction of column and that should just about do it so now we can come back into our page and our auth and actually I lie we're actually going to come into the layout and just first wrap the slot inside of a main container and so that's just going to be the main component just like that and then here we're going to give this a class of main container and then down below we can have a style tag and Target main container and I'm actually just going to jump that content here I'm going to just remove that and instead just paste it in here I think so we'll actually set the page height here and just say display flex and flex Direction and column so this should be equivalent so if I say background green we would expect the full page to go green and it does so that's cool so now we have our main container we've got our auth working we can come into this component and start defining our layouts so what we're going to do at the top is have an H1 well actually I might just wrap everything inside of a div first and inside of the div we're going to have a form just above the form we're going to have a page or an H1 tag that says sign up for the second and now we're going to have a whole bunch of input labels that we're going to have our actual inputs in so here we're going to have a label and we will have an input inside of that label just like that so the input is going to have a type of equal to tick so this is going to be for the email we're also just going to give this a placeholder equal to email I might as well capitalize that now we're going to have another label just below and this one's going to be a type of password and this one's going to be password so here we can see our sign up form is coming in we're going to give this a class name of it's sign up we're actually even better container and we're going to open up a style tag down below that is dot container so inside of our DOT container here we're going to give this also a display of flex a flex direction of column actually even better what I'm going to do is give this a display of grid and I'm going to say Place items Center so that's going to Center our whole form we also want to give this a flex 1 so that it occupies the container the width of the whole container and actually that seems to be automatically splitting things so I might change that back to flex Flex Direction column and instead what I'll Center it with and instead I'll Center it with align items Center justify content Center so now that's all smack bang in the middle of the page the next thing we'll do is Target the form inside of the container and just give that a display of flicks and a flex direction of column so that these elements set one above each other now I'm not really going to focus too much on styling this but the last thing we'll need inside of this is a button that says submit just like that so now we have a cute little submit button and what we will also need is an optional input so we can do that by adding uh if and if register is true which is a variable that we haven't defined yet we can close the F tag and then here we can just have a third one which is password with but the thing just says confirm password so this is if you have to add a confirmed password so currently it doesn't exist because we haven't initialized that so we can add a script just here and we can say let register equal false just like that so register is false and then if I made that true we can see that we get the confirm password element just there so this is our little auth component what we're also going to do is just bind all these values so value is equal to email we're going to add this to the password Here password and obviously I'm going to initialize these variables in just a second so this one's going to be confirm password and now up here we can say let email equal to empty string let password equal empty string and let confirm password equal empty string so now we have these three things and as I change them the values all work and that is cool what we might just do is underneath the form here we might just have a paragraph that says uh don't have an account question mark and then maybe another paragraph inside of that that just says sign up and I'll just change that external one to a div so here we have don't have an account sign up and we can put this inside of an if else depending on whether or not registration is true so we can say if register is true we can add an else block just like this and then we can add a close the F and we can put this one inside of the register so if register is true then we actually want to have login and in here we can have a div that says already have an account and then we can have the paragraph tag in here and that says sign up sorry log in just like that so now what will happen is if we change this to false we would expect to swap around and we can see that it does sign up never and if I change that to true we get the login message and we can actually do the exact same just here we can make this a JavaScript parameter and we can say register if register is true then we want it to say register and if it's false then we want it to say sign up just like that so register is true and then if we say false we would expect this to go away and this text down here to change we can see that it does and the last thing that we can do is just bind some functions here and that is done by typing on click just like that we pass in an arrow function and in here we can just say register is equal to false so that will swap it back and we can see that if we do that we'll get this little error here that says we just have to pass in a different function so we can just say on key down you can pick any of them I'll just make sure that goes back on key down and we'll just pass in an empty Arrow function to satisfy that so now that little error is gone and then we can just copy this and paste it inside of this div here and obviously set that to true so now clicking on this is just going to swap us around to our other sign up form so that's cool for our sign up form the next thing we're going to do is wire up our function handle submit form just like that now that is going to be an asynchronous function because we've got some asynchronous calls and in here what we're going to do is register our user so obviously we're going to say if not email or not password we just want to return nothing because nothing can happen and we actually just want to do a third check that says if it's register and not confirm a password so if register is true and we don't have that and I think that actually needs to be an or then the submit button won't work so that's all good after that we can say if it's register so if register is true and password is equal to a confirm password so if both of those things are true then we can run our register logic and otherwise we can have an else block where we run our login logic so in here what we're going to do is we're just going to say try and catch so we're going to try and catch the registration if it's here we're just going to console.log the arrow otherwise what we're going to do is we're going to await off handlers so these are what we defined before we can import that at the top and we can say sign up and we can just pass in the email and the password to that function so that's pretty cool in this particular case down here what we're just going to do is the exact same so try catch Arrow open that up console.log the error except if it's not register so for in the sign up screen then what we're going to do is just say await auth handlers Dot Login and we're going to pass in the email and the password just like that so that's pretty neat we can see that that is correct I actually haven't defined login that's pretty silly so we'll need to put that there that'll be why that wasn't showing up so login is just going to be async email password just like that put a comma afterwards and this is just going to be a weight login auth email password I think that might actually be sine in with email and password so we'll have to import that up the top and we don't want that async up there so there you can see we have sign in with email and password so now we so now our authentication and registration should just about work the last thing we'll want to do is just wire the sign up to our login button which is just here so this is going to say on click and we can just directly pass the handle submit just there so now that on click works we should see that if we do that we get nothing if we actually why don't we just make sure so in here we are indeed console.logging the user so we would actually expect to so that we've got null if I submit nothing happens if I add a password and submit we get an error and that's because there's no user with that but if we sign up and we confirm the password so let me just do what I can remember we'll have to make sure that this is a correct email otherwise that won't be happy so we can actually come in here and just say type as email instead we can say demo at banana .com and that should actually say login let me just change that quickly so that that makes sense right at the top we want this to save log in so we have login we confirm that that's working and here we want demo at banana dot com one two three four five six seven eight one two three four five six seven eight obviously in here you could add your auth logic but now we're just going to click submit and now you can see that we don't have any page redirection because we haven't done that yet but we actually have our current user in here we console.logged this uh user and now that's what we're going to set to our store so here we can see that that stores things like the email we have a whole lot of metadata like when it was created when it was last logged in we have reload user tokens everything you could possibly want so that is super excellent and now we can access that from any component so logically the next thing that we want to do is actually just re-route our user to a new page and so we're going to add that page in here by creating a new file called dashboard so in here we're going to render out a plus page.spell because that is the default page component for that route so now we will see that if I go to the dashboard we end up at this page and if I type in James we get James at the top so this is our route and this is actually going to be our protected route so I might actually just save that rename that to a private dashboard so now 404 doesn't work but if I change that to private dashboard just like that we get to James so this is going to be our private route and so what we can do is at the end of a successful authentication if we successfully log in then what we can do is reroute a user to that particular page and I'm actually going to do that at the inside of this function but at the bottom of this logic block just here I'm going to say if auth store now austo will be updated because remember we have that on state change logic in here so we have this so we have this listening component here that's going to update it so down here what we want to do is make this a reactive statement so this gets executed when we run and we're just going to say if the current user exists and is not null then we're going to say window.location.href is equal to slash private dashboard just like that so now when I go back to our home page and register a user and actually if we just refresh this page over here so let's just say continue to the console we go into authentication we can see that we actually have this user here so you can do a whole lot of stuff you can reset disable delete that account but let's just for the sake of it register another one demo2 at hello dot com nice nice submit that you can see that we get re-routed to our private dashboard because this function was true current user now exists and we have access to our current user so that's super cool now the next thing we're going to do is just actually render out some information here so we're just going to add an H1 that says current user and in here we're going to have some logic that we'll need to get from the store so we can just say script open up a script tag we can access the auth store so we can just create a parameter that says let email just like that and we can say auth store dot sub scribe current value open that up and we can just set email equal to auth door dot current user dot email and now I can pass in that email just there and we would actually expect to get that on the front end however that did not work because I used the wrong thing that should be current current.current user and it's not getting the parameter email so what we might just do is console.log current see what that returns and console that out so we get current current user is null which means that we've lost our user and so we can see that just here it took a second to actually render out the user and so what I'm instead going to do is just make sure that that uses the conditional syntax so now it's only going to render it out if it exists so it's initially undefined and then once the current user loads we get demo banana so that's super chill now inside of this route here this layout will still work so everything we implemented in here in terms of this main container will be correct so we can just go ahead and wrap this inside of a div and down here we can quickly open up a style tag and we can just select the div and say Flex is one so it occupies the full width of the page and we could just say display Flex Flex Direction column justify content Center and align items Center just like that and now we can see that everything is centered in the middle of the page we've got the element just there we could actually also select the H1 and say text align Center and now that user is centered in the middle of the page although the one thing I would also recommend adding is just some logic here that says F and we're going to subscribe to the auth store dot current user just like that so that's saying if the current user exists and then else if it doesn't we're just going to render out a loading screen so just like this so what we're going to do is in here we're just going to say div and that's just going to say loading Dot and inside of this top block we can have this div uh roll one just there so now we'll see that when I reload this page it just says loading once the user is loaded we get demo of banana now in here the other thing we're going to do is have a form that's going to have a whole lot of information and we're actually just going to copy the thing over here but what I might actually do is just create a new component so it's going to be a new file in here that's going to say auth reset dot spelled so this is going to have all of the functions that we need to reset our auth and I'm actually just going to copy that component into auth reset because it has a lot of good stuff now we can get rid of everything here because we don't need any of that sign up logic but this form will be very handy and depending on what is happening so we're going to say let action equal to empty string so nothing is going to happen and depending on the state of action so action equals let's say reset pass then we're going to have reset I'm actually going to delete that and basically what we're going to do is have two buttons that can say reset password reset email so I might actually just add those in here we'll have a div we can style the div we can say container div just like that and this can have a display of grid and we're going to say grid template columns is going to be repeat to min max zero and one fraction just like that and inside of here that's the wrong one or three set so now if we come up here what we can do is inside of this div which will just be there we can open that up and have two buttons so the first button can say uh reset sorry update email uh the next one can can be a button that says update password and if that one can actually be reset password actually I know that'll go on the front page so this will just say update password once we're logged in because you need a password to be logged in so now we have that all good and if we look we should see that but we don't and that's because we haven't actually rendered this component out inside of this private dashboard so in here what we're just going to do is have a auth reset just like that so that imported up the top now we load we don't currently get anything and that's because there's a whole lot of stuff in here that probably isn't working uh handle submit email password and that's what's working so this logic here doesn't make any sense so now we save that loading and we get our update password and the rest of our login form which we don't actually want so in here what we're going to do is we're going to add an if else block well actually even better it's going to be 2f blocks so we're going to say slash F sorry hash pound F action is equal to reset pass then we're going to have one form so we're just going to close that F block that can be a form here and then we're going to have a second block that says F action is equal to reset email realistically they're just updates but it's whatever so I might actually just change that to update so it's a bit clearer and then we'll just close that if block and add that second form just like that so now we can wire up the handlers so in here we can just say on click is equal to pass in an arrow function and we can just say action is equal to update email so let's just check that that's working that is indeed working and we can copy that and paste it on here and say on click action is equal to update pass and so now we get a second form that's going to allow us to do that so we can change these so we're just going to need one input for each realistically I might just call that new pass just up here we can change this value here confirm pass so it's a new pass and this one can be new email new email just like that and we can delete that password from there so that's new email uh which is cool so now we have these two forms both of them are just going to handle the submit um change the password the placeholders real nice and easy and then the handle submit is just going to be similar it's just going to update the things and then the value should change so instead what so in here what we're going to do is just get rid of all of this logic and just say if not action so if there's no action which doesn't actually matter we're just going to return but the form actually won't be available we're going to say if action is equal to update pass then we're going to run the update password logic so we're going to say await uh update password so it's going to be authandlers dot update password we're going to pass a new password so it's going to be new pass and we'll return that so that the thing stops and we're going to say if action is equal to new email then we're just going to do the same thing so return await auth handlers dot update email and pass in new email so that should update our email and we can actually check if these forms work now so let's say we updated the email to demo well that's actually the wrong form should be type email that's update pass that's up to email right so these are the wrong way around so I'm actually just going to copy that one paste it there copy that one and paste it there so update email new email is going to be updated at update .com and now just before I do that let's come over here refresh this page we can see that we now have still just got that one user and that's what we're currently logged in as if I submit that and let's come look at this page that has not worked so let's just check if we got here so console.log new email update email new at new.com let's see if that loads so that's not getting there and that's because that is incorrect so it should be update email I'm a pleb so let's try that once more new at new.com we can see that get ID token is not a function but that did execute so that's actually fine let's just see if anything happened over here so that didn't change let's just try the password one real quick and we'll see if that works update password so let's just make it uh updated pass and we get a similar error and I think that's because we actually just need to pass in the current user to both of these just there so let's see if that fixes our problem so let's try update the email updated at update.com and so it looked like that actually worked however it requires a recent login so what we're going to do is just add a couple of buttons in here and change a few things so we're going to start off by just changing or actually better said we're just going to add another button and this is just going to say log out so in here and this is going to have an on click equal to call a function and we're just going to call we're actually even better we can just directly pass in authandlers DOT log out like that so now we're going to have a log out button if I refresh this page that is not showing up and that's because it's in auth so we're going to copy that in there because I'm a muppet private dashboard all three set and paste that in there we just have to make sure that we have that imported so that's all good so now we have a log out button down the bottom and if we type that nothing will currently happen except that our user becomes null so we get stuck on this loading page so what we just want to add quickly is some logic that will send us to the correct page if the user is not logged in and so we're actually going to add this into the layout component because this wraps everything and so inside of this subscriber method we're going to add some if statements so in here what we're going to do is we're going to say if browser so the browser is going to say that basically the page is loaded so we're just going to import browser from Dot from slash well actually it's dollar sign app slash environment just like that so we import browser if browser then we're going to have two bulk two sets of logic in here so the first one is going to say if not auth store dot current user so that means if there's no current user and auth s store dot is loading so if there's no current user and if is loading is uh false so that means the loading is done then what we want to do is we just want to uh and we're just going to add one more check to that that says window dot location dot href is not equal to slash so that means that we're not on a login screen we're in a protected route then what we're going to do is set window.location.href equal to the home screen so once again the browser is to check that we can access the window parameter so if the browser exists we can access the window parameter then we can check if the current user exists if the authentication is loading and the current URL and if the current URL is on a protected route we don't have a current user and we're not loading then we redirect them home and the last thing I forgot to do is we actually just have to return unsubscribe from this on Mount component so now what happens is we can see that I was routed to the login screen however it seems to be going berserk and that's because this should actually just say path name uh sorry this one should say path name and this one should say href so now we can see that that didn't work so we get right at home if I go to a private dashboard again it just routes us home again so that is a now protected route and so now we can log in once again so I can actually just say demo well I actually forgot what the password is I wonder if I can see the password user ID no I don't think I can check the password so what I'm going to do is create a new user we're going to say demo2 at demo.com the password is going to be one two three four five one two three four five just like that we'll submit we get an error that says the password should be six letters long so we'll just say one two three four five six we submit we get logged into the login screen and we got booted out and that will be because of some logic that's going on in here so what I might just do is console.log auth store and try that again so we can go demo2 at demo.com login one two three four five six submit that should log Us in to the screen which it did and we got sent home again and it might actually just remove this external one and add that in there just because we don't need so many layers of if checks demo2 at demo.com one two three four five six submit we run that authentication and we get logged out again so let's just disable this for a second and I might actually just move this console into here so that we only console.log that the demo 2 at demo.com one two three four five six so we get logged in successfully one thing to note is that if I refresh this page we actually hold the login which is super convenient uh and we can see that it's because the current user is null and is loading is true so let's just say let's see what this is returning so let's say console.log current user and we want to uh console.log authstore dot is loading so let's just check what those parameters are so we'll log out the logout Screen Works well actually no it doesn't work yet because we haven't disabled that so I'll just go back to the private route but we can see that we currently don't have a user is loading is set to false so I think so let's just manually come back to the home route so we log in again demo2 at demo.com one two three four five six submit that close all of that so we get undefined and undefined is our problem layout page 20. so when we log in we're reaching this route and that's because none of these exist so I might just say make them reactive statements and try that once more so let's just go let's click log out so that's going to log us out so everything's set to false we'll go back to the home route we'll type demo2 at demo.com one two three four five six submit and that didn't find it that's the wrong auth so we'd submit that we get logged in and now we can see that this doesn't work and that's working correctly so I should be able to execute this logic and not get rerouted which I don't so now when I click log out what's going to happen is we get redirected home to the logout page as soon as the user doesn't exist and now if I go demo 2 at demo.com one two three four five six submit we get logged into the private dashboard it loads all of our information we have a current user we can refresh the page that current user is staying now we can update this to say demo3 at update.com submit that that actually worked correctly however it has not updated our thing but let's just try refreshing the page so now we can see that demo 3 has indeed been changed and so the one thing we'll have to do on the changing of the username is just add that to our store function in here so when we update the email we'll just want to add a function to the auth store so we can just say auth store dot update take the current value and return spread the current just like that and for current user we want that to be equal to the value of current user so dot current user just like that however we're going to update the email parameter to be the new email so that should be a little update function that's just going to change the value of our store so if I update that to demo 4 at nice.com we submit that we can see that the email has changed and if I log out we can now go demo 4 at nice.com one two three four five six submit that and we get logged in with this new credential so that should work for the update password as well the last thing we have to do is add a forgot password Store to our front page so if we just come into auth what we can do is just in here we can say already have under the sign up we can just add a second div that says forgot password just here and then that can just go away and so in here what we can do is send a password reset email so we can just now change this unclick Handler to refer to authhandlers dot reset password just like that so now when we click on this div it will send a forgot password email says that we have an issue there and that's because the reset password obviously must take an auth parameter as well let's see if that works forgot password Ah that's exactly right so for this to function we actually need an email so we'll say F not email then we'll just return nothing so I think let's try that again so I forgot password nothing happens uh whoops I added that to the wrong one that should actually be in there this is staying the way that it is update the email and all we do is just in here add that statement so we can the authors actually already passed so we should actually just be able to forgot password nothing happens and so if we try console.logging their email let's reload that page and see if it works pointer events post that's still not working so email is all of this ah of course it's pretty obvious so what we actually need to do is pass an argument and that's my bad entirely so I'm a muppet essentially what we have to do is use an arrow function in here and call it and pass in the email that's me being an absolute pleb so we were actually just executing the function willy-nilly so now what we should be able to do is just forgot password we get in here which means that we don't have an email if we have an email let's say demo 4 at what was it let's just check demo4 nice.com so that's cool so demo4 nice.com we can send the forgot password we get to the email and the password has been sent and so that will just send them an email to the user's inbox where they can click a link and it will take them to a reset password page which is all very simple and then next time they log in that will work for them so that's basically it that's most of our functions one one two three four five six we can submit we can log in we come to a protected route we can update our password same thing new password new pass submit that that'll be our new password if we log out and try that demo for at nice.com [Music] the new passes new pass and submit we get logged in and our new password is working perfectly we have the current user we can update the email we can log out and if we log out we have no user and try go to private dashboard we get the loading page and we get redirected to the login screen so now the excellent thing about this is that this private route the fact that we've implemented inside of our layout will work for any other private route that you have so any path name in here that is not equal to that it's pretty easy sorry not equal to this pretty easy to update but yeah that's pretty much the tutorial if you've enjoyed the video don't forget to like and sub leave a comment down below what you'd like me to do next and I'll catch you guys in the next one peace

Channel: Smoljames

Views: 9,527

Keywords:

Id: 8NlUTFppJkU

Length: 56min 38sec (3398 seconds)

Published: Sat Feb 04 2023