next.js laravel sanctum ログイン認証の問題

Question

実現したいこと

フロントはnext.js
バックエンドはlaravelを使用しています。
ログインページでメールアドレスとパスワードでログインしマイページに遷移。
その後現在のユーザー情報を取得したい

発生している問題・分からないこと

マイページ遷移後にusers/meでユーザー情報を取得することができない

このトークンをcookieに持たせておいて
apiClient.get('/api/users/me');で自動的に渡すようにすることは可能なのでしょうか？
ローカルストレージに保持しておく以外の方法を模索しています。

エラーメッセージ

GET http://localhost/api/users/me 401 (Unauthorized)
Mypage.tsx:34 予期しないエラー: 
AxiosError {message: 'Request failed with status code 401', name: 'AxiosError', code: 'ERR_BAD_REQUEST', config: {…}, request: XMLHttpRequest, …}
code
: 
"ERR_BAD_REQUEST"
config
: 
{transitional: {…}, adapter: Array(2), transformRequest: Array(1), transformResponse: Array(1), timeout: 0, …}
message
: 
"Request failed with status code 401"
name
: 
"AxiosError"
request
: 
XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: true, upload: XMLHttpRequestUpload, …}
response
: 
{data: {…}, status: 401, statusText: 'Unauthorized', headers: AxiosHeaders, config: {…}, …}
stack
: 
"AxiosError: Request failed with status code 401\n    at settle (webpack-internal:///(app-pages-browser)/../node_modules/axios/lib/core/settle.js:21:16)\n    at XMLHttpRequest.onloadend (webpack-internal:///(app-pages-browser)/../node_modules/axios/lib/adapters/xhr.js:106:72)\n    at Axios.request (webpack-internal:///(app-pages-browser)/../node_modules/axios/lib/core/Axios.js:40:49)\n    at async MyPage (webpack-internal:///(app-pages-browser)/./src/components/Mypage.tsx:16:33)"
[[Prototype]]
: 
Error
MyPage	@	Mypage.tsx:34
Show 16 more frames

該当のソースコード

"use client";
import React, { useContext } from 'react';
import { Button, Input, PasswordInput } from '@mantine/core';
import axios from 'axios';
import { useRouter } from 'next/navigation';

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

const Login = () => {
    const [email, setEmail] = React.useState('');
    const [password, setPassword] = React.useState('');
    const router = useRouter();

    const postData = async () => {
        axios.get('http://localhost/sanctum/csrf-cookie', { withCredentials: true }).then((res: any) => {
          console.log(res.data);
            console.log("CSRF Cookie set successfully.");
            http.post('/api/login', { email, password }).then((res) => {
                console.log(res.data);//トークンの値
                router.push('/mypage');
            }).catch((error) => {
                console.error("Login failed:", error);
            });
        });
    };

    return (
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh' }}>
            <h2>ログインページ</h2>
            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '20vh', border: '1px solid #ccc', borderRadius: '5px', padding: '3%', marginBottom: '2%' }}>
                <div style={{ display: 'grid', margin: '1%' }}>
                    <label htmlFor="email">Email</label>
                    <Input
                        placeholder="Email"
                        style={{ width: '300px' }}
                        value={email}
                        onChange={(e) => setEmail(e.target.value)}
                    />
                </div>

                <div style={{ display: 'grid', margin: '1%' }}>
                    <label htmlFor="password">Password</label>
                    <PasswordInput
                        placeholder="Password"
                        style={{ width: '300px' }}
                        value={password}
                        onChange={(e) => setPassword(e.target.value)}
                    />
                </div>
            </div>

            <Button onClick={postData}>ログイン</Button>
        </div>
    );
};

export default Login;

"use client";
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';

import apiClient from '@/utils/axios';

const MyPage = async () => { 
  const router = useRouter();
  
  try {
    const { data, error } = await apiClient.get('/api/users/me');

    if (error) {
      // エラー処理を改善
      console.error(error);
      if (error.response?.status !== 409) throw error; // レスポンスステータスを確認
      router.push('/');
    }

    // 成功した場合、ユーザーデータを表示
    return (
      <div>
        <h1>マイページ</h1>
        {data && (
          <div>
            <p>名前：{data.name}</p>
            <p>メールアドレス：{data.email}</p>
          </div>
        )}
      </div>
    );
  } catch (error) {

    console.error("予期しないエラー:", error);

  }
};

export default MyPage;

import Axios from 'axios'

const apiClient = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_LARAVEL_APP_URL,
  headers: {
    'X-Requested-With': 'XMLHttpRequest',
  },
  withCredentials: true,
})

export default apiClient

<?php

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use App\Models\User;


Route::post('/register', 'App\Http\Controllers\AuthController@register');
Route::post('/login', 'App\Http\Controllers\AuthController@login');
Route::get('/users/me', 'App\Http\Controllers\AuthController@me')->middleware('auth:sanctum');

<?php

namespace App\Http\Controllers;

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

class AuthController extends Controller
{
    // ユーザー登録
    public function register(Request $request) {
        $user = User::create([
            'name' => $request->name,
            'email' => $request->email,
            'password' => Hash::make($request->password),
        ]);
        $json = [
            'data' => $user
        ];
        return response()->json( $json, Response::HTTP_OK);
    }
   
    public function login(Request $request)
    {
       
        $user = User::where('email', $request['email'])->firstOrFail();

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

        return response()->json([
            'access_token' => $token,
            'token_type' => 'Bearer',
        ]);
    }

    public function me(Request $request)
    {
        Log::info('Request data:', $request->all());
        return $request->user();
    }
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

postmanで
http://localhost/api/users/me
に対してget通信でログイン時の
http.post('/api/login', { email, password }).then((res) => {
console.log(res.data);//トークンの値
で取得したトークンを一緒に渡したらユーザー情報が帰ってきました。

補足

laravel 10.38.2
next.js 14.1
docker

Comments

[naomina121]

laravel標準搭載のlaravel-sanctumとかいい感じだと思います。

と書いていて、質問で既にsenctumを使われていましたね、失礼しました。

＞このトークンをcookieに持たせておいて
apiClient.get('/api/users/me');で自動的に渡すようにすることは可能なのでしょうか？

↓sanctumの基本仕様です。ですので実装できます。

1.HasApiTokensトレイトやpersonal_access_tokensテーブルは不要： これらは通常、APIとの認証に使われるものですが、この場合には必要ありません。

2.トークンベースの認証を使わない： SPAでよく見られるトークンを使った認証方法ではなく、異なる方法を採用します。

3.クッキーベースのセッション認証を使用する： Laravelが提供する標準的なセッション認証システムを利用します。これは、ブラウザのクッキーを用いて認証情報を管理する方法です。

4.web認証ガードを利用する： Laravelのweb認証ガード機能を活用し、認証プロセスを強化します。

5.セキュリティ対策を施す： CSRF保護を使用してセキュリティを確保し、セッション認証の利点を活かし、XSS攻撃を通じた認証情報の漏洩を防ぎます。

6.認証手順： まずクッキーによる認証を試み、クッキーが存在しない場合はAPIトークンによる認証を行います。

7.ドメイン要件： SPAとAPIは同じトップレベルドメインを共有する必要がありますが、サブドメインが異なっても構いません。

app/Http/Kernel.php
'api' => [
// コメントアウトされている記述を有効にする
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
\Illuminate\Routing\Middleware\ThrottleRequests::class.':api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
>この記述を有効にすることで、Sanctumのミドルウェアがapi ミドルウェアグループに追加されます。

>これでLaravelのAPIへのリクエストでセッション・Cookieによる認証をすることが可能になります。

Cookieによる認証は可能です。

↓詳しくは下記の記事に紹介されています。

参考リンク【Laravel + Next.js】Sanctumを使ってSPA認証を実装する
https://qiita.com/masakiwakabayashi/items/58734b3988d5fac814fb

[maibear3]

ご回答、参考ページを教えていただきありがとうございます。
そちらのサイト通りログインまでは完成しました。
その後ログイン後にマイページに遷移した際に現在のユーザー名などを取得するためにマイページ遷移後に
/api/users/meに対してget通信を飛ばして
public function me(Request $request)
{
Log::info('Request data:', $request->all());
return $request->user();
}
が動くようにしたいです。

/api/users/meに対してget通信を飛ばすさいに、どういうアクションをかければユーザー情報が帰ってきてくれるのか悩んでいるところです。
上記を調べてもいい記事が見つけられず解決できなかったので今回質問を作成いたしました

Answer 1

公式から出てるbreeze-nextは参考になると思います。
https://github.com/laravel/breeze-next

僕はいつもlaravelとnextの連携で使ってます。
page routerでもapp routerでも問題なく動きます。

const ExamplePage = () => {
    const { logout, user } = useAuth({ middleware: 'auth' })

    return (
        <>
            <p>{user?.name}</p>

            <button onClick={logout}>Sign out</button>
        </>
    )
}

export default ExamplePage

内部でuseSWRを使ってるので{ middleware: 'auth' }をつけるとログインしてなかったりセッションが切れると強制的にログインページに飛ばしてくれます

sanctum入れてるならbreezeじゃなくて自前でログイン周り実装してても問題なかったと思います