💻

【Laravel】Laravel Breezeを使用した認証画面の作成

に公開
Laravel
PHP
認証
備忘録
Laravel Breeze
tech

この記事で使用する環境です。

php -v
composer -V
node -v
php artisan --version

PHP 8.3.6 (cli) (built: Jul 14 2025 18:30:55) (NTS)
Copyright (c) The PHP Group
Zend Engine v4.3.6, Copyright (c) Zend Technologies
    with Zend OPcache v8.3.6, Copyright (c), by Zend Technologies

Composer version 2.7.9 2024-09-04 14:43:28
PHP version 8.3.6 (/usr/bin/php8.3)
Run the "diagnose" command to get more detailed diagnostics output.

v24.11.1

Laravel Framework 12.44.0

Breezeの開発用ツールを追加

composer require laravel/breeze --dev

※本番でBreeze自体は動かず、あくまでコード生成ツールのため開発用で追加します。

./composer.json has been updated
Running composer update laravel/breeze
Loading composer repositories with package information
Updating dependencies
Lock file operations: 1 install, 0 updates, 0 removals
  - Locking laravel/breeze (v2.3.8)
Writing lock file
Installing dependencies from lock file (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Downloading laravel/breeze (v2.3.8)
  - Installing laravel/breeze (v2.3.8): Extracting archive
Generating optimized autoload files
> Illuminate\Foundation\ComposerScripts::postAutoloadDump
> @php artisan package:discover --ansi

   INFO  Discovering packages.  

  laravel-lang/config ......................................................................................................................... DONE
  laravel-lang/lang ........................................................................................................................... DONE
  laravel-lang/locales ........................................................................................................................ DONE
  laravel-lang/publisher ...................................................................................................................... DONE
  laravel/breeze .............................................................................................................................. DONE
  laravel/pail ................................................................................................................................ DONE
  laravel/sail ................................................................................................................................ DONE
  laravel/tinker .............................................................................................................................. DONE
  nesbot/carbon ............................................................................................................................... DONE
  nunomaduro/collision ........................................................................................................................ DONE
  nunomaduro/termwind ......................................................................................................................... DONE

86 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force

   INFO  No publishable resources for tag [laravel-assets].  

No security vulnerability advisories found.
Using version ^2.3 for laravel/breeze

上記のように出力されればOKです。

念のため、以下のコマンドで確認します。

ls ./vendor/laravel/breeze

以下が表示されればOKです。

LICENSE.md  README.md  composer.json  src  stubs

Breezeの認証を生成

php artisan breeze:install blade

上記コマンドを実行します。


   INFO  Installing and building Node dependencies.  


added 156 packages, and audited 157 packages in 20s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities

> build
> vite build

vite v7.3.0 building client environment for production...
✓ 54 modules transformed.
public/build/manifest.json             0.33 kB │ gzip:  0.17 kB
public/build/assets/app-Db9yqqSs.css  47.68 kB │ gzip:  8.40 kB
public/build/assets/app-CiZ6hk-B.js   81.83 kB │ gzip: 30.58 kB
✓ built in 1.64s


   INFO  Breeze scaffolding installed successfully.

上記のように出力され、最後にsuccessfullyと出ればOKです。

実行後は、

+ app/Http/Controllers/Auth/
+ app/Http/Controllers/ProfileController.php
+ app/Http/Requests/
+ app/View/
+ package-lock.json
+ postcss.config.js
+ resources/views/auth/
+ resources/views/components/
+ resources/views/dashboard.blade.php
+ resources/views/layouts/
+ resources/views/profile/
+ routes/auth.php
+ tailwind.config.js
+ tests/Feature/Auth/
+ tests/Feature/ProfileTest.php

上記のフォルダやファイルが追加され、下記のファイルが変更されています。

app.css
- @import 'tailwindcss';
- 
- @source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
- @source '../../storage/framework/views/*.php';
- @source '../**/*.blade.php';
- @source '../**/*.js';
- 
- @theme {
-     --font-sans: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
-         'Segoe UI Symbol', 'Noto Color Emoji';
- }
+ @tailwind base;
+ @tailwind components;
+ @tailwind utilities;
app.js
import './bootstrap';
+ 
+ import Alpine from 'alpinejs';
+ 
+ window.Alpine = Alpine;
+ 
+ Alpine.start();
web.php
 <?php

use Illuminate\Support\Facades\Route;

Route::get('/', function () {
    return view('welcome');
});
+ 
+ Route::get('/dashboard', function () {
+     return view('dashboard');
+ })->middleware(['auth', 'verified'])->name('dashboard');
+ 
+ Route::middleware('auth')->group(function () {
+     Route::get('/profile', [ProfileController::class, 'edit'])->name('profile.edit');
+     Route::patch('/profile', [ProfileController::class, 'update'])->name('profile.update');
+     Route::delete('/profile', [ProfileController::class, 'destroy'])->name('profile.destroy');
+ });
+ 
+ require __DIR__.'/auth.php';
package.json
{
    "$schema": "https://www.schemastore.org/package.json",
    "private": true,
    "type": "module",
    "scripts": {
        "build": "vite build",
        "dev": "vite"
    },
    "devDependencies": {
+         "@tailwindcss/forms": "^0.5.2",
        "@tailwindcss/vite": "^4.0.0",
+         "alpinejs": "^3.4.2",
+         "autoprefixer": "^10.4.2",
        "axios": "^1.11.0",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^2.0.0",
+         "postcss": "^8.4.31",
-         "tailwindcss": "^4.0.0",
+         "tailwindcss": "^3.1.0",
        "vite": "^7.0.7"
    }
}
vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
- import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
-         tailwindcss(),
    ],
-     server: {
-         watch: {
-             ignored: ['**/storage/framework/views/**'],
-         },
-     },
});

フロント依存を入れる

npm install

DBテーブル生成

php artisan migrate
# sailの場合は ./vendor/bin/sail artisan migrate

※sailについては以下の記事をご覧ください。
https://zenn.dev/tkmttkm/articles/5291d3686666eb

起動・ログイン画面確認

php artisan serve
# sailの場合は ./vendor/bin/sail up -d

上記コマンドで起動後、
http://localhost/login
上記にアクセスすると、認証画面が表示されるようになります。
これで、Breezeを使用した認証設定の完了です。

↓画面
Breeze認証画面

ユーザーの登録

http://localhost/register
上記にアクセルすると、

Breezeユーザー登録画面

上記画面に行くので、登録したいユーザーを登録し、REGISTERを押下すると
登録できます。

今回は、
Name : test
Email : test@test.com
Password : testtest
Comfirm Password : testtest
として登録します。

Breezeユーザー登録画面_入力

REGISTERを押すと、登録したユーザーでログインされます。

Breezeログイン

ログアウトして、登録したユーザーでログインすると、ログインできるため、
ユーザーが登録されたことが分かります。

Breezeログアウト

Laravel初期画面

Breezeログイン

Breezeログイン画面

余談ですが、もし日本語対応がしたい場合は、以下の記事をご覧ください。
https://zenn.dev/tkmttkm/articles/5120a66e0709a0

Discussion