├── database ├── .gitignore ├── seeders │ └── DatabaseSeeder.php ├── migrations │ ├── 0001_01_01_000001_create_cache_table.php │ ├── 2025_01_25_140923_create_personal_access_tokens_table.php │ ├── 2025_01_29_181350_add_two_factor_columns_to_users_table.php │ ├── 0001_01_01_000000_create_users_table.php │ └── 0001_01_01_000002_create_jobs_table.php └── factories │ └── UserFactory.php ├── storage ├── logs │ └── .gitignore ├── app │ ├── private │ │ └── .gitignore │ ├── public │ │ └── .gitignore │ └── .gitignore └── framework │ ├── testing │ └── .gitignore │ ├── views │ └── .gitignore │ ├── cache │ ├── data │ │ └── .gitignore │ └── .gitignore │ ├── sessions │ └── .gitignore │ └── .gitignore ├── public ├── robots.txt ├── favicon.png ├── index.php └── .htaccess ├── resources ├── js │ ├── types │ │ ├── vite-env.d.ts │ │ ├── global.d.ts │ │ └── index.d.ts │ ├── bootstrap.ts │ ├── lib │ │ └── utils.ts │ ├── components │ │ ├── ui │ │ │ ├── skeleton.tsx │ │ │ ├── error-feedback.tsx │ │ │ ├── label.tsx │ │ │ ├── separator.tsx │ │ │ ├── collapsible.tsx │ │ │ ├── sonner.tsx │ │ │ ├── input.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── alert.tsx │ │ │ ├── tooltip.tsx │ │ │ ├── ripple.tsx │ │ │ ├── button.tsx │ │ │ ├── input-otp.tsx │ │ │ ├── breadcrumb.tsx │ │ │ ├── dialog.tsx │ │ │ ├── sheet.tsx │ │ │ └── alert-dialog.tsx │ │ ├── nav-secondary.tsx │ │ ├── theme-provider.tsx │ │ ├── app-breadcrumb.tsx │ │ ├── app-sidebar.tsx │ │ ├── app-command.tsx │ │ ├── nav-main.tsx │ │ ├── project-switcher.tsx │ │ └── confirm-with-password.tsx │ ├── hooks │ │ ├── use-mobile.ts │ │ └── use-mobile.tsx │ ├── app.tsx │ ├── Pages │ │ ├── Security │ │ │ └── Show.tsx │ │ ├── Dashboard.tsx │ │ ├── Profile │ │ │ ├── Show.tsx │ │ │ └── Partials │ │ │ │ └── UpdatePasswordForm.tsx │ │ ├── Auth │ │ │ ├── ForgotPasswordSent.tsx │ │ │ ├── TwoFactorChallenge.tsx │ │ │ ├── VerifyEmail.tsx │ │ │ ├── ForgotPassword.tsx │ │ │ ├── Login.tsx │ │ │ └── PasswordReset.tsx │ │ └── Welcome.tsx │ ├── layouts │ │ ├── AuthenticationLayout.tsx │ │ └── AuthenticatedLayout.tsx │ └── ssr.tsx └── views │ └── app.blade.php ├── postcss.config.js ├── tests ├── Unit │ └── ExampleTest.php ├── Feature │ ├── ExampleTest.php │ ├── Auth │ │ ├── RegistrationTest.php │ │ ├── PasswordConfirmationTest.php │ │ ├── AuthenticationTest.php │ │ ├── EmailVerificationTest.php │ │ ├── PasswordResetTest.php │ │ └── PasswordUpdateTest.php │ └── ProfileTest.php ├── TestCase.php └── Pest.php ├── app ├── Http │ ├── Controllers │ │ ├── Controller.php │ │ ├── Auth │ │ │ └── ConfirmablePasswordController.php │ │ └── Account │ │ │ ├── SecurityController.php │ │ │ ├── SessionController.php │ │ │ └── ProfileController.php │ ├── Requests │ │ ├── ProfileUpdateRequest.php │ │ └── Auth │ │ │ └── LoginRequest.php │ └── Middleware │ │ └── HandleInertiaRequests.php ├── Actions │ └── Fortify │ │ ├── PasswordValidationRules.php │ │ ├── ResetUserPassword.php │ │ ├── UpdateUserPassword.php │ │ ├── CreateNewUser.php │ │ └── UpdateUserProfileInformation.php ├── Providers │ ├── AppServiceProvider.php │ └── FortifyServiceProvider.php └── Models │ ├── Session.php │ └── User.php ├── bootstrap ├── providers.php ├── app.php └── cache │ └── packages.php ├── .prettierrc ├── .gitattributes ├── .editorconfig ├── .env.testing ├── artisan ├── .gitignore ├── vite.config.js ├── components.json ├── tsconfig.json ├── .prettierignore ├── config ├── services.php ├── filesystems.php ├── cache.php ├── mail.php ├── queue.php ├── auth.php ├── app.php └── logging.php ├── routes ├── web.php └── auth.php ├── phpunit.xml ├── .env.example ├── docs └── getting-started.md ├── eslint.config.js ├── package.json ├── composer.json └── README.md /database/.gitignore: -------------------------------------------------------------------------------- 1 | *.sqlite* 2 | -------------------------------------------------------------------------------- /storage/logs/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: * 2 | Disallow: 3 | -------------------------------------------------------------------------------- /storage/app/private/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/app/public/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/testing/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/views/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/cache/data/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/sessions/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /storage/framework/cache/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !data/ 3 | !.gitignore 4 | -------------------------------------------------------------------------------- /storage/app/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !private/ 3 | !public/ 4 | !.gitignore 5 | -------------------------------------------------------------------------------- /resources/js/types/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ferjal0/react-inertia-laravel/HEAD/public/favicon.png -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | '@tailwindcss/postcss': {}, 4 | }, 5 | }; 6 | -------------------------------------------------------------------------------- /tests/Unit/ExampleTest.php: -------------------------------------------------------------------------------- 1 | toBeTrue(); 5 | }); 6 | -------------------------------------------------------------------------------- /app/Http/Controllers/Controller.php: -------------------------------------------------------------------------------- 1 | get('/'); 5 | 6 | $response->assertStatus(200); 7 | }); 8 | -------------------------------------------------------------------------------- /storage/framework/.gitignore: -------------------------------------------------------------------------------- 1 | compiled.php 2 | config.php 3 | down 4 | events.scanned.php 5 | maintenance.php 6 | routes.php 7 | routes.scanned.php 8 | schedule-* 9 | services.json 10 | -------------------------------------------------------------------------------- /tests/TestCase.php: -------------------------------------------------------------------------------- 1 | ) { 4 | return ( 5 |
10 | ); 11 | } 12 | 13 | export { Skeleton }; 14 | -------------------------------------------------------------------------------- /artisan: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env php 2 | handleCommand(new ArgvInput); 14 | 15 | exit($status); 16 | -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /resources/js/components/ui/error-feedback.tsx: -------------------------------------------------------------------------------- 1 | import { HTMLAttributes } from 'react'; 2 | 3 | export default function ErrorFeedback({ 4 | message, 5 | className = '', 6 | ...props 7 | }: HTMLAttributes & { message?: string }) { 8 | return message ? ( 9 |

10 | {message} 11 |

12 | ) : null; 13 | } 14 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import react from '@vitejs/plugin-react'; 2 | import laravel from 'laravel-vite-plugin'; 3 | import { defineConfig } from 'vite'; 4 | 5 | export default defineConfig({ 6 | plugins: [ 7 | laravel({ 8 | input: 'resources/js/app.tsx', 9 | ssr: 'resources/js/ssr.tsx', 10 | refresh: true, 11 | }), 12 | react(), 13 | ], 14 | alias: { 15 | '@/*': './resources/js/*', 16 | }, 17 | }); 18 | -------------------------------------------------------------------------------- /resources/js/types/global.d.ts: -------------------------------------------------------------------------------- 1 | import { PageProps as InertiaPageProps } from '@inertiajs/core'; 2 | import { AxiosInstance } from 'axios'; 3 | import { route as ziggyRoute } from 'ziggy-js'; 4 | import { PageProps as AppPageProps } from './'; 5 | 6 | declare global { 7 | interface Window { 8 | axios: AxiosInstance; 9 | } 10 | 11 | var route: typeof ziggyRoute; 12 | } 13 | 14 | declare module '@inertiajs/core' { 15 | interface PageProps extends InertiaPageProps, AppPageProps {} 16 | } 17 | -------------------------------------------------------------------------------- /resources/js/types/index.d.ts: -------------------------------------------------------------------------------- 1 | import { Config } from 'ziggy-js'; 2 | 3 | export interface User { 4 | id: number; 5 | name: string; 6 | email: string; 7 | email_verified_at?: string; 8 | profile_photo_url: string | undefined; 9 | two_factor_confirmed_at: string | null; 10 | } 11 | 12 | export type PageProps< 13 | T extends Record = Record, 14 | > = T & { 15 | auth: { 16 | user: User; 17 | }; 18 | ziggy: Config & { location: string }; 19 | }; 20 | -------------------------------------------------------------------------------- /app/Actions/Fortify/PasswordValidationRules.php: -------------------------------------------------------------------------------- 1 | |string> 13 | */ 14 | protected function passwordRules(): array 15 | { 16 | return ['required', 'string', Password::default(), 'confirmed']; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /public/index.php: -------------------------------------------------------------------------------- 1 | handleRequest(Request::capture()); 18 | -------------------------------------------------------------------------------- /app/Providers/AppServiceProvider.php: -------------------------------------------------------------------------------- 1 | get('/register'); 5 | 6 | $response->assertStatus(200); 7 | }); 8 | 9 | test('new users can register', function () { 10 | $response = $this->post('/register', [ 11 | 'name' => 'Test User', 12 | 'email' => 'test@example.com', 13 | 'password' => 'password', 14 | 'password_confirmation' => 'password', 15 | ]); 16 | 17 | $this->assertAuthenticated(); 18 | $response->assertRedirect(route('dashboard', absolute: false)); 19 | }); 20 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tests/Feature/Auth/PasswordConfirmationTest.php: -------------------------------------------------------------------------------- 1 | create(); 7 | 8 | $response = $this->actingAs($user)->post('/confirm-password', [ 9 | 'password' => 'password', 10 | ]); 11 | 12 | $response->assertRedirect(); 13 | $response->assertSessionHasNoErrors(); 14 | }); 15 | 16 | test('password is not confirmed with invalid password', function () { 17 | $user = User::factory()->create(); 18 | 19 | $response = $this->actingAs($user)->post('/confirm-password', [ 20 | 'password' => 'wrong-password', 21 | ]); 22 | 23 | $response->assertSessionHasErrors(); 24 | }); 25 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowJs": true, 4 | "module": "ESNext", 5 | "moduleResolution": "bundler", 6 | "jsx": "react-jsx", 7 | "strict": true, 8 | "isolatedModules": true, 9 | "target": "ESNext", 10 | "esModuleInterop": true, 11 | "forceConsistentCasingInFileNames": true, 12 | "skipLibCheck": true, 13 | "noEmit": true, 14 | "baseUrl": ".", 15 | "paths": { 16 | "@/*": ["./resources/js/*"], 17 | "ziggy-js": ["./vendor/tightenco/ziggy"] 18 | } 19 | }, 20 | "include": [ 21 | "resources/js/**/*.ts", 22 | "resources/js/**/*.tsx", 23 | "resources/js/**/*.d.ts" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /resources/js/hooks/use-mobile.ts: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | const MOBILE_BREAKPOINT = 768; 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState( 7 | undefined, 8 | ); 9 | 10 | React.useEffect(() => { 11 | const mql = window.matchMedia( 12 | `(max-width: ${MOBILE_BREAKPOINT - 1}px)`, 13 | ); 14 | const onChange = () => { 15 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); 16 | }; 17 | mql.addEventListener('change', onChange); 18 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); 19 | return () => mql.removeEventListener('change', onChange); 20 | }, []); 21 | 22 | return !!isMobile; 23 | } 24 | -------------------------------------------------------------------------------- /resources/js/hooks/use-mobile.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | const MOBILE_BREAKPOINT = 768; 4 | 5 | export function useIsMobile() { 6 | const [isMobile, setIsMobile] = React.useState( 7 | undefined, 8 | ); 9 | 10 | React.useEffect(() => { 11 | const mql = window.matchMedia( 12 | `(max-width: ${MOBILE_BREAKPOINT - 1}px)`, 13 | ); 14 | const onChange = () => { 15 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); 16 | }; 17 | mql.addEventListener('change', onChange); 18 | setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); 19 | return () => mql.removeEventListener('change', onChange); 20 | }, []); 21 | 22 | return !!isMobile; 23 | } 24 | -------------------------------------------------------------------------------- /resources/js/components/ui/label.tsx: -------------------------------------------------------------------------------- 1 | import * as LabelPrimitive from '@radix-ui/react-label'; 2 | import * as React from 'react'; 3 | 4 | import { cn } from '@/lib/utils'; 5 | 6 | function Label({ 7 | className, 8 | ...props 9 | }: React.ComponentProps) { 10 | return ( 11 | 19 | ); 20 | } 21 | 22 | export { Label }; 23 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /resources/views/app.blade.php: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | {{ config('app.name', 'React Inertia Laravel') }} 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | @routes 19 | @viteReactRefresh 20 | @vite(['resources/js/app.tsx', "resources/js/Pages/{$page['component']}.tsx"]) 21 | @inertiaHead 22 | 23 | 24 | 25 | @inertia 26 | 27 | 28 | -------------------------------------------------------------------------------- /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/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/components/ui/separator.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as SeparatorPrimitive from '@radix-ui/react-separator'; 4 | import * as React from 'react'; 5 | 6 | import { cn } from '@/lib/utils'; 7 | 8 | function Separator({ 9 | className, 10 | orientation = 'horizontal', 11 | decorative = true, 12 | ...props 13 | }: React.ComponentProps) { 14 | return ( 15 | 25 | ); 26 | } 27 | 28 | export { Separator }; 29 | -------------------------------------------------------------------------------- /.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 -------------------------------------------------------------------------------- /resources/js/components/ui/collapsible.tsx: -------------------------------------------------------------------------------- 1 | import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'; 2 | 3 | function Collapsible({ 4 | ...props 5 | }: React.ComponentProps) { 6 | return ; 7 | } 8 | 9 | function CollapsibleTrigger({ 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 17 | ); 18 | } 19 | 20 | function CollapsibleContent({ 21 | ...props 22 | }: React.ComponentProps) { 23 | return ( 24 | 28 | ); 29 | } 30 | 31 | export { Collapsible, CollapsibleContent, CollapsibleTrigger }; 32 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /resources/js/components/ui/sonner.tsx: -------------------------------------------------------------------------------- 1 | import { useTheme } from 'next-themes'; 2 | import { Toaster as Sonner, ToasterProps } from 'sonner'; 3 | 4 | const Toaster = ({ ...props }: ToasterProps) => { 5 | const { theme = 'system' } = useTheme(); 6 | 7 | return ( 8 | 23 | ); 24 | }; 25 | 26 | export { Toaster }; 27 | -------------------------------------------------------------------------------- /resources/js/components/ui/input.tsx: -------------------------------------------------------------------------------- 1 | import * as React from 'react'; 2 | 3 | import { cn } from '@/lib/utils'; 4 | 5 | function Input({ className, type, ...props }: React.ComponentProps<'input'>) { 6 | return ( 7 | 18 | ); 19 | } 20 | 21 | export { Input }; 22 | -------------------------------------------------------------------------------- /tests/Feature/Auth/AuthenticationTest.php: -------------------------------------------------------------------------------- 1 | get('/login'); 7 | 8 | $response->assertStatus(200); 9 | }); 10 | 11 | test('users can authenticate using the login screen', function () { 12 | $user = User::factory()->create(); 13 | 14 | $response = $this->post('/login', [ 15 | 'email' => $user->email, 16 | 'password' => 'password', 17 | ]); 18 | 19 | $this->assertAuthenticated(); 20 | $response->assertRedirect(route('dashboard', absolute: false)); 21 | }); 22 | 23 | test('users can not authenticate with invalid password', function () { 24 | $user = User::factory()->create(); 25 | 26 | $this->post('/login', [ 27 | 'email' => $user->email, 28 | 'password' => 'wrong-password', 29 | ]); 30 | 31 | $this->assertGuest(); 32 | }); 33 | 34 | test('users can logout', function () { 35 | $user = User::factory()->create(); 36 | 37 | $response = $this->actingAs($user)->post('/logout'); 38 | 39 | $this->assertGuest(); 40 | $response->assertRedirect('/'); 41 | }); 42 | -------------------------------------------------------------------------------- /app/Http/Middleware/HandleInertiaRequests.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /resources/js/layouts/AuthenticationLayout.tsx: -------------------------------------------------------------------------------- 1 | import { Link } from '@inertiajs/react'; 2 | import { Command } from 'lucide-react'; 3 | 4 | export default function AuthenticationLayout({ 5 | children, 6 | }: { 7 | children: React.ReactNode; 8 | }) { 9 | return ( 10 |
11 |
12 |
13 | 17 |
18 | 19 |
20 | React Inertia Laravel 21 | 22 |
23 |
24 |
{children}
25 |
26 |
27 |
28 | ); 29 | } 30 | -------------------------------------------------------------------------------- /routes/web.php: -------------------------------------------------------------------------------- 1 | Route::has('login'), 12 | 'canRegister' => Route::has('register'), 13 | 'laravelVersion' => Application::VERSION, 14 | 'phpVersion' => PHP_VERSION, 15 | ]); 16 | }); 17 | 18 | Route::middleware('auth', 'verified')->group(function () { 19 | // Dashboard 20 | Route::get('/dashboard', function () { 21 | return Inertia::render('Dashboard'); 22 | })->name('dashboard'); 23 | 24 | // Profile 25 | Route::get('/account/profile', [ProfileController::class, 'show'])->name('profile.show'); 26 | Route::patch('/account/profile', [ProfileController::class, 'update'])->name('profile.update'); 27 | Route::delete('/account/profile', [ProfileController::class, 'destroy'])->name('profile.destroy'); 28 | 29 | // Security 30 | Route::get('/account/security', [SecurityController::class, 'show'])->name('security.show'); 31 | }); 32 | 33 | require __DIR__.'/auth.php'; 34 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /resources/js/ssr.tsx: -------------------------------------------------------------------------------- 1 | import { createInertiaApp } from '@inertiajs/react'; 2 | import createServer from '@inertiajs/react/server'; 3 | import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers'; 4 | import ReactDOMServer from 'react-dom/server'; 5 | import { RouteName } from 'ziggy-js'; 6 | import { route } from '../../vendor/tightenco/ziggy'; 7 | 8 | const appName = import.meta.env.VITE_APP_NAME || 'Laravel'; 9 | 10 | createServer((page) => 11 | createInertiaApp({ 12 | page, 13 | render: ReactDOMServer.renderToString, 14 | title: (title) => `${title} - ${appName}`, 15 | resolve: (name) => 16 | resolvePageComponent( 17 | `./pages/${name}.tsx`, 18 | import.meta.glob('./pages/**/*.tsx'), 19 | ), 20 | setup: ({ App, props }) => { 21 | /* eslint-disable */ 22 | // @ts-expect-error 23 | global.route = (name, params, absolute) => 24 | route(name, params as any, absolute, { 25 | ...page.props.ziggy, 26 | location: new URL(page.props.ziggy.location), 27 | }); 28 | /* eslint-enable */ 29 | 30 | return ; 31 | }, 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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tests/Feature/Auth/EmailVerificationTest.php: -------------------------------------------------------------------------------- 1 | unverified()->create(); 10 | 11 | $response = $this->actingAs($user)->get('/verify-email'); 12 | 13 | $response->assertStatus(200); 14 | }); 15 | 16 | test('email can be verified', function () { 17 | $user = User::factory()->unverified()->create(); 18 | 19 | Event::fake(); 20 | 21 | $verificationUrl = URL::temporarySignedRoute( 22 | 'verification.verify', 23 | now()->addMinutes(60), 24 | ['id' => $user->id, 'hash' => sha1($user->email)] 25 | ); 26 | 27 | $response = $this->actingAs($user)->get($verificationUrl); 28 | 29 | Event::assertDispatched(Verified::class); 30 | expect($user->fresh()->hasVerifiedEmail())->toBeTrue(); 31 | $response->assertRedirect(route('dashboard', absolute: false).'?verified=1'); 32 | }); 33 | 34 | test('email is not verified with invalid hash', function () { 35 | $user = User::factory()->unverified()->create(); 36 | 37 | $verificationUrl = URL::temporarySignedRoute( 38 | 'verification.verify', 39 | now()->addMinutes(60), 40 | ['id' => $user->id, 'hash' => sha1('wrong-email')] 41 | ); 42 | 43 | $this->actingAs($user)->get($verificationUrl); 44 | 45 | expect($user->fresh()->hasVerifiedEmail())->toBeFalse(); 46 | }); 47 | -------------------------------------------------------------------------------- /app/Providers/FortifyServiceProvider.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 | -------------------------------------------------------------------------------- /tests/Pest.php: -------------------------------------------------------------------------------- 1 | extend(Tests\TestCase::class) 15 | ->use(Illuminate\Foundation\Testing\RefreshDatabase::class) 16 | ->in('Feature'); 17 | 18 | /* 19 | |-------------------------------------------------------------------------- 20 | | Expectations 21 | |-------------------------------------------------------------------------- 22 | | 23 | | When you're writing tests, you often need to check that values meet certain conditions. The 24 | | "expect()" function gives you access to a set of "expectations" methods that you can use 25 | | to assert different things. Of course, you may extend the Expectation API at any time. 26 | | 27 | */ 28 | 29 | expect()->extend('toBeOne', function () { 30 | return $this->toBe(1); 31 | }); 32 | 33 | /* 34 | |-------------------------------------------------------------------------- 35 | | Functions 36 | |-------------------------------------------------------------------------- 37 | | 38 | | While Pest is very powerful out-of-the-box, you may have some testing code specific to your 39 | | project that you don't want to repeat in every file. Here you can also expose helpers as 40 | | global functions to help you to reduce the number of lines of code in your test files. 41 | | 42 | */ 43 | 44 | function something() 45 | { 46 | // .. 47 | } 48 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /routes/auth.php: -------------------------------------------------------------------------------- 1 | group(function () { 9 | Route::get('/register', function () { 10 | return Inertia::render('Auth/Register', [ 11 | 'isRegisterEnabled' => Features::enabled(Features::registration()), 12 | ]); 13 | })->name('register'); 14 | 15 | Route::get('/login', function () { 16 | return Inertia::render('Auth/Login', [ 17 | 'isRegisterEnabled' => Features::enabled(Features::registration()), 18 | ]); 19 | })->name('login'); 20 | 21 | Route::get('/login/challenge', function () { 22 | return Inertia::render('Auth/TwoFactorChallenge'); 23 | })->name('two-factor.login'); 24 | 25 | Route::get('/forgot-password', function () { 26 | return Inertia::render('Auth/ForgotPassword'); 27 | })->name('auth.forgot-password'); 28 | 29 | Route::get('/reset-password/{token}', function (string $token) { 30 | return Inertia::render('Auth/PasswordReset', [ 31 | 'token' => $token, 32 | 'email' => request('email'), 33 | ]); 34 | })->name('password.reset'); 35 | 36 | Route::get('/forgot-password/sent', function () { 37 | return Inertia::render('Auth/ForgotPasswordSent'); 38 | })->name('forgot-password.sent'); 39 | }); 40 | 41 | Route::middleware('auth')->group(function () { 42 | Route::post('/confirm-password', [ConfirmablePasswordController::class, 'store'])->name('password.confirm'); 43 | 44 | Route::get('/verify-email', function () { 45 | return Inertia::render('Auth/VerifyEmail'); 46 | })->name('verification.notice'); 47 | }); 48 | -------------------------------------------------------------------------------- /resources/js/layouts/AuthenticatedLayout.tsx: -------------------------------------------------------------------------------- 1 | import { AppBreadcrumb } from '@/components/app-breadcrumb'; 2 | import { AppCommand } from '@/components/app-command'; 3 | import { AppSidebar } from '@/components/app-sidebar'; 4 | import { ThemeProvider } from '@/components/theme-provider'; 5 | import { Separator } from '@/components/ui/separator'; 6 | import { 7 | SidebarInset, 8 | SidebarProvider, 9 | SidebarTrigger, 10 | } from '@/components/ui/sidebar'; 11 | import { Toaster } from '@/components/ui/sonner'; 12 | 13 | export default function AuthenticatedLayout({ 14 | children, 15 | }: { 16 | children: React.ReactNode; 17 | }) { 18 | return ( 19 | 20 | 21 | 22 | 23 |
24 |
25 | 26 | 30 | 31 |
32 |
33 |
34 | {children} 35 |
36 | 37 | 38 | 39 | 40 | 41 | ); 42 | } 43 | -------------------------------------------------------------------------------- /tests/Feature/Auth/PasswordResetTest.php: -------------------------------------------------------------------------------- 1 | get('/forgot-password'); 9 | 10 | $response->assertStatus(200); 11 | }); 12 | 13 | test('reset password link can be requested', function () { 14 | Notification::fake(); 15 | 16 | $user = User::factory()->create(); 17 | 18 | $this->post('/forgot-password', ['email' => $user->email]); 19 | 20 | Notification::assertSentTo($user, ResetPassword::class); 21 | }); 22 | 23 | test('reset password screen can be rendered', function () { 24 | Notification::fake(); 25 | 26 | $user = User::factory()->create(); 27 | 28 | $this->post('/forgot-password', ['email' => $user->email]); 29 | 30 | Notification::assertSentTo($user, ResetPassword::class, function ($notification) { 31 | $response = $this->get('/reset-password/'.$notification->token); 32 | 33 | $response->assertStatus(200); 34 | 35 | return true; 36 | }); 37 | }); 38 | 39 | test('password can be reset with valid token', function () { 40 | Notification::fake(); 41 | 42 | $user = User::factory()->create(); 43 | 44 | $this->post('/forgot-password', ['email' => $user->email]); 45 | 46 | Notification::assertSentTo($user, ResetPassword::class, function ($notification) use ($user) { 47 | $response = $this->post('/reset-password', [ 48 | 'token' => $notification->token, 49 | 'email' => $user->email, 50 | 'password' => 'password', 51 | 'password_confirmation' => 'password', 52 | ]); 53 | 54 | $response 55 | ->assertSessionHasNoErrors() 56 | ->assertRedirect(route('dashboard')); 57 | 58 | return true; 59 | }); 60 | }); 61 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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.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/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/components/ui/tooltip.tsx: -------------------------------------------------------------------------------- 1 | 'use client'; 2 | 3 | import * as TooltipPrimitive from '@radix-ui/react-tooltip'; 4 | import * as React from 'react'; 5 | 6 | import { cn } from '@/lib/utils'; 7 | 8 | function TooltipProvider({ 9 | delayDuration = 0, 10 | ...props 11 | }: React.ComponentProps) { 12 | return ( 13 | 18 | ); 19 | } 20 | 21 | function Tooltip({ 22 | ...props 23 | }: React.ComponentProps) { 24 | return ( 25 | 26 | 27 | 28 | ); 29 | } 30 | 31 | function TooltipTrigger({ 32 | ...props 33 | }: React.ComponentProps) { 34 | return ; 35 | } 36 | 37 | function TooltipContent({ 38 | className, 39 | sideOffset = 0, 40 | children, 41 | ...props 42 | }: React.ComponentProps) { 43 | return ( 44 | 45 | 54 | {children} 55 | 56 | 57 | 58 | ); 59 | } 60 | 61 | export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger }; 62 | -------------------------------------------------------------------------------- /resources/js/components/ui/ripple.tsx: -------------------------------------------------------------------------------- 1 | import React, { ComponentPropsWithoutRef, CSSProperties } from 'react'; 2 | 3 | import { cn } from '@/lib/utils'; 4 | 5 | interface RippleProps extends ComponentPropsWithoutRef<'div'> { 6 | mainCircleSize?: number; 7 | mainCircleOpacity?: number; 8 | numCircles?: number; 9 | } 10 | 11 | export const Ripple = React.memo(function Ripple({ 12 | mainCircleSize = 210, 13 | mainCircleOpacity = 0.24, 14 | numCircles = 8, 15 | className, 16 | ...props 17 | }: RippleProps) { 18 | return ( 19 |
26 | {Array.from({ length: numCircles }, (_, i) => { 27 | const size = mainCircleSize + i * 70; 28 | const opacity = mainCircleOpacity - i * 0.03; 29 | const animationDelay = `${i * 0.06}s`; 30 | const borderStyle = i === numCircles - 1 ? 'dashed' : 'solid'; 31 | const borderOpacity = 5 + i * 5; 32 | 33 | return ( 34 |
52 | ); 53 | })} 54 |
55 | ); 56 | }); 57 | 58 | Ripple.displayName = 'Ripple'; 59 | -------------------------------------------------------------------------------- /tests/Feature/Auth/PasswordUpdateTest.php: -------------------------------------------------------------------------------- 1 | create(); 8 | 9 | $response = $this 10 | ->actingAs($user) 11 | ->from('/account/profile') 12 | ->put('/user/password', [ 13 | 'current_password' => 'password', 14 | 'password' => 'new-password', 15 | 'password_confirmation' => 'new-password', 16 | ]); 17 | 18 | $response 19 | ->assertSessionHasNoErrors() 20 | ->assertRedirect(); 21 | 22 | $this->assertTrue(Hash::check('new-password', $user->refresh()->password)); 23 | }); 24 | 25 | test('user cannot update password with incorrect current password', function () { 26 | $user = User::factory()->create(); 27 | 28 | $response = $this 29 | ->actingAs($user) 30 | ->from('/account/profile') 31 | ->put('/user/password', [ 32 | 'current_password' => 'wrong-password', 33 | 'password' => 'new-password', 34 | 'password_confirmation' => 'new-password', 35 | ]); 36 | 37 | $response 38 | ->assertSessionHasErrors() 39 | ->assertRedirect(); 40 | }); 41 | 42 | test('new password must be confirmed', function () { 43 | $user = User::factory()->create(); 44 | 45 | $response = $this 46 | ->actingAs($user) 47 | ->from('/account/profile') 48 | ->put('/user/password', [ 49 | 'current_password' => 'password', 50 | 'password' => 'new-password', 51 | 'password_confirmation' => 'different-password', 52 | ]); 53 | 54 | $response 55 | ->assertSessionHasErrors() 56 | ->assertRedirect(); 57 | }); 58 | 59 | test('new password must be at least 8 characters', function () { 60 | $user = User::factory()->create(); 61 | 62 | $response = $this 63 | ->actingAs($user) 64 | ->from('/account/profile') 65 | ->put('/user/password', [ 66 | 'current_password' => 'password', 67 | 'password' => 'short', 68 | 'password_confirmation' => 'short', 69 | ]); 70 | 71 | $response 72 | ->assertSessionHasErrors() 73 | ->assertRedirect(); 74 | }); 75 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /resources/js/components/ui/button.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 buttonVariants = cva( 8 | "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-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", 9 | { 10 | variants: { 11 | variant: { 12 | default: 13 | 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90', 14 | destructive: 15 | 'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40', 16 | outline: 17 | 'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground', 18 | secondary: 19 | 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80', 20 | ghost: 'hover:bg-accent hover:text-accent-foreground', 21 | link: 'text-primary underline-offset-4 hover:underline', 22 | }, 23 | size: { 24 | default: 'h-9 px-4 py-2 has-[>svg]:px-3', 25 | sm: 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5', 26 | lg: 'h-10 rounded-md px-6 has-[>svg]:px-4', 27 | icon: 'size-9', 28 | }, 29 | }, 30 | defaultVariants: { 31 | variant: 'default', 32 | size: 'default', 33 | }, 34 | }, 35 | ); 36 | 37 | function Button({ 38 | className, 39 | variant, 40 | size, 41 | asChild = false, 42 | ...props 43 | }: React.ComponentProps<'button'> & 44 | VariantProps & { 45 | asChild?: boolean; 46 | }) { 47 | const Comp = asChild ? Slot : 'button'; 48 | 49 | return ( 50 | 55 | ); 56 | } 57 | 58 | export { Button, buttonVariants }; 59 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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 | ); -------------------------------------------------------------------------------- /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/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 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /tests/Feature/ProfileTest.php: -------------------------------------------------------------------------------- 1 | create(); 7 | 8 | $response = $this 9 | ->actingAs($user) 10 | ->get('/account/profile'); 11 | 12 | $response->assertOk(); 13 | }); 14 | 15 | test('profile information can be updated', function () { 16 | $user = User::factory()->create(); 17 | 18 | $response = $this 19 | ->actingAs($user) 20 | ->patch('/account/profile', [ 21 | 'name' => 'Test User', 22 | 'email' => 'test@example.com', 23 | ]); 24 | 25 | $response 26 | ->assertSessionHasNoErrors() 27 | ->assertRedirect('/account/profile'); 28 | 29 | $user->refresh(); 30 | 31 | $this->assertSame('Test User', $user->name); 32 | $this->assertSame('test@example.com', $user->email); 33 | $this->assertNull($user->email_verified_at); 34 | }); 35 | 36 | test('email verification status is unchanged when the email address is unchanged', function () { 37 | $user = User::factory()->create(); 38 | 39 | $response = $this 40 | ->actingAs($user) 41 | ->patch('/account/profile', [ 42 | 'name' => 'Test User', 43 | 'email' => $user->email, 44 | ]); 45 | 46 | $response 47 | ->assertSessionHasNoErrors() 48 | ->assertRedirect('/account/profile'); 49 | 50 | $this->assertNotNull($user->refresh()->email_verified_at); 51 | }); 52 | 53 | test('user can delete their account', function () { 54 | $user = User::factory()->create(); 55 | 56 | $response = $this 57 | ->actingAs($user) 58 | ->delete('/account/profile', [ 59 | 'password' => 'password', 60 | ]); 61 | 62 | $response 63 | ->assertSessionHasNoErrors() 64 | ->assertRedirect('/'); 65 | 66 | $this->assertGuest(); 67 | $this->assertNull($user->fresh()); 68 | }); 69 | 70 | test('correct password must be provided to delete account', function () { 71 | $user = User::factory()->create(); 72 | 73 | $response = $this 74 | ->actingAs($user) 75 | ->from('/account/profile') 76 | ->delete('/account/profile', [ 77 | 'password' => 'wrong-password', 78 | ]); 79 | 80 | $response 81 | ->assertSessionHasErrors('password') 82 | ->assertRedirect('/account/profile'); 83 | 84 | $this->assertNotNull($user->fresh()); 85 | }); 86 | 87 | test('security page is displayed', function () { 88 | $user = User::factory()->create(); 89 | 90 | $response = $this 91 | ->actingAs($user) 92 | ->get('/account/security'); 93 | 94 | $response->assertOk(); 95 | }); 96 | -------------------------------------------------------------------------------- /resources/js/components/ui/input-otp.tsx: -------------------------------------------------------------------------------- 1 | import { OTPInput, OTPInputContext } from 'input-otp'; 2 | import { MinusIcon } from 'lucide-react'; 3 | import * as React from 'react'; 4 | 5 | import { cn } from '@/lib/utils'; 6 | 7 | function InputOTP({ 8 | className, 9 | containerClassName, 10 | ...props 11 | }: React.ComponentProps & { 12 | containerClassName?: string; 13 | }) { 14 | return ( 15 | 24 | ); 25 | } 26 | 27 | function InputOTPGroup({ className, ...props }: React.ComponentProps<'div'>) { 28 | return ( 29 |
34 | ); 35 | } 36 | 37 | function InputOTPSlot({ 38 | index, 39 | className, 40 | ...props 41 | }: React.ComponentProps<'div'> & { 42 | index: number; 43 | }) { 44 | const inputOTPContext = React.useContext(OTPInputContext); 45 | const { char, hasFakeCaret, isActive } = 46 | inputOTPContext?.slots[index] ?? {}; 47 | 48 | return ( 49 |
58 | {char} 59 | {hasFakeCaret && ( 60 |
61 |
62 |
63 | )} 64 |
65 | ); 66 | } 67 | 68 | function InputOTPSeparator({ ...props }: React.ComponentProps<'div'>) { 69 | return ( 70 |
71 | 72 |
73 | ); 74 | } 75 | 76 | export { InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot }; 77 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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.3.1", 25 | "@radix-ui/react-alert-dialog": "^1.1.15", 26 | "@radix-ui/react-avatar": "^1.1.11", 27 | "@radix-ui/react-collapsible": "^1.1.12", 28 | "@radix-ui/react-dialog": "^1.1.15", 29 | "@radix-ui/react-dropdown-menu": "^2.1.16", 30 | "@radix-ui/react-label": "^2.1.8", 31 | "@radix-ui/react-separator": "^1.1.8", 32 | "@radix-ui/react-slot": "^1.2.4", 33 | "@radix-ui/react-tooltip": "^1.2.8", 34 | "@radix-ui/react-visually-hidden": "^1.2.4", 35 | "axios": "^1.13.2", 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.2.3", 43 | "react-dom": "^19.2.3", 44 | "sonner": "^1.7.4", 45 | "tailwind-merge": "^3.4.0", 46 | "tailwindcss-animate": "^1.0.7" 47 | }, 48 | "devDependencies": { 49 | "@tailwindcss/forms": "^0.5.10", 50 | "@tailwindcss/postcss": "^4.1.18", 51 | "@types/node": "^22.19.2", 52 | "@types/react": "^19.2.7", 53 | "@types/react-dom": "^19.2.3", 54 | "@typescript-eslint/eslint-plugin": "^8.49.0", 55 | "@typescript-eslint/parser": "^8.49.0", 56 | "@vitejs/plugin-react": "^4.7.0", 57 | "concurrently": "^9.2.1", 58 | "eslint": "^9.39.1", 59 | "eslint-config-prettier": "^9.1.2", 60 | "eslint-plugin-prettier": "^5.5.4", 61 | "eslint-plugin-react": "^7.37.5", 62 | "eslint-plugin-react-hooks": "^5.2.0", 63 | "eslint-plugin-react-refresh": "^0.4.24", 64 | "globals": "^15.15.0", 65 | "laravel-vite-plugin": "^2.0.1", 66 | "postcss": "^8.5.6", 67 | "prettier": "^3.7.4", 68 | "prettier-plugin-organize-imports": "^4.3.0", 69 | "prettier-plugin-tailwindcss": "^0.6.14", 70 | "tailwindcss": "^4.1.18", 71 | "typescript": "^5.9.3", 72 | "vite": "^7.2.7" 73 | }, 74 | "pnpm": { 75 | "onlyBuiltDependencies": [ 76 | "esbuild" 77 | ] 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://getcomposer.org/schema.json", 3 | "name": "ferjal0/react-inertia-laravel-starter", 4 | "type": "project", 5 | "description": "The Laravel Inertia React Starter", 6 | "keywords": [ 7 | "laravel", 8 | "inertia", 9 | "react", 10 | "shadcn-ui" 11 | ], 12 | "license": "MIT", 13 | "require": { 14 | "php": "^8.4", 15 | "inertiajs/inertia-laravel": "^2.0", 16 | "jenssegers/agent": "^2.6", 17 | "laravel/fortify": "^1.25", 18 | "laravel/framework": "^12", 19 | "laravel/sanctum": "^4.0", 20 | "laravel/tinker": "^2.9", 21 | "nyholm/psr7": "^1.8", 22 | "railsware/mailtrap-php": "^2.0", 23 | "symfony/http-client": "^7.2", 24 | "tightenco/ziggy": "^2.0" 25 | }, 26 | "require-dev": { 27 | "fakerphp/faker": "^1.23", 28 | "laravel/breeze": "^2.3", 29 | "laravel/pail": "^1.1", 30 | "laravel/pint": "^1.13", 31 | "laravel/sail": "^1.26", 32 | "mockery/mockery": "^1.6", 33 | "nunomaduro/collision": "^8.1", 34 | "pestphp/pest": "^3.7", 35 | "pestphp/pest-plugin-laravel": "^3.0" 36 | }, 37 | "autoload": { 38 | "psr-4": { 39 | "App\\": "app/", 40 | "Database\\Factories\\": "database/factories/", 41 | "Database\\Seeders\\": "database/seeders/" 42 | } 43 | }, 44 | "autoload-dev": { 45 | "psr-4": { 46 | "Tests\\": "tests/" 47 | } 48 | }, 49 | "scripts": { 50 | "post-autoload-dump": [ 51 | "Illuminate\\Foundation\\ComposerScripts::postAutoloadDump", 52 | "@php artisan package:discover --ansi" 53 | ], 54 | "post-update-cmd": [ 55 | "@php artisan vendor:publish --tag=laravel-assets --ansi --force" 56 | ], 57 | "post-root-package-install": [ 58 | "@php -r \"file_exists('.env') || copy('.env.example', '.env');\"" 59 | ], 60 | "post-create-project-cmd": [ 61 | "@php artisan key:generate --ansi", 62 | "@php -r \"file_exists('database/database.sqlite') || touch('database/database.sqlite');\"", 63 | "@php artisan migrate --graceful --ansi" 64 | ], 65 | "dev": [ 66 | "Composer\\Config::disableProcessTimeout", 67 | "npx concurrently -c \"#93c5fd,#c4b5fd,#fb7185,#fdba74\" \"php artisan serve\" \"php artisan queue:listen --tries=1\" \"php artisan pail --timeout=0\" \"npm run dev\" --names=server,queue,logs,vite" 68 | ] 69 | }, 70 | "extra": { 71 | "laravel": { 72 | "dont-discover": [] 73 | } 74 | }, 75 | "config": { 76 | "optimize-autoloader": true, 77 | "preferred-install": "dist", 78 | "sort-packages": true, 79 | "allow-plugins": { 80 | "pestphp/pest-plugin": true, 81 | "php-http/discovery": true 82 | } 83 | }, 84 | "minimum-stability": "stable", 85 | "prefer-stable": true 86 | } 87 | -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /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