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

# Kits de démarrage

> Comment configurer rapidement l'authentification et l'UI avec les kits de démarrage Laravel.

## Qu'est-ce qu'un kit de démarrage

Un kit de démarrage est un échafaudage officiel qui sert de point de départ à une application Laravel.
Il met en place en une fois l'authentification (connexion, inscription, réinitialisation du mot de passe, vérification de l'e-mail) et l'UI correspondante.

Il suffit de le choisir lors de la création via `laravel new` pour que les routes, contrôleurs, vues et code frontend liés à l'authentification soient générés automatiquement.
Le code généré fait partie de votre application et peut être personnalisé librement.

<Warning>
  Sous Laravel 13, les anciens **Breeze** et **Jetstream** sont abandonnés.
  Utilisez les kits présentés ci-dessous pour les nouveaux projets.
  Les projets existants avec Breeze ou Jetstream continuent de fonctionner, mais ne sont plus recommandés pour de nouveaux développements.
</Warning>

## Kits de démarrage disponibles

Laravel 13 fournit les quatre kits suivants.

<CardGroup cols={2}>
  <Card title="React" icon="react">
    SPA moderne avec React 19, TypeScript, Tailwind 4 et [shadcn/ui](https://ui.shadcn.com).
    Grâce à [Inertia.js](https://inertiajs.com), le routage côté serveur est conservé.
  </Card>

  <Card title="Vue" icon="vuejs">
    Vue 3 Composition API, TypeScript, Tailwind et [shadcn-vue](https://www.shadcn-vue.com/).
    Comme pour React, Inertia.js sert de pont avec le backend.
  </Card>

  <Card title="Livewire" icon="bolt">
    [Livewire](https://livewire.laravel.com), qui permet des UI dynamiques uniquement en PHP.
    Parfait pour les équipes centrées sur Blade ou souhaitant éviter les frameworks JS. Utilise [Flux UI](https://fluxui.dev).
  </Card>

  <Card title="Svelte" icon="s">
    SPA avec Svelte 5, TypeScript, Tailwind et [shadcn-svelte](https://www.shadcn-svelte.com/).
    Combiné à Inertia.js pour un frontend moderne.
  </Card>
</CardGroup>

### Lequel choisir

| Kit      | Convient à                                |
| -------- | ----------------------------------------- |
| React    | Équipes familières de React et TypeScript |
| Vue      | Équipes ayant l'expérience de Vue ou Nuxt |
| Livewire | Équipes centrées PHP et Blade             |
| Svelte   | Équipes familières de Svelte ou SvelteKit |

<Tip>
  Les fonctionnalités d'authentification sont identiques quel que soit le kit. Choisissez la technologie frontend que votre équipe maîtrise le mieux.
</Tip>

<Info>
  Pour une vue d'ensemble des différences entre Blade, Livewire, Inertia et SPA indépendante, lisez d'abord [Frontend](/fr/frontend).
</Info>

## Installation

Le kit se choisit lors de la création du projet. `laravel new` propose une sélection interactive.

<Steps>
  <Step title="Installer l'installateur Laravel">
    Si ce n'est pas déjà fait, installez-le via Composer.

    ```bash theme={null}
    composer global require laravel/installer
    ```
  </Step>

  <Step title="Créer une nouvelle application">
    Exécutez `laravel new`. Une invite interactive vous demande le kit.

    ```bash theme={null}
    laravel new my-app
    ```

    Choisissez **React**, **Vue**, **Livewire** ou **Svelte**.
    Vous pouvez aussi choisir le fournisseur d'authentification : Laravel standard ou WorkOS AuthKit.
  </Step>

  <Step title="Installer les dépendances frontend">
    ```bash theme={null}
    cd my-app
    npm install && npm run build
    ```
  </Step>

  <Step title="Préparer la base de données">
    Vérifiez la configuration dans `.env` puis lancez les migrations.

    ```bash theme={null}
    php artisan migrate
    ```
  </Step>

  <Step title="Démarrer le serveur de développement">
    ```bash theme={null}
    composer run dev
    ```

    Ouvrez `http://localhost:8000` : les liens « Register » et « Log in » apparaissent dans la navigation.
  </Step>
</Steps>

Le kit fournit immédiatement les fonctionnalités suivantes.

| Fonctionnalité                   | URL                 |
| -------------------------------- | ------------------- |
| Inscription                      | `/register`         |
| Connexion                        | `/login`            |
| Réinitialisation du mot de passe | `/forgot-password`  |
| Vérification de l'e-mail         | `/email/verify`     |
| Édition du profil                | `/settings/profile` |

## Personnalisation du kit

Le code généré appartient à votre application ; vous êtes libre de le modifier.
La majeure partie du code frontend se trouve dans `resources/js` (pour Livewire, dans `resources/views` puisque c'est du Blade).

### Changer de layout

Chaque kit propose deux layouts : « sidebar » et « header ».
Le sidebar est par défaut.

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

    ```tsx theme={null}
    // Layout sidebar (par défaut)
    import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';

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

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

    ```js theme={null}
    // Layout sidebar (par défaut)
    import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

    // Pour passer au layout header
    import AppLayout from '@/layouts/app/AppHeaderLayout.vue';
    ```
  </Tab>

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

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

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

    ```js theme={null}
    // Layout sidebar (par défaut)
    import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';

    // Pour passer au layout header
    import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';
    ```
  </Tab>
</Tabs>

### Changer le layout des pages d'authentification

Les pages de connexion et d'inscription proposent trois layouts : « simple », « card », « split ».

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

    ```tsx theme={null}
    // Layout simple (par défaut)
    import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';

    // Pour passer au layout split
    import AuthLayoutTemplate from '@/layouts/auth/auth-split-layout';
    ```
  </Tab>

  <Tab title="Vue">
    Modifiez `resources/js/layouts/AuthLayout.vue`.

    ```js theme={null}
    import AuthLayout from '@/layouts/auth/AuthSimpleLayout.vue';

    // Pour passer au layout split
    import AuthLayout from '@/layouts/auth/AuthSplitLayout.vue';
    ```
  </Tab>

  <Tab title="Livewire">
    Modifiez `resources/views/layouts/auth.blade.php`.

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

  <Tab title="Svelte">
    Modifiez `resources/js/layouts/AuthLayout.svelte`.

    ```js theme={null}
    import AuthLayout from '@/layouts/auth/AuthSimpleLayout.svelte';

    // Pour passer au layout split
    import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';
    ```
  </Tab>
</Tabs>

### Personnaliser la logique d'inscription

Les kits utilisent les classes d'actions du répertoire `app/Actions/Fortify` pour l'inscription et la réinitialisation du mot de passe.
Pour ajouter un champ téléphone à l'inscription, éditez `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']),
    ]);
}
```

## Authentification WorkOS AuthKit

Lors de `laravel new`, vous pouvez choisir **WorkOS AuthKit** comme fournisseur d'authentification.
WorkOS AuthKit apporte notamment :

* L'authentification sociale (Google, Microsoft, GitHub, Apple)
* L'authentification par passkey
* L'authentification « Magic Auth » par e-mail
* SSO (Single Sign-On)

<Info>
  WorkOS AuthKit nécessite un compte WorkOS. Il est gratuit jusqu'à 1 million d'utilisateurs actifs mensuels.
</Info>

Si vous choisissez WorkOS, configurez ces variables dans `.env` :

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

## Attention

<Warning>
  Un kit de démarrage se choisit **à la création** du projet.
  Il n'est pas possible de l'ajouter ultérieurement à un projet existant.
  Si vous avez besoin d'une UI d'authentification, créez un nouveau projet avec un kit ou implémentez l'authentification manuellement.
</Warning>

## Prochaines étapes

<Card title="Introduction à l'authentification" icon="lock" href="/fr/authentication">
  Approfondissez l'utilisation de la façade `Auth`, la protection des routes et bien plus.
</Card>


## Related topics

- [Installation](/fr/installation.md)
- [Frontend](/fr/frontend.md)
- [Introduction à l'authentification](/fr/authentication.md)
- [Laravel Package Skeleton — le template de démarrage pour packages officiels](/fr/blog/package-skeleton-introduction.md)
- [Structure d'application Laravel 11+](/fr/advanced/app-structure.md)