 All right, it is finally coding time. We'll start by building a very, very bare-bones authentication app with our existing React app here just to show how you can use pocket-based authentication. And we won't be diving into any of the nitty gritty user interface stuff. So let's go and make our auth.js component here. And let's export default function auth. And just return auth for now in the app.js file. Let's just include the auth component here there. So auth will show up here in our app and realize that we didn't have to do .slash because we're using absolute imports now. And then here in the auth app, let's think about what we're going to do here. So first, we're going to just see if the user is logged in or not. I can make an indicator for that using H1 tags, let's say, log in. So is this true or false? And it looks like that. Let's just zoom in a little. So the way you can detect if users are logged in or not is via this pb.auth state variable. And I can just go to the documentation just to show you what I'm talking about. So pb, that's basically the handle that we just exported from our pocket-based.js file. I mean, it has a property called authStore that has all of the different properties we can use to check the user's current authentication state. So we have authStore.token, model is valid. So here, back in our code, we will import our pocket-based handle here that we've exported from pocket-based.js. So let us import that. Import pb from library slash pocket-based. And then here, we'll just do pb.authStore. You can see that IntelliSense already knows that there's this property. And we can do dot is valid. So this tells us if the current authentication state is valid or not. And this is a Boolean value. So we have to do dot toString to make it show up in the HTML. And sure enough, it tells us logged in is false. Now let's go ahead and make that input form so users can log in to our page. And so we should have two input fields and a submit button, one for email slash username and one for password. So here, I'm just going to paste a snippet here. It's just a form and has two inputs and a button. And it looks like this. So bare minimum doesn't have any functionality yet. And of course, what we could do is we could use React state and we could do something like this. This is the example that I have here. You can have two different state variables, one for username, one for password. But I'm not going to do that. Instead, I'm going to make things a little bit simpler by using a library, a framework called React hook form. So what you're going to do is do yarn add react dash hook dash form. And it's going to provide us with a library that we can use to manage forms better. And once you have that installed, you can import this hook called use form from react hook form. There we go. And once you have react hook form installed, you can restart the React server and bring that away. And you can destructure two items from the use form hook, like so. So you can get the register function and the handle submit function from the use form hook. And those are two different functions and I'll show you how to use them in just a second. Now for understanding purposes, I'm just going to, for now, just log the register function to console and to execute the register function you have to like provide it with a name. We're going to make two register functions in just a second, one for email and one for password. But first, let me log that to the console and refresh this. So you can see that the register function returns a name on blur on change. And basically, we're just going to feed all of these properties from the register hook to our input fields. So like how you would have to go and manually set the value to state variable and then use on change to set the e.target.value to the react set username hook. Now with register, it automatically does that for you. You just have to run this register function and it'll just generate all of the functions that has to be fed to the HTML component. So what you could do is you could just destructure the register function here using the three dots, just destructure, register, and just feed that to the input field. Just do the same bird. And of course, you're going to have to destructure this using ESX syntax, just save that. So now we have the two input fields here controlled in react state, but how are we going to print out the values that are in the input fields? Usually what you would do is you would go to the form and do on submit and set it to some handle submit function here, right? But remember that use form provides us with this handle submit function as well. So usually in your handle submit function, you need to have like handle submit and you have to take in an e and I have to do e.prevent default, something like that to prevent the form from refreshing the page and performing the default behavior because now we're controlling everything from react. We don't need the refresh, but because we have handle submit from use form, we actually don't need to do this. We just have to put handle submit from the use form hook and just put it here and it automatically does the e.prevent default for us and it takes in an argument here and that's going to be our own function. I had a function here called function login. You can just make a blank function for now and put login in here and login takes in like this, this custom function that you fit into the handle submit function is going to take in a parameter called data and you can just console.log data. So data is coming from the handle submit function which is also coming from use form and I can log that to the console and I'm going to refresh this. We can do some email, some password, hit login and that gives us our data object. But how do we log the users in with pocket base? Now if I head over to the documentation here, just exact line tells us how to do it which is await pb.collection users.auth with password. So I'm just yanking that line, go to our code and we're going to make this function async just paste in here and then there. So we do pb.collection and then we specify the users collection auth with password. Obviously we can just hard code username email. We just have to do data.email and here we do data.password and remember data is coming from there. It's coming from react hook form, save that and then we also want loading state so I can just make const is loading, set loading equals to use state and then we start off loading with false and then we could just do set loading true here and then once we're done we just set loading to false and that should be able, we should be able to log in this way. I'm going to just test it out, just refresh the page and I forgot to use to implement the loading state. So we do have set loading to true and false afterwards but we're not reading from the is loading value anywhere in our code. So here what you could do is you could just do if it's loading, so if it's loading then we want to just do p tags and just say loading and then here in the button let's just have disabled equals to if it's loading then we disable the button. Here we also just say if it's loading then I'm just going to use a ternary operator here. If it's loading then we just say loading if it's not then say login. So that's your ternary operator. Let's go ahead and test our code. So I'm going to just test at gmail.com. I foresee problems already because we don't really have users in our users collection. You can see that it's empty. So let's try to log in. It says loading and it gives us problems. So we have to do something like a try catch block in here. So let's just, I guess we could let me think about this. Let's just try here and just put all of this inside of it. And then let's catch e and then just console log e for now maybe or we could like prompt and then let's refresh log in. It tells us, okay, maybe not prompt maybe just alert forget the names of the JavaScript prompts. So it tells us client response ever failed to authenticate. All right, sure. So let's go and make a user here. We can have the email to be, what email user, gmail.com password. Let's have 123. Let's create the length must be between eight and nine. So if you ever get this annoying issue that it forces you to have a password of length between eight and 72 we could go and customize this by click on edit collection. Let's go to options here and username password enabled. So email slash password here. Actually, no, it's down here in general minimum password length. I think minimum requires us to have like length of five if not wrong. Yeah, it's five. So we have to do five doesn't let us go past that below that I mean. So user at gmail.com 12345. Let's create that user. So now that we have that user you can refresh the page. Just do user at gmail.com and then do 12345. Let's hit log in and you can see that logged in is now true. And so that's amazing. So instead of saying logged in is true if we wanted to let's say logged in as which user and email. So we can just print the email out by changing this dot is valid. We can change it to PB dot off store. You know what we will say if this is true if is logged in is true then we're gonna do PB dot off store dot model dot email there. So it should say user at gmail.com Let us just move this entire thing outside of this function and just say is logged in and we have to make that constant somewhere up here and we can do const is logged in is there we go. Instead of is logged in should be is valid though there. So not model is valid. So there we go. Let's find a way for the user to log out right now. So I'm gonna just say if it's logged in so if is logged in then we're gonna have to return logged in as whatever the email is and then let's just wrap this in react fragments. So if it's logged in return this and return a log on button here. Log out. If it's not then we're gonna return this. This is gonna be the login page. So here let's just change this to please log in. And there we go. The form are just making sure everything should be working fine. I go back to the page we can see logged in as this user if you click the log out nothing happens because we need our log out function. We can make that function your function log out. This log out function doesn't actually have to be an asynchronous function because it's not necessarily making an API call. It's just clearing the cookies that has the login information in the local storage. So we can do pb.authstore. Just check the documentation. So you see pb.authstore clear. It's not an asynchronous function because it's just modifying the local database, the local storage, I mean. So we do that clear. And it's gonna, we're gonna see some problems in just a while. So if I click on log out it's actually logged out right now although it still says log in, logged in. If I refresh the page though. Let's log out. That's weird. Oh, that's cause I don't have the log out function set to this log out button. So on click equals to log out. So if I click on the button, it does nothing. It still says logged in. But if I refresh the page you can see it's actually longed out. And that's, and the reason for that is because this is like I said this log out function is not clear. It's just modifying local storage. It isn't triggering a re-render in React. So React doesn't know to re-render and refresh to say that, oh, something's changed about react state and we should log out because react state didn't change, right? The local storage changed in the browser. So to fix this we're gonna have to manually force react to re-render and update. So what I could do is just make it dummy state variable. So dummy set dummy equals to you state some string. And then let's just do set dummy to, I don't know, math.random maybe. Then we can just do zero here maybe. There, there we go. So now if I go and log in here, user at gmail.com and let's click on log out. Now you can see that it refreshes and re-renders the page. And with that we're basically done with our bare bones and basic authentication app. Now I know we haven't got to doing the registration page and everything yet but that's because to register a new user we basically have to add a new row, a new record to this users table and adding a record to the users table is no different from adding a row to any other pocket base table. It's just the same procedure. And so I'm gonna be adding that in a later video. But first I'm gonna, in the next video I'm gonna show you how you can make a custom hook to perform all of the login and logout functions here because you can see that our auth app it's supposed to just contain the front end and the UI components. But we have a whole bunch of code like 50% of the code in here is react state and a whole bunch of functionality code. So I'm gonna show you how you can extract all of the code for the functionality here and refactor it into its own hook. And then after that we're gonna do the registration page.