Laravel 12 React Authentication Tutorial (Login & Register with Sanctum 2026)

Laravel 12 React Authentication Tutorial: In this guide, we will build a complete authentication system using Laravel 12 as backend and React as frontend with Sanctum.

This setup is widely used in modern applications where secure login and API authentication are required.

📌 What You Will Build

• User Registration
• User Login
• Protected Dashboard
• API Token Authentication

Step 1. Install Laravel Sanctum

composer require laravel/sanctum

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

Step 2. Setup Sanctum

use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
    use HasApiTokens;
}

Step 3. Create Auth Controller

php artisan make:controller Api/AuthController

namespace App\Http\Controllers\Api;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
use Illuminate\Support\Facades\Hash;

class AuthController extends Controller
{
    public function register(Request $request)
    {
        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);

        return response()->json($user);
    }

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

        $user = Auth::user();
        $token = $user->createToken('token')->plainTextToken;

        return response()->json(['token' => $token]);
    }
}

Step 4. API Routes

use App\Http\Controllers\Api\AuthController;

Route::post('/register', [AuthController::class, 'register']);
Route::post('/login', [AuthController::class, 'login']);

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Step 5. React Login Example

import axios from "axios";
import { useState } from "react";

function Login() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");

  const login = () => {
    axios.post("/api/login", { email, password })
      .then(res => {
        localStorage.setItem("token", res.data.token);
        alert("Login Success");
      });
  };

  return (
    <div>
      <input onChange={e => setEmail(e.target.value)} placeholder="Email" />
      <input type="password" onChange={e => setPassword(e.target.value)} placeholder="Password" />
      <button onClick={login}>Login</button>
    </div>
  );
}

export default Login;

Step 6. Protected API Call

axios.get('/api/user', {
  headers: {
    Authorization: `Bearer ${localStorage.getItem("token")}`
  }
});

🔥 Real Use Case

• SaaS platforms
• Admin dashboards
• E-commerce apps

✅ Best Practices

• Always hash passwords
• Use HTTPS in production
• Store tokens securely
• Handle logout properly

🚀 Conclusion

You have successfully implemented authentication in Laravel 12 with React using Sanctum. This is a production-ready setup used in modern applications.

Dharmesh Chauhan

(Swapinfoway Founder)

Hello Sir, We are brothers origin from Gujarat India, Fullstack developers working together since 2016. We have lots of skills in web development in different technologies here I mention PHP, Laravel, Javascript, Vuejs, Ajax, API, Payment Gateway Integration, Database, HTML5, CSS3, and Server Administration. So you need our service Please Contact Us

Haresh Chauhan

(Co-Founder)