Laravel8でJetstreamを使ってユーザー認証を実装してみる

2020年9月8日にLaravelのバージョン8がリリースされたようですね。
またユーザー認証の構築がまた変わり、jetstreamというライブラリを導入するようになったので、今回もバージョン6と同様にログイン認証を作っていき、少しだけ動きを見ていきたいと思います。

Laravelのリリースとサポート

Laravelのサポートですが、下記のようになっているようです。
Security Fixesはちょうど一年のようですね。
バージョン8は2020年9月8日リリースなっていますが、日本時間だとちょっとズレがあるのかな。

support-policy

Laravelのインストール

インストールの手順は変わらないようなので、今回はcomposerでインストールします。

composer create-project --prefer-dist laravel/laravel {フォルダ}

インストールが終わったら、ドキュメントルートにアクセスします。

トップページが新しくなりましたね。おそらくーダークモードなのでこの色になっているのかと。

また、User.phpがちゃんとModelsフォルダの中に入ったようです。
地味にめんどくさかったので、解消されてよかったです。

.envのDB設定

.envファイルのDBを設定します。各環境に合わせて適宜記載してください。
今回はhomesteadのMySQLを使います。

.envファイル

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=repo-sample
DB_USERNAME=homestead
DB_PASSWORD=secret

jetstreamライブラリのインストール

Laravel8ではjetstreamというライブラリが認証周りのライブラリになるようです。
今までのログイン機能やメール認証の他に二要素認証なども組み込まれます。

laravel/jetstream

composer require laravel/jetstream

laravelコマンドで下記のようにlaravelと一緒にインストールも出来るようです。

laravel new project-name --jet

インストールが完了するとartisanコマンドにjetstreamが追加されます。

 jetstream
  jetstream:install    Install the Jetstream components and resources

jetstreamのセットアップ

今回は、livewireとinertiaの2つがあるようです。

php artisan jetstream:install livewire
または
php artisan jetstream:install inertia

詳細までは掴めていませんが、livewireはLaravel側でJSを生成し何かアクションがある度にUIコンポーネントを取ってきて、画面に出してくれるイメージでしょうか。
Installation | Livewire Screencasts | Livewire

vueやreactなどを使う場合は、inertia選択するようです。
今回はlivewireでインストールします。

DBのマイグレーション

いつも通り

php artisan migrate

npm install

いつも通り

npm install
npm run dev

画面確認

ユーザー登録

ダッシュボード

プロフィール

二要素認証

Livewire の動きを確認

Livewireの公式サイトのgoogle翻訳によると、

Livewireは、（Bladeインクルードのように）最初のコンポーネント出力をページとともにレンダリングします。 このように、それはSEOフレンドリーです。
インタラクションが発生すると、Livewireは更新されたデータを使用してサーバーにAJAXリクエストを送信します。
サーバーはコンポーネントを再レンダリングし、新しいHTMLで応答します。
次に、Livewireは、変更されたものに従ってDOMをインテリジェントに変更します。

初期表示はサーバー側のviewの結果を出力するのでSEO的には良いですよ。
動きが発生するとAJAXをリクエストしてコンポーネントを再レンダリングするということなので、ちょっと見てみます。

初期表示のAJAX確認

画面表示時は特にAJAXが呼ばれている形跡はありません。

ユーザー情報の更新を実施

ユーザー情報のNameを変更してSAVEボタンを押下すると、/livewire/message/profile.update-profile-information-formが呼ばれHTMLがレスポンスとして返ってき更新されます。

今回はLaravel8のユーザー認証周りを触ってみましたが、バージョン8になりまた覚えることが増えてきましたね。
Livewireはサーバー側の自分にとってはなかなか面白い機能ではありますが、感じ的には今まで通り、LaravelでAPIを実装しVueやReactなりでフロントを実装する方が、アプリケーション的には保守性が高いのではないかと思います。