Kits de démarrage - Knowledge of 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.

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.

Kits de démarrage disponibles

Laravel 13 fournit les quatre kits suivants.

React

SPA moderne avec React 19, TypeScript, Tailwind 4 et shadcn/ui. Grâce à Inertia.js, le routage côté serveur est conservé.

Vue

Vue 3 Composition API, TypeScript, Tailwind et shadcn-vue. Comme pour React, Inertia.js sert de pont avec le backend.

Livewire

Livewire, 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.

Svelte

SPA avec Svelte 5, TypeScript, Tailwind et shadcn-svelte. Combiné à Inertia.js pour un frontend moderne.

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

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

Pour une vue d’ensemble des différences entre Blade, Livewire, Inertia et SPA indépendante, lisez d’abord Frontend.

Installation

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

Installer l'installateur Laravel

Si ce n’est pas déjà fait, installez-le via Composer.

composer global require laravel/installer

Créer une nouvelle application

Exécutez laravel new. Une invite interactive vous demande le kit.

laravel new my-app

Choisissez React, Vue, Livewire ou Svelte. Vous pouvez aussi choisir le fournisseur d’authentification : Laravel standard ou WorkOS AuthKit.

Installer les dépendances frontend

cd my-app
npm install && npm run build

Préparer la base de données

Vérifiez la configuration dans .env puis lancez les migrations.

php artisan migrate

Démarrer le serveur de développement

composer run dev

Ouvrez http://localhost:8000 : les liens « Register » et « Log in » apparaissent dans la navigation.

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.

React
Vue
Livewire
Svelte

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

// 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';

Modifiez resources/js/layouts/AppLayout.vue.

// Layout sidebar (par défaut)
import AppLayout from '@/layouts/app/AppSidebarLayout.vue';

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

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

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

Modifiez resources/js/layouts/AppLayout.svelte.

// Layout sidebar (par défaut)
import AppLayout from '@/layouts/app/AppSidebarLayout.svelte';

// Pour passer au layout header
import AppLayout from '@/layouts/app/AppHeaderLayout.svelte';

Changer le layout des pages d’authentification

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

React
Vue
Livewire
Svelte

Modifiez resources/js/layouts/auth-layout.tsx.

// 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';

Modifiez resources/js/layouts/AuthLayout.vue.

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

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

Modifiez resources/views/layouts/auth.blade.php.

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

Modifiez resources/js/layouts/AuthLayout.svelte.

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

// Pour passer au layout split
import AuthLayout from '@/layouts/auth/AuthSplitLayout.svelte';

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.

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)

WorkOS AuthKit nécessite un compte WorkOS. Il est gratuit jusqu’à 1 million d’utilisateurs actifs mensuels.

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

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

Attention

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.

Prochaines étapes

Introduction à l'authentification

Approfondissez l’utilisation de la façade Auth, la protection des routes et bien plus.

​Qu’est-ce qu’un kit de démarrage

​Kits de démarrage disponibles

React

Vue

Livewire

Svelte

​Lequel choisir

​Installation

​Personnalisation du kit

​Changer de layout

​Changer le layout des pages d’authentification

​Personnaliser la logique d’inscription

​Authentification WorkOS AuthKit

​Attention

​Prochaines étapes

Introduction à l'authentification

Qu’est-ce qu’un kit de démarrage

Kits de démarrage disponibles

Lequel choisir

Installation

Personnalisation du kit

Changer de layout

Changer le layout des pages d’authentification

Personnaliser la logique d’inscription

Authentification WorkOS AuthKit

Attention

Prochaines étapes