Setting Up Laravel Sanctum for Next.js Authentication: A Complete Guide

Seamless, secure authentication is at the heart of every modern web application. If you’re building a Next.js frontend with a Laravel API backend, you might be wondering: How can I set up secure, user-friendly authentication between these two powerhouses? The answer is Laravel Sanctum. In this guide, you’ll learn exactly how to set up Laravel Sanctum Next.js authentication—from configuration to implementation, with real-world tips, warnings, and best practices along the way.

Why Use Laravel Sanctum for Next.js Authentication?

Laravel Sanctum is a simple yet powerful authentication system designed for SPAs (Single Page Applications), mobile apps, and simple token-based APIs. Its flexibility and ease of use make it a popular choice for integrating Laravel with modern frontends like Next.js.

Key benefits:

• Lightweight and easy to configure
• Supports SPA authentication with cookies
• Enables API token authentication for stateless requests
• Secure and scalable for production use

How Sanctum Works With Next.js Frontend

Sanctum can manage authentication in two main ways:

1. SPA Authentication: Uses cookies for session management, providing a seamless experience for logged-in users on the frontend.
2. API Token Authentication: Issues tokens for stateless authentication, often used for external clients or mobile apps.

For most Next.js apps, SPA authentication with cookies is the most secure and user-friendly approach.

Prerequisites: What You’ll Need

Before diving in, make sure you have:

• A working Laravel application (8.x or newer recommended)
• A Next.js application (12.x or newer recommended)
• Basic knowledge of REST APIs and authentication principles
• Node.js, npm/yarn, Composer installed

Step 1: Setting Up Laravel Sanctum

1. Install Sanctum

In your Laravel project root, run:

composer require laravel/sanctum

2. Publish Sanctum Configuration & Migrations

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

This will publish the Sanctum config file and create the necessary database tables for personal access tokens.

3. Configure Sanctum Middleware

In app/Http/Kernel.php, add Sanctum’s middleware to your api middleware group:

'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

4. Set Up CORS

Edit config/cors.php to allow requests from your Next.js app domain:

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_origins' => ['http://localhost:3000'],
'allowed_methods' => ['*'],
'allowed_headers' => ['*'],
'credentials' => true,

5. Configure Session & Cookie Domains

In your .env file, ensure your session and cookie domains are set appropriately:

SESSION_DOMAIN=.yourdomain.com
SANCTUM_STATEFUL_DOMAINS=localhost:3000,127.0.0.1:3000
domain=localhost

Update your config/session.php as needed.

Step 2: Building Laravel Authentication API Endpoints

To authenticate users from Next.js, you’ll need routes for login, registration, user retrieval, and logout.

Example Routes in routes/api.php:

Route::post('/login', [AuthController::class, 'login']);
Route::post('/register', [AuthController::class, 'register']);
Route::get('/user', [AuthController::class, 'user'])->middleware('auth:sanctum');
Route::post('/logout', [AuthController::class, 'logout'])->middleware('auth:sanctum');

Example AuthController Methods

Here’s a simplified example for the login method:

public function login(Request $request)
{
    $credentials = $request->only('email', 'password');
    if (!Auth::attempt($credentials)) {
        return response()->json(['message' => 'Invalid credentials'], 401);
    }
    return response()->json(['message' => 'Login successful']);
}

Step 3: Implementing Next.js Authentication Flow

Now, let’s connect your Next.js frontend with your new Laravel authentication API.

1. Install Axios (or Fetch API)

npm install axios

2. Configure Axios for Credentials

Set Axios to send cookies with every request:

import axios from 'axios';
const api = axios.create({
baseURL: 'http://localhost:8000',
withCredentials: true,
});

3. Authenticating the User

a. CSRF Token

Sanctum requires the frontend to hit the /sanctum/csrf-cookie endpoint before making authentication requests:

await api.get('/sanctum/csrf-cookie');

b. Login Request

await api.post('/api/login', {
  email: 'user@example.com',
  password: 'password',
});

c. Get Authenticated User

const user = await api.get('/api/user');

d. Logout

await api.post('/api/logout');

4. Protecting Next.js Routes

Use React context or state management to store authentication state and protect routes/pages as needed. Redirect unauthenticated users to the login page.

Step 4: Advanced Sanctum Configuration & Best Practices

• Production Security: Always use HTTPS and set SESSION_SECURE_COOKIE=true in production.

• Personal Access Tokens: For mobile apps or third-party clients, use Sanctum’s token abilities:

  $token = $user->createToken('device-name')->plainTextToken;
  

• Custom Middleware: Use Laravel middleware to restrict API routes as needed.

• User Roles & Permissions: Combine Sanctum with Laravel’s policies or packages like Spatie Permissions for granular access control.

Common Issues and Troubleshooting

• CORS Errors: Ensure your Laravel CORS settings exactly match your frontend origin and enable credentials.
• Cookie Not Set: Cookies require matching domains and HTTPS in production.
• Session Domain Issues: The SESSION_DOMAIN and SANCTUM_STATEFUL_DOMAINS must include your frontend domain.
• Mixed Content Warnings: Always use HTTPS for both frontend and backend in production.

Real-World Example: Next.js Login System with Laravel Sanctum

Let’s tie it together with a simple authentication flow:

1. User visits login page in Next.js
2. Frontend hits /sanctum/csrf-cookie to establish CSRF protection
3. Frontend sends credentials to /api/login
4. Laravel authenticates user and returns success
5. Next.js fetches /api/user for user data
6. User is now authenticated and can access protected routes

This flow ensures a secure, session-based login experience, leveraging Laravel Sanctum’s SPA authentication.

Latest News & Trends

Stay updated on the evolving landscape of Laravel Sanctum and Next.js integration:

• Increased Adoption of Laravel Sanctum for Modern SPAs: Developers are increasingly choosing Sanctum for its simplicity and compatibility with Next.js, Vue, and React SPAs.
• Enhanced Security Practices: There’s a growing emphasis on stricter CORS and cookie security settings as more SPAs are deployed in production environments.
• Next.js Middleware for Authentication: The latest versions of Next.js offer advanced middleware capabilities, making it easier to protect routes and manage server-side authentication states.
• API-First Architectures: The shift towards decoupled, API-driven apps is accelerating, making robust authentication flows like Sanctum + Next.js more critical than ever.

Conclusion: Secure Your Next.js App with Laravel Sanctum

Setting up Laravel Sanctum for Next.js authentication offers a robust, scalable, and secure foundation for any modern web project. By carefully configuring Sanctum, handling CORS, and implementing proper authentication flows on both backend and frontend, you can deliver seamless user experiences and strong security.

Ready to take your Laravel and Next.js integration to the next level? Explore advanced topics like real-time features, social login, or granular permissions—or reach out to professional web development partners for expert help.

Chat with us now Contact us today.