Laravel Sanctum SPA Authentication Not Working with Next.js Frontend.

Laravel Sanctum SPA Authentication Not Working with Next.js Frontend.

Laravel Sanctum is a simple, lightweight authentication system for Laravel applications. It is designed to work with Single Page Applications (SPAs) and provides an easy way to generate and manage API tokens for authentication. However, when trying to use Laravel Sanctum for authentication with a Next.js frontend, some developers might face issues. In this answer, we will discuss the common causes of this problem and provide solutions.

1. Incorrect Setup of Laravel Sanctum

The first thing to check is if Laravel Sanctum is correctly set up in your Laravel application. Make sure you have installed the Laravel Sanctum package using Composer:

composer require laravel/sanctum

Then, add the following lines to the .env file:

APP_KEY=base64:your_app_key_here
SANCTUM_STATEFUL_API=true

Finally, add the Sanctum service provider to the providers array in the config/app.php file:

'providers' => [
    // ...
    Laravel\Sanctum\SanctumServiceProvider::class,
],

2. Incorrect Setup of Next.js Frontend

Next, ensure that your Next.js frontend is correctly configured for Laravel Sanctum authentication. First, install the axios package for making HTTP requests:

npm install axios

Create a new file called api.js in the lib folder of your Next.js project:

import axios from 'axios';

const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${process.env.NEXT_PUBLIC_API_TOKEN}`
  }
});

export default api;

Replace NEXT_PUBLIC_API_URL with the URL of your Laravel application's API endpoint and NEXT_PUBLIC_API_TOKEN with the token you will generate later.

3. Generate an API Token

To generate an API token for your Next.js frontend, log in to your Laravel application as an administrator or any user with the necessary permissions. Go to the /sanctum/csrf-cookie endpoint to set the CSRF cookie in your browser:

http://your-laravel-app.com/sanctum/csrf-cookie

Now, go to the /api/sanctum/create-token endpoint to generate a new token:

http://your-laravel-app.com/api/sanctum/create-token

Copy the generated token and set it as an environment variable in your Next.js project:

export NEXT_PUBLIC_API_TOKEN="your_api_token_here"

4. Make API Requests from Next.js Frontend

Now, you can make API requests from your Next.js frontend using the api.js file you created earlier:

import api from '../lib/api';

// Make a GET request
api.get('/users')
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

5. Middleware Protection

If you have any routes or resources in your Laravel application that require authentication, make sure to protect them with the auth:api middleware:

Route::middleware(['auth:api'])->group(function () {
    Route::get('/protected-route', 'ProtectedController@index')->name('protected');
});

By following these steps, you should be able to successfully authenticate your Next.js frontend with Laravel Sanctum. If you still encounter issues, make sure to check the Laravel and Next.js documentation for more information.