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.

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.

1. Installer l'installateur Laravel

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

   composer global require laravel/installer
   
2. 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.

3. Installer les dépendances frontend

   cd my-app
   npm install && npm run build
   
4. Préparer la base de données

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

   php artisan migrate
   
5. 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

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

Vue

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

Livewire

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>

Svelte

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

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

Vue

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

Livewire

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

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

Svelte

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.