Here's the next example I have for you. So if I scroll down, behind the scenes I've added this new page for your achievements. Now at the moment, it's blank, but if I switch over to Sublime, here's what I 've created. At some point, we're expecting an array of achievements, and then we iterate over them and we spit out the name. That's it. Okay, so let's make an Ajax for Quest now.

That's it. Okay, so let's make an Ajax for Quest now. We'll say when this component is created, fire off an Ajax request to my server , and I have it currently under API achievements. So we'll run that, and then with the response, we can assign it to the list of achievements. Okay, let's take a look at what that looks like on the Laracestend. I'll switch over, and this is what I have at the moment. And to note, I've hard-coded the user.

I'll switch over, and this is what I have at the moment. And to note, I've hard-coded the user. Of course, we're going to change that in just a minute. But if you visit slash API slash achievements, we find at the moment myself and then we return my achievements collection. That's it. So if I now switch over to Chrome and refresh, there we go. We see all achievements that have currently been awarded to me. But the only problem, of course, is anyone can see this page, but really it

We see all achievements that have currently been awarded to me. But the only problem, of course, is anyone can see this page, but really it should be limited to only myself. If I have the proper permission, then I can see my achievements. And if you have the proper permission, you can see your achievements, but you can't see my achievements. So it sounds like we need a layer of API authentication. So if I switch back to the Laracestcode base, and we go to config slash off,

So it sounds like we need a layer of API authentication. So if I switch back to the Laracestcode base, and we go to config slash off, you'll see if I scroll down, here's the authentication guards. And for my API, the default driver is token. So that means we can identify ourselves as the user using a simple token. Basically, that means when you make your Ajax request, you'll include your API token. And then this driver will validate it against what's stored in the database for your account.

And then this driver will validate it against what's stored in the database for your account. So to get started, I'm going to make a new migration, and we'll call it add API token to my user's table. All right, let's visit that. And we'll say table, add a new field API token. Let's put that after the password. And this should be unique, but it's not required. It can be null.

And this should be unique, but it's not required. It can be null. And yeah, I think that should be OK. And then finally, if you do DOM methods, you could say table, drop the column API token. And yeah, that seems good. So let's go ahead and migrate my local database. And then at this point, the workflow would be when a user registers for an account, generate a random string, and actually on that note, you might want to set a limit,

account, generate a random string, and actually on that note, you might want to set a limit, however much you want to 180, whatever. But anyways, you generate a random string and assign it as their API token. Now I'm not going to do that because this is a real code base. So instead, what I'll do is find my own account, error cast user, where username is me. And here you can see the API token is null. Let's fill it with a, yeah, just string random is fine, and save it.

And here you can see the API token is null. Let's fill it with a, yeah, just string random is fine, and save it. OK, so now if I get a fresh user instance, we now have an API token for my account. So if I now switch back to our project, when we perform this API request, let's tack on our API token. And again, at the moment, I'm hard coding this, but of course it would need to be dynamic. So let's think what happens.

be dynamic. So let's think what happens. When this page loads, it's separate from the Lyra cast code base or your main F , it will then perform a cross origin Ajax request while passing through this identifier. This is a stateless way to authenticate and represent me. Now on the Lyra cast end, if I go back to my API routes, we will, we could wrap it or we'll just do it here. I'm going to apply the API off middleware.

we'll just do it here. I'm going to apply the API off middleware. So you're familiar with this one likely already. This means you have to be authenticated in order to access this route. However, again, this should be stateless. So we're going to use API authentication. And like we said, within that config, uh, off file at the moment, where is it? Here it is. We're going to use a token driver for API authentication. OK, let's switch back.

We're going to use a token driver for API authentication. OK, let's switch back. So what this means is if we get to this point here, the user has provided a valid API token. And in fact, we'll say it works just to try it out. OK, so if I come back to Chrome, I will open up the network tab, give it a reload. Now you'll see two, uh, XHR requests. I'm not sure if we talked about this, but when you are performing a cross origin request,

I'm not sure if we talked about this, but when you are performing a cross origin request, it will first submit a, where is it? This one here. It'll first submit a options request. And that's to basically check the response headers and what's allowed. And then it'll make the, uh, the main request. OK, and sure enough, we get it works, but, but try this out and we'll go back to sublime. Let's just change it.

to sublime. Let's just change it. Something we know is not valid. OK, well, now if we run it, you'll see we get a 401 unauthorized. You didn't give us a valid token. Nothing like that matches up in the database. So Laravel automatically rejects the request and you never hit this method. OK, cool. So if we now know if you get to this point, you're essentially signed in, so to speak,

So if we now know if you get to this point, you're essentially signed in, so to speak, that means I could then say, OK, just get the user associated with the request. Like so, and get rid of the import there. And in fact, let's cleaner to simply inline it and we get something like that. OK, so now if I come back to Chrome, we give it a refresh, whoops, we forgot to fix the API token. OK. But anyways, if I give it a refresh, we're back to seeing my achievements.

OK. But anyways, if I give it a refresh, we're back to seeing my achievements. But the difference is we are authenticating the request. So if you don't do this, or if anyone tries to hit this endpoint, it's not going to work because you are not authenticated or authorized. OK, cool. So at this point, yeah, it's just a matter of accepting the API token. For like an asset's website, it just doesn't make too much sense. But again, we're just wanting samples here.

For like an asset's website, it just doesn't make too much sense. But again, we're just wanting samples here. So it could be as simple as adding an input with a placeholder, your layercast API token. And then we'll add a VModel for the token. We will accept that here. And then we will insert it there. So we'll use this syntax here. But now notice, this isn't quite what we want because let's just see it in action.

But now notice, this isn't quite what we want because let's just see it in action. If we run it, let's see in the console, token is not defined. Oh, this is actually unrelated. But if I run it again, yeah, it still fails. And that's because again, when the component is created, it immediately fires off an Ajax request. But the token has not been filled yet. So you'll see right here, the user hasn't even had the option to fill out the

But the token has not been filled yet. So you'll see right here, the user hasn't even had the option to fill out the token yet before we submit the Ajax request. And actually, let's clean this up real quick. A little CSS order, padding all around it, maybe two, rounded and with full, okay, good enough for me right here. Okay, but anyways, it sounds like we should only fire off this Ajax request after the token

Okay, but anyways, it sounds like we should only fire off this Ajax request after the token has been populated. So here's what I think we should do. Um, let's change this to a method. What are we doing here? We are fetching the achievements and then let's wrap it within our methods object. Okay. Next, if I scroll up here, we could do this in a couple of ways.

Okay. Next, if I scroll up here, we could do this in a couple of ways. We could listen for blur. We could listen for a key up that enter and then fetch achievements. Why don't we try that? So when the user types in, if they press the enter key, we will then call fetch achievements at which point we will make our Ajax request. And if everything was done correctly, once we have the results, we update the achievements

And if everything was done correctly, once we have the results, we update the achievements array, which means this will rerender. Okay. So give it a refresh. I'll paste in my token, I'll hit enter, it makes the Ajax request. And there we go. So we just need to give ourselves a little bit of breathing room, maybe margin bottom of eight.

bottom of eight. Once again, we paste it in, we run it, we make the Ajax request, we get the results, and we assign them to the achievements array. Now again, in real life, if you had a user accounts, here, it would make a sense for this kind of application. But if you did, you might have a section in your settings panel to enter your layercast

But if you did, you might have a section in your settings panel to enter your layercast API token. It would then be saved. And for all future requests that needed to make a cross origin request to layer cast, your API token would automatically be included. And I'm sure in many cases, you've seen situations like that where you have to paste in the API token that you want to use for GitHub or whatever it happens to be.

paste in the API token that you want to use for GitHub or whatever it happens to be. So let's try a different user, let's boot up PHP artisan tinker, and we'll say layercast, actually, let's just do factory for a user create. And then once again, I will run this command to save an API token. Okay. So the user's API token is now this one. And now if we paste in that new token right here, I'll hit enter. And now here's the achievements for that user.

And now if we paste in that new token right here, I'll hit enter. And now here's the achievements for that user. And at this point, they're just a generic subscriber. That's it. Now, one last thing. If we once again enter something that does not exist and we run it, we don't get much feedback. But if we go to the network tab, let's refresh, we insert something. And here, we do get a 401 unauthorized, but we don't pick up on that.

But if we go to the network tab, let's refresh, we insert something. And here, we do get a 401 unauthorized, but we don't pick up on that. Let's do that real quick. And then we'll call it a day. So right here, well, first, let's clean this up. Let's use the structuring to only fetch the data we want and get something like that. But then let's catch any errors that might be thrown. And maybe up here, we'll add a message to the user. So let's, let's review this error dot response, come back, paste in something

And maybe up here, we'll add a message to the user. So let's, let's review this error dot response, come back, paste in something that doesn't exist. So run it. And now if I console dot log, this is what I want you to see. So here's the response. The data is unauthenticated. All right. So this that message is error dot response dot data, that error, that's always

All right. So this that message is error dot response dot data, that error, that's always a little clunky. But then right up here, we could say within a paragraph tag, it'll be text red, italic and text small. And we'll say, if you have a message for us, then spit it out. Okay. So now if we come back and we give it another shot, we try something that doesn

Okay. So now if we come back and we give it another shot, we try something that doesn 't exist. Oh, sorry. That's not a valid API token. Let's do something correct like that. We run it. And I now see my achievements, but we forgot to clear this out. So that's the final step. Right here, I guess I've got to bring it back to what we had before.

So that's the final step. Right here, I guess I've got to bring it back to what we had before. Dang it. All right. So we have that, and then we'll update the message to nothing or success or whatever you want. Okay. Last try, do something random, doesn't work, paste in a real token, run it and it does

Last try, do something random, doesn't work, paste in a real token, run it and it does work. All right. So in conclusion, here's what you did. This component wants to access any kind of information that may require authentication. In this case, we're using achievements. It really doesn't matter who sees them, but we're imagining that needs to be secured.

It really doesn't matter who sees them, but we're imagining that needs to be secured. Okay. So in order to do that, you have to include an API token along with that request. Think of that as your permission slip in order to make the request. And if you don't have that permission slip, then like we saw here, you'll get unauthenticated. Actually, once again, we got to fix that as well. So if there's an error, clear out the achievements, okay, sorry, we just keep

Actually, once again, we got to fix that as well. So if there's an error, clear out the achievements, okay, sorry, we just keep finding stuff to do. So the normal ones, we do a different one. That's what we want. But anyways, we've now included the permission slip. So if we now switch over to the layercast code base, you'll see here we've included the auth API middleware.

included the auth API middleware. Now behind the scenes, it's going to look at that API token. It's then going to validate it against what you have in the database. And if it matches up, it will set the authenticated user, at which point we can reference that user like so. And that's all there is to it. So if you have any questions, leave a comment below and we'll try to help out.

So if you have any questions, leave a comment below and we'll try to help out.