Laravel Breezeで「ユーザー登録・ログイン」認証機能を作る！
Laravelではたくさんの認証の仕組みがあるのですが、その中でも一番スタンダードでユーザー登録機能やログイン機能がデフォルトでついている「Breeze」というものを使って、認証機能を作っていきます。
こちらが公式ドキュメントです▶Laravel Breeze スターターキットドキュメント
Breezeを使うことで、認証に必要なルーティングやコントローラー、ビューなどが自動生成され、自分で実装する必要がありません。
もちろんカスタマイズすることも出来るので、認証時にあれこれチェックしたいなどあれば手を加えてみても面白いですよ。
Laravelをまだインストールしていない方は以下を参考にインストールしておいてください。
Laravel9+Sail（Docker）で環境構築してみた
インストール時にデフォルトで作成されているユーザーモデルや、userテーブルなどを使用しようするので、初期状態が一番操作しやすいと思います。
Breezeのインストール
まずはsail up。
sail upしてLaravelやMySQLなどのDockerコンテナを起動しておきましょう。
./vendor/bin/sail up
バージョンが古いとBreezeのインストール後うまく機能しない場合がるので、composer updateを行って起きます（たまにバージョンのコンフリクトで怒られます）。
docker compose経由でコンテナ内のコマンドを実行しています。先に紹介した記事で環境構築した方は、以下の様にコンテナ内のコマンドを実行できます。
composer updateします。
docker compose exec laravel.test composer update
docker compose exec laravel.testをエイリアスと定義しておくとコマンド実行時便利です。
breezeのライブラリインストール
docker compose exec laravel.test composer require laravel/breeze --dev
breezeのセットアップ
docker compose exec laravel.test php artisan breeze:install
このコマンドを実行すると色々とインタラクティブで聞かれます。
今回はBladeで画面を作成していきたいので、最初の質問は0を指定します。
2番目の質問はダークモードにするかきかれています。かっこいいのでダークモードを選択するべくyesを入力します。
3はテストのツールに聞かれているんですが、これは今回どうでもよいのでnoとしておきましょう。
インストールが完了すると以下のように、ファイルがたくさん追加編集されているのが分かります（git statusです）。
追加編集されたファイルを眺めると、ルーティングが変更されていたり、ビューのbladeファイルが沢山追加されています。これで画面が構成されているようです。
また、デザイン周りで言えばtailwindが追加されています。エンジニアに人気のtailwindを入れてくれているのは結構嬉しいですね。
Tailwindはについては以下が参考になりますよ。
テーブル作成
docker compose exec laravel.test php artisan migrate
データに関してはBreezeで追加されたものはありません。Laravelインストール時にデフォルトで入っているユーザーテーブルを使って登録やログインが可能です。楽ですね。
すでにあるアプリケーションにBreezeを入れようとした時、ルーティングのキャッシュが残っている可能性があるので、以下実行しておくと良いです。
docker compose exec laravel.test php artisan route:clear
あと少しです。tailwindはnpmを使ってビルドして上げる必要があるので、以下を実行しましょう。
docker compose exec laravel.test npm install
docker compose exec laravel.test npm run dev
これでtailwindがビルドされていい感じのデザインになります。tailwindビルドしなくてもログイン機能等に機能的な問題はないのですが、デザイン0の質素な画面になるのでモチベーションが下がります。
これで準備は全部おわりなので、「http://localhost:80」にアクセスしましょう。
すると右上にRegisterというリンクが出来ています。これを押すと
ユーザー登録画面に遷移します。ここで必要な情報を適当に入力して、REGISTERを押します。
登録が完了したら以下のような画面になります。 これでユーザー登録が完了して、ログインもしている状態になります。
右上を見るとtestというユーザー名が表示されているので、ログインしていることが分かります。右上のtestを押すとログアウトボタンが出てくるので、ログアウトしてみてください。
またTOPに戻るので、右上のLog inを押して、ログインページに遷移します。
先程登録したメールアドレス、パスワードを入力してログイン出来ることを確認しましょう。
これでユーザー登録、ログイン機能の実装ができました。
実装といっても、勝手にコードは生成されるので、コードとしては何ひとつ記述していません。
次からログイン画面を変更してみたり、ログイン中のユーザー情報を取得して、他のデータと紐付けたりして、よりアプリケーションっぽいものを作っていきます。
認証機能が使えるようになったら、様々なアプリケーションが作れるようになるので、開発の幅がぐっと広がります！