Vue.js SPA Authentication With Laravel Airlock

In this article we will focus on the SPA Authentication feature. For this: “we will no need any tokens, instead, Airlock uses Laravel’s built-in cookie based session authentication services”, that’s why we can have the frontend (Vue.js) and the backend (Laravel) in separate repositories which will make their maintenance and teamwork easier.

So let’s start creating a new Laravel project

Once installed change directory to the newly created Laravel appcd api-airlock to install Airlock.

In order to ensure the authenticated cookies are sent to the SPA we need to go to app/Http/Kernel.php to add the following middleware at the beginning of the api middleware group

Then we need to add the airlock guard to the user route in the routes/api.php this way Laravel will use the cookie instead of the token to verify the authentication.

Finally, in order to receive the session id from the frontend, we must indicate to Laravel which domain will be accepted. To do that, we can define the session domain variable in your .env file

This part is important, for dev environment we will use localhost, but for production we need to change it to our domain for example .domain.com notice the . at the beginning, this way we allow Multi-subdomain Sessions in Laravel, which is what we need to have the session shared between the backend and the frontend, and for that to work we need the same domain for both the SPA and the API, not the same directory, but the same domain, for exampledomain.com for the Vue.js SPA and api.domain.com for the Laravel API.

Keep in mind we can't use different domains to share the session ID.

This is all we need from Airlock because the defaults works just fine in local environment, later we will discuss some configuration for production, but for now, let’s configure CORS.

CORS stands for Cross-origin resource sharing, basically we must tell Laravel which domains are allowed to send us requests, the same with the headers and so on. To help us with all of that we will use this package fruitcake/laravel-cors

We have some configuration to do so let’s publish the config file:

This will create a new config file config/cors.php
The first thing we need to configure in this file are the routes in which we want to enable CORS, that is, enable the exchange of resources between different domains:

Next we need to enable support credentials, that will sets the Access-Control-Allow-Credentials header that we need for the authentication.

Next we need to add middleware HandleCors to the middleware property in the file app/Http/Kernel.php in order to work:

That’s all for the CORS configuration, let’s move on to prepare the authentication routes

In this article we are only concern about login and logout, but feel free to add the routes you need.

Open the fileroutes/web.php add the following:

Next let’s modify the LoginController.php to override the login and logout response to return a json response instead of the default redirect.

Let’s open the file app/Http/Controllers/Auth/LoginController.php and override the following methods provided by the trait Illuminate\Foundation\Auth\AuthenticatesUser

The authenticated method it’s called when the authentications is successful, in that case we return the authenticated user.

In the loggedOut method we return an empty response after the user logout.

With that done, we are ready to begin building our SPA, but before we do that, we need to serve our app through localhost which is the domain our SPA will use. Let's use artisan for that:

You should see a message like this in the console:

Make sure to configure your database in the .env file and create some users to test the authentication.

That’s all we need for our backend. In the next article we will start building our SPA with Vue.js.

Stay tune!

Related posts:

Perfection equals messiness. I said those words after a two-hour cooking ordeal. I don’t consider myself an expert cook but I know the basics. It amazes me how some cooks finish up and leave a near…

Hapi.js is a Node.js web framework used to build application program interfaces. The framework has a solid plugin system. Some of its features include: Socket.io is a Node.js server framework used to…

Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don’t work inside classes, they let you use React without classes. Accepts a context…