React Authentication With Appwrite Crash Course

hey what's going on everybody welcome to this tutorial where I'm going to be demonstrating how to add in authentication into a react application using react router 6. so we're going to take care of all the key components of authentication everything from logging a user in registering a user logging them out and also making sure that we have routes that are protected from users that are not authenticated so we're going to build all this into a minimalist application we're just going to be focusing on the authentication process and we're also going to have a backend which I'm about to introduce for this video so let's go ahead and demo the application before we get started this is our minimalist app so I actually have some boilerplate template code set up for you so we don't have to build out the template itself but this is our application we have a register page so a user can register users can also log in and if we try to access a page that is supposed to be protected like our home page we're automatically redirected to this login page and prompted to log in now when we log in we're going to see this home page and a profile page so you'll notice the navigation bar changes here and we can log users out so for the back end part of this application we're going to be using one of my new favorite platforms to work with called apprite which is going to make authentication incredibly easy to set up so if you haven't heard of apprite yet it comes onto the market as an open source alternative to something like Firebase so it's a backend as a service platform and it's incredibly easy to use and fun to work with so with apprite we have two options on how we can get started with it we can set up a local instance of apprite and then that leaves it up to us and how we deploy our application it gives us full control over that or we can use something called the app right Cloud so what we're going to do is use the app right Cloud which is in a sense gives us like a console where we can set up a full backend manage our users all of this within the upright Cloud that just takes a couple of minutes to set up so we're going to be using that for this tutorial just to simplify things okay so let's go ahead and get started with the repo for this project so what I'm going to do is go ahead and Link this up down in the video description I'll need you to clone it because we're going to go ahead and work with the template for this application and build on top of that so we're going to clone it and start building within it now in this repo you want to go ahead and start with the starter template so we have two main projects in here we have the final code which is what we're going to build out right now so this will be that end project that you can review and check the code and this will be the starter template so we're going to clone this entire repo pull out this specific folder and start building within it now I didn't do too much in there I just added those pages that I showed you with no functionality everything else we're going to build out from scratch so we just have that template code and some styling now within this you're also going to find these video notes that are going to be very helpful for you and I'm actually going to be following this within the tutorial so this is like a written version of this tutorial so what I did here is I laid out the entire tutorial and the process and we also have the Snippets of source code that we're going to be adding into this project step by step so if we look here if we go back into this section right here we're going to start by adding in private routes We'll add in the auth context so we're gonna we're gonna use the context API to lift up our state and just wrap our components so we can access the user and the current auth status then we'll build in that login functionality along with persisting a user so they can remain logged in when a page is refreshed log out and then registration so this is the entire tutorial that we're going to follow along with so let's go ahead and clone this again this is linked up in the video description so don't follow this link directly if for some reason I happen to change the link the most recent link will be in the video description so let's go ahead and open up vs code I'm going to open up an instance of it and we're just going to go ahead and clone this project and get this set up so I'm going to go ahead and CD into my desktop so whether using the terminal on a Mac or Windows machine go ahead and just set up whatever you need to clone your project and let's just go ahead and do this so we'll CD into my desktop and we'll do git clone and we're going to clone this repo so I'm going to paste in that entire URL and this will set up our project so what I'm going to do here is before we open this project up is I'm just going to drag this into a frame here and I just want to extract the starter template so we're just going to bring that out here and I can close this out and that's the only thing I want to open up I just want to make sure we're not confusing any of that other code with this so now I can just go ahead and open that up so we'll just go into my desktop open up one starter template this will be my project so this is what you should be working within and let's review the code so actually before we do that let's just go ahead and just run npm install just to make sure we get the proper installation set up with this instead of create react app I'm actually using something called V to revite depending on how you want to say it so that's going to be very easy to work with I'll actually just make sure we start up our server and I'll explain the difference between npm run Dev or npm start well I guess that is a difference so there's not much to explain but uh let's go ahead and review the code so in here we have our index.css file so this is just going to be the styling that we're going to work with let me uh I guess I can stay pretty zoomed in here so this is the styling for our application we just have basic styling not too much we have a container some styling for our header our button buttons and our form input and that's it so there's no need to actually get into that but the code will want to pay attention to is going to be the home page so it's just an empty homepage nothing to it we just have some text and the class of containers so you can even build this out from scratch if you wanted then we have our profile page same thing just a very simple arrow function component and then our register page so the register page here simply just has the form template so we simply have a container for the entire page we have a container for the form itself and then we just have our two input fields which are wrapped inside of this wrapper with a label so we have the email field the password field and then the input button along with a link to the register page now within the register page same thing we just have a form with a container and then our four Fields yeah we have the name we have the email field the password field and then password confirmation field along with a submit button and then we have a componer for our component for our header so the only thing I did here was just add a function for the log out click button so in this template we can just kind of navigate between the pages so we just have a very simple header here set up and that's it so let's go ahead and just run our server so we'll clear this and we'll just run npm run Dev so once you run npm install you should have access to this and this will open up our application on Port 5173 so let's go ahead and do that I have a shortcut saved right here so I can actually just click on this and this is our application so we can click log out that'll just take us to a page or our page and it won't actually log us out it'll just navigate to that page and we have a profile and our home page and one thing to note is we do have react router Dom already installed this is react router version six and you can look at the package.js file for that okay so let's go ahead and set up our app right application so that's what we want to do so what we'll do is we'll go into apprite.io this is approach right here this is the console that we're going to be working with and this is all that functionality that we get with so so there's quite a bit we get a real-time database we get storage for file storage databases authentications or authentication and so on so go ahead and register for an account in an upright Cloud we'll go ahead and do sign in I'm already signed in so you'll want to create an account and I have a demo project here so what I'm going to do is just go ahead and create a new project and we're going to call this react off so this is going to take a few minutes and one thing you'll notice is we do have a project ID so this will automatically be generated for you and we are going to need this in a minute here so let's go ahead and just leave it alone it'll generate an ID for us and we'll get back to it so we have our project here and within our project we need to specify what platform we want to work with so we're going to work with the web SDK we also have flutter Android Apple so there's a lot we can do here we're just going to focus on a web app so we're just going to go ahead and call this react auth app so we're going to create our application and for the hostname this is going to be the host of where you're accessing the app from so we're going to access this from localhost here so we don't need to add the port number so we'll just do localhost let's go ahead and click next and the next step here is to go ahead and install app right so let's go ahead and just copy this and let's open up our application and I'll just open up another terminal here and we'll just run this installation so it's npm install upright and that'll get this set up for us so now we have apprite installed and what I want to do is go ahead and just add this configuration in here so we want to import the apprite client before we configure our app so what I'm going to do is copy this and we're just going to go back into our source folder and let's just go ahead and create a file called upright config with a Capital C so apprite config.js and this will store all the configuration for our app right project so let's go ahead and paste that and then we'll go to the next step so we're almost there so from here and I just realized there's a next button here so let me uh make sure that my screen or my face isn't blocking anything so give me a second we'll just move myself to this side and let's go to the next step so there's this next button that's what I click from here so if we go back then next okay so at this point what we're going to do is go ahead and just copy all of this this is going to go ahead and initiate the client object and this is going to be the access point to our app right project so here we're going to see this endpoint and then we're going to see our project ID so I guess we didn't have to grab that from our project it already automatically adds it for us so we're going to copy this and let's go ahead and bring this in here and what I want to do is export this client so we're going to do export default client because we are going to need to access this and if you go into the instructions here let's go into our notes and I'll actually reference this let's go ahead and continue this process but what I want to do is actually import account because we are going to be accessing the user accounts and we're just going to go ahead and Export account itself so we'll just go ahead and copy this and we'll just add in account and let's do a named export for account here so this is how we're going to authenticate register and so on with our users okay so that's all we need for the app right configuration so let's go back into our console and let's just go ahead and hit next take me to my dashboard and this is my dashboard with all the stats so we see we have a database our custom functions our storage and our authentication so all I want to do here we're not going to worry about setting up setting up a database in this project I actually did just come out with a full tutorial on how to create a real-time messaging application on the traversing media YouTube channel so I'll link that up too so if you want to handle crud operations and kind of learn all that that's going to be in that tutorial we won't focus on that database right now so in here let's just go ahead and go to auth and let's create a user so we'll just go ahead and create a user named Dennis and we'll just do Dennis at Dennis iv.com and we just need one demo user to register with so password one two three that'll be my secure password and we'll go ahead and create that and now we have a user within our console so we see this one user and we're ready to move on from here so that's all we had to do with our app right project so let's go ahead and go to our notes Here our video notes and the last step here was to create that user so we just completed that so we did steps one through six got that set up and let's go ahead and create our private route so what we're going to do here is go ahead and create a route that's going to protect certain pages within our routes here inside of app.js so we can close out our header we'll close out apprite config and what we need to do here is just go ahead and wrap these components so the home page and the profile page we just want to make sure those are wrapped within a private route so let's go ahead and create that component so that way users can just enter those pages like I showed you before we can just go to the home page we're not logged in but anybody can access this so we need to stop that so what I'm going to do here is just go ahead and create a folder called utils and we'll put in that project and there and is that what I called it in the demo let's just make sure real quick so yes it's in utils or we're going to call it private routes.jsx so new file utils for utilities and then forward slash private routes Dot jsx and let's go ahead and create this component so the first thing we want to do is go ahead and make an import so we'll import outlet from react router Dom and navigate and I'll explain what's happening here in a second so let's go ahead and make sure that's from react router Dom will generate the component which we will call Private routes make that an arrow function component and we'll just export it so export default private routes and we'll add the logic in here so essentially what we're going to do is we're going to create this private routes component that's going to be a parent route to a bunch of child routes and what's going to happen is we're going to add in some logic and once we check like the auth status or anything else that we need to check if everything goes correctly we're going to pass the user on to the child routes which will be profile in home and then in the future whatever Pages you want if it doesn't check out we're going to use navigate to redirect this user so let's go ahead and do this at this point until we actually create some authentication here let's go ahead and just create a variable and this will be representing our user so we'll just say user is equal to false later on this will actually be an object but we're going to set this to true or false just to see how this works now to return these values we're just going to go ahead and do return and we're going to check with the ternary operator we're going to say if we have a user so in this case if user is true let's go ahead and use the outlet component which lets us go ahead and send traffic down to the child components we're going to go ahead and pass along the traffic we basically say hey if we have a user continue on to these child components if not so if this doesn't check out what we're going to do is we're just going to go ahead and use the navigate component and we're going to say hey this user is not authenticated so go ahead and send this user to the login page and we'll see this in action so it's going to make a little bit more sense once you see it so very simple logic we check the user status and we return either the child routes or we redirect our user so outlet and navigate and you can look up outlets in the react router Dom documentation if you want to understand that a little bit better so now with an app what we can do is we can just go ahead and import this component so let's just do import private routes from utils private routes we just had the import get added and we're just going to go ahead and bring this in here and again this is all within your node so if you want to check the code instead of that notes file you can do that so we'll just do route so we're going to create a new route here and we'll just go ahead and wrap all these child routes and let's make this indented here and for the element here we're just going to say let's go ahead and pass in the private routes so private routes will be the parent to all these child routes here or child routes yes that's correct okay so we simply wrapped it what's going to happen is when we enter one of these URLs we're first going to go through this component if everything checks out we'll pass on whatever page we're trying to access so let's save both of these and let's just check this out so let's go to our page here and we'll open this project up and let's try to go to the home page so if I click on it it's not working it's just redirecting me back to this page now if I go to this private route and I set this to True let's just say this is going to represent the user object if we try to go to the home page in profile page now we can so those two pages are protected right now we're on the home page if we actually go ahead and minimize our screen let's go ahead and do that if I can actually get this working correctly give me one second so when we change that status it's going to redirect this user so if we set this to false we're going to see that automatically get redirected to the home page okay so that was all we had to do for this section and that is how you create a private route and what we're going to do is we're going to go ahead and create some auth context we want to lift up our state because I don't want to get the user from this route I would rather have a user sitting somewhere in a global State and then we'll pull that state down into this component and then we can use that later on in our header so for example inside of our header component we want to make sure that these links don't show if we're not authenticated because we don't want to use our go into those pages and we want this button to say log in instead of log out so that's what that state is going to do so again inside of this guide here go down to this section into the odd context and this is what we're going to create so we're just going to create some boilerplate functions we're going to set everything up pass this state down create a custom hook and then we'll start using it okay so let's go back in here and inside of utils we're going to go ahead and create auth context.jsx and let's start building this out so we want to make an import so we want to first of all use context so we'll do use context we'll want to bring in use State at some point we want to use the state and we want to use use effect so that's all from react and I'll just go ahead and bring this in so I can see more first we'll create the alt context itself so alt context and this is going to be using Create context and we also need to import that so we have use context and odd context I was actually meaning to import this one in first but we're going to need both and then we're just going to go ahead and create the provider so let's just do export defaults and we're going to export the auth context by default right away and then for the auth provider this will be just a named export so we're going to do export const auth provider let's go ahead and just take the children from here so we'll just do children clean up the component itself and for the return value we're just going to do auth context dot provider so the provider will be in here and this is how we're going to make this entire provider component and we just need to pass in the value here so we'll just do value which will be an object and in here we're going to pass in the context data so everything all the state that we want to pass down we'll just put into this context data so we'll do context data and this will just be an object with the state that we pass down so we can throw this in here now inside of the alt provider what we want to do is first of all set a state so we don't want to render any children until the component is finished loading because we don't want to actually accidentally render the home page or page that should be protected until we've checked if that user is actually in our application so let's go ahead and just do const we'll first get the loading State and set loading and this will be use State and by default loading will be true so when we first open this up we want to make sure that we are in a loading state so we don't accidentally render something then we'll just do user and then set user and we'll just do use State and at this point we can just do null so we'll just set null for the user and we can pass in the user into the context data first of all so we can take care of that and then in here let's just check the loading state so if we're loading and loading should actually be true so we actually want to be in the loading state so that should be true not false so if we're loading typically you'd want to add in some kind of load spinner but for now we're just going to add in a paragraph text and we'll just say loading make it look somewhat realistic and let's just close out this paragraph tag and then if we are not loading let's go ahead and do the else statement we'll just render the children so all the child components and it looks like we're missing the return statement so let's add that make sure to wrap all this so we don't get that error okay there we go just fix this indentation okay so next what I want to do is just get that login logout register and check status function to uh just kind of set up the boilerplate so we can actually pass those down later so for now let's just go ahead and do const login user and this will take care of all the logic for the login functionality we won't add anything here but let's go ahead and just pass that down through the context data we'll use this later on in the login form and then we just want to do cons log out user and these two methods well this one right here will actually take in user info so we just wanna make sure to pass that through logout user won't need anything but we also do need register user so from that form we're going to pass in the actual user info so for login and register so user info and later on to persist a user we're going to also make sure we have this check status function now you can do this in multiple ways but I just want to name it check user status I think this is good enough to work with so we'll just go ahead and throw this in here so we have these functions here and we can pass in log out which will be accessed in the header bar and then register user and check user status will just remain up here and it looks like I spelled register user incorrectly so there's a g there we don't need that and one of the final things that we need to add to these to this auth provider is we just need to go ahead and call use effect because if we pass this information down later loading is going to be set to True which means that we're just going to have this loading paragraph tag in our template and that's all we're going to see so on load we just want to go ahead and replicate like the user being fetched here so we'll just go ahead and add in a use effects we'll just do use effect let's go ahead and create that and we only want to call it on the initial load so we'll add in an empty dependency array and we're just going to set loading to false so we'll change this later but for now this is going to go ahead and update that state so we'll set that to false and let's go ahead and actually just create a custom hook to use this provider so before we actually do that let's go ahead and actually provide it through the app component and that's going to be just under router so we'll just bring this in we'll just import auth provider let's go ahead and pass it above all the components that we want to have access to the provider data at so we want it in the header and all these child components and then we can close it down here so alt provider and let's go ahead and indent that okay so this data is now accessible through all the child components now instead of using this use context method I think there's a cleaner way to do that what I'm going to do is just go ahead and create a custom hook and we're just going to access that hook so I'm just going to go ahead and Export that and we're going to call this const use auth so it's going to use all these authentication mechanisms so it's going to have this user it's going to have login logout and register user inside of this use auth hook here so we're just going to go ahead and create that we'll create that function and we'll just return use context that's why we wanted to use it and we're going to use the auth context okay so this right here is going to allow us to use this and it's going to be a lot easier so the first place I want to test this is going to be inside of that let's see that private route so instead of this just being user true let's go ahead and import this so what we're going to do is we're going to do use auth so we're going to import use auth it's going to automatically import that from alt context and now we're going to have access to the user by destructuring that so we're going to go ahead and add in the curly braces so now this gives us access to this user which is currently null so this will act just like false rule so now what I can do is if I go ahead and use this same auth provider inside of my login State because I want to show you something this is why I'm going to do this right now let's go into my login form and let's not allow a user to be here unless they are logged out so we're going to add in use effect really quick so the use effect we'll bring that in and let's bring in our odd status so this is the beauty of the context API is now I can use the user in here and we'll just do use auth and that should automatically import that so make sure that happens for you and then let's just go ahead and write use effect and we're going to say if the current user exists let's just redirect them so just an empty dependency array and we want to import use navigate so we'll need to bring this in so just a little bit of boilerplate but we'll get this done real quick navigate use navigate and that will allow us to redirect our user so what we're going to do is we're just going to say if we have a user and that's going to be an object so if user then let's go ahead and we'll just do navigate and let's just send the user to the home page okay so we have this in the login page so we can't be here if we're logged out or if we're logged in and we can't access any Pages down here if we're logged out so now what I can do is I can just go ahead and bring that other page in side by side so let's go ahead and minimize this okay and I can go back to my auth provider from here and let's just change the status so if we set this to true we're logged in it'll redirect us back to the home page and if we set this to false we log out and we can't access any of the other pages okay awesome well let's do the same in the header bar now let's go ahead and add in some logic here so we just want to make sure that those nav links are not showing up unless we are logged in so we'll go back into the header bar let's just add in the same functionality we'll go into components header we'll import use auth here or the user user and use auth for some reason it didn't import it so just import use auth here we go and we can just check this right here so we're just going to wrap this and we're going to say if the user and we'll add in certain logic and then if not if we don't have a user then we'll add in the log out button okay so if user then we want to show the log out button so let's wrap everything within that fragment there we'll bring that in and then we'll just take this login link that we have commented out and we'll just bring this into the else statement and I just realized I did this wrong so this functionality should be up here in the first condition and we'll just fix this indentation okay just indent that so if we have a user go ahead and show the home in the profile page if we don't have the user then go ahead and show the login page so let's go ahead and try that minimize this again we'll go back to our auth context and here we go so we see the login page or the login button and if we set the user to true now the header bar shows home and profile perfect okay so let's go ahead and move on to the next step we'll just make sure to make everything full screen again and let's take a look at what we have here so down here we have the auth context we just did this we just set up the auth provider we set up the user inside of the private routes we have the header and the next step is to actually log in a user so what we're going to do is we're going to go ahead and process the login form and make sure that the form itself takes care of all the getting of the data like the user email and password and we're going to let all the actual functionality be processed by the login user function from the auth context so we're going to use use ref here we're going to set a reference to the form itself then we're going to go ahead and add in this handle submit function that's going to be attached to our login form so we're gonna have to add both of those to the form once we complete this then the login process can continue from this function so we're just going to pass in that data in here so let's go ahead and jump back to that form and let's just import use ref and there's different ways of actually processing this form in other tutorials I will use use State and then just update that state as we're typing into the form there's multiple ways of doing it so for now we'll just stick to this one so let's create a reference to this form so we're going to go ahead and call this login form and we're going to call use ref here and the value here will be null to start then we can set the reference here so we'll go down to the form itself we'll do ref and that'll allow us to have the reference to the actual HTML element and we'll just do handle login so I'm just going to go ahead and bring that in const handle submit we'll call it handle submit instead of handle login so sub mint and let's go ahead and process this so first thing we want to do is when we submit the form we want to go ahead and just prevent the default value so e dot prevent default and let's just add in this form or the submit function on here so on submit I'm going to go ahead and process that so we have the submit form and the ref and here let's go ahead and just get the reference to the email and password so we'll do const email and that's going to be equal to login form so we have the reference to it and we can do dot current dot email so we'll get the current email dot value and then we want to do the same for the password so password is equal to login form dot current dot password dot value fingers are starting to mess up a lot here okay so we should have the email and password on submit and then what do we want to do here well what I'm going to do is just go ahead and just throw this into an object we'll just call it user info bring in user info we'll throw in the email and password we'll bring that in here and then we just call the login user function so inside of use auth we pass down this login user function we get that information pass it through the context data which means that we can simply destructure that so we'll just do login user not login form but log in user and then we can call this method right here so let's go ahead and just call it we'll pass in the user info okay so that should be it for this form now the rest of the logic should happen inside of here so inside of login user we should need to go ahead and process this and inside of apprite config I earlier set up this account here so we imported the account and we created an instance of it with our client so we need to have access to this based on the documentation from upright to actually log in a user so we're accessing an instance of that account object so let's go ahead and import that inside of our alt context let's bring that in so import account from upright config so we have that and we can jump into the login user function and this function is what's going to process everything from now on so once we submit it we're going to pass the data in here into user info and then create that session so first thing is we'll go ahead and set loading to true so as we start this process loading will be true so we want to make sure we're not rendering anything else out and then we're going to set loading to false after everything happens in between so in between here let's go ahead and add in a try catch statement so we'll do try catch and we'll take the air and we'll just go ahead and do console.air so you just want to make sure that we can see that if we have an error and in here this is where we can use this account object instance here so let's go ahead and make this an async function first of all so that's important for how we're going to do this and then we'll just get the response so this response right here is going to be a response to the account dot create email session method so create email session and this function right here what it's going to do is it's just going to go ahead and take the user info dot email and then user info password and it's going to try to create a session for us and that'll be stored on the back end here so we'll do dot password okay so we're gonna get this session but this doesn't complete the login process so first of all let's just see what this response looks like so do console .log and we'll just do session and let's just check that response we also haven't checked that login form so before we get to ahead of ourselves and then create some error we want to make sure that this login form is also running correctly so this user info calls this method and let's try this okay so let's go ahead and refresh this and let's just try to log in our user so Dennis dennisivy.com and then we'll do password one two three let's hit login so it's loading and it looks like everything went correctly so we're not logged in yet we haven't finished that process we're still on this page but what we did get back is we got back this session right here so this is that session object let me try to zoom in I also want to just double check my recorder so I can actually see this okay so we have this session object that gives me this information about the current user session so it tells me where I'm logged in from and all this information about it doesn't give me is it doesn't give me access to the entire user so after we create the user session I'm still technically not logged in so I want to go ahead and actually get a user now that current user that we have a session to and then I want to go ahead and set that in the state so once we log in we get the response this is the session then let's go ahead and do let Account Details so we actually want to get this user detail and we'll just call await account dot get so once we have a session we can just call account.get and then this right here we'll change this to account will actually give us the user information now once we have that information we can just go ahead and say okay we have it let's go ahead and set the user so set user and we'll pass in Account Details and that will log Us in so we still want to work on persisting the user but let's just see what this looks like and make sure that it actually logs in our user successfully so now we can just go ahead and inspect we're on the login page we're not authenticated we don't have a user right now let's go ahead and just type in password one two three login loading all right we're in and look at that we're on the home page so it clearly is working and then if we look here we actually see our Account Details we see the user ID we see when this user was created the email all this information about this specific user so perfect we're in here now the only issue right now is we actually have a session in this session by default if you go to the upright console I believe lasts for 365 days so there's different ways of logging in but if we go in here a session lasts 365 days and we can actually update this and limit the amount of sessions per user but the issue is when I refresh it look at that I'm back in the login page I can still go through this process again and it looks like the password was off that's because it's AutoFill in a different password but I'm not in the page even though I have a session so let's just go ahead and persist the user so on load this is still null so every time we refresh it we don't call it login so this value is null so let's go ahead and update the check user status method so in here we just want to go ahead and check the current user as we load the page so this needs to be called on use effect here so we want to check the user status then let's get set loading let's remove it and we'll put this at the bottom of this function so if everything goes well we want to change that status now in here we're just going to run try we're going to do a try catch here I'll do catch and then we'll just throw in an error I won't worry about canceling this out right now let's just go ahead and complete this but in here instead of the try or instead of the yeah inside of the try let's just go ahead and get the account details and we'll just do a weight account dot get so it's going to use the current session that I have and it's going to try to get the account we need to make sure this is an async function and then once we get that we're just going to do set user and then we'll pass in the account details so look when I save this it's actually going to redirect us or it should redirect us back to the home page here we go so now I can go to the home page I can go to the profile page I can try to go to the login page and it won't let me and then I can try to do doing Ctrl shift R do a hard refresh I'm still logged in until I actually log this user out so now let's go ahead and take care of log in a user out so this is going to be very easy actually to log a user out we'll go to the log out function and this is going to be as simple as adding in account dot delete session and what session do we want to delete well we're going to delete the current session that's all we're going to do and then we'll set user to null now in order to call this function we're just going to go ahead and go into our header we'll bring in log out user and let's just get rid of this log out click I don't need this anymore and I don't even need to redirect our user because our auth context will take care of that we don't need that function let's just go ahead and take logout user and replace this with login or the log out click button so we're going to change that so now let's just try it we'll just go ahead and refresh it we're still logged in I can log out brings me back here we'll just do password one two three log in let's just go ahead and actually save this password and now we're in let's try it again log out and log in there we go so we can now log in and log out a user along with persisting the user you see how easy that is I've done this with other platforms and it's been quite a challenge so I love how simple that actually makes it so let's actually jump into registering a user so we're going to finish this tutorial up here in a minute so we just completed all of this and what we want to do is go ahead and register a user so with register we're gonna have to do the same thing we're going to need to go to that form we're first of all going to import the register user function from use auth or yeah use auth that hook and then we're just going to go ahead and set the ref to the form we're going to go ahead and process the actual handle submit method for that form make sure our passwords match and then we're going to let the register user function take care of the rest so let's just start this build process let's go ahead and close out our header we don't need that we don't need app.js and I'll just leave log in maybe just as a reference so in here let's go ahead and bring in use ref so we'll do use ref we'll set the reference here const and this will be register form use ref and we'll set that to null and I need to make sure that this is a capital r so use ref and then I can set this on the form let's create some spacing here so I can identify that easier and we'll just do ref is equal to register form okay so let's bring in the on submit method on submit let's just do handle and we'll create this function in a second we'll do handle submit and then we can create this function right here so we'll just do const handle submit let's go ahead and add in the default logic into it we want to prevent the default so e dot prevent default and in here we're just going to go ahead and get the name which is going to be register form so we're going to access all the values in the register form so register form dot current dot name and we're going to do value so we want to get the value of that form and let's just make sure we have that so that's name email password one password two and that looks good okay so we're just going to duplicate this a few times for email password one password two so let's get the email of this user password one password one and then password two this part's a little bit tedious password two okay so we also need to bring in the register function or the register user function so let's go ahead and do that we'll do a register user from use auth and let's just make sure that import occurred so if it doesn't automatically import make sure to type that in so we have the register user function and from here we first want to check if our passwords match so we're going to go ahead and check password one and two and if they don't match we're just going to return nothing so we're going to just set and we're going to send an alert so return and we'll return nothing here and we're just going to go ahead and do if password one is not equal to password two then we're not going to worry about the details of how this looks we're just going to just use the alert method and we'll just say passwords do not match so let's test this before we continue okay we're going to yell at that user so we'll just do one exclamation point handle submit gets this information and then says passwords do not match all right and then we have the on submit method so let's go back in here and let's log out our user and we're going to register register a new user we'll just say James Bond for the username James Bob actually I like James Bob way better so let's just do that uh this will be James at email.com and then we'll just do password and then some random characters here let's try to log in and here we go we're being yelled at to says passwords do not match I know that text is pretty small but it does say it right there so that's working exactly how we want it so after that if everything checks out we're just going to go ahead and get the user info and we're going to pass this into the register form so we'll do user info not in go but user info and we're just gonna do name email password one and uh password one and then password two and then we can call register user and we're passing in that user info okay so we're halfway there now what we need to do is go ahead and actually build out this register user function so let's go ahead and go to the next step we'll jump into alt context and here we go we have the register user function and by default let's just go ahead and make it an async function right now we get the user information so that's everything that we need as we're registering this user we want to set loading to true so we are loading as we submit this button and then when we're done we want to set loading to false and we'll just run the try catch here try whoops catch air and we all we do want to console this air out right now so just do console dot error and we'll just get the error itself okay so in here what we're going to do is we're going to go ahead and create an account so we're just gonna get that response first of all and then we're going to call await account dot create so that's it that's the method to create an account now we just need to pass in credentials here and we can't just pass in our user credentials because we also need to generate a user ID and apprite actually has this method for us called ID so let's just try to import that so we'll just do ID and this should be from app right I guess it's oh it is auto filling so I'll just go all the way down here so it's ID from app right so we're just going to use this method and that has to be the first parameter inside of create so let's go ahead and actually just indent this and we'll just do ID dot unique so that's going to create a uniformed app right ID so you can create your own but this way it's just going to stick to how apprite creates IDs so we'll let upright actually take care of that so that's going to create our user ID after that we'll just do user info and then we'll do Dot email and then user info and I believe we just want the name next give me one second let me just see my reference here so then we want the password so we'll just do user info dot password one and we'll do user info Dot name believe that should be it okay so let's just try to create a user we'll jump in oh after that actually before we finish this what I want to do is actually log in a user right away so after we do this we just want to go ahead and get our account details so we're going to create the session right after and then log our user in so we can actually go into the login user method and what I'm going to do is actually go ahead and create this email session and then get this account detail let's actually remove this let's just take this entire code block and bring this here so if everything works and we create the account successfully then we want to go ahead and create an email session we'll take password one and at this point we're just going to log in with password one so we're going to log in with password one and then we can redirect our user so let's go into our app right account let's see let response await What's Happening Here identifier has already been used okay let's see I guess what I can do is I don't actually need this response because I use that twice okay so we'll go into our app right account let's go into auth and let's see all our sessions so in here we only see one user so we want to go ahead and just make sure that our user actually gets registered so once we try to log in we'll just double check and make sure everything appears here so I did notice one thing though I realized that when we try to log in our user we need to make sure we redirect our user to the home page here so on our login page we check this right here we check if a user is supposed to be here so I guess what we could do actually is go ahead and just add this same logic to our register page because we want to be redirected right away so we'll just bring this in right here and we'll bring in use navigate so import use navigate not user but use navigate from react router and we'll just set this up so let's grab navigate and let's just set this up before we test this here okay so if the user is here we redirect them I guess at this point we could just go ahead and now bring in the user to the register page okay so now when we log in when the state gets updated we update the Account Details which means a user should be redirected away from this page so let's try this um let's go ahead and just see what's going on let's inspect something didn't work I'm assuming I'm probably missing an import so use effect is not defined I knew I'd do something like that so we can bring in use effect and we should be back to our home page okay perfect so let's go ahead and try this we don't we only have one user so we'll create James Bob I like that as a YouTube channel name so James at email .com password one two three password one two three so we'll make sure they match this time and let's uh just see this login there we go we are logged in and registered logged in and redirected so if we go back to our console here we go we are in here we see James Bob so we are done with the tutorial let's see I think we completed everything else and we have what we need so we completed the full alt cycle so congratulations if you got this far thank you for watching this tutorial and make sure to give appry a test try to use out their database feature I would highly recommend watching that tutorial that I have on traversing media again real-time functionality we go through all the crud operations and so on so a lot to do there and I'm pretty sure I'll be coming out with a lot more upright tutorials so I'll see you all in another video

Channel: Dennis Ivy

Views: 8,921

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov

Id: pGNxoIoLt_Y

Length: 49min 19sec (2959 seconds)

Published: Tue Jun 27 2023