> ## Documentation Index
> Fetch the complete documentation index at: https://kawax.biz/llms.txt
> Use this file to discover all available pages before exploring further.

# 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.

<Warning>
  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.
</Warning>

## Starter kit disponibili

In Laravel 13 sono forniti quattro tipi di starter kit.

<CardGroup cols={2}>
  <Card title="React" icon="react">
    SPA moderna con React 19, TypeScript, Tailwind 4 e [shadcn/ui](https://ui.shadcn.com).
    Con [Inertia.js](https://inertiajs.com) puoi usare React mantenendo il routing lato server.
  </Card>

  <Card title="Vue" icon="vuejs">
    Vue 3 Composition API, TypeScript, Tailwind e [shadcn-vue](https://www.shadcn-vue.com/).
    Come React, usa Inertia.js per l'integrazione con il server.
  </Card>

  <Card title="Livewire" icon="bolt">
    [Livewire](https://livewire.laravel.com) per UI dinamiche in solo PHP.
    Ideale per team che lavorano con i template Blade o senza framework JavaScript. Include [Flux UI](https://fluxui.dev).
  </Card>

  <Card title="Svelte" icon="s">
    SPA con Svelte 5, TypeScript, Tailwind e [shadcn-svelte](https://www.shadcn-svelte.com/).
    Combina con Inertia.js per un frontend moderno.
  </Card>
</CardGroup>

### 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    |

<Tip>
  L'autenticazione è identica in tutti gli starter kit: scegli la tecnologia frontend con cui il team è più familiare.
</Tip>

<Info>
  Per un confronto tra Blade, Livewire, Inertia e SPA indipendenti, leggi [Frontend](/it/frontend).
</Info>

## Installazione

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

<Steps>
  <Step title="Installa l'installer di Laravel">
    ```bash theme={null}
    composer global require laravel/installer
    ```
  </Step>

  <Step title="Crea la nuova app">
    ```bash theme={null}
    laravel new my-app
    ```

    Scegli tra **React**, **Vue**, **Livewire**, **Svelte**.
    Puoi scegliere anche tra autenticazione Laravel standard o WorkOS AuthKit.
  </Step>

  <Step title="Installa le dipendenze frontend">
    ```bash theme={null}
    cd my-app
    npm install && npm run build
    ```
  </Step>

  <Step title="Prepara il database">
    ```bash theme={null}
    php artisan migrate
    ```
  </Step>

  <Step title="Avvia il server di sviluppo">
    ```bash theme={null}
    composer run dev
    ```

    Vai su `http://localhost:8000` e vedrai i link "Register" e "Log in".
  </Step>
</Steps>

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.

<Tabs>
  <Tab title="React">
    Modifica `resources/js/layouts/app-layout.tsx`.

    ```tsx theme={null}
    // Sidebar (predefinito)
    import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

    // Header
    import AppLayoutTemplate from '@/layouts/app/app-header-layout';
    ```
  </Tab>

  <Tab title="Vue">
    Modifica `resources/js/layouts/AppLayout.vue`.

    ```js theme={null}
    import AppLayout from '@/layouts/app/AppSidebarLayout.vue';
    import AppLayout from '@/layouts/app/AppHeaderLayout.vue';
    ```
  </Tab>

  <Tab title="Livewire">
    Modifica `resources/views/layouts/app.blade.php`.

    ```blade theme={null}
    <x-layouts::app.header>
        <flux:main container>
            {{ $slot }}
        </flux:main>
    </x-layouts::app.header>
    ```
  </Tab>

  <Tab title="Svelte">
    Modifica `resources/js/layouts/AppLayout.svelte`.

    ```js theme={null}
    import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';
    import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';
    ```
  </Tab>
</Tabs>

### Layout pagine di autenticazione

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

<Tabs>
  <Tab title="React">
    ```tsx theme={null}
    import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
    import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';
    ```
  </Tab>

  <Tab title="Vue">
    ```js theme={null}
    import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';
    import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';
    ```
  </Tab>

  <Tab title="Livewire">
    ```blade theme={null}
    <x-layouts::auth.split>
        {{ $slot }}
    </x-layouts::auth.split>
    ```
  </Tab>

  <Tab title="Svelte">
    ```js theme={null}
    import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';
    import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';
    ```
  </Tab>
</Tabs>

### Personalizzazione della logica di registrazione

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

```php theme={null}
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

<Info>
  Richiede un account WorkOS. Gratuito fino a 1 milione di utenti attivi mensili.
</Info>

Configura in `.env`:

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

## Attenzione

<Warning>
  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.
</Warning>

## Prossimi passi

<Card title="Introduzione all'autenticazione" icon="lock" href="/it/authentication">
  Approfondisci la facade `Auth`, la protezione delle route e altro.
</Card>


## Related topics

- [Laravel Fortify e gli starter kit](/it/advanced/fortify.md)
- [Come creare uno starter kit per Laravel](/it/advanced/starter-kit-creation.md)
- [Laravel Console Starter](/it/packages/laravel-console-starter/index.md)
- [Laravel Maestro — l'orchestratore per lo sviluppo degli starter kit](/it/blog/maestro-introduction.md)
- [Laravel Chisel — libreria di script post-installazione per starter kit](/it/blog/chisel-introduction.md)