Let's take a look at authentication on the front end. So I want to keep this simple to start. I sort of want to mimic the functionality we have here on the backend. So we want to start off with a login form here. Whenever the user logs in, we want to store this token somewhere on the client. So in this case, we'll store it in localStorage. And then for any queries that are protected, for example, this me query here, we want to be able to pass this token through as a bearer token in the header. So in Apollo v3, we have some helper methods that are available to us. For example, the onLogin method automatically sets the localStorage item for the token.

So in Apollo v3, we have some helper methods that are available to us. For example, the onLogin method automatically sets the local storage item for the token. There's one for onLogout, which removes the token from local storage. And if this token exists, it also makes sure to pass it in as a bear token for any other requests. Now, unfortunately, in v4, these helper methods don't exist, so we have to do it manually. So let's do that throughout this video. Let's create a new login form. So new file, login.vue. And I'm just going to paste in the template here to save time.

So new file, login.vue. And I'm just going to paste in the template here to save time. It's just a form for logging in. We have three pieces of state, error, email, and password. So let's add that first script to add our state here. So we have email, password, and error. Okay, let's save that. Let's make sure to add this in our router. So let's just duplicate one of these and add one for login. Okay, the path is /login.

So let's just duplicate one of these and add one for login. Okay, the path is /login. The name is login, and the file name is login as well. And then we have to add this to our menu in app.vue. So let's just duplicate this, let's say to login, and login here. Okay. Let's see if this renders. Back to our app, login, and there's our login form. So let's go ahead and perform this mutation here as the user logs in. Back to the login form.

So let's go ahead and perform this mutation here as the User logs in. Back to the login form. I believe I have a method here called login. I do. So let's create that first. So after data, let's add our methods key. And I'm just going to grab a mutation from our create view here. I'm just going to copy this entire mutation. And let's rename it to login. So this login, and I'm not going to do loading state here.

And let's rename it to login. So this login, and I'm not going to do loading state here. So I'm going to remove this. And let me just grab the actual mutation from GraphQL playground here. So let's grab this. Let's paste it in here. So in between the backticks, let's paste in the actual mutation. Save that. And let's make some changes here.

Save that. And let's make some changes here. So we have to name it. It's named login, takes in an input of type login Input required. And then for actually logging in, we don't need this object. Let's get rid of this. It's just going to be input here, save that. And then we are returning the token. So we do take in some variables here. It's going to be another nested object called input.

So we do take in some variables here. It's going to be another nested object called input. And then what do we have here? The email and the password. So let's add that email is our state. So this.email and same for password. Okay. Now, after that's successful, let's just console.log data for now. And let's comment this out.

let's just console.log data for now. And let's comment this out. And for the error, you can do this as well, but let me just console.log the errors for now. Okay. Actually, I'm just going to skip that step. And set the error directly here. So this.error equals this. And there's a generic message on here, on the first index and message.

And there's a generic message on here, on the first index and dot message. Okay. Save that. See if I did that correctly. Back to our app. Let's start off with a blank form here. And we have some errors. GQL is not defined. Forgot to import that.

GQL is not defined. Forgot to import that. So let's make sure to import that up here. Okay. And let's try that again. Refresh. Let's try the error message. And there is our generic error. Now let's see if we actually get the token when we provide correct credentials.

Now let's see if we actually get the token when we provide correct credentials. So let me log in here. And let's hit login. And it looks like we do. So the token is within data.data.login.token. So now we have to set this in localStorage. Again, in V4, we have to do this manually, but in V3, there's helper methods you can use,

Again, in V4, we have to do this manually, but in V3, there's helper methods you can use, but we are using V4 here. So we have to do it ourselves. So right within here, where is it? Right here. Let's set a local storage item. So localStorage.setItem. The key is going to be apolloToken.

So localStorage.setItem. The key is going to be ApolloToken. And that's the same name in V3. And the actual token is data.data.login.token. And instead of using the router to push to a page, I'm just going to do it the old fashioned way with a full page refresh using window.location.href. And we'll just push to the homepage for now. Like this.

And we'll just push to the homepage for now. Like this. Okay. So let's try this again. And let's see if we get this localStorage item. So let's go to application localStorage. Let me just refresh to make sure. Let's log in again. And if we hit log in, we can see the Apollo token here,

And if we hit log in, we can see the Apollo token here, and we are redirected back to the homepage. Okay, cool. Now let's set up a page where we can perform this query, where we show the information for the logged in User. So let's do that quickly. So again, I'm going to make a new view here. Let's call it me.view. Again, I'm going to paste in the template to save some time.

Let's call it me.view. Again, I'm going to paste in the template to save some time. It's just showing the logged in User here. So the name and the email. Let's go ahead and set up our script. And we need a piece of state for our error. So let's just say error null. And then we have to perform that query. So let's make an Apollo key here. The variable name is going to be me.

So let's make an Apollo key here. The variable name is going to be me. The actual query will go in here. And let's go ahead and grab that from here, from GraphQL playground. So it's just this one here. Let's paste that in, save that. And it's not formatting because I forgot the GQL here. And let's make sure to import that as well. Okay, let's save that again.

And let's make sure to import that as well. Okay, let's save that again. Now it reformats. And we can also set the errors down here. So after this, we can set an error like this. So error, error, and we can set it in here. So this.error equals error.message. So let's save that. Let's add this to the router. Let's put it here as well.

Let's add this to the router. Let's put it here as well. Should be named me. Name is me as well. And the component name is me. Okay. Now let's make sure to add it to the menu in app.view. And let's put it right here. It's me and me. Okay.

It's me and me. Okay. So let's try this out in the browser. Let's go to that me page. And we do get the correct error. So essentially what we're doing right now is this query, but we're not passing in the bearer token. So let's just do that. So let's comment this out. And we are performing this successfully,

So let's comment this out. And we are performing this successfully, but we are not passing in the authorization bearer token. So we are getting unauthenticated. Okay. So how do we pass in the token that's in localStorage? So again, V3 does this for you automatically, but in V4, we have to do it ourselves. So let's go to main.js. And let's create a new helper method here.

So let's go to main.js. And let's create a new helper method here. That sets the headers. So say function getHeaders. Let's make a new variable called headers. And let's set that to an empty object. Let's grab the token. So const token equals localStorage.getItem. And it's called ApolloToken. And if that token exists, so if token,

And it's called apolloToken. And if that token exists, so if token, then go ahead and set headers.authorization to Bearer and then the token. Okay. And then we can return the headers here. Okay. Let's save that. And now here where we're creating the link, we can pass in the headers here.

And now here where we're creating the link, we can pass in the headers here. So we can say headers and then use that method. So getHeaders. Okay. Save that. And hopefully I did that correctly. Let's check out our app here. And you can see that the logged in information for the logged in User shows up here.

which requires the token as well. So let's add a new link here for logging out. That will be an app.view. And it's not going to be a router link. It'll just be a normal anchor link. So let's get rid of this. Say log out and say, submit.prevent equals log out. Okay. Let's make that method here.

Okay. Let's make that method here. Say methods. And let's just grab the one we have from logIn. So let's grab all of this. Let's go back here. Let's paste that in. Let's rename it to logOut. And let's change the query here. It's named logOut.

And let's change the query here. It's named logout. We don't need any params. logout. Don't need these params. Same with this. Okay. We are grabbing the message. We don't need any variables here. And instead of setting the item,

We don't need any variables here. And instead of setting the item, we are removing it. So remove item. Apollo token. We don't need this second param. Let's redirect back to the homepage and we don't have errors here and that's fine. We can just console log. Okay.

Okay. Let's try it one more time. Let's log out here. And we have an error still. Sorry, this should be click not prevent. Okay. One more time. Let's open up our application. Let's log out. And you can see it does redirect back to the homepage.

Let's log out. And you can see it does redirect back to the homepage and the token is now gone. So that did work. So one more time, we can log in. Go ahead and log in here. The token is created on the backend. It's also stored here in our local storage. We are redirected back to this page, which makes use of this token.

We are redirected back to this page, which makes use of this token and grabs the information about the logged in user. And then we can do the same for logging out. So I'm going to do register behind the scenes. It's pretty much the same as logging in, but we just have a few more fields. So I'll be back when that's done. Okay, so I added the register form here. We have these fields here.

Okay, so I added the register form here. We have these fields here. And let's try this out. Actually, let's look at the code first. Almost the same as login, like I said, except after it creates the User, it also returns the token. And we are storing it here in localStorage, just like when we log in. So let's try this out.

just like when we log in. So let's try this out. Let's create a new User here. Let's try the errors first. Okay, and I just have the generic error here, which is fine for now, but let's fix that error and let's see if it works. Okay, so we are redirected back to the meet page and the information shows correctly. In the next video, we'll take a look at authorization.

and the information shows correctly. In the next video, we'll take a look at authorization to make sure that users have the correct permission when performing actions. So as always, let's make a commit. git add, git commit, auth on front-end.