Laravel Sanctumでユーザー認証APIを作成する #PHP

Laravel Sanctumとは...

SPA(シングルページアプリケーション)、モバイルアプリケーション、およびシンプルなトークンベースのAPIに軽い認証システム
Reference: https://readouble.com/laravel/8.x/ja/sanctum.html

実装準備

$ composer require laravel/sanctum
$ php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

Http/kernel.phpで下記を書き換えます

// sanctumをAPImiddlewareグループに追加する。
// SPAからの受信リクエストがLaravelのセッションクッキーを使用して認証できるようになります。
'api' => [

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

config/sanctum.phpで下記を書き換えます。

// ファーストパーティドメインを設定する(SPAからリクエストを行うドメインを設定)
'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
        '%s%s',
        'localhost,localhost:8000,127.0.0.1,127.0.0.1:8000,::1',
        env('APP_URL') ? ',' . parse_url(env('APP_URL'), PHP_URL_HOST) : ''
    ))),

LoginControllerを作成して、ログイン/ログアウト機能を実装する

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class LoginController extends Controller
{
    /**
     * Handle an authentication attempt.
     *
     * @param  Request  $request
     * @return \Illuminate\Http\Response
     */
    public function login(Request $request)
    {
        $credentials = $request->validate([
            'email' => ['required', 'email'],
            'password' => ['required'],
        ]);

        if (Auth::attempt($credentials)) {
            $request->session()->regenerate();

            return response()->json(Auth::user());
        }

        return response()->json([], 401);
    }


    /**
     * Log the user out of the application.
     *
     * @param  Request $request
     * @return \Illuminate\Http\Response
     */
    public function logout(Request $request)
    {
        Auth::logout();

        $request->session()->invalidate();

        $request->session()->regenerateToken();

        return response()->json(true);
    }
}

api.phpでmiddlewareにauth:sanctumを設定する

Route::group(['middleware' => 'auth:sanctum'], function () {
    // ログイン後にしかできないルーティングを記述
    Route::apiResource('hoges', 'HogeController');
});

// ログイン/ログアウトのルーティング
Route::post('login', 'LoginController@login');
Route::post('logout', 'LoginController@logout');

フロント側に下記を追加して、ログインできているかを確認する

import axios from "axios"
useEffect(() => {
    axios.post('/api/login', {
        email: 'hoge@example.com',
        password: 'hogehoge'
    }).then(response => {
        console.log(response)
    })
}, [])

上記を追加後、consoleで確認します。
loginできていればloginできたユーザー情報が表示できていると思います。