Laravel10 + ReactQuery + ReactRouterでSPAのログイン認証機能の実装方法

環境・使用ライブラリ

1
PHP 8.2
2
Laravel 10
3
laravel breeze 1.2
4
React Router 6.10
5
React Query 4.28

Laravelのインストール

1
$ composer create-project --prefer-dist laravel/laravel laravel-react-spa
2
$ cd laravel-react-spa

Laravelの初期設定

configのapp.phpを開き、言語設定をします。

1
return [
2
  // ...
3
  'timezone' => 'Asia/Tokyo',
4
  'locale' => 'ja',
5
  'faker_locale' => 'ja_JP',

次はデータベースの設定です。
デフォルトではMySQLですが、今回はSQLiteを使用します。
.envを開いて、DB_CONNECTION=sqliteを追記して既存のMySQLの設定部分は削除します。

1
DB_CONNECTION=sqlite
2

3
#DB_CONNECTION=mysql
4
#DB_HOST=127.0.0.1
5
#DB_PORT=3306
6
#DB_DATABASE=homestead
7
#DB_USERNAME=homestead
8
#DB_PASSWORD=secret

touchコマンドでsqliteファイルを作成。

1
$ touch database/database.sqlite

Laravel Breezeの設定

Laravel Breezeはログイン、ユーザー登録、パスワードリセットはスキャフォルドで作成します。
実はBreezeだけでフロントの画面も作ってくれるのですが、Laravel独自になりすぎてあまり汎用的ではないので今回はバックエンドの機能だけを利用します。

コンポーザーでインストールしましょう。

1
$ composer require laravel/breeze --dev

インストールコマンドを実行します。
apiオプションを指定してPHPファイルだけ生成するようにしましょう。

1
$ php artisan breeze:install api

これでいろいろファイルが書き出されます。
「routes/auth.php」開いてください。
ログインが「/login」、ログアウトが「/logout」に割り当ててありますが、このパスはフロントで使用するので、バックエンドでは「/api/login」「/api/logout」になるように編集します。

1
Route::prefix('api')->name('api.')->group(function () {
2
  Route::post('login', [AuthenticatedSessionController::class, 'store'])
3
    ->middleware('guest')
4
    ->name('login');
5

6
  Route::post('logout', [AuthenticatedSessionController::class, 'destroy'])
7
    ->middleware('auth')
8
    ->name('logout');
9
});

ルートの確認をしてみます。

1
$ php artisan route:list

1
GET|HEAD   / ...............................................................................................................
2
POST       _ignition/execute-solution ........ ignition.executeSolution › Spatie\LaravelIgnition › ExecuteSolutionController
3
GET|HEAD   _ignition/health-check .................... ignition.healthCheck › Spatie\LaravelIgnition › HealthCheckController
4
POST       _ignition/update-config ................. ignition.updateConfig › Spatie\LaravelIgnition › UpdateConfigController
5
GET|HEAD   api/user ........................................................................................................
6
POST       api/email/verification-notification .......... verification.send › Auth\EmailVerificationNotificationController@store
7
POST       api/forgot-password ......................................... password.email › Auth\PasswordResetLinkController@store
8
POST       api/login ......................................................... login › Auth\AuthenticatedSessionController@store
9
POST       api/logout ..................................................... logout › Auth\AuthenticatedSessionController@destroy
10
POST       api/register ......................................................... register › Auth\RegisteredUserController@store
11
POST       api/reset-password ................................................ password.store › Auth\NewPasswordController@store
12
GET|HEAD   api/verify-email/{id}/{hash} ....................................... verification.verify › Auth\VerifyEmailController
13
GET|HEAD   sanctum/csrf-cookie ........................... sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show

PHPファイルを生成すると同時にpackage.jsonとかvite.config.jsファイルが削除されてしまいます。
これはフロントの開発に使うので戻しておきましょう。

.envのSANCTUM_STATEFUL_DOMAINSも設定します。
今回はビルドインサーバーの初期設定のまま使うので「localhost:8000」です。

1
SANCTUM_STATEFUL_DOMAINS=localhost:8000

データベースの構築

シーダーファイルにユーザーデータを投入するfactoryがコメントアウトしてありますので外して有効にします。

1
class DatabaseSeeder extends Seeder
2
{
3
  public function run(): void
4
  {
5
    \App\Models\User::factory(10)->create();
6

7
    \App\Models\User::factory()->create([
8
      'name' => 'Test User',
9
      'email' => 'test@example.com',
10
    ]);
11
  }
12
}

migrateコマンドを実行してテーブルの作成＆データを投入します。

1
$ php artisan migrate --seed

フロント開発環境の構築

Viteの設定をしてReactの開発環境を構築します。
package.jsonファイルがあることを確認してyarnコマンドを実行してnodeモジュールをインストールします。

1
$ yarn

必要なモジュールを追加します。

1
$ yarn add -D react react-dom @types/react @types/react-dom @vitejs/plugin-react @vitejs/plugin-react-refresh react-router-dom @tanstack/react-query

現在（2023/3/26）インストールするとバージョンはこのようになります。

1
{
2
  "private": true,
3
  "scripts": {
4
    "dev": "vite",
5
    "build": "vite build"
6
  },
7
  "devDependencies": {
8
    "@tanstack/react-query": "^4.28.0",
9
    "@types/react": "^18.0.29",
10
    "@types/react-dom": "^18.0.11",
11
    "@vitejs/plugin-react": "^3.1.0",
12
    "@vitejs/plugin-react-refresh": "^1.3.6",
13
    "axios": "^1.1.2",
14
    "laravel-vite-plugin": "^0.7.2",
15
    "react": "^18.2.0",
16
    "react-dom": "^18.2.0",
17
    "react-router-dom": "^6.9.0",
18
    "vite": "^4.0.0"
19
  }
20
}

TypeScriptとReactが使えるようにViteの設定をします。

1
import { defineConfig } from 'vite';
2
import laravel from 'laravel-vite-plugin';
3
import react from '@vitejs/plugin-react';
4

5
export default defineConfig({
6
    plugins: [
7
        laravel({
8
            input: ['resources/css/app.css', 'resources/ts/app.tsx'],
9
            refresh: true,
10
        }),
11
        react()
12
    ],
13
    resolve: {
14
        alias: {
15
            '@': '/resources/ts',
16
        }
17
    }
18
});

「resources/ts/index.tsx」を読み込む設定にしたので仮で作成しておきます。

1
import React from 'react'
2
import { createRoot } from 'react-dom/client'
3

4
const root = createRoot(
5
  document.getElementById('app') as HTMLElement
6
)
7

8
root.render(
9
  <React.StrictMode>
10
    <h1>Hello React !</h1>
11
  </React.StrictMode>
12
)

ベースとなるbladeファイルを作成します。

1
<!DOCTYPE html>
2
<html lang="ja">
3
<head>
4
  <meta charset="UTF-8">
5
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
  <title>Laravel React SPA</title>
8
</head>
9
<body>
10
<div id="app"></div>
11
@viteReactRefresh
12
@vite(['resources/css/app.css', 'resources/ts/index.tsx'])
13
</body>
14
</html>

SPAの場合は設定したエンドポイント以外はすべてこのbladeファイルが表示されるようにします。

1
Route::any('{all}', fn () => view('app'))
2
    ->where(['all' => '^(?!api/*).*']);

ここまできたら表示の確認をしてみましょう。
今回はビルドインサーバーで簡易的に確認します。

1
$ yarn run dev
2
$ php artisan serv

「http://localhost:8000」にアクセスして「Hello React !」と表示されるか確認できたら設定は完了です。

設定方法は下記のページも参考にしてください。

Laravelに新しく導入されたフロントビルドツール「Vite」でTypeScript+React開発環境を構築する方法

React Routerの設定

次はReact Routerでページのベースを作っていきます。

最初にページコンポーネントを作ります。
作成するのはログインページとログインしないと見れないページのダッシュボードの２ページです。

1
import React from 'react'
2

3
const LoginPage: React.FC = () => {
4
  return (
5
    <div>
6
      <h1>ログイン</h1>
7
    </div>
8
  )
9
}
10

11
export default LoginPage

1
import React from 'react'
2

3
const DashboardPage: React.FC = () => {
4
  return (
5
    <div>
6
      <h1>ダッシュボード</h1>
7
    </div>
8
  )
9
}
10

11
export default DashboardPage

このページを表示する為のルーターファイルを作成

1
import { createBrowserRouter } from 'react-router-dom'
2
import DashboardPage from '@/pages/Dashboard'
3
import LoginPage from '@/pages/Login'
4

5
export const router = createBrowserRouter([
6
  {
7
    path: 'login',
8
    element: <LoginPage />
9
  }, {
10
    path: '/',
11
    element: <DashboardPage />
12
  }
13
])

作成したルーターをApp.tsxで設定します。

1
import React from 'react'
2
import { RouterProvider } from 'react-router-dom'
3
import { router } from './routes'
4

5
const App: React.FC = () => {
6
  return (
7
    <RouterProvider router={router} />
8
  )
9
}
10

11
export default App

index.tsxで作成したApp.tsxを表示するようにします。

1
import React from 'react'
2
import { createRoot } from 'react-dom/client'
3
import App from '@/App'
4

5
const root = createRoot(
6
  document.getElementById('app') as HTMLElement
7
)
8

9
root.render(
10
  <React.StrictMode>
11
    <App />
12
  </React.StrictMode>
13
)

ここまでできたらブラウザで「/」と「/login」にアクセスして作成したページが表示されることを確認してください。

React Query設定

React Queryを使えるようにします。
新しくQueryClientを初期化するファイルを作成します。
基本的な設定はここで行います。

1
import { QueryClient } from '@tanstack/react-query'
2

3
export const queryClient = new QueryClient({
4
  defaultOptions: {
5
    queries: {
6
      retry: false,
7
      refetchOnWindowFocus: false
8
    },
9
    mutations: {
10
      retry: false
11
    }
12
  }
13
})

App.tsxで作成したqueryClientをインポートしてQueryClientProviderの設定をします。

1
import React from 'react'
2
import { RouterProvider } from 'react-router-dom'
3
import { router } from './routes'
4
import { QueryClientProvider } from '@tanstack/react-query'
5
import { queryClient } from '@/queryClient'
6

7
const App: React.FC = () => {
8
  return (
9
    <QueryClientProvider client={queryClient}>
10
      <RouterProvider router={router} />
11
    </QueryClientProvider>
12
  )
13
}
14

15
export default App

これでReact Queryを使用する準備ができました。

ログイン中の判定

初期のLaravelの状態だと「api/user」にアクセスするとログイン中のユーザー情報が取得できるので、この情報が取れるかでどうかでログイン中かを判定します。

最初の取得する情報のtypeファイルを作成します。

1
export type User = {
2
    id: number
3
    name: string
4
    email: string
5
}

AxiosでAPIと通信する処理です。

1
import axios from 'axios'
2
import type { User } from '@/types/User'
3

4
export const getUser = async () => {
5
  const { data } = await axios.get<User>('/api/user')
6
  return data
7
}

AxiosのReactQueryに設定します。

1
import * as api from '@/api/authAPI'
2
import { queryClient } from '@/queryClient'
3

4
const authUserQuery = () => ({
5
  queryKey: ['user'],
6
  queryFn: api.getUser
7
})
8

9
export const useAuthUser = async () => {
10
  const query = authUserQuery()
11

12
  return queryClient.getQueryData(query.queryKey)
13
    ?? (await queryClient.fetchQuery(query).catch(() => undefined))
14
}

ReactRouterのLoader機能を使用してページを表示する前にAPIからデータを取得できるかできないかでページのリダイレクトを行います。

1
import { createBrowserRouter, redirect } from 'react-router-dom'
2
import { useAuthUser } from '@/hooks/useAuth'
3
import DashboardPage from '@/pages/Dashboard'
4
import LoginPage from '@/pages/Login'
5

6
/**
7
 * ログイン済みのみアクセス可能
8
 */
9
const guardLoader = async () => {
10
  const user = await useAuthUser()
11
  return user ? true : redirect('/login')
12
}
13

14
/**
15
 * ログインしていない場合のみアクセス可能
16
 */
17
const guestLoader = async () => {
18
  const user = await useAuthUser()
19
  return user ? redirect('/') : true
20
}
21

22
export const router = createBrowserRouter([
23
  {
24
    path: 'login',
25
    element: <LoginPage />,
26
    loader: guestLoader
27
  }, {
28
    path: '/',
29
    element: <DashboardPage />,
30
    loader: guardLoader
31
  }
32
])

「/」にアクセスすると「/login」にリダイレクトされることを確認してください。

ログインとログアウト

APIに接続するところから作ります。

1
export const login = async ({ email, password }: {
2
    email: string,
3
    password: string
4
}) => {
5
    const { data } = await axios.post<User>(
6
        '/api/login', { email, password }
7
    )
8
    return data
9
}
10

11
export const logout = async () => {
12
    const { data } = await axios.post<User>('/api/logout')
13
    return data
14
}

hooksにも追加します。
ログインできなかったときの処理も必要になりますが、今回は省略します。

1
export const useLogin = () => {
2
    const queryClient = useQueryClient()
3

4
    return useMutation({
5
        mutationFn: api.login,
6
        onError: (error: AxiosError) => {
7
            console.log(error)
8
        },
9
        onSuccess: (data) => {
10
            console.log(data)
11
            queryClient.invalidateQueries(['auth'])
12
            window.location.href = '/'
13
        }
14
    })
15
}
16

17
export const useLogout = () => {
18
    const queryClient = useQueryClient()
19

20
    return useMutation({
21
        mutationFn: api.logout,
22
        onError: (error: AxiosError) => {
23
            console.log(error)
24
        },
25
        onSuccess: (data) => {
26
            console.log(data)
27
            queryClient.invalidateQueries(['auth'])
28
            window.location.href = '/login'
29
        }
30
    })
31
}

ログイン画面を修正して、作成したuseLoginを実行できるようにします。

1
import React, { useState } from 'react'
2
import { useLogin } from '@/hooks/useAuth'
3

4
const LoginPage: React.FC = () => {
5
  const login = useLogin()
6

7
  const [email, setEmail] = useState('')
8
  const [password, setPassword] = useState('')
9

10
  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
11
    e.preventDefault()
12

13
    login.mutate({
14
      email: email,
15
      password: password,
16
    })
17
  }
18

19
  return (
20
    <div>
21
      <h1>ログイン</h1>
22
      <form onSubmit={onSubmit}>
23
        <fieldset>
24
          <div>
25
            <label htmlFor="email">メールアドレス：</label>
26
            <input
27
              type="email"
28
              id="email"
29
              onChange={e => setEmail(e.target.value)}
30
              defaultValue={email}
31
            />
32
          </div>
33
          <div>
34
            <label htmlFor="password">パスワード：</label>
35
            <input
36
              type="password"
37
              id="password"
38
              onChange={e => setPassword(e.target.value)}
39
              defaultValue={password}
40
            />
41
          </div>
42
          <button type="submit">送信</button>
43
        </fieldset>
44
      </form>
45
    </div>
46
  )
47
}
48

49
export default LoginPage

ダッシュボードではログアウトボタンを追加して、useLogoutを実行できるようにします。

1
import React from 'react'
2
import { useLogout } from '@/hooks/useAuth'
3

4
const DashboardPage: React.FC = () => {
5
  const logout = useLogout()
6

7
  const onLogout = () => {
8
    logout.mutate()
9
  }
10

11
  return (
12
    <div>
13
      <h1>ダッシュボード</h1>
14
      <button type="button" onClick={onLogout}>ログアウト</button>
15
    </div>
16
  )
17
}
18

19
export default DashboardPage

これで完成です。
ログイン画面からログインできることを確認してください。
初期データのメールアドレスは「test@example.com」、パスワードは「password」です。

ログインしている状態ではダッシュボードが見れて、ログイン画面が見れない。
ログインしていない状態の場合、逆にログイン画面が見れて、ダッシュボードが見れないという状態になっていると思います。

Laravel10 + ReactQuery + ReactRouterでSPAのログイン認証機能の実装方法

環境・使用ライブラリ

Laravelのインストール

Laravelの初期設定

Laravel Breezeの設定

データベースの構築

フロント開発環境の構築

React Routerの設定

React Query設定

ログイン中の判定

ログインとログアウト

関連記事

React入門（TypeScript版）

Redux Toolkit で React.js の状態管理をもっと簡単にする方法[TypeScript版]

Laravelで部分的にReactを使う方法

LaravelでReactフレームワークのNext.js使う方法