Laravel Sanctum,FortifyでSPAのログイン機能を実装する(初期設定)

# はじめに
Laravel Sanctum, Fortifyを使用したSPA認証の手順を説明していきたいと思います。

実際の機能の実装は次回の記事で行います。

# 事前準備
- LaravelとNuxt.jsのプロジェクト作成
- データベースの準備
# 目次
[1.環境](#1-環境)
[2.各パッケージの概要](#2-各パッケージの概要)
[3.Fortify導入手順](#3-fortify導入手順)
[4.Sanctum導入手順](#4-sanctum導入手順)
[5.nuxt/authの導入手順](#5-authモジュールの導入手順)
[6.参考記事](#6-参考記事)
# 1. 環境
- Laravel：8.83.4
- Nuxt.js：2.15.8
- node: 14.19.0

# 2. 各パッケージの概要
### Laravel Fortify
- ユーザー登録・ログイン機能といった認証機能のバックエンド部分を手軽に搭載
- フロントエンドは自分で実装する必要がある

https://readouble.com/laravel/8.x/ja/fortify.html

### Laravel Sanctum
- SPA(シングルページアプリケーション)、モバイルアプリケーション、およびシンプルなトークンベースのAPI向けの軽量認証システムを提供する仕組み
- APIトークンを用いた認証と`web`認証ガードを用いたCookieベースのSPA認証がある
- 本記事ではSPA認証を実装する

https://readouble.com/laravel/8.x/ja/sanctum.html

### nuxt/auth
- Nuxt.jsで利用できる認証モジュール
- 簡単にログイン・ログアウト等の機能を実装できる

https://auth.nuxtjs.org/

# 3. fortify導入手順
### Fortifyのインストール
- プロジェクトディレクトリ配下でFortifyのインストールを行う
```
composer require laravel/fortify
php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
php artisan migrate
```
### Fortifyの初期設定
- `FortifyServiceProvider`を`config/app.php`の`providers`配列に追加
```php:config/app.php
<?php
//略
    'providers' => [
        /*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        // App\Providers\BroadcastServiceProvider::class,
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,
        App\Providers\FortifyServiceProvider::class,//追加
    ],
//略
```
- Laravelのビューを無効化するため`config/fortify.php`の`views`を`false`に変更

- Fortifyのルートに`prefix`を付与するため、修正

```php:config/fortify.php
<?php

use App\Providers\RouteServiceProvider;
use Laravel\Fortify\Features;

return [
//略
    'prefix' => 'api',//変更

    'views' => false,//変更
//略
];

```

# 4. sanctum導入手順
### Sanctumのインストール
- プロジェクトディレクトリ配下でSanctumのインストールを行う
```
composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
```
### Sanctumの初期設定
- `EnsureFrontendRequestsAreStateful`を`Kernel.php`の`api`ミドルウェアグループに追加
```php:Kernel.php
<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
//略
    protected $middlewareGroups = [
       //略

        'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            'throttle:api',//追加
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];
//略
}

```
- 「ステートフル」な認証を維持するドメインの指定
```:.env
SANCTUM_STATEFUL_DOMAINS=localhost:3000
```
- cors対策として`config/cors.php`の`supports_credentials`を`true`に設定
```php: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,//変更

];
```
# 5. authモジュールの導入手順
### nuxt/authのインストール
```
npm install --save-exact @nuxtjs/auth-next
```
### nuxt/authの初期設定
- `nuxt.config.js`の`modules`配列に`@nuxtjs/auth-next`を追加
- nuxt/authはvuexを使用するため、storeを利用していない場合は`store/index.js`などの空ファイルを作成
```js:nuxt.config.js
 modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',//追加
  ],
```
- Sanctum用の設定追加
```js:nuxt.config.js
export default {
//略
   auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: false,
      home: false
    },
    strategies: {
      laravelSanctum: {
        endpoints: {
          login: { url: '/api/login', method: 'post' },
          logout: { url: '/api/logout', method: 'post' },
          user: { url: '/api/user', method: 'get' }
        },
        provider: 'laravel/sanctum',
        url: 'http://localhost:80'
      }
    }
  },
//略
}
```
- axios, proxyの設定追加
```js:nuxt.config.js
export default {
//略
  axios: {
    credentials: true
  },
  proxy: {
    '/api': {
      target: 'http://localhost:80'
    }
  },
//略
}
```
# 6. 参考記事

https://qiita.com/att55/items/2154a8aad8bf1409db2b

https://qiita.com/ucan-lab/items/3e7045e49658763a9566

https://zenn.dev/fagai/articles/ac283da2335e0467bb0f