Comment créer un formulaire de connexion avec CodeIgniter 4

Lorsque l’on développe une application web, il est essentiel de mettre en place un système d’authentification fiable depuis un formulaire de connexion pour protéger l’accès aux données sensibles. Que ce soit pour un back-office, une plateforme de gestion ou un espace client, restreindre l’accès aux utilisateurs autorisés est une priorité.

Dans ce tutoriel, nous allons voir comment créer un formulaire de connexion sécurisé avec CodeIgniter 4. Nous mettrons en place une authentification simple avec une redirection automatique vers une page de connexion si l’utilisateur n’est pas identifié.

Nous verrons également comment protéger toutes les pages de l’application pour qu’elles ne soient accessibles qu’aux utilisateurs connectés.

Si vous débutez avec CodeIgniter 4, pas d’inquiétude : nous expliquerons chaque étape en détail pour vous permettre de suivre facilement. 🚀

Créer la table users
Créer le modèle UserModel
Créer le contrôleur Auth
Créer la vue du formulaire de connexion
Protéger les pages (Middleware)
Créer la page d’accueil du backoffice
Définir les routes
Modification pour forcer la connexion dès l’accueil

Préparer l’environnement

Avant de commencer, assure-toi d’avoir :

Un projet CodeIgniter 4 installé.
Une base de données contenant une table users pour stocker les informations de connexion.

Si ce n’est pas encore fait, télécharge CodeIgniter 4 et configure ta base de données dans .env :

database.default.hostname = localhost
database.default.database = nom_de_ta_base
database.default.username = root
database.default.password = ton_mot_de_passe
database.default.DBDriver = MySQLi

Créer la table `users`

On a besoin d’une table pour stocker les utilisateurs :

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    password VARCHAR(255) NOT NULL
);

Ajoute un utilisateur test avec un mot de passe haché :

$password = password_hash('mon_mot_de_passe', PASSWORD_DEFAULT);

Et insère-le dans la base :

INSERT INTO users (username, password) VALUES ('admin', '$2y$10$...');

Créer le modèle UserModel

Dans app/Models/UserModel.php :

<?php

namespace App\Models;

use CodeIgniter\Model;

class UserModel extends Model
{
    protected $table = 'users';
    protected $primaryKey = 'id';
    protected $allowedFields = ['username', 'password'];

    public function getUserByUsername($username)
    {
        return $this->where('username', $username)->first();
    }
}

Créer le contrôleur Auth

Dans app/Controllers/Auth.php (En savoir plus sur les Controller, route et vue) :

<?php

namespace App\Controllers;

use App\Models\UserModel;

class Auth extends BaseController
{
    public function login()
    {
        return view('auth/login');
    }

    public function loginPost()
    {
        $session = session();
        $userModel = new UserModel();

        $username = $this->request->getPost('username');
        $password = $this->request->getPost('password');

        $user = $userModel->getUserByUsername($username);

        if ($user && password_verify($password, $user['password'])) {
            $session->set('isLoggedIn', true);
            return redirect()->to('/dashboard');
        } else {
            $session->setFlashdata('error', 'Identifiants incorrects.');
            return redirect()->to('/login');
        }
    }

    public function logout()
    {
        session()->destroy();
        return redirect()->to('/login');
    }
}

Créer la vue du formulaire de connexion

Dans app/Views/auth/login.php :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Connexion</title>
</head>
<body>
    <h2>Connexion</h2>
    <?php if (session()->getFlashdata('error')) : ?>
        <p style="color:red;"><?= session()->getFlashdata('error') ?></p>
    <?php endif; ?>
    <form action="<?= base_url('/login') ?>" method="post">
        <label>Nom d'utilisateur :</label>
        <input type="text" name="username" required>
        <label>Mot de passe :</label>
        <input type="password" name="password" required>
        <button type="submit">Se connecter</button>
    </form>
</body>
</html>

Protéger les pages (Middleware)

Crée un filtre pour empêcher l’accès aux pages sans être connecté.

Dans app/Filters/AuthFilter.php :

<?php

namespace App\Filters;

use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;

class AuthFilter implements FilterInterface
{
    public function before(RequestInterface $request, $arguments = null)
    {
        if (!session()->get('isLoggedIn')) {
            return redirect()->to('/login');
        }
    }

    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {
        // Ne rien faire après l'exécution
    }
}

Et active-le dans app/Config/Filters.php :

phpCopierModifierpublic $filters = [
    'auth' => ['before' => ['dashboard/*']]
];

Créer la page d’accueil du backoffice

Dans app/Controllers/Dashboard.php :

<?php

namespace App\Controllers;

class Dashboard extends BaseController
{
    public function index()
    {
        return view('dashboard/index');
    }
}

Et la vue app/Views/dashboard/index.php :

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tableau de bord</title>
</head>
<body>
    <h2>Bienvenue dans le backoffice</h2>
    <a href="<?= base_url('/logout') ?>">Déconnexion</a>
</body>
</html>

Définir les routes

Ajoute ces routes dans app/Config/Routes.php :

$routes->get('/login', 'Auth::login');
$routes->post('/login', 'Auth::loginPost');
$routes->get('/logout', 'Auth::logout');
$routes->get('/dashboard', 'Dashboard::index', ['filter' => 'auth']);

Comment ça marche ?

Quand l’utilisateur visite /login, il voit le formulaire de connexion.
Quand il soumet le formulaire, le contrôleur Auth::loginPost :
- Vérifie si l’utilisateur existe dans la base.
- Vérifie si le mot de passe est correct.
- Stocke une session isLoggedIn = true si c’est bon.
- Redirige vers /dashboard.
Le filtre AuthFilter empêche l’accès aux pages sans être connecté.
L’utilisateur peut se déconnecter via /logout.

Ce système protège toutes les pages du backoffice et ne permet l’accès qu’aux utilisateurs connectés. Il est aussi sécurisé grâce au hachage des mots de passe.

Formation web et informatique - Alban Guillier - Formateur

Des formations informatique pour tous !

Débutant ou curieux ? Apprenez le développement web, le référencement, le webmarketing, la bureautique, à maîtriser vos appareils Apple et bien plus encore…

Formateur indépendant, professionnel du web depuis 2006, je vous accompagne pas à pas et en cours particulier, que vous soyez débutant ou que vous souhaitiez progresser. En visio, à votre rythme, et toujours avec pédagogie.

Découvrez mes formations Qui suis-je ?

Modification pour forcer la connexion dès l’accueil

On va s’assurer que :

La page d’accueil (/) affiche le formulaire de connexion.
Toutes les pages sont protégées et nécessitent une connexion.
Les utilisateurs non connectés sont toujours redirigés vers /login.

Modifier la route d’accueil

Dans app/Config/Routes.php, fais pointer l’accueil (/) vers Auth::login :

$routes->get('/', 'Auth::login');
$routes->get('/login', 'Auth::login');
$routes->post('/login', 'Auth::loginPost');
$routes->get('/logout', 'Auth::logout');
$routes->get('/dashboard', 'Dashboard::index', ['filter' => 'auth']);

Maintenant, si quelqu’un accède à /, il verra directement le formulaire de connexion.

Améliorer le filtre de sécurité

On va modifier le filtre AuthFilter pour bloquer toutes les pages sauf /login et /logout.

Dans app/Filters/AuthFilter.php, change le before() :

<?php

namespace App\Filters;

use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;

class AuthFilter implements FilterInterface
{
        public function before(RequestInterface $request, $arguments = null)
    {
        $session = session();
        $uri = service('uri')->getPath(); // Récupère l'URL demandée

        if (!$session->get('isLoggedIn') && !in_array($uri, ['login', 'logout'])) {
            return redirect()->to('/login');
        }
    }
    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {
        // Ne rien faire après l'exécution
    }
}

Avec ça :

Si l’utilisateur est connecté, il accède aux pages librement.
Si l’utilisateur n’est pas connecté, il est automatiquement redirigé vers /login sauf pour /logout.

Appliquer le filtre sur toutes les pages

Dans app/Config/Filters.php, applique le filtre auth sur toutes les requêtes :

public array $aliases = [
        'csrf'  => \CodeIgniter\Filters\CSRF::class,
        'toolbar' => \CodeIgniter\Filters\DebugToolbar::class,
        'auth'  => \App\Filters\AuthFilter::class, // Ajoute cette ligne
    ];

public array $globals = [
    'before' => [
        'auth' => ['except' => ['login', 'logout']]
    ],
    'after' => []
];

Cela signifie que toutes les pages sont protégées sauf /login et /logout.

Tester les protections

Action	Résultat attendu
Aller sur `/`	Affiche la page de connexion
Essayer `/dashboard` sans être connecté	Redirige vers `/login`
Se connecter	Redirige vers `/dashboard`
Aller sur `/dashboard` après connexion	Accès autorisé
Se déconnecter	Redirige vers `/login`

Conclusion

Désormais :

✅ La page /login est la seule accessible sans connexion.
✅ Toutes les autres pages sont protégées.
✅ Si un utilisateur non connecté tente d’accéder à une autre page, il est redirigé vers /login.

Tester

✅ Accède à / → Il doit afficher la page de connexion.
✅ Essaie d’accéder à /dashboard sans être connecté → Redirigé vers /login.
✅ Connecte-toi → Accès autorisé.
✅ Déconnecte-toi → Retour à /login.

Vérifier la configuration de base

Ouvre app/Config/App.php et assure-toi que ces valeurs sont bien définies :

public $baseURL = 'http://localhost:8888/metalcustomer/';
public $indexPage = ''; // Assurez-vous que c'est vide pour enlever index.php des URLs

Puis vérifie que mod_rewrite est activé sur ton serveur Apache.

Mettre en place un système sécurisé avec un formulaire de connexion pour CodeIgniter 4 est une étape essentielle pour protéger l’accès à une application web. Grâce à l’utilisation d’un filtre d’authentification, nous avons pu restreindre l’accès aux pages sensibles et garantir que seuls les utilisateurs connectés puissent les consulter.

En suivant cette méthode, vous disposez désormais d’une base solide pour gérer les sessions et sécuriser votre back-office. Vous pouvez aller encore plus loin en ajoutant des fonctionnalités comme la gestion des rôles et permissions, la récupération de mot de passe ou encore l’authentification à deux facteurs.

L’authentification est un élément clé de toute application, et bien maîtriser ces concepts vous permettra de créer des systèmes plus robustes et professionnels.

Live on Twitch

🔥 Vendredi 25 Avril 2025 >19h00
HTML & SémantiqueStructure d'une page HTML

Alban

Fondateur de l’agence Créa-troyes.
Intervenant en Freelance.
Contactez-moi

crea-troyes.fr