Skip to content

Laravel 12 Starter Kits: React, Vue, Livewire & WorkOS

Explore Laravel 12's new starter kits with React, Vue, or Livewire frontends and WorkOS AuthKit for enterprise authentication out of the box.

Hoceine El Idrissi8 min read

Laravel 12 Starter Kits: React, Vue, Livewire & WorkOS

Laravel 12 introduces redesigned starter kits offering React, Vue, or Livewire frontends with optional WorkOS AuthKit integration for enterprise-grade authentication.

What's New in Laravel 12 Starter Kits

  • Choice of React, Vue, or Livewire frontends
  • WorkOS AuthKit integration option
  • Social authentication (Google, Microsoft, GitHub)
  • Enterprise SSO support
  • Modern, responsive UI

Installation

React with Inertia

bash
laravel new my-app --react

Vue with Inertia

bash
laravel new my-app --vue

Livewire

bash
laravel new my-app --livewire

With WorkOS Authentication

bash
laravel new my-app --react --workos
# or
laravel new my-app --vue --workos
# or
laravel new my-app --livewire --workos

WorkOS AuthKit Features

Social Authentication

Pre-configured social login providers:

php
// Users can sign in with:
// - Google
// - Microsoft
// - GitHub
// - Apple
// - LinkedIn

Enterprise SSO

Single Sign-On for enterprise customers:

php
// Support for:
// - SAML
// - OIDC
// - Directory Sync
// - SCIM provisioning

Configuration

env
# .env
WORKOS_API_KEY=your-api-key
WORKOS_CLIENT_ID=your-client-id
WORKOS_REDIRECT_URI=http://localhost:8000/authenticate

React Starter Kit Structure

text
app/
├── Http/
│   └── Controllers/
│       ├── Auth/
│       │   ├── AuthenticatedSessionController.php
│       │   ├── RegisteredUserController.php
│       │   └── ...
resources/
├── js/
│   ├── Components/
│   │   ├── ui/           # shadcn/ui components
│   │   ├── InputError.tsx
│   │   └── ...
│   ├── Layouts/
│   │   ├── AuthLayout.tsx
│   │   └── AppLayout.tsx
│   ├── Pages/
│   │   ├── Auth/
│   │   │   ├── Login.tsx
│   │   │   ├── Register.tsx
│   │   │   └── ...
│   │   ├── Dashboard.tsx
│   │   └── ...

React Components

tsx
// resources/js/Pages/Dashboard.tsx
import { Head } from '@inertiajs/react'
import AppLayout from '@/Layouts/AppLayout'

export default function Dashboard() {
    return (
        <AppLayout>
            <Head title="Dashboard" />

            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8">
                    <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                        <div className="p-6 text-gray-900">
                            You're logged in!
                        </div>
                    </div>
                </div>
            </div>
        </AppLayout>
    )
}

Vue Starter Kit Structure

text
resources/
├── js/
│   ├── Components/
│   │   ├── ui/           # UI components
│   │   └── ...
│   ├── Layouts/
│   │   ├── AuthLayout.vue
│   │   └── AppLayout.vue
│   ├── Pages/
│   │   ├── Auth/
│   │   │   ├── Login.vue
│   │   │   └── Register.vue
│   │   └── Dashboard.vue

Vue Components

vue
<!-- resources/js/Pages/Dashboard.vue -->
<script setup lang="ts">
import AppLayout from '@/Layouts/AppLayout.vue'
import { Head } from '@inertiajs/vue3'
</script>

<template>
    <AppLayout>
        <Head title="Dashboard" />

        <div class="py-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
                <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
                    <div class="p-6 text-gray-900">
                        You're logged in!
                    </div>
                </div>
            </div>
        </div>
    </AppLayout>
</template>

Livewire Starter Kit Structure

text
app/
├── Livewire/
│   ├── Auth/
│   │   ├── Login.php
│   │   ├── Register.php
│   │   └── ...
│   └── Dashboard.php
resources/
├── views/
│   ├── components/
│   │   └── layouts/
│   │       ├── app.blade.php
│   │       └── guest.blade.php
│   ├── livewire/
│   │   ├── auth/
│   │   │   ├── login.blade.php
│   │   │   └── register.blade.php
│   │   └── dashboard.blade.php

Livewire Components

php
// app/Livewire/Dashboard.php
namespace App\Livewire;

use Livewire\Component;

class Dashboard extends Component
{
    public function render()
    {
        return view('livewire.dashboard')
            ->layout('components.layouts.app');
    }
}
blade
{{-- resources/views/livewire/dashboard.blade.php --}}
<div class="py-12">
    <div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
            <div class="p-6 text-gray-900">
                You're logged in!
            </div>
        </div>
    </div>
</div>

Authentication Routes

All starter kits include these routes:

php
// routes/auth.php
Route::middleware('guest')->group(function () {
    Route::get('register', [RegisteredUserController::class, 'create'])->name('register');
    Route::post('register', [RegisteredUserController::class, 'store']);
    Route::get('login', [AuthenticatedSessionController::class, 'create'])->name('login');
    Route::post('login', [AuthenticatedSessionController::class, 'store']);
});

Route::middleware('auth')->group(function () {
    Route::get('dashboard', Dashboard::class)->name('dashboard');
    Route::post('logout', [AuthenticatedSessionController::class, 'destroy'])->name('logout');
});

WorkOS Authentication Flow

php
// app/Http/Controllers/Auth/WorkOsController.php
class WorkOsController extends Controller
{
    public function redirect()
    {
        return redirect(WorkOS::getAuthorizationUrl([
            'provider' => request('provider'),
            'redirect_uri' => route('workos.callback'),
        ]));
    }

    public function callback()
    {
        $user = WorkOS::getProfileAndToken(request('code'));

        $localUser = User::updateOrCreate(
            ['email' => $user->email],
            [
                'name' => $user->first_name . ' ' . $user->last_name,
                'workos_id' => $user->id,
            ]
        );

        Auth::login($localUser);

        return redirect()->route('dashboard');
    }
}

Customization

Adding New Pages (React)

tsx
// resources/js/Pages/Settings.tsx
import AppLayout from '@/Layouts/AppLayout'
import { Head } from '@inertiajs/react'

export default function Settings() {
    return (
        <AppLayout>
            <Head title="Settings" />
            {/* Your content */}
        </AppLayout>
    )
}
php
// routes/web.php
Route::get('/settings', fn () => Inertia::render('Settings'))
    ->middleware('auth')
    ->name('settings');

Adding New Pages (Livewire)

php
// app/Livewire/Settings.php
class Settings extends Component
{
    public function render()
    {
        return view('livewire.settings')
            ->layout('components.layouts.app');
    }
}
php
// routes/web.php
Route::get('/settings', Settings::class)
    ->middleware('auth')
    ->name('settings');

Dark Mode Support

All starter kits include dark mode:

tsx
// React
import { useTheme } from '@/hooks/use-theme'

function ThemeToggle() {
    const { theme, setTheme } = useTheme()

    return (
        <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
            Toggle Theme
        </button>
    )
}
vue
<!-- Vue -->
<script setup>
import { useDark, useToggle } from '@vueuse/core'

const isDark = useDark()
const toggleDark = useToggle(isDark)
</script>

<template>
    <button @click="toggleDark()">Toggle Theme</button>
</template>

TypeScript Support

React and Vue kits include full TypeScript support:

tsx
// resources/js/types/index.d.ts
export interface User {
    id: number
    name: string
    email: string
    email_verified_at?: string
}

export type PageProps<T extends Record<string, unknown> = Record<string, unknown>> = T & {
    auth: {
        user: User
    }
}

Testing

php
test('dashboard requires authentication', function () {
    $this->get('/dashboard')
        ->assertRedirect('/login');
});

test('authenticated users can view dashboard', function () {
    $user = User::factory()->create();

    $this->actingAs($user)
        ->get('/dashboard')
        ->assertOk();
});

Conclusion

Laravel 12 starter kits provide a solid foundation with your choice of modern frontend stack. WorkOS integration adds enterprise-ready authentication out of the box. Pick your stack and start building.

Resources