Session-based Authentication in Laravel

What is session-based authentication?

Session-based authentication is created on the server for each user after they login. The server then sends a unique session identifier for the client side to store which is usually stored in the cookie. This cookie is used for subsequent requests to authenticate the user.

What is a cookie?

It is a small piece of data that a web sever sends to a user's web browser which is then stored and is sent back with every subsequent request to the same server. Think of it as a way for websites to remember users across different sessions.

Setting up Session-based Authentication in Laravel

Setting up API Authentication in Laravel is simple since they already have the starter kits. You can also check their documentation for more information.

SPA Authentication

This is from their documentation. You can read more from here

For this feature, Sanctum does not use tokens of any kind. Instead, Sanctum uses Laravel's built-in cookie based session authentication services. This approach to authentication provides the benefits of CSRF protection, session authentication, as well as protects against leakage of the authentication credentials via XSS.

In order to authenticate, your SPA and API must share the same top-level domain. However, they may be placed on different subdomains. Additionally, you should ensure that you send the Accept: application/json header and either the Referer or Origin header with your request.

Steps:

1. Run the php artisan breeze:install command and select the API stack as the desired stack.
2. Run the php artisan migrate to run the newly created migrations.
3. Ensure this environmental variables exist in your .env file

FRONTEND_URL= //Add your frontend url
SESSION_DOMAIN=.localhost //with a dot before the localhost
SANCTUM_STATEFUL_DOMAINS= //.localhost

5. Verify if the routes are now available using php artisan route:list or php artisan r:l. This will list all available route for your application. Check if there are routes for sanctum/csrf-cookie, login, register, forgot password.
6. If routes do exist then you're done setting up your laravel api. That's all you need to have a working api authentication.

Connecting your React or any SPA

You can now use react, vue or any SPA that you like. Now, when making a request using axios or any fetching library ensure to add the following configuration or any equivalent.

axios.defaults.withCredentials = true;
axios.defaults.withXSRFToken = true;

What this does is it will automatically handle the cookie whenever you send a request to your api application. Most likely if ever you use axios you'll have a setup like this.

import axios form 'axios';

export const api = axios.create({
  baseURL: import.meta.env.VITE_API_URL,
  withCredentials: true,
  withXSRFToken: true,
})

To begin authenticating a user, you can start by creating a basic login form. Before sending a POST request to the /login endpoint, you must first make a GET request to the sanctum/csrf-cookie route. Once the sanctum/csrf-cookie request is complete, you can proceed with authenticating the user via the /login endpoint. Typically, your auth functions would look like:

// Make this request first then afterwards the login
const getCSRFToken = async () => {
    await api.get('sanctum/csrf-cookie', {
      baseURL: import.meta.env.VITE_API_WEB_URL
    })
}

const login = async (form: UserLogin) => {
    const { status, data } = await api.post('login', form,
      { baseURL: import.meta.env.VITE_API_WEB_URL }
    )
    // Handle the response
}

// Register Fn

// Logout
const logout = async () => {
    const { status } = await api.post('logout', null, {
      baseURL: import.meta.env.VITE_API_WEB_URL
    })

    // Handle the logout
}

Pre-flight

You'll most likely see a preflight request before any api request you do this is automatically done by the browser. You can check more about it [here](A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood and a server is aware using specific methods and headers.)

You can cache for a certain amount of time so that preflight wont be sent for every request you make. Open the cors.php file in your laravel application and update the 'max_age' configuration. Now whenever you make a request a preflight will be sent once only for every api endpoint and not for every request sent to the api endpoint.

The preflight response can be optionally cached for the requests created in the same URL using Access-Control-Max-Age header like in the above example. To cache preflight responses, the browser uses a specific cache that is separate from the general HTTP cache that the browser manages. Preflight responses are never cached in the browser's general HTTP cache.