Starter kit

Come impostare rapidamente autenticazione e UI con gli starter kit di Laravel

​

Cosa sono gli starter kit

Gli starter kit sono scaffolding ufficiali forniti come punto di partenza per applicazioni Laravel. Impostano in blocco funzionalità di autenticazione (login, registrazione, reset password, verifica email) con la UI corrispondente.

Basta selezionare uno starter kit durante laravel new per generare automaticamente route, controller, viste e codice frontend per l’autenticazione. Tutto il codice generato risiede nella tua applicazione ed è personalizzabile liberamente.

In Laravel 13 i tradizionali Breeze e Jetstream sono stati dismessi. Per i nuovi progetti usa gli starter kit descritti qui. I progetti esistenti che usano Breeze o Jetstream continuano a funzionare ma non sono più consigliati per nuovi sviluppi.

​

Starter kit disponibili

In Laravel 13 sono forniti quattro tipi di starter kit.

React

SPA moderna con React 19, TypeScript, Tailwind 4 e shadcn/ui. Con Inertia.js puoi usare React mantenendo il routing lato server.

Vue

Vue 3 Composition API, TypeScript, Tailwind e shadcn-vue. Come React, usa Inertia.js per l’integrazione con il server.

Livewire

Livewire per UI dinamiche in solo PHP. Ideale per team che lavorano con i template Blade o senza framework JavaScript. Include Flux UI.

Svelte

SPA con Svelte 5, TypeScript, Tailwind e shadcn-svelte. Combina con Inertia.js per un frontend moderno.

​

Quale scegliere

Starter kit	Team consigliato
React	Chi conosce l’ecosistema React e TypeScript
Vue	Chi ha esperienza con Vue o Nuxt
Livewire	Chi vuole restare su PHP e Blade
Svelte	Chi ha esperienza con Svelte o SvelteKit

L’autenticazione è identica in tutti gli starter kit: scegli la tecnologia frontend con cui il team è più familiare.

Per un confronto tra Blade, Livewire, Inertia e SPA indipendenti, leggi Frontend.

​

Installazione

Lo scegli alla creazione del progetto. Il comando laravel new presenta un prompt interattivo.

1. Installa l'installer di Laravel

   composer global require laravel/installer
   
2. Crea la nuova app

   laravel new my-app
   

   Scegli tra React, Vue, Livewire, Svelte. Puoi scegliere anche tra autenticazione Laravel standard o WorkOS AuthKit.

3. Installa le dipendenze frontend

   cd my-app
   npm install && npm run build
   
4. Prepara il database

   php artisan migrate
   
5. Avvia il server di sviluppo

   composer run dev
   

   Vai su http://localhost:8000 e vedrai i link “Register” e “Log in”.

Funzionalità pronte:

Funzionalità	URL
Registrazione	/register
Login	/login
Reset password	/forgot-password
Verifica email	/email/verify
Profilo	/settings/profile

​

Personalizzazione

Il codice risiede nell’app. Frontend in resources/js (Livewire in resources/views).

​

Cambio layout

Ogni kit include layout “sidebar” e “header”. Predefinito: sidebar.

React

Modifica resources/js/layouts/app-layout.tsx.

// Sidebar (predefinito)
import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

// Header
import AppLayoutTemplate from '@/layouts/app/app-header-layout';

Vue

Modifica resources/js/layouts/AppLayout.vue.

import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
import AppLayout from '@/layouts/app/AppHeaderLayout.vue';

Livewire

Modifica resources/views/layouts/app.blade.php.

<x-layouts::app.header>
    <flux:main container>
        {{ $slot }}
    </flux:main>
</x-layouts::app.header>

Svelte

Modifica resources/js/layouts/AppLayout.svelte.

import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';

​

Layout pagine di autenticazione

Le pagine di login e registrazione hanno tre layout: “simple”, “card”, “split”.

React

import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';

Vue

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';
import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';

Livewire

<x-layouts::auth.split>
    {{ $slot }}
</x-layouts::auth.split>

Svelte

import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';

​

Personalizzazione della logica di registrazione

Gli starter kit usano le classi action in app/Actions/Fortify. Per aggiungere un campo telefono modifica CreateNewUser.php.

public function create(array $input): User
{
    Validator::make($input, [
        'name' => ['required', 'string', 'max:255'],
        'email' => ['required', 'email', 'max:255', 'unique:users'],
        'phone' => ['required', 'string', 'max:20'],
        'password' => $this->passwordRules(),
    ])->validate();

    return User::create([
        'name' => $input['name'],
        'email' => $input['email'],
        'phone' => $input['phone'],
        'password' => Hash::make($input['password']),
    ]);
}

​

Autenticazione con WorkOS AuthKit

In laravel new puoi scegliere WorkOS AuthKit. Aggiunge:

• Autenticazione social (Google, Microsoft, GitHub, Apple)
• Passkey
• Magic Auth via email
• SSO

Richiede un account WorkOS. Gratuito fino a 1 milione di utenti attivi mensili.

Configura in .env:

WORKOS_CLIENT_ID=your-client-id
WORKOS_API_KEY=your-api-key
WORKOS_REDIRECT_URL="${APP_URL}/authenticate"

​

Attenzione

Gli starter kit si scelgono alla creazione del progetto. Non possono essere aggiunti dopo. Se ti serve la UI di autenticazione, crea un nuovo progetto con starter kit o implementala manualmente.

​

Prossimi passi

Introduzione all'autenticazione

Approfondisci la facade Auth, la protezione delle route e altro.