├── .editorconfig ├── .env.example ├── .env.testing ├── .gitattributes ├── .gitignore ├── .prettierignore ├── .prettierrc ├── README.md ├── app ├── Actions │ └── Fortify │ │ ├── CreateNewUser.php │ │ ├── PasswordValidationRules.php │ │ ├── ResetUserPassword.php │ │ ├── UpdateUserPassword.php │ │ └── UpdateUserProfileInformation.php ├── Http │ ├── Controllers │ │ ├── Account │ │ │ ├── ProfileController.php │ │ │ ├── SecurityController.php │ │ │ └── SessionController.php │ │ ├── Auth │ │ │ └── ConfirmablePasswordController.php │ │ └── Controller.php │ ├── Middleware │ │ └── HandleInertiaRequests.php │ └── Requests │ │ ├── Auth │ │ └── LoginRequest.php │ │ └── ProfileUpdateRequest.php ├── Models │ ├── Session.php │ └── User.php └── Providers │ ├── AppServiceProvider.php │ └── FortifyServiceProvider.php ├── artisan ├── bootstrap ├── app.php ├── cache │ ├── packages.php │ └── services.php └── providers.php ├── components.json ├── composer.json ├── composer.lock ├── config ├── app.php ├── auth.php ├── cache.php ├── database.php ├── filesystems.php ├── fortify.php ├── logging.php ├── mail.php ├── queue.php ├── services.php └── session.php ├── database ├── .gitignore ├── factories │ └── UserFactory.php ├── migrations │ ├── 0001_01_01_000000_create_users_table.php │ ├── 0001_01_01_000001_create_cache_table.php │ ├── 0001_01_01_000002_create_jobs_table.php │ ├── 2025_01_25_140923_create_personal_access_tokens_table.php │ └── 2025_01_29_181350_add_two_factor_columns_to_users_table.php └── seeders │ └── DatabaseSeeder.php ├── docs ├── backend.md ├── frontend.md └── getting-started.md ├── eslint.config.js ├── package.json ├── phpunit.xml ├── pnpm-lock.yaml ├── postcss.config.js ├── public ├── .htaccess ├── favicon.png ├── index.php └── robots.txt ├── resources ├── css │ └── app.css ├── js │ ├── Pages │ │ ├── Auth │ │ │ ├── ForgotPassword.tsx │ │ │ ├── ForgotPasswordSent.tsx │ │ │ ├── Login.tsx │ │ │ ├── PasswordReset.tsx │ │ │ ├── Register.tsx │ │ │ ├── TwoFactorChallenge.tsx │ │ │ └── VerifyEmail.tsx │ │ ├── Dashboard.tsx │ │ ├── Profile │ │ │ ├── Partials │ │ │ │ ├── DeleteUserForm.tsx │ │ │ │ ├── UpdatePasswordForm.tsx │ │ │ │ └── UpdateProfileInformationForm.tsx │ │ │ └── Show.tsx │ │ ├── Security │ │ │ ├── Partials │ │ │ │ └── TwoFactorAuthenticationForm.tsx │ │ │ └── Show.tsx │ │ └── Welcome.tsx │ ├── app.tsx │ ├── bootstrap.ts │ ├── components │ │ ├── app-breadcrumb.tsx │ │ ├── app-command.tsx │ │ ├── app-sidebar.tsx │ │ ├── confirm-with-password.tsx │ │ ├── nav-main.tsx │ │ ├── nav-secondary.tsx │ │ ├── nav-user.tsx │ │ ├── project-switcher.tsx │ │ ├── theme-provider.tsx │ │ └── ui │ │ │ ├── alert-dialog.tsx │ │ │ ├── alert.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── breadcrumb.tsx │ │ │ ├── button.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── command.tsx │ │ │ ├── dialog.tsx │ │ │ ├── dropdown-menu.tsx │ │ │ ├── error-feedback.tsx │ │ │ ├── input-otp.tsx │ │ │ ├── input.tsx │ │ │ ├── label.tsx │ │ │ ├── ripple.tsx │ │ │ ├── separator.tsx │ │ │ ├── sheet.tsx │ │ │ ├── sidebar.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── sonner.tsx │ │ │ └── tooltip.tsx │ ├── hooks │ │ ├── use-mobile.ts │ │ └── use-mobile.tsx │ ├── layouts │ │ ├── AuthenticatedLayout.tsx │ │ └── AuthenticationLayout.tsx │ ├── lib │ │ └── utils.ts │ ├── ssr.tsx │ └── types │ │ ├── global.d.ts │ │ ├── index.d.ts │ │ └── vite-env.d.ts └── views │ └── app.blade.php ├── routes ├── auth.php └── web.php ├── storage ├── app │ ├── .gitignore │ ├── private │ │ └── .gitignore │ └── public │ │ └── .gitignore ├── framework │ ├── .gitignore │ ├── cache │ │ ├── .gitignore │ │ └── data │ │ │ └── .gitignore │ ├── sessions │ │ └── .gitignore │ ├── testing │ │ └── .gitignore │ └── views │ │ └── .gitignore └── logs │ └── .gitignore ├── tests ├── Feature │ ├── Auth │ │ ├── AuthenticationTest.php │ │ ├── EmailVerificationTest.php │ │ ├── PasswordConfirmationTest.php │ │ ├── PasswordResetTest.php │ │ ├── PasswordUpdateTest.php │ │ └── RegistrationTest.php │ ├── ExampleTest.php │ └── ProfileTest.php ├── Pest.php ├── TestCase.php └── Unit │ └── ExampleTest.php ├── tsconfig.json └── vite.config.js /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | end_of_line = lf 6 | indent_size = 4 7 | indent_style = space 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.md] 12 | trim_trailing_whitespace = false 13 | 14 | [*.{yml,yaml}] 15 | indent_size = 2 16 | 17 | [docker-compose.yml] 18 | indent_size = 4 19 | -------------------------------------------------------------------------------- /.env.example: -------------------------------------------------------------------------------- 1 | APP_NAME="React Inertia Laravel" 2 | APP_ENV=local 3 | APP_KEY= 4 | APP_DEBUG=true 5 | APP_TIMEZONE=UTC 6 | APP_URL=http://react-inertia-laravel.test 7 | 8 | APP_LOCALE=en 9 | APP_FALLBACK_LOCALE=en 10 | APP_FAKER_LOCALE=en_US 11 | 12 | APP_MAINTENANCE_DRIVER=file 13 | # APP_MAINTENANCE_STORE=database 14 | 15 | PHP_CLI_SERVER_WORKERS=4 16 | 17 | BCRYPT_ROUNDS=12 18 | 19 | LOG_CHANNEL=stack 20 | LOG_STACK=single 21 | LOG_DEPRECATIONS_CHANNEL=null 22 | LOG_LEVEL=debug 23 | 24 | DB_CONNECTION=sqlite 25 | # DB_HOST=127.0.0.1 26 | # DB_PORT=3306 27 | # DB_USERNAME=root 28 | # DB_PASSWORD= 29 | 30 | SESSION_DRIVER=database 31 | SESSION_LIFETIME=120 32 | SESSION_ENCRYPT=false 33 | SESSION_PATH=/ 34 | SESSION_DOMAIN=null 35 | 36 | BROADCAST_CONNECTION=log 37 | FILESYSTEM_DISK=local 38 | QUEUE_CONNECTION=database 39 | 40 | CACHE_STORE=database 41 | CACHE_PREFIX= 42 | 43 | MEMCACHED_HOST=127.0.0.1 44 | 45 | REDIS_CLIENT=phpredis 46 | REDIS_HOST=127.0.0.1 47 | REDIS_PASSWORD=null 48 | REDIS_PORT=6379 49 | 50 | MAIL_MAILER=log 51 | MAIL_SCHEME=null 52 | MAIL_HOST=127.0.0.1 53 | MAIL_PORT=2525 54 | MAIL_USERNAME=null 55 | MAIL_PASSWORD=null 56 | MAIL_FROM_ADDRESS="hello@example.com" 57 | MAIL_FROM_NAME="${APP_NAME}" 58 | 59 | AWS_ACCESS_KEY_ID= 60 | AWS_SECRET_ACCESS_KEY= 61 | AWS_DEFAULT_REGION=us-east-1 62 | AWS_BUCKET= 63 | AWS_USE_PATH_STYLE_ENDPOINT=false 64 | 65 | VITE_APP_NAME="${APP_NAME}" 66 | -------------------------------------------------------------------------------- /.env.testing: -------------------------------------------------------------------------------- 1 | APP_NAME="React Inertia Laravel" 2 | APP_ENV=testing 3 | APP_KEY=base64:vdJO+cS13hn5KPCE0H2pTRdbsV1h5eAUlogToz390G4= 4 | APP_DEBUG=true 5 | APP_URL=http://localhost 6 | 7 | DB_CONNECTION=sqlite 8 | DB_DATABASE=:memory: 9 | 10 | BROADCAST_DRIVER=log 11 | CACHE_DRIVER=file 12 | FILESYSTEM_DISK=local 13 | QUEUE_CONNECTION=sync 14 | SESSION_DRIVER=database 15 | SESSION_LIFETIME=120 16 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | * text=auto eol=lf 2 | 3 | *.blade.php diff=html 4 | *.css diff=css 5 | *.html diff=html 6 | *.md diff=markdown 7 | *.php diff=php 8 | 9 | /.github export-ignore 10 | CHANGELOG.md export-ignore 11 | .styleci.yml export-ignore 12 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | /.phpunit.cache 2 | /bootstrap/ssr 3 | /node_modules 4 | /public/build 5 | /public/hot 6 | /public/storage 7 | /storage/*.key 8 | /storage/pail 9 | /vendor 10 | .env 11 | .env.backup 12 | .env.production 13 | .phpactor.json 14 | .phpunit.result.cache 15 | Homestead.json 16 | Homestead.yaml 17 | npm-debug.log 18 | yarn-error.log 19 | /auth.json 20 | /.fleet 21 | /.idea 22 | /.nova 23 | /.vscode 24 | /.zed 25 | .windsurfrules -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | # Dependencies 2 | /node_modules 3 | /vendor 4 | 5 | # Build outputs 6 | /public/build 7 | /public/hot 8 | /public/storage 9 | /storage/*.key 10 | /bootstrap/ssr 11 | /bootstrap/cache 12 | 13 | # Environment and config files 14 | .env 15 | .env.* 16 | *.config.js 17 | *.config.ts 18 | 19 | # IDE and editor files 20 | /.idea 21 | /.vscode 22 | /.fleet 23 | /.nova 24 | /.zed 25 | 26 | # Cache and logs 27 | .phpunit.result.cache 28 | .phpunit.cache 29 | .phpactor.json 30 | npm-debug.log 31 | yarn-error.log 32 | *.log 33 | 34 | # Generated files 35 | /_ide_helper.php 36 | /.phpstorm.meta.php 37 | /composer.lock 38 | /package-lock.json 39 | /yarn.lock 40 | /pnpm-lock.yaml 41 | 42 | # Laravel specific 43 | /storage/framework/cache/* 44 | /storage/framework/sessions/* 45 | /storage/framework/views/* 46 | /storage/logs/* 47 | /storage/app/* 48 | 49 | # Compiled assets 50 | *.css.map 51 | *.js.map 52 | 53 | # Test coverage 54 | /coverage 55 | /tests/coverage 56 | 57 | # Misc 58 | .DS_Store 59 | Thumbs.db -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": true, 3 | "plugins": [ 4 | "prettier-plugin-organize-imports", 5 | "prettier-plugin-tailwindcss" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # React Inertia Laravel - Project Starter 2 | 3 | A modern, full-stack web application boilerplate built with Laravel 12.x, Inertia.js v2, React 19, TypeScript 5.8.2, Tailwind CSS 4, and Shadcn UI components. 4 | 5 | ![Starter Screenshots](https://github.com/user-attachments/assets/a550c79c-87eb-49a2-996b-8bb86991ec99) 6 | 7 | ## Features 8 | 9 | - Auth features using Laravel Fortify 10 | - Login, registration, password reset, email verification, and two-factor authentication 11 | - Server-side rendering and initial page load performance 12 | - Hot Module Replacement (HMR) and fast refresh during development 13 | - TypeScript/React code quality with ESLint and Prettier 14 | - Modern UI powered by Tailwind CSS and Shadcn components 15 | 16 | ## Architecture Overview 17 | 18 | This project implements a modern monolithic architecture using Laravel as the backend framework and React for the frontend, seamlessly connected via Inertia.js. This architecture provides: 19 | 20 | - **Single Codebase**: All code lives in one repository, simplifying deployment and maintenance 21 | - **Server-Side Rendering**: Improved SEO and initial page load performance 22 | - **Type Safety**: Full TypeScript support across the frontend 23 | - **Modern UI**: Powered by Tailwind CSS and Shadcn components 24 | - **Authentication**: Built-in auth system using Laravel Fortify 25 | - **Developer Experience**: Hot Module Replacement (HMR) and fast refresh during development 26 | 27 | ### Tech Stack 28 | 29 | - **Backend** 30 | 31 | - Laravel 12.x (PHP 8.4) 32 | - Laravel Fortify 1.25 for Auth features 33 | - Laravel Sanctum 4.0 for API tokens 34 | - Ziggy 2.0 for route handling 35 | - SQLite 36 | 37 | - **Frontend** 38 | 39 | - React ^19 40 | - TypeScript ^5 41 | - Vite ^6 42 | - Tailwind CSS ^4 43 | - Shadcn UI Components 44 | - Lucide React Icons 45 | 46 | - **Frontend-Backend communication** 47 | - Inertia.js for seamless frontend-backend communication 48 | 49 | ## Getting Started 50 | 51 | ### Prerequisites 52 | 53 | - PHP 8.4 54 | - Composer 55 | - Node.js (Latest LTS version) 56 | - SQLite (but you can use any other RDBMS) 57 | - Laravel Herd (to run the application) 58 | 59 | ### Installation 60 | 61 | 1. Clone the repository: 62 | 63 | ```bash 64 | git clone https://github.com/ferjal0/react-inertia-laravel 65 | cd react-inertia-laravel 66 | ``` 67 | 68 | 2. Install PHP dependencies: 69 | 70 | ```bash 71 | composer install 72 | ``` 73 | 74 | 3. Install Node.js dependencies: 75 | 76 | ```bash 77 | pnpm install 78 | ``` 79 | 80 | 4. Set up your environment: 81 | 82 | ```bash 83 | cp .env.example .env 84 | php artisan key:generate 85 | ``` 86 | 87 | 5. Configure your database in `.env` and run migrations with seeding: 88 | 89 | ```bash 90 | php artisan migrate --seed 91 | ``` 92 | 93 | This will create the database tables and an initial user account that you can use to access the dashboard. 94 | 95 | 6. Start the development servers: 96 | 97 | ```bash 98 | pnpm run dev 99 | ``` 100 | 101 | Visit `http://react-inertia-laravel.test` to see your application. 102 | 103 | ## Documentation Structure 104 | 105 | The documentation is split into three main sections: 106 | 107 | 1. [Getting Started](docs/getting-started.md) - This file, containing project overview and setup instructions 108 | 2. [Backend Documentation](docs/backend.md) - Details about Laravel implementation, API endpoints, and authentication 109 | 3. [Frontend Documentation](docs/frontend.md) - React components, Inertia.js integration, and UI architecture 110 | 111 | ## Code Style 112 | 113 | - PHP code follows PSR-12 standards 114 | - TypeScript/React code follows the project's ESLint and Prettier configuration 115 | - Run style checks with: 116 | 117 | ```bash 118 | # PHP 119 | ./vendor/bin/pint 120 | 121 | # TypeScript/React 122 | pnpm run lint 123 | ``` 124 | 125 | ## Building for Production 126 | 127 | ```bash 128 | pnpm run build 129 | ``` 130 | -------------------------------------------------------------------------------- /app/Actions/Fortify/CreateNewUser.php: -------------------------------------------------------------------------------- 1 | $input 19 | */ 20 | public function create(array $input): User 21 | { 22 | Validator::make($input, [ 23 | 'name' => ['required', 'string', 'max:255'], 24 | 'email' => [ 25 | 'required', 26 | 'string', 27 | 'email', 28 | 'max:255', 29 | Rule::unique(User::class), 30 | ], 31 | 'password' => $this->passwordRules(), 32 | ])->validate(); 33 | 34 | return User::create([ 35 | 'name' => $input['name'], 36 | 'email' => $input['email'], 37 | 'password' => Hash::make($input['password']), 38 | ]); 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /app/Actions/Fortify/PasswordValidationRules.php: -------------------------------------------------------------------------------- 1 | |string> 13 | */ 14 | protected function passwordRules(): array 15 | { 16 | return ['required', 'string', Password::default(), 'confirmed']; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /app/Actions/Fortify/ResetUserPassword.php: -------------------------------------------------------------------------------- 1 | $input 18 | */ 19 | public function reset(User $user, array $input): void 20 | { 21 | Validator::make($input, [ 22 | 'password' => $this->passwordRules(), 23 | ])->validate(); 24 | 25 | $user->forceFill([ 26 | 'password' => Hash::make($input['password']), 27 | ])->save(); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /app/Actions/Fortify/UpdateUserPassword.php: -------------------------------------------------------------------------------- 1 | $input 18 | */ 19 | public function update(User $user, array $input): void 20 | { 21 | Validator::make($input, [ 22 | 'current_password' => ['required', 'string', 'current_password:web'], 23 | 'password' => $this->passwordRules(), 24 | ], [ 25 | 'current_password.current_password' => __('The provided password does not match your current password.'), 26 | ])->validateWithBag('updatePassword'); 27 | 28 | $user->forceFill([ 29 | 'password' => Hash::make($input['password']), 30 | ])->save(); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /app/Actions/Fortify/UpdateUserProfileInformation.php: -------------------------------------------------------------------------------- 1 | $input 17 | */ 18 | public function update(User $user, array $input): void 19 | { 20 | Validator::make($input, [ 21 | 'name' => ['required', 'string', 'max:255'], 22 | 23 | 'email' => [ 24 | 'required', 25 | 'string', 26 | 'email', 27 | 'max:255', 28 | Rule::unique('users')->ignore($user->id), 29 | ], 30 | ])->validateWithBag('updateProfileInformation'); 31 | 32 | if ($input['email'] !== $user->email && 33 | $user instanceof MustVerifyEmail) { 34 | $this->updateVerifiedUser($user, $input); 35 | } else { 36 | $user->forceFill([ 37 | 'name' => $input['name'], 38 | 'email' => $input['email'], 39 | ])->save(); 40 | } 41 | } 42 | 43 | /** 44 | * Update the given verified user's profile information. 45 | * 46 | * @param array $input 47 | */ 48 | protected function updateVerifiedUser(User $user, array $input): void 49 | { 50 | $user->forceFill([ 51 | 'name' => $input['name'], 52 | 'email' => $input['email'], 53 | 'email_verified_at' => null, 54 | ])->save(); 55 | 56 | $user->sendEmailVerificationNotification(); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /app/Http/Controllers/Account/ProfileController.php: -------------------------------------------------------------------------------- 1 | $request->user() instanceof MustVerifyEmail, 26 | 'isUpdateProfileEnabled' => Features::enabled(Features::updateProfileInformation()), 27 | 'isUpdatePasswordEnabled' => Features::enabled(Features::updatePasswords()), 28 | ]); 29 | } 30 | 31 | /** 32 | * Update the user's profile information. 33 | */ 34 | public function update(Request $request): RedirectResponse 35 | { 36 | $input = $request->all(); 37 | 38 | Validator::make($input, [ 39 | 'name' => ['required', 'string', 'max:255'], 40 | 'email' => ['required', 'email', 'max:255', Rule::unique('users')->ignore($request->user()->id)], 41 | 'photo' => ['nullable', 'mimes:jpg,jpeg,png', 'max:1024'], 42 | ])->validateWithBag('updateProfileInformation'); 43 | 44 | $user = $request->user(); 45 | 46 | if (isset($input['photo'])) { 47 | $user->updateProfilePhoto($input['photo']); 48 | } 49 | 50 | if ($input['email'] !== $user->email && $user instanceof MustVerifyEmail) { 51 | $this->updateVerifiedUser($user, $input); 52 | } else { 53 | $user->forceFill([ 54 | 'name' => $input['name'], 55 | 'email' => $input['email'], 56 | ])->save(); 57 | } 58 | 59 | return Redirect::route('profile.show'); 60 | } 61 | 62 | /** 63 | * Update the given verified user's profile information. 64 | */ 65 | protected function updateVerifiedUser($user, array $input): void 66 | { 67 | $user->forceFill([ 68 | 'name' => $input['name'], 69 | 'email' => $input['email'], 70 | 'email_verified_at' => null, 71 | ])->save(); 72 | } 73 | 74 | /** 75 | * Delete the user's account. 76 | */ 77 | public function destroy(Request $request): RedirectResponse 78 | { 79 | $request->validate([ 80 | 'password' => ['required', 'current_password'], 81 | ]); 82 | 83 | $user = $request->user(); 84 | 85 | Auth::logout(); 86 | 87 | $user->delete(); 88 | 89 | $request->session()->invalidate(); 90 | $request->session()->regenerateToken(); 91 | 92 | return Redirect::to('/'); 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /app/Http/Controllers/Account/SecurityController.php: -------------------------------------------------------------------------------- 1 | Session::where('user_id', $request->user()->id)->get(), 25 | 'isTwoFactorAuthenticationFeatureEnabled' => Features::enabled(Features::twoFactorAuthentication()), 26 | ]); 27 | } 28 | 29 | /** 30 | * Update the user's profile information. 31 | */ 32 | public function update(ProfileUpdateRequest $request): RedirectResponse 33 | { 34 | $request->user()->fill($request->validated()); 35 | 36 | if ($request->user()->isDirty('email')) { 37 | $request->user()->email_verified_at = null; 38 | } 39 | 40 | $request->user()->save(); 41 | 42 | return Redirect::route('profile.show'); 43 | } 44 | 45 | /** 46 | * Delete the user's account. 47 | */ 48 | public function destroy(Request $request): RedirectResponse 49 | { 50 | $request->validate([ 51 | 'password' => ['required', 'current_password'], 52 | ]); 53 | 54 | $user = $request->user(); 55 | 56 | Auth::logout(); 57 | 58 | $user->delete(); 59 | 60 | $request->session()->invalidate(); 61 | $request->session()->regenerateToken(); 62 | 63 | return Redirect::to('/'); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /app/Http/Controllers/Account/SessionController.php: -------------------------------------------------------------------------------- 1 | validate([ 24 | 'password' => ['required', 'string', 'current_password'], 25 | ]); 26 | 27 | DB::table('sessions') 28 | ->where('user_id', Auth::id()) 29 | ->where('id', '!=', request()->session()->getId()) 30 | ->delete(); 31 | 32 | return back(303)->with('status', 'other-browser-sessions-terminated'); 33 | } 34 | 35 | /** 36 | * Destroy a specific session. 37 | */ 38 | public function destroySession(Request $request, string $id): RedirectResponse 39 | { 40 | if (config('session.driver') !== 'database') { 41 | return back(409); 42 | } 43 | 44 | $request->validate([ 45 | 'password' => ['required', 'string', 'current_password'], 46 | ]); 47 | 48 | // Don't allow destroying the current session 49 | if ($id === $request->session()->getId()) { 50 | throw ValidationException::withMessages([ 51 | 'session' => ['Cannot terminate current session'], 52 | ]); 53 | } 54 | 55 | // Verify the session belongs to the current user 56 | $session = DB::table('sessions') 57 | ->where('user_id', Auth::id()) 58 | ->where('id', $id) 59 | ->first(); 60 | 61 | if (! $session) { 62 | throw ValidationException::withMessages([ 63 | 'session' => ['Session not found or does not belong to you'], 64 | ]); 65 | } 66 | 67 | DB::table('sessions') 68 | ->where('user_id', Auth::id()) 69 | ->where('id', $id) 70 | ->delete(); 71 | 72 | return back(303)->with('status', 'browser-session-terminated'); 73 | } 74 | } 75 | -------------------------------------------------------------------------------- /app/Http/Controllers/Auth/ConfirmablePasswordController.php: -------------------------------------------------------------------------------- 1 | validate([ 19 | 'email' => $request->user()->email, 20 | 'password' => $request->password, 21 | ])) { 22 | throw ValidationException::withMessages([ 23 | 'password' => __('auth.password'), 24 | ]); 25 | } 26 | 27 | $request->session()->put('auth.password_confirmed_at', time()); 28 | 29 | return redirect()->intended(route('dashboard', absolute: false)); 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /app/Http/Controllers/Controller.php: -------------------------------------------------------------------------------- 1 | 30 | */ 31 | public function share(Request $request): array 32 | { 33 | return [ 34 | ...parent::share($request), 35 | 'auth' => [ 36 | 'user' => $request->user(), 37 | ], 38 | 'ziggy' => fn () => [ 39 | ...(new Ziggy)->toArray(), 40 | 'location' => $request->url(), 41 | ], 42 | ]; 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /app/Http/Requests/Auth/LoginRequest.php: -------------------------------------------------------------------------------- 1 | |string> 26 | */ 27 | public function rules(): array 28 | { 29 | return [ 30 | 'email' => ['required', 'string', 'email'], 31 | 'password' => ['required', 'string'], 32 | ]; 33 | } 34 | 35 | /** 36 | * Attempt to authenticate the request's credentials. 37 | * 38 | * @throws \Illuminate\Validation\ValidationException 39 | */ 40 | public function authenticate(): void 41 | { 42 | $this->ensureIsNotRateLimited(); 43 | 44 | if (! Auth::attempt($this->only('email', 'password'), $this->boolean('remember'))) { 45 | RateLimiter::hit($this->throttleKey()); 46 | 47 | throw ValidationException::withMessages([ 48 | 'email' => trans('auth.failed'), 49 | ]); 50 | } 51 | 52 | RateLimiter::clear($this->throttleKey()); 53 | } 54 | 55 | /** 56 | * Ensure the login request is not rate limited. 57 | * 58 | * @throws \Illuminate\Validation\ValidationException 59 | */ 60 | public function ensureIsNotRateLimited(): void 61 | { 62 | if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) { 63 | return; 64 | } 65 | 66 | event(new Lockout($this)); 67 | 68 | $seconds = RateLimiter::availableIn($this->throttleKey()); 69 | 70 | throw ValidationException::withMessages([ 71 | 'email' => trans('auth.throttle', [ 72 | 'seconds' => $seconds, 73 | 'minutes' => ceil($seconds / 60), 74 | ]), 75 | ]); 76 | } 77 | 78 | /** 79 | * Get the rate limiting throttle key for the request. 80 | */ 81 | public function throttleKey(): string 82 | { 83 | return Str::transliterate(Str::lower($this->string('email')).'|'.$this->ip()); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /app/Http/Requests/ProfileUpdateRequest.php: -------------------------------------------------------------------------------- 1 | |string> 15 | */ 16 | public function rules(): array 17 | { 18 | return [ 19 | 'name' => ['required', 'string', 'max:255'], 20 | 'email' => [ 21 | 'required', 22 | 'string', 23 | 'lowercase', 24 | 'email', 25 | 'max:255', 26 | Rule::unique(User::class)->ignore($this->user()->id), 27 | ], 28 | ]; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /app/Models/Session.php: -------------------------------------------------------------------------------- 1 | 'datetime', 19 | ]; 20 | 21 | protected $appends = [ 22 | 'last_active_ago', 23 | ]; 24 | 25 | public function user(): BelongsTo 26 | { 27 | return $this->belongsTo(User::class); 28 | } 29 | 30 | public function getLastActiveAgoAttribute() 31 | { 32 | return $this->last_activity->diffForHumans(); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /app/Models/User.php: -------------------------------------------------------------------------------- 1 | */ 16 | use HasFactory, Notifiable, TwoFactorAuthenticatable; 17 | 18 | /** 19 | * The attributes that are mass assignable. 20 | * 21 | * @var list 22 | */ 23 | protected $fillable = [ 24 | 'name', 25 | 'email', 26 | 'password', 27 | ]; 28 | 29 | /** 30 | * The attributes that should be hidden for serialization. 31 | * 32 | * @var list 33 | */ 34 | protected $hidden = [ 35 | 'password', 36 | 'remember_token', 37 | 'two_factor_recovery_codes', 38 | 'two_factor_secret', 39 | ]; 40 | 41 | /** 42 | * The accessors to append to the model's array form. 43 | * 44 | * @var array 45 | */ 46 | protected $appends = [ 47 | 'profile_photo_url', 48 | ]; 49 | 50 | /** 51 | * Get the attributes that should be cast. 52 | * 53 | * @return array 54 | */ 55 | protected function casts(): array 56 | { 57 | return [ 58 | 'email_verified_at' => 'datetime', 59 | 'password' => 'hashed', 60 | ]; 61 | } 62 | 63 | /** 64 | * Update the user's profile photo. 65 | */ 66 | public function updateProfilePhoto(UploadedFile $photo): void 67 | { 68 | tap($this->profile_photo_path, function ($previous) use ($photo) { 69 | $this->forceFill([ 70 | 'profile_photo_path' => $photo->storePublicly( 71 | 'profile-photos', 72 | ['disk' => 'public'] 73 | ), 74 | ])->save(); 75 | 76 | if ($previous) { 77 | Storage::disk('public')->delete($previous); 78 | } 79 | }); 80 | } 81 | 82 | /** 83 | * Get the URL to the user's profile photo. 84 | */ 85 | public function getProfilePhotoUrlAttribute(): string 86 | { 87 | return $this->profile_photo_path 88 | ? asset('storage/'.$this->profile_photo_path) 89 | : ''; 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /app/Providers/AppServiceProvider.php: -------------------------------------------------------------------------------- 1 | input(Fortify::username())).'|'.$request->ip()); 38 | 39 | return Limit::perMinute(5)->by($throttleKey); 40 | }); 41 | 42 | RateLimiter::for('two-factor', function (Request $request) { 43 | return Limit::perMinute(5)->by($request->session()->get('login.id')); 44 | }); 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /artisan: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env php 2 | handleCommand(new ArgvInput); 14 | 15 | exit($status); 16 | -------------------------------------------------------------------------------- /bootstrap/app.php: -------------------------------------------------------------------------------- 1 | withRouting( 9 | web: __DIR__.'/../routes/web.php', 10 | health: '/up', 11 | ) 12 | ->withMiddleware(function (Middleware $middleware) { 13 | $middleware->web(append: [ 14 | \App\Http\Middleware\HandleInertiaRequests::class, 15 | \Illuminate\Http\Middleware\AddLinkHeadersForPreloadedAssets::class, 16 | ]); 17 | 18 | // 19 | }) 20 | ->withExceptions(function (Exceptions $exceptions) { 21 | // 22 | })->create(); 23 | -------------------------------------------------------------------------------- /bootstrap/cache/packages.php: -------------------------------------------------------------------------------- 1 | 3 | array ( 4 | 'providers' => 5 | array ( 6 | 0 => 'Inertia\\ServiceProvider', 7 | ), 8 | ), 9 | 'jenssegers/agent' => 10 | array ( 11 | 'aliases' => 12 | array ( 13 | 'Agent' => 'Jenssegers\\Agent\\Facades\\Agent', 14 | ), 15 | 'providers' => 16 | array ( 17 | 0 => 'Jenssegers\\Agent\\AgentServiceProvider', 18 | ), 19 | ), 20 | 'laravel/breeze' => 21 | array ( 22 | 'providers' => 23 | array ( 24 | 0 => 'Laravel\\Breeze\\BreezeServiceProvider', 25 | ), 26 | ), 27 | 'laravel/fortify' => 28 | array ( 29 | 'providers' => 30 | array ( 31 | 0 => 'Laravel\\Fortify\\FortifyServiceProvider', 32 | ), 33 | ), 34 | 'laravel/pail' => 35 | array ( 36 | 'providers' => 37 | array ( 38 | 0 => 'Laravel\\Pail\\PailServiceProvider', 39 | ), 40 | ), 41 | 'laravel/sail' => 42 | array ( 43 | 'providers' => 44 | array ( 45 | 0 => 'Laravel\\Sail\\SailServiceProvider', 46 | ), 47 | ), 48 | 'laravel/sanctum' => 49 | array ( 50 | 'providers' => 51 | array ( 52 | 0 => 'Laravel\\Sanctum\\SanctumServiceProvider', 53 | ), 54 | ), 55 | 'laravel/tinker' => 56 | array ( 57 | 'providers' => 58 | array ( 59 | 0 => 'Laravel\\Tinker\\TinkerServiceProvider', 60 | ), 61 | ), 62 | 'nesbot/carbon' => 63 | array ( 64 | 'providers' => 65 | array ( 66 | 0 => 'Carbon\\Laravel\\ServiceProvider', 67 | ), 68 | ), 69 | 'nunomaduro/collision' => 70 | array ( 71 | 'providers' => 72 | array ( 73 | 0 => 'NunoMaduro\\Collision\\Adapters\\Laravel\\CollisionServiceProvider', 74 | ), 75 | ), 76 | 'nunomaduro/termwind' => 77 | array ( 78 | 'providers' => 79 | array ( 80 | 0 => 'Termwind\\Laravel\\TermwindServiceProvider', 81 | ), 82 | ), 83 | 'pestphp/pest-plugin-laravel' => 84 | array ( 85 | 'providers' => 86 | array ( 87 | 0 => 'Pest\\Laravel\\PestServiceProvider', 88 | ), 89 | ), 90 | 'railsware/mailtrap-php' => 91 | array ( 92 | 'providers' => 93 | array ( 94 | 0 => 'Mailtrap\\Bridge\\Laravel\\MailtrapApiProvider', 95 | ), 96 | ), 97 | 'tightenco/ziggy' => 98 | array ( 99 | 'providers' => 100 | array ( 101 | 0 => 'Tighten\\Ziggy\\ZiggyServiceProvider', 102 | ), 103 | ), 104 | ); -------------------------------------------------------------------------------- /bootstrap/providers.php: -------------------------------------------------------------------------------- 1 | env('APP_NAME', 'Laravel'), 17 | 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Application Environment 21 | |-------------------------------------------------------------------------- 22 | | 23 | | This value determines the "environment" your application is currently 24 | | running in. This may determine how you prefer to configure various 25 | | services the application utilizes. Set this in your ".env" file. 26 | | 27 | */ 28 | 29 | 'env' => env('APP_ENV', 'production'), 30 | 31 | /* 32 | |-------------------------------------------------------------------------- 33 | | Application Debug Mode 34 | |-------------------------------------------------------------------------- 35 | | 36 | | When your application is in debug mode, detailed error messages with 37 | | stack traces will be shown on every error that occurs within your 38 | | application. If disabled, a simple generic error page is shown. 39 | | 40 | */ 41 | 42 | 'debug' => (bool) env('APP_DEBUG', false), 43 | 44 | /* 45 | |-------------------------------------------------------------------------- 46 | | Application URL 47 | |-------------------------------------------------------------------------- 48 | | 49 | | This URL is used by the console to properly generate URLs when using 50 | | the Artisan command line tool. You should set this to the root of 51 | | the application so that it's available within Artisan commands. 52 | | 53 | */ 54 | 55 | 'url' => env('APP_URL', 'http://localhost'), 56 | 57 | /* 58 | |-------------------------------------------------------------------------- 59 | | Application Timezone 60 | |-------------------------------------------------------------------------- 61 | | 62 | | Here you may specify the default timezone for your application, which 63 | | will be used by the PHP date and date-time functions. The timezone 64 | | is set to "UTC" by default as it is suitable for most use cases. 65 | | 66 | */ 67 | 68 | 'timezone' => env('APP_TIMEZONE', 'UTC'), 69 | 70 | /* 71 | |-------------------------------------------------------------------------- 72 | | Application Locale Configuration 73 | |-------------------------------------------------------------------------- 74 | | 75 | | The application locale determines the default locale that will be used 76 | | by Laravel's translation / localization methods. This option can be 77 | | set to any locale for which you plan to have translation strings. 78 | | 79 | */ 80 | 81 | 'locale' => env('APP_LOCALE', 'en'), 82 | 83 | 'fallback_locale' => env('APP_FALLBACK_LOCALE', 'en'), 84 | 85 | 'faker_locale' => env('APP_FAKER_LOCALE', 'en_US'), 86 | 87 | /* 88 | |-------------------------------------------------------------------------- 89 | | Encryption Key 90 | |-------------------------------------------------------------------------- 91 | | 92 | | This key is utilized by Laravel's encryption services and should be set 93 | | to a random, 32 character string to ensure that all encrypted values 94 | | are secure. You should do this prior to deploying the application. 95 | | 96 | */ 97 | 98 | 'cipher' => 'AES-256-CBC', 99 | 100 | 'key' => env('APP_KEY'), 101 | 102 | 'previous_keys' => [ 103 | ...array_filter( 104 | explode(',', env('APP_PREVIOUS_KEYS', '')) 105 | ), 106 | ], 107 | 108 | /* 109 | |-------------------------------------------------------------------------- 110 | | Maintenance Mode Driver 111 | |-------------------------------------------------------------------------- 112 | | 113 | | These configuration options determine the driver used to determine and 114 | | manage Laravel's "maintenance mode" status. The "cache" driver will 115 | | allow maintenance mode to be controlled across multiple machines. 116 | | 117 | | Supported drivers: "file", "cache" 118 | | 119 | */ 120 | 121 | 'maintenance' => [ 122 | 'driver' => env('APP_MAINTENANCE_DRIVER', 'file'), 123 | 'store' => env('APP_MAINTENANCE_STORE', 'database'), 124 | ], 125 | 126 | ]; 127 | -------------------------------------------------------------------------------- /config/auth.php: -------------------------------------------------------------------------------- 1 | [ 17 | 'guard' => env('AUTH_GUARD', 'web'), 18 | 'passwords' => env('AUTH_PASSWORD_BROKER', 'users'), 19 | ], 20 | 21 | /* 22 | |-------------------------------------------------------------------------- 23 | | Authentication Guards 24 | |-------------------------------------------------------------------------- 25 | | 26 | | Next, you may define every authentication guard for your application. 27 | | Of course, a great default configuration has been defined for you 28 | | which utilizes session storage plus the Eloquent user provider. 29 | | 30 | | All authentication guards have a user provider, which defines how the 31 | | users are actually retrieved out of your database or other storage 32 | | system used by the application. Typically, Eloquent is utilized. 33 | | 34 | | Supported: "session" 35 | | 36 | */ 37 | 38 | 'guards' => [ 39 | 'web' => [ 40 | 'driver' => 'session', 41 | 'provider' => 'users', 42 | ], 43 | ], 44 | 45 | /* 46 | |-------------------------------------------------------------------------- 47 | | User Providers 48 | |-------------------------------------------------------------------------- 49 | | 50 | | All authentication guards have a user provider, which defines how the 51 | | users are actually retrieved out of your database or other storage 52 | | system used by the application. Typically, Eloquent is utilized. 53 | | 54 | | If you have multiple user tables or models you may configure multiple 55 | | providers to represent the model / table. These providers may then 56 | | be assigned to any extra authentication guards you have defined. 57 | | 58 | | Supported: "database", "eloquent" 59 | | 60 | */ 61 | 62 | 'providers' => [ 63 | 'users' => [ 64 | 'driver' => 'eloquent', 65 | 'model' => env('AUTH_MODEL', App\Models\User::class), 66 | ], 67 | 68 | // 'users' => [ 69 | // 'driver' => 'database', 70 | // 'table' => 'users', 71 | // ], 72 | ], 73 | 74 | /* 75 | |-------------------------------------------------------------------------- 76 | | Resetting Passwords 77 | |-------------------------------------------------------------------------- 78 | | 79 | | These configuration options specify the behavior of Laravel's password 80 | | reset functionality, including the table utilized for token storage 81 | | and the user provider that is invoked to actually retrieve users. 82 | | 83 | | The expiry time is the number of minutes that each reset token will be 84 | | considered valid. This security feature keeps tokens short-lived so 85 | | they have less time to be guessed. You may change this as needed. 86 | | 87 | | The throttle setting is the number of seconds a user must wait before 88 | | generating more password reset tokens. This prevents the user from 89 | | quickly generating a very large amount of password reset tokens. 90 | | 91 | */ 92 | 93 | 'passwords' => [ 94 | 'users' => [ 95 | 'provider' => 'users', 96 | 'table' => env('AUTH_PASSWORD_RESET_TOKEN_TABLE', 'password_reset_tokens'), 97 | 'expire' => 60, 98 | 'throttle' => 60, 99 | ], 100 | ], 101 | 102 | /* 103 | |-------------------------------------------------------------------------- 104 | | Password Confirmation Timeout 105 | |-------------------------------------------------------------------------- 106 | | 107 | | Here you may define the amount of seconds before a password confirmation 108 | | window expires and users are asked to re-enter their password via the 109 | | confirmation screen. By default, the timeout lasts for three hours. 110 | | 111 | */ 112 | 113 | 'password_timeout' => env('AUTH_PASSWORD_TIMEOUT', 10800), 114 | 115 | ]; 116 | -------------------------------------------------------------------------------- /config/cache.php: -------------------------------------------------------------------------------- 1 | env('CACHE_STORE', 'database'), 19 | 20 | /* 21 | |-------------------------------------------------------------------------- 22 | | Cache Stores 23 | |-------------------------------------------------------------------------- 24 | | 25 | | Here you may define all of the cache "stores" for your application as 26 | | well as their drivers. You may even define multiple stores for the 27 | | same cache driver to group types of items stored in your caches. 28 | | 29 | | Supported drivers: "array", "database", "file", "memcached", 30 | | "redis", "dynamodb", "octane", "null" 31 | | 32 | */ 33 | 34 | 'stores' => [ 35 | 36 | 'array' => [ 37 | 'driver' => 'array', 38 | 'serialize' => false, 39 | ], 40 | 41 | 'database' => [ 42 | 'driver' => 'database', 43 | 'connection' => env('DB_CACHE_CONNECTION'), 44 | 'table' => env('DB_CACHE_TABLE', 'cache'), 45 | 'lock_connection' => env('DB_CACHE_LOCK_CONNECTION'), 46 | 'lock_table' => env('DB_CACHE_LOCK_TABLE'), 47 | ], 48 | 49 | 'file' => [ 50 | 'driver' => 'file', 51 | 'path' => storage_path('framework/cache/data'), 52 | 'lock_path' => storage_path('framework/cache/data'), 53 | ], 54 | 55 | 'memcached' => [ 56 | 'driver' => 'memcached', 57 | 'persistent_id' => env('MEMCACHED_PERSISTENT_ID'), 58 | 'sasl' => [ 59 | env('MEMCACHED_USERNAME'), 60 | env('MEMCACHED_PASSWORD'), 61 | ], 62 | 'options' => [ 63 | // Memcached::OPT_CONNECT_TIMEOUT => 2000, 64 | ], 65 | 'servers' => [ 66 | [ 67 | 'host' => env('MEMCACHED_HOST', '127.0.0.1'), 68 | 'port' => env('MEMCACHED_PORT', 11211), 69 | 'weight' => 100, 70 | ], 71 | ], 72 | ], 73 | 74 | 'redis' => [ 75 | 'driver' => 'redis', 76 | 'connection' => env('REDIS_CACHE_CONNECTION', 'cache'), 77 | 'lock_connection' => env('REDIS_CACHE_LOCK_CONNECTION', 'default'), 78 | ], 79 | 80 | 'dynamodb' => [ 81 | 'driver' => 'dynamodb', 82 | 'key' => env('AWS_ACCESS_KEY_ID'), 83 | 'secret' => env('AWS_SECRET_ACCESS_KEY'), 84 | 'region' => env('AWS_DEFAULT_REGION', 'us-east-1'), 85 | 'table' => env('DYNAMODB_CACHE_TABLE', 'cache'), 86 | 'endpoint' => env('DYNAMODB_ENDPOINT'), 87 | ], 88 | 89 | 'octane' => [ 90 | 'driver' => 'octane', 91 | ], 92 | 93 | ], 94 | 95 | /* 96 | |-------------------------------------------------------------------------- 97 | | Cache Key Prefix 98 | |-------------------------------------------------------------------------- 99 | | 100 | | When utilizing the APC, database, memcached, Redis, and DynamoDB cache 101 | | stores, there might be other applications using the same cache. For 102 | | that reason, you may prefix every cache key to avoid collisions. 103 | | 104 | */ 105 | 106 | 'prefix' => env('CACHE_PREFIX', Str::slug(env('APP_NAME', 'laravel'), '_').'_cache_'), 107 | 108 | ]; 109 | -------------------------------------------------------------------------------- /config/filesystems.php: -------------------------------------------------------------------------------- 1 | env('FILESYSTEM_DISK', 'local'), 17 | 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Filesystem Disks 21 | |-------------------------------------------------------------------------- 22 | | 23 | | Below you may configure as many filesystem disks as necessary, and you 24 | | may even configure multiple disks for the same driver. Examples for 25 | | most supported storage drivers are configured here for reference. 26 | | 27 | | Supported drivers: "local", "ftp", "sftp", "s3" 28 | | 29 | */ 30 | 31 | 'disks' => [ 32 | 33 | 'local' => [ 34 | 'driver' => 'local', 35 | 'root' => storage_path('app/private'), 36 | 'serve' => true, 37 | 'throw' => false, 38 | 'report' => false, 39 | ], 40 | 41 | 'public' => [ 42 | 'driver' => 'local', 43 | 'root' => storage_path('app/public'), 44 | 'url' => env('APP_URL').'/storage', 45 | 'visibility' => 'public', 46 | 'throw' => false, 47 | 'report' => false, 48 | ], 49 | 50 | 's3' => [ 51 | 'driver' => 's3', 52 | 'key' => env('AWS_ACCESS_KEY_ID'), 53 | 'secret' => env('AWS_SECRET_ACCESS_KEY'), 54 | 'region' => env('AWS_DEFAULT_REGION'), 55 | 'bucket' => env('AWS_BUCKET'), 56 | 'url' => env('AWS_URL'), 57 | 'endpoint' => env('AWS_ENDPOINT'), 58 | 'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false), 59 | 'throw' => false, 60 | 'report' => false, 61 | ], 62 | 63 | ], 64 | 65 | /* 66 | |-------------------------------------------------------------------------- 67 | | Symbolic Links 68 | |-------------------------------------------------------------------------- 69 | | 70 | | Here you may configure the symbolic links that will be created when the 71 | | `storage:link` Artisan command is executed. The array keys should be 72 | | the locations of the links and the values should be their targets. 73 | | 74 | */ 75 | 76 | 'links' => [ 77 | public_path('storage') => storage_path('app/public'), 78 | ], 79 | 80 | ]; 81 | -------------------------------------------------------------------------------- /config/logging.php: -------------------------------------------------------------------------------- 1 | env('LOG_CHANNEL', 'stack'), 22 | 23 | /* 24 | |-------------------------------------------------------------------------- 25 | | Deprecations Log Channel 26 | |-------------------------------------------------------------------------- 27 | | 28 | | This option controls the log channel that should be used to log warnings 29 | | regarding deprecated PHP and library features. This allows you to get 30 | | your application ready for upcoming major versions of dependencies. 31 | | 32 | */ 33 | 34 | 'deprecations' => [ 35 | 'channel' => env('LOG_DEPRECATIONS_CHANNEL', 'null'), 36 | 'trace' => env('LOG_DEPRECATIONS_TRACE', false), 37 | ], 38 | 39 | /* 40 | |-------------------------------------------------------------------------- 41 | | Log Channels 42 | |-------------------------------------------------------------------------- 43 | | 44 | | Here you may configure the log channels for your application. Laravel 45 | | utilizes the Monolog PHP logging library, which includes a variety 46 | | of powerful log handlers and formatters that you're free to use. 47 | | 48 | | Available drivers: "single", "daily", "slack", "syslog", 49 | | "errorlog", "monolog", "custom", "stack" 50 | | 51 | */ 52 | 53 | 'channels' => [ 54 | 55 | 'stack' => [ 56 | 'driver' => 'stack', 57 | 'channels' => explode(',', env('LOG_STACK', 'single')), 58 | 'ignore_exceptions' => false, 59 | ], 60 | 61 | 'single' => [ 62 | 'driver' => 'single', 63 | 'path' => storage_path('logs/laravel.log'), 64 | 'level' => env('LOG_LEVEL', 'debug'), 65 | 'replace_placeholders' => true, 66 | ], 67 | 68 | 'daily' => [ 69 | 'driver' => 'daily', 70 | 'path' => storage_path('logs/laravel.log'), 71 | 'level' => env('LOG_LEVEL', 'debug'), 72 | 'days' => env('LOG_DAILY_DAYS', 14), 73 | 'replace_placeholders' => true, 74 | ], 75 | 76 | 'slack' => [ 77 | 'driver' => 'slack', 78 | 'url' => env('LOG_SLACK_WEBHOOK_URL'), 79 | 'username' => env('LOG_SLACK_USERNAME', 'Laravel Log'), 80 | 'emoji' => env('LOG_SLACK_EMOJI', ':boom:'), 81 | 'level' => env('LOG_LEVEL', 'critical'), 82 | 'replace_placeholders' => true, 83 | ], 84 | 85 | 'papertrail' => [ 86 | 'driver' => 'monolog', 87 | 'level' => env('LOG_LEVEL', 'debug'), 88 | 'handler' => env('LOG_PAPERTRAIL_HANDLER', SyslogUdpHandler::class), 89 | 'handler_with' => [ 90 | 'host' => env('PAPERTRAIL_URL'), 91 | 'port' => env('PAPERTRAIL_PORT'), 92 | 'connectionString' => 'tls://'.env('PAPERTRAIL_URL').':'.env('PAPERTRAIL_PORT'), 93 | ], 94 | 'processors' => [PsrLogMessageProcessor::class], 95 | ], 96 | 97 | 'stderr' => [ 98 | 'driver' => 'monolog', 99 | 'level' => env('LOG_LEVEL', 'debug'), 100 | 'handler' => StreamHandler::class, 101 | 'formatter' => env('LOG_STDERR_FORMATTER'), 102 | 'with' => [ 103 | 'stream' => 'php://stderr', 104 | ], 105 | 'processors' => [PsrLogMessageProcessor::class], 106 | ], 107 | 108 | 'syslog' => [ 109 | 'driver' => 'syslog', 110 | 'level' => env('LOG_LEVEL', 'debug'), 111 | 'facility' => env('LOG_SYSLOG_FACILITY', LOG_USER), 112 | 'replace_placeholders' => true, 113 | ], 114 | 115 | 'errorlog' => [ 116 | 'driver' => 'errorlog', 117 | 'level' => env('LOG_LEVEL', 'debug'), 118 | 'replace_placeholders' => true, 119 | ], 120 | 121 | 'null' => [ 122 | 'driver' => 'monolog', 123 | 'handler' => NullHandler::class, 124 | ], 125 | 126 | 'emergency' => [ 127 | 'path' => storage_path('logs/laravel.log'), 128 | ], 129 | 130 | ], 131 | 132 | ]; 133 | -------------------------------------------------------------------------------- /config/mail.php: -------------------------------------------------------------------------------- 1 | env('MAIL_MAILER', 'smtp'), 18 | 19 | /* 20 | |-------------------------------------------------------------------------- 21 | | Mailer Configurations 22 | |-------------------------------------------------------------------------- 23 | | 24 | | Here you may configure all of the mailers used by your application plus 25 | | their respective settings. Several examples have been configured for 26 | | you and you are free to add your own as your application requires. 27 | | 28 | | Laravel supports a variety of mail "transport" drivers that can be used 29 | | when delivering an email. You may specify which one you're using for 30 | | your mailers below. You may also add additional mailers if needed. 31 | | 32 | | Supported: "smtp", "sendmail", "mailgun", "ses", "ses-v2", 33 | | "postmark", "resend", "log", "array", 34 | | "failover", "roundrobin" 35 | | 36 | */ 37 | 38 | 'mailers' => [ 39 | 40 | 'smtp' => [ 41 | 'transport' => 'smtp', 42 | 'scheme' => env('MAIL_SCHEME'), 43 | 'url' => env('MAIL_URL'), 44 | 'host' => env('MAIL_HOST', '127.0.0.1'), 45 | 'port' => env('MAIL_PORT', 2525), 46 | 'username' => env('MAIL_USERNAME'), 47 | 'password' => env('MAIL_PASSWORD'), 48 | 'timeout' => null, 49 | 'local_domain' => env('MAIL_EHLO_DOMAIN', parse_url(env('APP_URL', 'http://localhost'), PHP_URL_HOST)), 50 | ], 51 | 52 | 'mailtrap' => [ 53 | 'transport' => 'mailtrap', 54 | ], 55 | 56 | 'ses' => [ 57 | 'transport' => 'ses', 58 | ], 59 | 60 | 'postmark' => [ 61 | 'transport' => 'postmark', 62 | // 'message_stream_id' => env('POSTMARK_MESSAGE_STREAM_ID'), 63 | // 'client' => [ 64 | // 'timeout' => 5, 65 | // ], 66 | ], 67 | 68 | 'resend' => [ 69 | 'transport' => 'resend', 70 | ], 71 | 72 | 'sendmail' => [ 73 | 'transport' => 'sendmail', 74 | 'path' => env('MAIL_SENDMAIL_PATH', '/usr/sbin/sendmail -bs -i'), 75 | ], 76 | 77 | 'log' => [ 78 | 'transport' => 'log', 79 | 'channel' => env('MAIL_LOG_CHANNEL'), 80 | ], 81 | 82 | 'array' => [ 83 | 'transport' => 'array', 84 | ], 85 | 86 | 'failover' => [ 87 | 'transport' => 'failover', 88 | 'mailers' => [ 89 | 'smtp', 90 | 'log', 91 | ], 92 | ], 93 | 94 | 'roundrobin' => [ 95 | 'transport' => 'roundrobin', 96 | 'mailers' => [ 97 | 'ses', 98 | 'postmark', 99 | ], 100 | ], 101 | 102 | ], 103 | 104 | /* 105 | |-------------------------------------------------------------------------- 106 | | Global "From" Address 107 | |-------------------------------------------------------------------------- 108 | | 109 | | You may wish for all emails sent by your application to be sent from 110 | | the same address. Here you may specify a name and address that is 111 | | used globally for all emails that are sent by your application. 112 | | 113 | */ 114 | 115 | 'from' => [ 116 | 'address' => env('MAIL_FROM_ADDRESS', 'hello@example.com'), 117 | 'name' => env('MAIL_FROM_NAME', 'Example'), 118 | ], 119 | 120 | ]; 121 | -------------------------------------------------------------------------------- /config/queue.php: -------------------------------------------------------------------------------- 1 | env('QUEUE_CONNECTION', 'database'), 17 | 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Queue Connections 21 | |-------------------------------------------------------------------------- 22 | | 23 | | Here you may configure the connection options for every queue backend 24 | | used by your application. An example configuration is provided for 25 | | each backend supported by Laravel. You're also free to add more. 26 | | 27 | | Drivers: "sync", "database", "beanstalkd", "sqs", "redis", "null" 28 | | 29 | */ 30 | 31 | 'connections' => [ 32 | 33 | 'sync' => [ 34 | 'driver' => 'sync', 35 | ], 36 | 37 | 'database' => [ 38 | 'driver' => 'database', 39 | 'connection' => env('DB_QUEUE_CONNECTION'), 40 | 'table' => env('DB_QUEUE_TABLE', 'jobs'), 41 | 'queue' => env('DB_QUEUE', 'default'), 42 | 'retry_after' => (int) env('DB_QUEUE_RETRY_AFTER', 90), 43 | 'after_commit' => false, 44 | ], 45 | 46 | 'beanstalkd' => [ 47 | 'driver' => 'beanstalkd', 48 | 'host' => env('BEANSTALKD_QUEUE_HOST', 'localhost'), 49 | 'queue' => env('BEANSTALKD_QUEUE', 'default'), 50 | 'retry_after' => (int) env('BEANSTALKD_QUEUE_RETRY_AFTER', 90), 51 | 'block_for' => 0, 52 | 'after_commit' => false, 53 | ], 54 | 55 | 'sqs' => [ 56 | 'driver' => 'sqs', 57 | 'key' => env('AWS_ACCESS_KEY_ID'), 58 | 'secret' => env('AWS_SECRET_ACCESS_KEY'), 59 | 'prefix' => env('SQS_PREFIX', 'https://sqs.us-east-1.amazonaws.com/your-account-id'), 60 | 'queue' => env('SQS_QUEUE', 'default'), 61 | 'suffix' => env('SQS_SUFFIX'), 62 | 'region' => env('AWS_DEFAULT_REGION', 'us-east-1'), 63 | 'after_commit' => false, 64 | ], 65 | 66 | 'redis' => [ 67 | 'driver' => 'redis', 68 | 'connection' => env('REDIS_QUEUE_CONNECTION', 'default'), 69 | 'queue' => env('REDIS_QUEUE', 'default'), 70 | 'retry_after' => (int) env('REDIS_QUEUE_RETRY_AFTER', 90), 71 | 'block_for' => null, 72 | 'after_commit' => false, 73 | ], 74 | 75 | ], 76 | 77 | /* 78 | |-------------------------------------------------------------------------- 79 | | Job Batching 80 | |-------------------------------------------------------------------------- 81 | | 82 | | The following options configure the database and table that store job 83 | | batching information. These options can be updated to any database 84 | | connection and table which has been defined by your application. 85 | | 86 | */ 87 | 88 | 'batching' => [ 89 | 'database' => env('DB_CONNECTION', 'sqlite'), 90 | 'table' => 'job_batches', 91 | ], 92 | 93 | /* 94 | |-------------------------------------------------------------------------- 95 | | Failed Queue Jobs 96 | |-------------------------------------------------------------------------- 97 | | 98 | | These options configure the behavior of failed queue job logging so you 99 | | can control how and where failed jobs are stored. Laravel ships with 100 | | support for storing failed jobs in a simple file or in a database. 101 | | 102 | | Supported drivers: "database-uuids", "dynamodb", "file", "null" 103 | | 104 | */ 105 | 106 | 'failed' => [ 107 | 'driver' => env('QUEUE_FAILED_DRIVER', 'database-uuids'), 108 | 'database' => env('DB_CONNECTION', 'sqlite'), 109 | 'table' => 'failed_jobs', 110 | ], 111 | 112 | ]; 113 | -------------------------------------------------------------------------------- /config/services.php: -------------------------------------------------------------------------------- 1 | [ 18 | 'token' => env('POSTMARK_TOKEN'), 19 | ], 20 | 21 | 'ses' => [ 22 | 'key' => env('AWS_ACCESS_KEY_ID'), 23 | 'secret' => env('AWS_SECRET_ACCESS_KEY'), 24 | 'region' => env('AWS_DEFAULT_REGION', 'us-east-1'), 25 | ], 26 | 27 | 'resend' => [ 28 | 'key' => env('RESEND_KEY'), 29 | ], 30 | 31 | 'slack' => [ 32 | 'notifications' => [ 33 | 'bot_user_oauth_token' => env('SLACK_BOT_USER_OAUTH_TOKEN'), 34 | 'channel' => env('SLACK_BOT_USER_DEFAULT_CHANNEL'), 35 | ], 36 | ], 37 | 38 | ]; 39 | -------------------------------------------------------------------------------- /database/.gitignore: -------------------------------------------------------------------------------- 1 | *.sqlite* 2 | -------------------------------------------------------------------------------- /database/factories/UserFactory.php: -------------------------------------------------------------------------------- 1 | 11 | */ 12 | class UserFactory extends Factory 13 | { 14 | /** 15 | * The current password being used by the factory. 16 | */ 17 | protected static ?string $password; 18 | 19 | /** 20 | * Define the model's default state. 21 | * 22 | * @return array 23 | */ 24 | public function definition(): array 25 | { 26 | return [ 27 | 'name' => fake()->name(), 28 | 'email' => fake()->unique()->safeEmail(), 29 | 'email_verified_at' => now(), 30 | 'password' => static::$password ??= Hash::make('password'), 31 | 'remember_token' => Str::random(10), 32 | ]; 33 | } 34 | 35 | /** 36 | * Indicate that the model's email address should be unverified. 37 | */ 38 | public function unverified(): static 39 | { 40 | return $this->state(fn (array $attributes) => [ 41 | 'email_verified_at' => null, 42 | ]); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /database/migrations/0001_01_01_000000_create_users_table.php: -------------------------------------------------------------------------------- 1 | id(); 16 | $table->string('name'); 17 | $table->string('email')->unique(); 18 | $table->timestamp('email_verified_at')->nullable(); 19 | $table->string('password'); 20 | $table->rememberToken(); 21 | $table->string('profile_photo_path', 2048)->nullable(); 22 | $table->timestamps(); 23 | }); 24 | 25 | Schema::create('password_reset_tokens', function (Blueprint $table) { 26 | $table->string('email')->primary(); 27 | $table->string('token'); 28 | $table->timestamp('created_at')->nullable(); 29 | }); 30 | 31 | Schema::create('sessions', function (Blueprint $table) { 32 | $table->string('id')->primary(); 33 | $table->foreignId('user_id')->nullable()->index(); 34 | $table->string('ip_address', 45)->nullable(); 35 | $table->text('user_agent')->nullable(); 36 | $table->longText('payload'); 37 | $table->integer('last_activity')->index(); 38 | }); 39 | } 40 | 41 | /** 42 | * Reverse the migrations. 43 | */ 44 | public function down(): void 45 | { 46 | Schema::dropIfExists('users'); 47 | Schema::dropIfExists('password_reset_tokens'); 48 | Schema::dropIfExists('sessions'); 49 | } 50 | }; 51 | -------------------------------------------------------------------------------- /database/migrations/0001_01_01_000001_create_cache_table.php: -------------------------------------------------------------------------------- 1 | string('key')->primary(); 16 | $table->mediumText('value'); 17 | $table->integer('expiration'); 18 | }); 19 | 20 | Schema::create('cache_locks', function (Blueprint $table) { 21 | $table->string('key')->primary(); 22 | $table->string('owner'); 23 | $table->integer('expiration'); 24 | }); 25 | } 26 | 27 | /** 28 | * Reverse the migrations. 29 | */ 30 | public function down(): void 31 | { 32 | Schema::dropIfExists('cache'); 33 | Schema::dropIfExists('cache_locks'); 34 | } 35 | }; 36 | -------------------------------------------------------------------------------- /database/migrations/0001_01_01_000002_create_jobs_table.php: -------------------------------------------------------------------------------- 1 | id(); 16 | $table->string('queue')->index(); 17 | $table->longText('payload'); 18 | $table->unsignedTinyInteger('attempts'); 19 | $table->unsignedInteger('reserved_at')->nullable(); 20 | $table->unsignedInteger('available_at'); 21 | $table->unsignedInteger('created_at'); 22 | }); 23 | 24 | Schema::create('job_batches', function (Blueprint $table) { 25 | $table->string('id')->primary(); 26 | $table->string('name'); 27 | $table->integer('total_jobs'); 28 | $table->integer('pending_jobs'); 29 | $table->integer('failed_jobs'); 30 | $table->longText('failed_job_ids'); 31 | $table->mediumText('options')->nullable(); 32 | $table->integer('cancelled_at')->nullable(); 33 | $table->integer('created_at'); 34 | $table->integer('finished_at')->nullable(); 35 | }); 36 | 37 | Schema::create('failed_jobs', function (Blueprint $table) { 38 | $table->id(); 39 | $table->string('uuid')->unique(); 40 | $table->text('connection'); 41 | $table->text('queue'); 42 | $table->longText('payload'); 43 | $table->longText('exception'); 44 | $table->timestamp('failed_at')->useCurrent(); 45 | }); 46 | } 47 | 48 | /** 49 | * Reverse the migrations. 50 | */ 51 | public function down(): void 52 | { 53 | Schema::dropIfExists('jobs'); 54 | Schema::dropIfExists('job_batches'); 55 | Schema::dropIfExists('failed_jobs'); 56 | } 57 | }; 58 | -------------------------------------------------------------------------------- /database/migrations/2025_01_25_140923_create_personal_access_tokens_table.php: -------------------------------------------------------------------------------- 1 | id(); 16 | $table->morphs('tokenable'); 17 | $table->string('name'); 18 | $table->string('token', 64)->unique(); 19 | $table->text('abilities')->nullable(); 20 | $table->timestamp('last_used_at')->nullable(); 21 | $table->timestamp('expires_at')->nullable(); 22 | $table->timestamps(); 23 | }); 24 | } 25 | 26 | /** 27 | * Reverse the migrations. 28 | */ 29 | public function down(): void 30 | { 31 | Schema::dropIfExists('personal_access_tokens'); 32 | } 33 | }; 34 | -------------------------------------------------------------------------------- /database/migrations/2025_01_29_181350_add_two_factor_columns_to_users_table.php: -------------------------------------------------------------------------------- 1 | text('two_factor_secret') 16 | ->after('password') 17 | ->nullable(); 18 | 19 | $table->text('two_factor_recovery_codes') 20 | ->after('two_factor_secret') 21 | ->nullable(); 22 | 23 | $table->timestamp('two_factor_confirmed_at') 24 | ->after('two_factor_recovery_codes') 25 | ->nullable(); 26 | }); 27 | } 28 | 29 | /** 30 | * Reverse the migrations. 31 | */ 32 | public function down(): void 33 | { 34 | Schema::table('users', function (Blueprint $table) { 35 | $table->dropColumn([ 36 | 'two_factor_secret', 37 | 'two_factor_recovery_codes', 38 | 'two_factor_confirmed_at', 39 | ]); 40 | }); 41 | } 42 | }; 43 | -------------------------------------------------------------------------------- /database/seeders/DatabaseSeeder.php: -------------------------------------------------------------------------------- 1 | create([ 17 | 'name' => 'User', 18 | 'email' => 'user@example.com', 19 | 'email_verified_at' => now(), 20 | 'password' => bcrypt('password'), // password 21 | 'remember_token' => Str::random(10), 22 | ]); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /docs/getting-started.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | ## 📋 Prerequisites 4 | 5 | Before you begin, ensure you have the following installed: 6 | 7 | - PHP 8.4 8 | - Node.js (LTS version recommended) 9 | - Composer 10 | - Git 11 | 12 | ## 🚀 Installation 13 | 14 | 1. **Clone the Repository** 15 | 16 | ```bash 17 | git clone your-project-name 18 | cd your-project-name 19 | ``` 20 | 21 | 2. **Install PHP Dependencies** 22 | 23 | ```bash 24 | composer install 25 | ``` 26 | 27 | 3. **Install Node.js Dependencies** 28 | 29 | ```bash 30 | pnpm install 31 | ``` 32 | 33 | 4. **Environment Setup** 34 | 35 | ```bash 36 | cp .env.example .env 37 | php artisan key:generate 38 | ``` 39 | 40 | 5. **Configure Your Environment** 41 | Edit `.env` file with your database and other configuration settings: 42 | 43 | 6. **Create Database and Initial User** 44 | 45 | ```bash 46 | php artisan migrate --seed 47 | ``` 48 | 49 | Using the `--seed` flag will create an initial user you can use to access the dashboard. 50 | 51 | 7. **Build Assets** 52 | 53 | ```bash 54 | pnpm run dev 55 | ``` 56 | 57 | ## 🏃‍♂️ Development Workflow 58 | 59 | ### Start the Development Server 60 | 61 | ```bash 62 | pnpm run dev 63 | ``` 64 | 65 | Your application will be available at `http://react-inertia-laravel.local`. 66 | 67 | ### Development Commands 68 | 69 | ```bash 70 | # Run tests 71 | php artisan test 72 | 73 | # Format PHP code 74 | ./vendor/bin/pint 75 | 76 | # Type check TypeScript 77 | pnpm run typecheck 78 | 79 | # Lint JavaScript/TypeScript 80 | pnpm run lint 81 | 82 | # Format JavaScript/TypeScript 83 | pnpm run format 84 | ``` 85 | 86 | ## 📦 Production Deployment 87 | 88 | 1. **Optimize Composer** 89 | 90 | ```bash 91 | composer install --optimize-autoloader --no-dev 92 | ``` 93 | 94 | 2. **Build Frontend Assets** 95 | 96 | ```bash 97 | pnpm run build 98 | ``` 99 | 100 | 3. **Cache Configuration** 101 | 102 | ```bash 103 | php artisan config:cache 104 | php artisan route:cache 105 | php artisan view:cache 106 | ``` 107 | 108 | ## 🤝 Contributing 109 | 110 | 1. Fork the repository 111 | 2. Create your feature branch (`git checkout -b feature/amazing-feature`) 112 | 3. Commit your changes (`git commit -m 'Add some amazing feature'`) 113 | 4. Push to the branch (`git push origin feature/amazing-feature`) 114 | 5. Open a Pull Request 115 | -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import tsPlugin from '@typescript-eslint/eslint-plugin'; 2 | import tsParser from '@typescript-eslint/parser'; 3 | import reactPlugin from 'eslint-plugin-react'; 4 | import reactHooksPlugin from 'eslint-plugin-react-hooks'; 5 | import reactRefreshPlugin from 'eslint-plugin-react-refresh'; 6 | import globals from 'globals'; 7 | 8 | export default [ 9 | { ignores: ['dist', 'node_modules', 'vendor', 'public'] }, 10 | { 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | parser: tsParser, 14 | parserOptions: { 15 | ecmaVersion: 'latest', 16 | sourceType: 'module', 17 | ecmaFeatures: { 18 | jsx: true, 19 | }, 20 | project: './tsconfig.json', 21 | tsconfigRootDir: '.', 22 | }, 23 | globals: { 24 | ...globals.browser, 25 | ...globals.es2021, 26 | route: 'readonly', 27 | }, 28 | }, 29 | plugins: { 30 | '@typescript-eslint': tsPlugin, 31 | react: reactPlugin, 32 | 'react-refresh': reactRefreshPlugin, 33 | 'react-hooks': reactHooksPlugin, 34 | }, 35 | settings: { 36 | 'import/resolver': { 37 | typescript: { 38 | alwaysTryTypes: true, 39 | project: './tsconfig.json', 40 | }, 41 | alias: { 42 | map: [ 43 | ['@', './resources/js'], 44 | ['@types', './resources/js/types'], 45 | ], 46 | extensions: ['.ts', '.tsx', '.js', '.jsx'], 47 | }, 48 | }, 49 | react: { 50 | version: 'detect', 51 | }, 52 | }, 53 | rules: { 54 | '@typescript-eslint/no-explicit-any': 'warn', 55 | '@typescript-eslint/explicit-function-return-type': 'off', 56 | '@typescript-eslint/explicit-module-boundary-types': 'off', 57 | '@typescript-eslint/no-unused-vars': [ 58 | 'warn', 59 | { argsIgnorePattern: '^_' }, 60 | ], 61 | 'react-hooks/rules-of-hooks': 'error', 62 | 'react-hooks/exhaustive-deps': 'warn', 63 | 'react/prop-types': 'off', 64 | 'react/react-in-jsx-scope': 'off', 65 | }, 66 | }, 67 | ]; 68 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-inertia-laravel-starter", 3 | "version": "1.0.0", 4 | "description": "The Laravel Inertia React Starter", 5 | "keywords": [ 6 | "laravel", 7 | "inertia", 8 | "react", 9 | "tailwind", 10 | "shadcn-ui" 11 | ], 12 | "license": "MIT", 13 | "private": true, 14 | "type": "module", 15 | "scripts": { 16 | "build": "vite build && vite build --ssr", 17 | "dev": "vite", 18 | "lint": "eslint .", 19 | "lint:fix": "eslint . --fix", 20 | "format": "prettier --write .", 21 | "format:check": "prettier --check ." 22 | }, 23 | "dependencies": { 24 | "@inertiajs/react": "^2.0.11", 25 | "@radix-ui/react-alert-dialog": "^1.1.13", 26 | "@radix-ui/react-avatar": "^1.1.9", 27 | "@radix-ui/react-collapsible": "^1.1.10", 28 | "@radix-ui/react-dialog": "^1.1.13", 29 | "@radix-ui/react-dropdown-menu": "^2.1.14", 30 | "@radix-ui/react-label": "^2.1.6", 31 | "@radix-ui/react-separator": "^1.1.6", 32 | "@radix-ui/react-slot": "^1.2.2", 33 | "@radix-ui/react-tooltip": "^1.2.6", 34 | "@radix-ui/react-visually-hidden": "^1.2.2", 35 | "axios": "^1.9.0", 36 | "class-variance-authority": "^0.7.1", 37 | "clsx": "^2.1.1", 38 | "cmdk": "^1.1.1", 39 | "input-otp": "^1.4.2", 40 | "lucide-react": "^0.479.0", 41 | "next-themes": "^0.4.6", 42 | "react": "^19.1.0", 43 | "react-dom": "^19.1.0", 44 | "sonner": "^1.7.4", 45 | "tailwind-merge": "^3.3.0", 46 | "tailwindcss-animate": "^1.0.7" 47 | }, 48 | "devDependencies": { 49 | "@tailwindcss/forms": "^0.5.10", 50 | "@tailwindcss/postcss": "^4.1.7", 51 | "@types/node": "^22.15.19", 52 | "@types/react": "^19.1.4", 53 | "@types/react-dom": "^19.1.5", 54 | "@typescript-eslint/eslint-plugin": "^8.32.1", 55 | "@typescript-eslint/parser": "^8.32.1", 56 | "@vitejs/plugin-react": "^4.4.1", 57 | "concurrently": "^9.1.2", 58 | "eslint": "^9.27.0", 59 | "eslint-config-prettier": "^9.1.0", 60 | "eslint-plugin-prettier": "^5.4.0", 61 | "eslint-plugin-react": "^7.37.5", 62 | "eslint-plugin-react-hooks": "^5.2.0", 63 | "eslint-plugin-react-refresh": "^0.4.20", 64 | "globals": "^15.15.0", 65 | "laravel-vite-plugin": "^1.2.0", 66 | "postcss": "^8.5.3", 67 | "prettier": "^3.5.3", 68 | "prettier-plugin-organize-imports": "^4.1.0", 69 | "prettier-plugin-tailwindcss": "^0.6.11", 70 | "tailwindcss": "^4.1.7", 71 | "typescript": "^5.8.3", 72 | "vite": "^6.3.5" 73 | }, 74 | "pnpm": { 75 | "onlyBuiltDependencies": [ 76 | "esbuild" 77 | ] 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /phpunit.xml: -------------------------------------------------------------------------------- 1 | 2 | 7 | 8 | 9 | tests/Unit 10 | 11 | 12 | tests/Feature 13 | 14 | 15 | 16 | 17 | app 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | '@tailwindcss/postcss': {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /public/.htaccess: -------------------------------------------------------------------------------- 1 | 2 | 3 | Options -MultiViews -Indexes 4 | 5 | 6 | RewriteEngine On 7 | 8 | # Handle Authorization Header 9 | RewriteCond %{HTTP:Authorization} . 10 | RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}] 11 | 12 | # Handle X-XSRF-Token Header 13 | RewriteCond %{HTTP:x-xsrf-token} . 14 | RewriteRule .* - [E=HTTP_X_XSRF_TOKEN:%{HTTP:X-XSRF-Token}] 15 | 16 | # Redirect Trailing Slashes If Not A Folder... 17 | RewriteCond %{REQUEST_FILENAME} !-d 18 | RewriteCond %{REQUEST_URI} (.+)/$ 19 | RewriteRule ^ %1 [L,R=301] 20 | 21 | # Send Requests To Front Controller... 22 | RewriteCond %{REQUEST_FILENAME} !-d 23 | RewriteCond %{REQUEST_FILENAME} !-f 24 | RewriteRule ^ index.php [L] 25 | 26 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ferjal0/react-inertia-laravel/1ac716f65b3b4eaa57d912f1d0aff1056d3bb1d6/public/favicon.png -------------------------------------------------------------------------------- /public/index.php: -------------------------------------------------------------------------------- 1 | handleRequest(Request::capture()); 18 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /resources/js/Pages/Auth/ForgotPassword.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from '@/components/ui/button'; 2 | import { Input } from '@/components/ui/input'; 3 | import { Label } from '@/components/ui/label'; 4 | import AuthenticationLayout from '@/layouts/AuthenticationLayout'; 5 | import { Head, Link, router, useForm } from '@inertiajs/react'; 6 | import { FormEventHandler } from 'react'; 7 | 8 | export default function ForgotPassword({ status }: { status?: string }) { 9 | const { data, setData, post, processing, errors } = useForm({ 10 | email: '', 11 | }); 12 | 13 | const submit: FormEventHandler = (e) => { 14 | e.preventDefault(); 15 | 16 | post(route('password.email'), { 17 | onSuccess: () => router.visit(route('forgot-password.sent')), 18 | }); 19 | }; 20 | 21 | return ( 22 | 23 | 24 | 25 |
26 |
27 |

28 | Forgot your password? 29 |

30 |

31 | No problem. Let us know your email address and we will 32 | email you a password reset link. 33 |

34 |
35 | 36 | {status && ( 37 |
38 | {status} 39 |
40 | )} 41 | 42 | {errors.email && ( 43 |
44 | {errors.email} 45 |
46 | )} 47 | 48 |
49 |
50 | 51 | setData('email', e.target.value)} 61 | autoFocus 62 | /> 63 |
64 | 65 | 72 | 73 |
74 | Did you remember?{' '} 75 | 79 | Log in 80 | 81 |
82 |
83 |
84 | 85 | ); 86 | } 87 | -------------------------------------------------------------------------------- /resources/js/Pages/Auth/ForgotPasswordSent.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from '@/components/ui/button'; 2 | import AuthenticationLayout from '@/layouts/AuthenticationLayout'; 3 | import { Head, Link } from '@inertiajs/react'; 4 | import { MailOpen } from 'lucide-react'; 5 | 6 | export default function PasswordResetSent() { 7 | return ( 8 | 9 | 10 | 11 |
12 |
13 |
14 | 15 |
16 |

Check your email

17 |

18 | We have sent a password reset link to your email 19 | address. Please check your inbox and follow the 20 | instructions to reset your password. 21 |

22 |
23 | 24 |
25 | 28 | 29 |
30 | Didn't receive the email?{' '} 31 | 35 | Try again 36 | 37 |
38 |
39 |
40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /resources/js/Pages/Auth/Login.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from '@/components/ui/button'; 2 | import ErrorFeedback from '@/components/ui/error-feedback'; 3 | import { Input } from '@/components/ui/input'; 4 | import { Label } from '@/components/ui/label'; 5 | import AuthenticationLayout from '@/layouts/AuthenticationLayout'; 6 | import { Head, Link, useForm } from '@inertiajs/react'; 7 | import { FormEventHandler } from 'react'; 8 | 9 | export default function Login({ 10 | isRegisterEnabled, 11 | }: { 12 | isRegisterEnabled: boolean; 13 | }) { 14 | const { data, setData, post, processing, reset, errors } = useForm({ 15 | email: '', 16 | password: '', 17 | remember: false, 18 | }); 19 | 20 | const submit: FormEventHandler = (e) => { 21 | e.preventDefault(); 22 | 23 | post(route('login'), { 24 | onFinish: () => reset('password'), 25 | }); 26 | }; 27 | 28 | return ( 29 | 30 | 31 |
32 |
33 |

34 | Login to your account 35 |

36 |

37 | Enter your email below to login to your account 38 |

39 |
40 | 41 |
42 |
43 | 44 | setData('email', e.target.value)} 53 | autoFocus 54 | /> 55 |
56 |
57 | 58 | 67 | setData('password', e.target.value) 68 | } 69 | /> 70 |
71 | 78 |
79 | 83 | Forgot your password? 84 | 85 |
86 |
87 | {isRegisterEnabled && ( 88 |
89 | Don't have an account? 90 | 94 | Sign up 95 | 96 |
97 | )} 98 | 99 |
100 | ); 101 | } 102 | -------------------------------------------------------------------------------- /resources/js/Pages/Auth/PasswordReset.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from '@/components/ui/button'; 2 | import { Input } from '@/components/ui/input'; 3 | import { Label } from '@/components/ui/label'; 4 | import AuthenticationLayout from '@/layouts/AuthenticationLayout'; 5 | import { Head, Link, useForm } from '@inertiajs/react'; 6 | import { FormEventHandler } from 'react'; 7 | 8 | export default function PasswordReset({ token }: { token: string }) { 9 | const { data, setData, post, processing, errors, reset } = useForm({ 10 | token: token, 11 | email: new URLSearchParams(window.location.search).get('email') || '', 12 | password: '', 13 | password_confirmation: '', 14 | }); 15 | 16 | const submit: FormEventHandler = (e) => { 17 | e.preventDefault(); 18 | 19 | post(route('password.update'), { 20 | onFinish: () => reset('password', 'password_confirmation'), 21 | }); 22 | }; 23 | 24 | return ( 25 | 26 | 27 | 28 |
29 |
30 |

Reset your password

31 |

32 | Please enter your new password below to reset your 33 | account password. 34 |

35 |
36 | 37 | {errors.token && ( 38 |
39 | {errors.token} 40 |
41 | )} 42 | 43 |
44 |
45 | 46 | 56 | {errors.email && ( 57 |
58 | {errors.email} 59 |
60 | )} 61 |
62 | 63 |
64 | 65 | 74 | setData('password', e.target.value) 75 | } 76 | /> 77 | {errors.password && ( 78 |
79 | {errors.password} 80 |
81 | )} 82 |
83 | 84 |
85 | 88 | 97 | setData('password_confirmation', e.target.value) 98 | } 99 | /> 100 | {errors.password_confirmation && ( 101 |
102 | {errors.password_confirmation} 103 |
104 | )} 105 |
106 | 107 | 114 | 115 |
116 | Remember your password?{' '} 117 | 121 | Log in 122 | 123 |
124 |
125 |
126 | 127 | ); 128 | } 129 | -------------------------------------------------------------------------------- /resources/js/Pages/Auth/TwoFactorChallenge.tsx: -------------------------------------------------------------------------------- 1 | import ErrorFeedback from '@/components/ui/error-feedback'; 2 | import { 3 | InputOTP, 4 | InputOTPGroup, 5 | InputOTPSlot, 6 | } from '@/components/ui/input-otp'; 7 | import AuthenticationLayout from '@/layouts/AuthenticationLayout'; 8 | import { Head, useForm } from '@inertiajs/react'; 9 | import { ShieldCheck } from 'lucide-react'; 10 | 11 | export default function TwoFactorChallenge() { 12 | const { data, setData, post, errors } = useForm({ 13 | code: '', 14 | }); 15 | 16 | const handleSubmit = async () => { 17 | if (data.code.length !== 6) return; 18 | 19 | post(route('two-factor.login.store')); 20 | }; 21 | 22 | return ( 23 | 24 | 25 |
26 |
27 | 28 |

29 | Two-Factor Authentication 30 |

31 |
32 | 33 | setData('code', value)} 37 | onComplete={handleSubmit} 38 | autoFocus 39 | > 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 |

51 | Please enter the one-time password from your authenticator 52 | app. 53 |

54 | 55 | {errors && } 56 |
57 | 58 | ); 59 | } 60 | -------------------------------------------------------------------------------- /resources/js/Pages/Auth/VerifyEmail.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from '@/components/ui/button'; 2 | import AuthenticationLayout from '@/layouts/AuthenticationLayout'; 3 | import { Head, Link, useForm } from '@inertiajs/react'; 4 | import { FormEventHandler } from 'react'; 5 | 6 | export default function VerifyEmail({ status }: { status?: string }) { 7 | const { post, processing } = useForm({}); 8 | 9 | const submit: FormEventHandler = (e) => { 10 | e.preventDefault(); 11 | 12 | post(route('verification.send')); 13 | }; 14 | 15 | return ( 16 | 17 | 18 | 19 |
20 |
21 |

Verify your email

22 |

23 | Please verify your email address by clicking the link in 24 | the email we sent you. If you haven't received it, we 25 | can send a new verification link. 26 |

27 |
28 | 29 | {status === 'verification-link-sent' && ( 30 |
31 | A new verification link has been sent to your email 32 | address. 33 |
34 | )} 35 | 36 |
37 | 44 | 45 |
46 | 52 | Log out 53 | 54 |
55 |
56 |
57 | 58 | ); 59 | } 60 | -------------------------------------------------------------------------------- /resources/js/Pages/Dashboard.tsx: -------------------------------------------------------------------------------- 1 | import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; 2 | import { Head } from '@inertiajs/react'; 3 | 4 | export default function Dashboard() { 5 | return ( 6 | 7 | 8 | 9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | 18 | ); 19 | } 20 | -------------------------------------------------------------------------------- /resources/js/Pages/Profile/Partials/UpdatePasswordForm.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from '@/components/ui/button'; 2 | import ErrorFeedback from '@/components/ui/error-feedback'; 3 | import { Input } from '@/components/ui/input'; 4 | import { Label } from '@/components/ui/label'; 5 | import { useForm } from '@inertiajs/react'; 6 | import { FormEventHandler, useRef } from 'react'; 7 | import { toast } from 'sonner'; 8 | 9 | export default function UpdatePasswordForm() { 10 | const passwordInput = useRef(null); 11 | const currentPasswordInput = useRef(null); 12 | 13 | const { data, setData, post, errors, reset, processing } = useForm({ 14 | _method: 'PUT', 15 | current_password: '', 16 | password: '', 17 | password_confirmation: '', 18 | }); 19 | 20 | const updatePassword: FormEventHandler = (e) => { 21 | e.preventDefault(); 22 | 23 | post(route('user-password.update'), { 24 | errorBag: 'updatePassword', 25 | preserveScroll: true, 26 | onSuccess: () => { 27 | reset(); 28 | toast.success('Password updated successfully'); 29 | }, 30 | onError: (errors) => { 31 | if (errors.password) { 32 | reset('password', 'password_confirmation'); 33 | passwordInput.current?.focus(); 34 | } 35 | 36 | if (errors.current_password) { 37 | reset('current_password'); 38 | currentPasswordInput.current?.focus(); 39 | } 40 | }, 41 | }); 42 | }; 43 | 44 | return ( 45 |
46 |
47 |

Update Password

48 | 49 |

50 | Ensure your account is using a long, random password to stay 51 | secure. 52 |

53 |
54 | 55 |
56 |
57 | 58 | 59 | 64 | setData('current_password', e.target.value) 65 | } 66 | type="password" 67 | className="max-w-lg" 68 | autoComplete="current-password" 69 | /> 70 | 71 | {errors.current_password && ( 72 | 73 | )} 74 |
75 | 76 |
77 | 78 | 79 | setData('password', e.target.value)} 84 | type="password" 85 | className="max-w-lg" 86 | autoComplete="new-password" 87 | /> 88 | 89 | {errors.password && ( 90 | 91 | )} 92 |
93 | 94 |
95 | 98 | 99 | 103 | setData('password_confirmation', e.target.value) 104 | } 105 | type="password" 106 | className="max-w-lg" 107 | autoComplete="new-password" 108 | /> 109 | 110 | {errors.password_confirmation && ( 111 | 112 | )} 113 |
114 | 115 |
116 | 117 |
118 |
119 |
120 | ); 121 | } 122 | -------------------------------------------------------------------------------- /resources/js/Pages/Profile/Show.tsx: -------------------------------------------------------------------------------- 1 | import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; 2 | import { PageProps } from '@/types'; 3 | import { Head } from '@inertiajs/react'; 4 | import DeleteUserForm from './Partials/DeleteUserForm'; 5 | import UpdatePasswordForm from './Partials/UpdatePasswordForm'; 6 | import UpdateProfileInformationForm from './Partials/UpdateProfileInformationForm'; 7 | 8 | export default function Edit({ 9 | isUpdatePasswordEnabled, 10 | isUpdateProfileEnabled, 11 | }: PageProps<{ 12 | isUpdatePasswordEnabled: boolean; 13 | isUpdateProfileEnabled: boolean; 14 | }>) { 15 | return ( 16 | 17 | 18 | 19 |
20 | {isUpdateProfileEnabled && } 21 | 22 | {isUpdatePasswordEnabled && } 23 | 24 | 25 |
26 | 27 | ); 28 | } 29 | -------------------------------------------------------------------------------- /resources/js/Pages/Security/Show.tsx: -------------------------------------------------------------------------------- 1 | import AuthenticatedLayout from '@/layouts/AuthenticatedLayout'; 2 | import { PageProps } from '@/types'; 3 | import { Head } from '@inertiajs/react'; 4 | import { TwoFactorAuthenticationForm } from './Partials/TwoFactorAuthenticationForm'; 5 | 6 | export default function Show({ 7 | isTwoFactorAuthenticationFeatureEnabled, 8 | }: PageProps<{ 9 | isTwoFactorAuthenticationFeatureEnabled: boolean; 10 | }>) { 11 | return ( 12 | 13 | 14 | 15 |
16 | {isTwoFactorAuthenticationFeatureEnabled && ( 17 |
18 | 19 |
20 | )} 21 |
22 | 23 | ); 24 | } 25 | -------------------------------------------------------------------------------- /resources/js/Pages/Welcome.tsx: -------------------------------------------------------------------------------- 1 | import { Ripple } from '@/components/ui/ripple'; 2 | import { PageProps } from '@/types'; 3 | import { Head, Link } from '@inertiajs/react'; 4 | import { Command } from 'lucide-react'; 5 | 6 | export default function Welcome({ auth }: PageProps) { 7 | return ( 8 | <> 9 | 10 | 11 |
12 |
13 |
14 | 18 |
19 | 20 |
21 | React Inertia Laravel 22 | 23 | 24 | 49 |
50 |
51 | 52 |
53 |
54 |

55 | Your landing goes here 56 |

57 | 58 |
59 |
60 |
61 | 62 | ); 63 | } 64 | -------------------------------------------------------------------------------- /resources/js/app.tsx: -------------------------------------------------------------------------------- 1 | import '../css/app.css'; 2 | import './bootstrap'; 3 | 4 | import { createInertiaApp } from '@inertiajs/react'; 5 | import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; 6 | import { createRoot, hydrateRoot } from 'react-dom/client'; 7 | 8 | createInertiaApp({ 9 | resolve: (name) => 10 | resolvePageComponent( 11 | `./Pages/${name}.tsx`, 12 | import.meta.glob('./Pages/**/*.tsx'), 13 | ), 14 | setup({ el, App, props }) { 15 | if (import.meta.env.SSR) { 16 | hydrateRoot(el, ); 17 | return; 18 | } 19 | 20 | createRoot(el).render(); 21 | }, 22 | progress: { 23 | color: '#ffffff', 24 | }, 25 | }); 26 | -------------------------------------------------------------------------------- /resources/js/bootstrap.ts: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | window.axios = axios; 3 | 4 | window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest'; 5 | -------------------------------------------------------------------------------- /resources/js/components/app-breadcrumb.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Breadcrumb, 3 | BreadcrumbItem, 4 | BreadcrumbLink, 5 | BreadcrumbList, 6 | BreadcrumbPage, 7 | BreadcrumbSeparator, 8 | } from '@/components/ui/breadcrumb'; 9 | import { usePage } from '@inertiajs/react'; 10 | import { Fragment } from 'react/jsx-runtime'; 11 | 12 | interface BreadcrumbSegment { 13 | title: string; 14 | url?: string; 15 | } 16 | 17 | export function AppBreadcrumb() { 18 | const { url } = usePage(); 19 | 20 | // Remove query parameters and trailing slash 21 | const pathWithoutQuery = url.split('?')[0]; 22 | const currentPath = pathWithoutQuery.endsWith('/') 23 | ? pathWithoutQuery.slice(0, -1) 24 | : pathWithoutQuery; 25 | const segments = currentPath.split('/').filter(Boolean); 26 | 27 | // Generate breadcrumb segments 28 | const breadcrumbSegments: BreadcrumbSegment[] = segments.map( 29 | (segment, index) => { 30 | const path = `/${segments.slice(0, index + 1).join('/')}`; 31 | return { 32 | title: 33 | segment.charAt(0).toUpperCase() + 34 | segment.slice(1).replace(/-/g, ' '), 35 | url: path, 36 | }; 37 | }, 38 | ); 39 | 40 | if (breadcrumbSegments.length === 0) { 41 | breadcrumbSegments.push({ title: 'Dashboard' }); 42 | } 43 | 44 | return ( 45 | 46 | 47 | {breadcrumbSegments.map((segment, index) => ( 48 | 49 | {index < breadcrumbSegments.length - 1 ? ( 50 | <> 51 | 52 | 53 | {segment.title} 54 | 55 | 56 | 57 | 58 | ) : ( 59 | 60 | {segment.title} 61 | 62 | )} 63 | 64 | ))} 65 | 66 | 67 | ); 68 | } 69 | -------------------------------------------------------------------------------- /resources/js/components/app-command.tsx: -------------------------------------------------------------------------------- 1 | import { 2 | Command, 3 | CommandDialog, 4 | CommandEmpty, 5 | CommandGroup, 6 | CommandInput, 7 | CommandItem, 8 | CommandList, 9 | CommandSeparator, 10 | } from '@/components/ui/command'; 11 | import { router } from '@inertiajs/react'; 12 | import { BadgeCheck, LayoutDashboard, Lock, Moon, Sun } from 'lucide-react'; 13 | import { useEffect, useState } from 'react'; 14 | import { useTheme } from './theme-provider'; 15 | 16 | interface NavigationItem { 17 | title: string; 18 | href: string; 19 | icon: React.ReactNode; 20 | } 21 | 22 | const navigationItems: NavigationItem[] = [ 23 | { 24 | title: 'Dashboard', 25 | href: '/dashboard', 26 | icon: , 27 | }, 28 | { 29 | title: 'Profile', 30 | href: '/account/profile', 31 | icon: , 32 | }, 33 | { 34 | title: 'Security', 35 | href: '/account/security', 36 | icon: , 37 | }, 38 | ]; 39 | 40 | export function AppCommand() { 41 | const [isOpen, setIsOpen] = useState(false); 42 | 43 | const { setTheme } = useTheme(); 44 | 45 | useEffect(() => { 46 | const down = (e: KeyboardEvent) => { 47 | if (e.key === 'k' && (e.metaKey || e.ctrlKey)) { 48 | e.preventDefault(); 49 | setIsOpen((open) => !open); 50 | } 51 | }; 52 | 53 | document.addEventListener('keydown', down); 54 | return () => document.removeEventListener('keydown', down); 55 | }, []); 56 | 57 | const goToRoute = (href: string) => { 58 | setIsOpen(false); 59 | router.visit(href); 60 | }; 61 | 62 | const setMode = (mode: 'dark' | 'light') => { 63 | setIsOpen(false); 64 | setTheme(mode); 65 | }; 66 | 67 | return ( 68 | 69 | 70 | 71 | 72 | No results found. 73 | 74 | {navigationItems.map((item) => ( 75 | goToRoute(item.href)} 78 | > 79 | {item.icon} 80 | {item.title} 81 | 82 | ))} 83 | 84 | 85 | 86 | setMode('dark')}> 87 | 88 | Dark Mode 89 | 90 | setMode('light')}> 91 | 92 | Light Mode 93 | 94 | 95 | 96 | 97 | 98 | ); 99 | } 100 | -------------------------------------------------------------------------------- /resources/js/components/app-sidebar.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { 4 | Atom, 5 | Book, 6 | BookCheck, 7 | BookHeart, 8 | BookImage, 9 | LayoutDashboard, 10 | } from 'lucide-react'; 11 | import * as React from 'react'; 12 | 13 | import { NavMain } from '@/components/nav-main'; 14 | import { NavSecondary } from '@/components/nav-secondary'; 15 | import { NavUser } from '@/components/nav-user'; 16 | import { ProjectSwitcher } from '@/components/project-switcher'; 17 | import { 18 | Sidebar, 19 | SidebarContent, 20 | SidebarFooter, 21 | SidebarHeader, 22 | } from '@/components/ui/sidebar'; 23 | import { PageProps } from '@/types'; 24 | import { usePage } from '@inertiajs/react'; 25 | 26 | const data = { 27 | projects: [ 28 | { 29 | logo: Atom, 30 | title: 'Starter', 31 | subtitle: 'React - Inertia - Laravel', 32 | }, 33 | ], 34 | navMain: [ 35 | { 36 | title: 'Dashboard', 37 | url: '/dashboard', 38 | icon: LayoutDashboard, 39 | }, 40 | ], 41 | navSecondary: [ 42 | { 43 | title: 'Readme', 44 | url: 'https://github.com/ferjal0/react-inertia-laravel/blob/main/README.md', 45 | icon: Book, 46 | }, 47 | { 48 | title: 'Getting Started', 49 | url: 'https://github.com/ferjal0/react-inertia-laravel/blob/main/docs/getting-started.md', 50 | icon: BookHeart, 51 | }, 52 | { 53 | title: 'Frontend Docs', 54 | url: 'https://github.com/ferjal0/react-inertia-laravel/blob/main/docs/frontend.md', 55 | icon: BookImage, 56 | }, 57 | { 58 | title: 'Backend Docs', 59 | url: 'https://github.com/ferjal0/react-inertia-laravel/blob/main/docs/backend.md', 60 | icon: BookCheck, 61 | }, 62 | ], 63 | }; 64 | 65 | export function AppSidebar({ ...props }: React.ComponentProps) { 66 | const { auth } = usePage().props; 67 | const user = auth.user; 68 | 69 | return ( 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | ); 83 | } 84 | -------------------------------------------------------------------------------- /resources/js/components/confirm-with-password.tsx: -------------------------------------------------------------------------------- 1 | import { Button } from '@/components/ui/button'; 2 | import { 3 | Dialog, 4 | DialogContent, 5 | DialogDescription, 6 | DialogFooter, 7 | DialogHeader, 8 | DialogTitle, 9 | } from '@/components/ui/dialog'; 10 | import ErrorFeedback from '@/components/ui/error-feedback'; 11 | import { Input } from '@/components/ui/input'; 12 | import { VisuallyHidden } from '@radix-ui/react-visually-hidden'; 13 | import axios from 'axios'; 14 | import { useRef, useState } from 'react'; 15 | import { Label } from './ui/label'; 16 | 17 | interface ConfirmWithPasswordProps { 18 | title?: string; 19 | content?: string; 20 | button?: string; 21 | children: React.ReactNode; 22 | onConfirmed: () => void; 23 | } 24 | 25 | export default function ConfirmWithPassword({ 26 | title = 'Confirm action with Password', 27 | content = 'This action is irreversible. Please type your password to confirm.', 28 | button = 'Confirm', 29 | children, 30 | onConfirmed, 31 | }: ConfirmWithPasswordProps) { 32 | const [confirmingPassword, setConfirmingPassword] = useState(false); 33 | const [form, setForm] = useState({ 34 | password: '', 35 | error: '', 36 | processing: false, 37 | }); 38 | 39 | const passwordInput = useRef(null); 40 | 41 | const startConfirmingPassword = () => { 42 | axios.get(route('password.confirmation')).then((response) => { 43 | if (response.data.confirmed) { 44 | onConfirmed(); 45 | } else { 46 | setConfirmingPassword(true); 47 | setTimeout(() => passwordInput.current?.focus(), 250); 48 | } 49 | }); 50 | }; 51 | 52 | const confirmPassword = () => { 53 | setForm((prev) => ({ ...prev, processing: true })); 54 | 55 | axios 56 | .post(route('password.confirm'), { 57 | password: form.password, 58 | }) 59 | .then(() => { 60 | closeModal(); 61 | onConfirmed(); 62 | }) 63 | .catch((error) => { 64 | setForm((prev) => ({ 65 | ...prev, 66 | processing: false, 67 | error: error.response.data.errors.password[0], 68 | })); 69 | passwordInput.current?.focus(); 70 | }); 71 | }; 72 | 73 | const closeModal = () => { 74 | setConfirmingPassword(false); 75 | setForm({ 76 | password: '', 77 | error: '', 78 | processing: false, 79 | }); 80 | }; 81 | 82 | return ( 83 | <> 84 | {children} 85 | 86 | { 89 | if (!open) closeModal(); 90 | }} 91 | > 92 | 93 | 94 | {title} 95 | 96 | {content} 97 | 98 | 99 | 100 |
101 |

102 | {content} 103 |

104 | 105 |
106 | 107 | 113 | setForm((prev) => ({ 114 | ...prev, 115 | password: e.target.value, 116 | })) 117 | } 118 | autoComplete="current-password" 119 | onKeyUp={(e) => { 120 | if (e.key === 'Enter') { 121 | confirmPassword(); 122 | } 123 | }} 124 | /> 125 |
126 | 127 | 128 |
129 | 130 | 131 | 134 | 135 | 142 | 143 | 144 | 145 | 146 | ); 147 | } 148 | -------------------------------------------------------------------------------- /resources/js/components/nav-main.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { ChevronRight, type LucideIcon } from 'lucide-react'; 4 | 5 | import { 6 | Collapsible, 7 | CollapsibleContent, 8 | CollapsibleTrigger, 9 | } from '@/components/ui/collapsible'; 10 | import { 11 | SidebarGroup, 12 | SidebarGroupLabel, 13 | SidebarMenu, 14 | SidebarMenuAction, 15 | SidebarMenuButton, 16 | SidebarMenuItem, 17 | SidebarMenuSub, 18 | SidebarMenuSubButton, 19 | SidebarMenuSubItem, 20 | } from '@/components/ui/sidebar'; 21 | import { Link } from '@inertiajs/react'; 22 | 23 | interface NavMainProps { 24 | items: { 25 | title: string; 26 | url: string; 27 | icon: LucideIcon; 28 | isActive?: boolean; 29 | items?: { 30 | title: string; 31 | url: string; 32 | }[]; 33 | }[]; 34 | } 35 | 36 | export function NavMain({ items }: NavMainProps) { 37 | return ( 38 | 39 | Platform 40 | 41 | {items.map((item) => ( 42 | 47 | 48 | 49 | 50 | 51 | {item.title} 52 | 53 | 54 | {item.items?.length ? ( 55 | <> 56 | 57 | 58 | 59 | 60 | Toggle 61 | 62 | 63 | 64 | 65 | 66 | {item.items?.map((subItem) => ( 67 | 70 | 73 | 76 | 77 | {subItem.title} 78 | 79 | 80 | 81 | 82 | ))} 83 | 84 | 85 | 86 | ) : null} 87 | 88 | 89 | ))} 90 | 91 | 92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /resources/js/components/nav-secondary.tsx: -------------------------------------------------------------------------------- 1 | import { type LucideIcon } from 'lucide-react'; 2 | 3 | import { 4 | SidebarGroup, 5 | SidebarGroupContent, 6 | SidebarMenu, 7 | SidebarMenuButton, 8 | SidebarMenuItem, 9 | } from '@/components/ui/sidebar'; 10 | 11 | interface NavSecondaryProps { 12 | items: { 13 | title: string; 14 | url: string; 15 | icon: LucideIcon; 16 | }[]; 17 | className?: string; 18 | } 19 | 20 | export function NavSecondary({ items, ...props }: NavSecondaryProps) { 21 | return ( 22 | 23 | 24 | 25 | {items.map((item) => ( 26 | 27 | 28 | 29 | 30 | {item.title} 31 | 32 | 33 | 34 | ))} 35 | 36 | 37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /resources/js/components/project-switcher.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import { ChevronsUpDown, Plus } from 'lucide-react'; 4 | import * as React from 'react'; 5 | 6 | import { 7 | DropdownMenu, 8 | DropdownMenuContent, 9 | DropdownMenuItem, 10 | DropdownMenuLabel, 11 | DropdownMenuSeparator, 12 | DropdownMenuShortcut, 13 | DropdownMenuTrigger, 14 | } from '@/components/ui/dropdown-menu'; 15 | import { 16 | SidebarMenu, 17 | SidebarMenuButton, 18 | SidebarMenuItem, 19 | useSidebar, 20 | } from '@/components/ui/sidebar'; 21 | 22 | interface Project { 23 | logo: React.ElementType; 24 | subtitle: string; 25 | title: string; 26 | } 27 | 28 | export function ProjectSwitcher({ projects }: { projects: Project[] }) { 29 | const { isMobile } = useSidebar(); 30 | const [activeProject, setActiveProject] = React.useState(projects[0]); 31 | 32 | return ( 33 | 34 | 35 | 36 | 37 | 41 |
42 | 43 |
44 |
45 | 46 | {activeProject.title} 47 | 48 | 49 | {activeProject.subtitle} 50 | 51 |
52 | 53 | 54 | 55 | 61 | 62 | Projects 63 | 64 | {projects.map((project, index) => ( 65 | setActiveProject(project)} 68 | className="gap-2 p-2" 69 | > 70 |
71 | 72 |
73 | {project.title} 74 | 75 | ⌘{index + 1} 76 | 77 | 78 | ))} 79 | 80 | 81 |
82 | 83 |
84 |
85 | Add project 86 |
87 | 88 | 89 | 90 | 91 | 92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /resources/js/components/theme-provider.tsx: -------------------------------------------------------------------------------- 1 | import { createContext, useContext, useEffect, useState } from 'react'; 2 | 3 | type Theme = 'dark' | 'light' | 'system'; 4 | 5 | type ThemeProviderProps = { 6 | children: React.ReactNode; 7 | defaultTheme?: Theme; 8 | storageKey?: string; 9 | }; 10 | 11 | type ThemeProviderState = { 12 | theme: Theme; 13 | setTheme: (theme: Theme) => void; 14 | }; 15 | 16 | const initialState: ThemeProviderState = { 17 | theme: 'system', 18 | setTheme: () => null, 19 | }; 20 | 21 | const ThemeProviderContext = createContext(initialState); 22 | 23 | export function ThemeProvider({ 24 | children, 25 | defaultTheme = 'system', 26 | storageKey = 'vite-ui-theme', 27 | ...props 28 | }: ThemeProviderProps) { 29 | const [theme, setTheme] = useState( 30 | () => (localStorage.getItem(storageKey) as Theme) || defaultTheme, 31 | ); 32 | 33 | useEffect(() => { 34 | const root = window.document.documentElement; 35 | 36 | root.classList.remove('light', 'dark'); 37 | 38 | if (theme === 'system') { 39 | const systemTheme = window.matchMedia( 40 | '(prefers-color-scheme: dark)', 41 | ).matches 42 | ? 'dark' 43 | : 'light'; 44 | 45 | root.classList.add(systemTheme); 46 | return; 47 | } 48 | 49 | root.classList.add(theme); 50 | }, [theme]); 51 | 52 | const value = { 53 | theme, 54 | setTheme: (theme: Theme) => { 55 | localStorage.setItem(storageKey, theme); 56 | setTheme(theme); 57 | }, 58 | }; 59 | 60 | return ( 61 | 62 | {children} 63 | 64 | ); 65 | } 66 | 67 | export const useTheme = () => { 68 | const context = useContext(ThemeProviderContext); 69 | 70 | if (context === undefined) 71 | throw new Error('useTheme must be used within a ThemeProvider'); 72 | 73 | return context; 74 | }; 75 | -------------------------------------------------------------------------------- /resources/js/components/ui/alert-dialog.tsx: -------------------------------------------------------------------------------- 1 | import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog'; 2 | import * as React from 'react'; 3 | 4 | import { buttonVariants } from '@/components/ui/button'; 5 | import { cn } from '@/lib/utils'; 6 | 7 | function AlertDialog({ 8 | ...props 9 | }: React.ComponentProps) { 10 | return ; 11 | } 12 | 13 | function AlertDialogTrigger({ 14 | ...props 15 | }: React.ComponentProps) { 16 | return ( 17 | 21 | ); 22 | } 23 | 24 | function AlertDialogPortal({ 25 | ...props 26 | }: React.ComponentProps) { 27 | return ( 28 | 32 | ); 33 | } 34 | 35 | function AlertDialogOverlay({ 36 | className, 37 | ...props 38 | }: React.ComponentProps) { 39 | return ( 40 | 48 | ); 49 | } 50 | 51 | function AlertDialogContent({ 52 | className, 53 | ...props 54 | }: React.ComponentProps) { 55 | return ( 56 | 57 | 58 | 66 | 67 | ); 68 | } 69 | 70 | function AlertDialogHeader({ 71 | className, 72 | ...props 73 | }: React.ComponentProps<'div'>) { 74 | return ( 75 |
83 | ); 84 | } 85 | 86 | function AlertDialogFooter({ 87 | className, 88 | ...props 89 | }: React.ComponentProps<'div'>) { 90 | return ( 91 |
99 | ); 100 | } 101 | 102 | function AlertDialogTitle({ 103 | className, 104 | ...props 105 | }: React.ComponentProps) { 106 | return ( 107 | 112 | ); 113 | } 114 | 115 | function AlertDialogDescription({ 116 | className, 117 | ...props 118 | }: React.ComponentProps) { 119 | return ( 120 | 125 | ); 126 | } 127 | 128 | function AlertDialogAction({ 129 | className, 130 | ...props 131 | }: React.ComponentProps) { 132 | return ( 133 | 137 | ); 138 | } 139 | 140 | function AlertDialogCancel({ 141 | className, 142 | ...props 143 | }: React.ComponentProps) { 144 | return ( 145 | 149 | ); 150 | } 151 | 152 | export { 153 | AlertDialog, 154 | AlertDialogAction, 155 | AlertDialogCancel, 156 | AlertDialogContent, 157 | AlertDialogDescription, 158 | AlertDialogFooter, 159 | AlertDialogHeader, 160 | AlertDialogOverlay, 161 | AlertDialogPortal, 162 | AlertDialogTitle, 163 | AlertDialogTrigger, 164 | }; 165 | -------------------------------------------------------------------------------- /resources/js/components/ui/alert.tsx: -------------------------------------------------------------------------------- 1 | import { cva, type VariantProps } from 'class-variance-authority'; 2 | import * as React from 'react'; 3 | 4 | import { cn } from '@/lib/utils'; 5 | 6 | const alertVariants = cva( 7 | 'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current', 8 | { 9 | variants: { 10 | variant: { 11 | default: 'bg-background text-foreground', 12 | destructive: 13 | 'text-destructive-foreground [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/80', 14 | }, 15 | }, 16 | defaultVariants: { 17 | variant: 'default', 18 | }, 19 | }, 20 | ); 21 | 22 | function Alert({ 23 | className, 24 | variant, 25 | ...props 26 | }: React.ComponentProps<'div'> & VariantProps) { 27 | return ( 28 |
34 | ); 35 | } 36 | 37 | function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) { 38 | return ( 39 |
47 | ); 48 | } 49 | 50 | function AlertDescription({ 51 | className, 52 | ...props 53 | }: React.ComponentProps<'div'>) { 54 | return ( 55 |
63 | ); 64 | } 65 | 66 | export { Alert, AlertDescription, AlertTitle }; 67 | -------------------------------------------------------------------------------- /resources/js/components/ui/avatar.tsx: -------------------------------------------------------------------------------- 1 | import * as AvatarPrimitive from '@radix-ui/react-avatar'; 2 | import * as React from 'react'; 3 | 4 | import { cn } from '@/lib/utils'; 5 | 6 | function Avatar({ 7 | className, 8 | ...props 9 | }: React.ComponentProps) { 10 | return ( 11 | 19 | ); 20 | } 21 | 22 | function AvatarImage({ 23 | className, 24 | ...props 25 | }: React.ComponentProps) { 26 | return ( 27 | 32 | ); 33 | } 34 | 35 | function AvatarFallback({ 36 | className, 37 | ...props 38 | }: React.ComponentProps) { 39 | return ( 40 | 48 | ); 49 | } 50 | 51 | export { Avatar, AvatarFallback, AvatarImage }; 52 | -------------------------------------------------------------------------------- /resources/js/components/ui/badge.tsx: -------------------------------------------------------------------------------- 1 | import { Slot } from '@radix-ui/react-slot'; 2 | import { cva, type VariantProps } from 'class-variance-authority'; 3 | import * as React from 'react'; 4 | 5 | import { cn } from '@/lib/utils'; 6 | 7 | const badgeVariants = cva( 8 | 'inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden', 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90', 14 | secondary: 15 | 'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90', 16 | destructive: 17 | 'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40', 18 | outline: 19 | 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground', 20 | }, 21 | }, 22 | defaultVariants: { 23 | variant: 'default', 24 | }, 25 | }, 26 | ); 27 | 28 | function Badge({ 29 | className, 30 | variant, 31 | asChild = false, 32 | ...props 33 | }: React.ComponentProps<'span'> & 34 | VariantProps & { asChild?: boolean }) { 35 | const Comp = asChild ? Slot : 'span'; 36 | 37 | return ( 38 | 43 | ); 44 | } 45 | 46 | export { Badge, badgeVariants }; 47 | -------------------------------------------------------------------------------- /resources/js/components/ui/breadcrumb.tsx: -------------------------------------------------------------------------------- 1 | import { Slot } from '@radix-ui/react-slot'; 2 | import { ChevronRight, MoreHorizontal } from 'lucide-react'; 3 | import * as React from 'react'; 4 | 5 | import { cn } from '@/lib/utils'; 6 | 7 | function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) { 8 | return