NextJS Laravel 環境構築

昨日 14:56
バックエンド　laravel フロントエンドNextJS クッキーを使って認証　まずはLaravel11 sctumuで認証構築　Postmanで確認したい
ChatGPT

はい。
Laravel 11をバックエンド、Next.jsをフロントエンドにして、Sanctumの「Cookie + Session」方式で認証する構成で進めるのがよいです。

まずは Next.jsはまだ触らず、Laravel 11 + Sanctumを構築してPostmanで完全に確認しましょう。

Laravel公式でも、Next.jsのようなSPAにはSanctumのSPA認証を使い、APIトークンではなくLaravelのセッションCookieを使う方式が推奨されています。

今回の構成はこうします。

Next.js
│
│ Cookie
▼
Laravel 11
│
├─ Sanctum
├─ Session
├─ CSRF
└─ MySQL

最終的には、

POST /sanctum/csrf-cookie
↓
POST /api/login
↓
LaravelがセッションCookie発行
↓
GET /api/user
↓
ログインユーザー取得

という流れになります。

Laravel 11プロジェクト

まだ作っていない場合、

composer create-project laravel/laravel laravel-backend “^11.0”

cd laravel-backend

Laravel 11ではSanctumを

php artisan install:api

で導入できます。公式ドキュメントでもこの方法が案内されています。

実行します。

php artisan install:api

途中で質問が出たら、基本的にはデフォルトで進めてください。

その後、

php artisan migrate

データベース設定

.env

例えばMySQLなら、

APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost:8000

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=next_laravel
DB_USERNAME=root
DB_PASSWORD=

データベースを作成します。

CREATE DATABASE next_laravel;

そして、

php artisan migrate

Userモデル確認

app/Models/User.php

Laravel 11 + Sanctumなら、最終的にはこのような形にしておけばOKです。

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;

class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;

protected $fillable = [
    'name',
    'email',
    'password',
];


protected $hidden = [
    'password',
    'remember_token',
];


protected function casts(): array
{
    return [
        'email_verified_at' => 'datetime',
        'password' => 'hashed',
    ];
}

}

ただし、今回のCookie認証ではSanctumのAPIトークンを発行するわけではありません。

ここは重要です。

❌ localStorageにSanctum tokenを保存

❌ Authorization: Bearer xxx

⭕ Laravel Session Cookie
⭕ XSRF-TOKEN

SanctumのSPA認証はCookieベースのセッション認証です。

Sanctumのstateful設定

Laravel 11ではここが非常に重要です。

bootstrap/app.php

確認してください。

<?php

use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;

return Application::configure(basePath: dirname(DIR))
->withRouting(
web: DIR.’/../routes/web.php’,
api: DIR.’/../routes/api.php’,
commands: DIR.’/../routes/console.php’,
health: ‘/up’,
)
->withMiddleware(function (Middleware $middleware) {

    $middleware->statefulApi();


})
->withExceptions(function (Exceptions $exceptions) {
    //
})->create();

特に、

$middleware->statefulApi();

が重要です。

Laravel公式でも、SPAからのCookie認証を有効にするために statefulApi() を使用するよう説明されています。

Sanctumのstateful domains

.envに、

SANCTUM_STATEFUL_DOMAINS=localhost:3000,127.0.0.1:3000

を設定します。

ただし、今回Postmanから確認する段階ではlocalhost:8000からアクセスするので、まずはPostman確認を優先した設定にしても構いません。

最終的にNext.jsを

http://localhost:3000

Laravelを

http://localhost:8000

で動かすなら、

SANCTUM_STATEFUL_DOMAINS=localhost:3000,127.0.0.1:3000

としておきます。

ポート番号まで含める必要があります。

CORS設定

Laravel 11では config/cors.php が最初から存在しない場合があります。

その場合、

php artisan config:publish cors

を実行します。

Laravel公式もSPAでCORSをカスタマイズする場合、このコマンドを使用するよう案内しています。

config/cors.php

<?php

return [

'paths' => [
    'api/*',
    'sanctum/csrf-cookie',
],


'allowed_methods' => ['*'],


'allowed_origins' => [
    'http://localhost:3000',
],


'allowed_origins_patterns' => [],


'allowed_headers' => ['*'],


'exposed_headers' => [],


'max_age' => 0,


'supports_credentials' => true,

];

特に、

‘supports_credentials’ => true,

が重要です。

Session設定

.env

SESSION_DRIVER=file
SESSION_LIFETIME=120
SESSION_DOMAIN=null
SESSION_SECURE_COOKIE=false
SESSION_SAME_SITE=lax

ローカル環境ではこれで始めましょう。

まだ

SESSION_DOMAIN=.example.com

などにはしません。

今回はLaravel側にシンプルなAPIを作ります。

まずController。

php artisan make:controller AuthController

app/Http/Controllers/AuthController.php

<?php

namespace App\Http\Controllers;

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

class AuthController extends Controller
{
public function login(Request $request)
{
$credentials = $request->validate([
‘email’ => [‘required’, ‘email’],
‘password’ => [‘required’],
]);

    if (!Auth::attempt($credentials)) {
        throw ValidationException::withMessages([
            'email' => ['メールアドレスまたはパスワードが正しくありません。'],
        ]);
    }


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


    return response()->json([
        'message' => 'ログインしました',
        'user' => $request->user(),
    ]);
}


public function user(Request $request)
{
    return response()->json(
        $request->user()
    );

APIルート

routes/api.php

<?php

use App\Http\Controllers\AuthController;
use Illuminate\Support\Facades\Route;

Route::post(‘/login’, [AuthController::class, ‘login’]);

Route::middleware(‘auth:sanctum’)->group(function () {

Route::get('/user', [AuthController::class, 'user']);


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

});

これで、

POST /api/login
GET /api/user
POST /api/logout

ができます。

テストユーザーを作る

まず、

php artisan tinker

そして、

\App\Models\User::create([
‘name’ => ‘Test User’,
‘email’ => ‘test@example.com’,
‘password’ => ‘password123’,
]);

終了。

exit

Laravel起動
php artisan serve

通常、

http://127.0.0.1:8000

または

http://localhost:8000

になります。

ここからPostman

ここが今回の重要部分です。

Step 1 CSRF Cookie取得

Postmanで、

GET
http://localhost:8000/sanctum/csrf-cookie

を実行。

Bodyはありません。

Headerに、

Accept: application/json

を入れておきます。

成功するとレスポンスはほぼ空ですが、Cookiesを見ると

XSRF-TOKEN
laravel_session

が設定されます。

Laravel公式でも、SPA認証では最初に /sanctum/csrf-cookie を呼び、XSRF-TOKEN Cookieを取得してからログインする流れになっています。

PostmanでCookieを確認

PostmanのURL欄付近にある

をクリックしてください。

例えば、

localhost

に、

XSRF-TOKEN
laravel_session

が存在することを確認します。

ここまで来ればかなり重要なところまで成功しています。

次に、

POST
http://localhost:8000/api/login

Header：

Accept: application/json
Content-Type: application/json

Body → raw → JSON

{
“email”: “test@example.com”,
“password”: “password123”
}

ただし、ここで一つ注意があります。

CSRF対策のため、X-XSRF-TOKENも送る必要があります。

Postmanでは、取得した XSRF-TOKEN Cookieの値をURLデコードして、

X-XSRF-TOKEN

Headerに設定します。

例えば、

X-XSRF-TOKEN:

です。

ブラウザ＋Axiosの場合はAxiosが自動的にこの処理を行えますが、Postmanでは自分で確認する必要があります。Laravel公式もこの仕組みを説明しています。

Login成功

成功すれば、

{
“message”: “ログインしました”,
“user”: {
“id”: 1,
“name”: “Test User”,
“email”: “test@example.com”
}
}

のようになります。

さらにPostmanのCookieを見ると、

laravel_session

が更新されているはずです。

この laravel_session が今回の認証の本体です。

認証確認

次に、

GET
http://localhost:8000/api/user

Header：

Accept: application/json

Cookieは先ほどの

laravel_session

を使います。

成功すれば、

{
“id”: 1,
“name”: “Test User”,
“email”: “test@example.com”,
…
}

が返ります。

これが、

「CookieによるLaravel Sanctum認証が成功した」

という確認になります。

Laravel公式の保護されたAPIも、auth:sanctum を付けた /user に対して $request->user() を返す形になっています。

Logout

最後に、

POST
http://localhost:8000/api/logout

を実行。

成功：

{
“message”: “ログアウトしました”
}

その後もう一度、

GET
http://localhost:8000/api/user

すると、

401 Unauthorized

になることを確認します。

今回の確認ポイント

Postmanでは、この順番でテストしてください。

① GET
/sanctum/csrf-cookie
↓
XSRF-TOKEN
laravel_session
↓

② POST
/api/login
↓
Cookieによるログイン
↓

③ GET
/api/user
↓
ユーザー情報取得
↓

④ POST
/api/logout
↓

⑤ GET
/api/user
↓
401 Unauthorized

ここまで成功したら、Laravel側のCookie認証は完成です。

次の段階

コメント

コメントを残す コメントをキャンセル

投稿をさらに読み込む

NextJS Laravel 環境構築

タスク管理アプリケーション 設計書

昭和天皇の戦争責任論

外部公益通報に関して懸案事項まとめ

コメントを残すコメントをキャンセル

タスク管理アプリケーション設計書