JWT Cookie Authentication0:35
Let's go ahead and log into Spark. And let's pretend we want to make an API call from this main home screen. Now, if you're thinking that you might have to make an API token and somehow get that and pass it to your client, that's not how it works. It's much simpler than that. So when you're in your JavaScript, let's go to the JavaScript for this page, which is home.js. We can actually make an API call without passing any token. And Spark is smart enough to authenticate that for us, because it knows we're coming from the web front-end, and it actually passes a JWT token inside a cookie to the back-end, which is then interpreted by the Spark API authentication layer. So it lets you consume your API very conveniently.
Creating an API Route1:13
which is then interpreted by the Spark API authentication layer. So it lets you consume your API very conveniently. Let me show you what I'm talking about. Before we write any JavaScript, let's actually go to our routes. In our app/Http directory, you'll see you have two routes files in Spark. You have a routes.php, which this is more your web UI routes, and then you have an api.php, which actually already includes a route group with the API URI prefix and the auth API middleware, which will authenticate all of our API routes. Now, let's go ahead and put a route in this file. Let's call it route.getTest, so the URI will actually be api.test.
Calling API from Frontend1:47
Now, let's go ahead and put a route in this file. Let's call it route.getTest, so the URI will actually be api.test. Let me make this a little bigger for you. And let's go ahead and just return some dummy data here. Let's just return an array with the name Taylor, and that should return JSON, since Laravel will automatically encode arrays to JSON if you return them from routes. All right, so we've got this test route, api.test, and now let's consume that from our front-end. Now, remember, we don't actually have to pass any token. We can just say api.test, get the response, and now let's just log that out to the console. So we'll log the response data in our inspectors console.
We can just say api.test, get the response, and now let's just log that out to the console. So we'll log the response data in our inspectors console. Now, we don't have to pass any token. That's what's so great about it. Let's go ahead and do this. Let's pull up our inspector, take a look at our console, and then refresh this page, and you can see we actually got our data from the route. So just like that, without having to pass any token, all of the authentication was done automatically. And now that lets you share your API with your web front-end and to your externally consumed API, which might be consumed by Guzzle and your SDK. So let me show you what I mean by that. So if we come to Postman, which is a REST client, and we try to make a GET request to this api.test,
Testing External Access3:04
So let me show you what I mean by that. So if we come to Postman, which is a REST client, and we try to make a GET request to this api.test, you can see that we actually get a 401 unauthorized. And this is basically the same URI that we called from our web front-end, but because we're coming from an external source, Laravel doesn't know how to authenticate that out of the box. Spark takes care of that for you when you're coming from your JavaScript. But coming from this end, we need to actually pass an API token. So let's go generate an API token in our settings. Go ahead and close this inspector, and let's just create a personal token and grab that. All right, now if we go back to Postman and put this in our query string,
Using Personal API Token3:37
Go ahead and close this inspector, and let's just create a personal token and grab that. All right, now if we go back to Postman and put this in our query string, we should be able to access this route just fine. So let's call this route now. All right, and now we get our data. So that's what I mean about being able to share your API. We use the same back-end route, but we were able to access it conveniently from our web front-end without passing a token because Spark will authenticate that using a cookie which contains the JWT token. Or we can access it externally via a REST client or Guzzle by passing the token. So that's really convenient because you can build out all your API routes and consume those from your web front-end.
Or we can access it externally via a REST client or Guzzle by passing the token. So that's really convenient because you can build out all your API routes and consume those from your web front-end and let them be consumed by external clients in the same application.
