Project 12: a secure login (passwords for real)

<?php
// ============================================================================
// CONNEXION SÉCURISÉE — un seul fichier PHP, qui gère un VRAI login.
//
// On ne stocke JAMAIS un mot de passe en clair. On stocke son EMPREINTE
// (un hash), calculée par password_hash(). À la connexion, on ne compare pas
// les mots de passe : on demande à password_verify() si le mot de passe tapé
// correspond à l'empreinte stockée. Le hash est à sens unique : même si la base
// fuite, on ne peut pas en retrouver les mots de passe.
//
// PLAN DU FICHIER :
//   1) Session + jeton CSRF
//   2) "Base" des utilisateurs : un compte de démo, avec son hash bcrypt stocké
//      (PAS le mot de passe en clair). C'est exactement ce qu'aurait une vraie base.
//   3) Déconnexion (logout)
//   4) Traitement du login : CSRF, validation, password_verify, anti-énumération,
//      régénération de l'ID de session (anti-fixation), redirection (PRG)
//   5) Le HTML : soit l'espace connecté, soit le formulaire de connexion
//
// Démo : aucune inscription, aucune écriture. Le compte de démo est affiché à
// l'écran pour que tu puisses te connecter et voir l'espace protégé.
// ============================================================================

session_start();   // tout en haut, AUCUN espace ni ligne vide avant <?php

// --- 1) Jeton CSRF ----------------------------------------------------------
if (empty($_SESSION['login_csrf'])) {
    $_SESSION['login_csrf'] = bin2hex(random_bytes(16));
}
$csrf = $_SESSION['login_csrf'];

// --- Langue (fr par défaut) -------------------------------------------------
$lang = ((($_REQUEST['lang'] ?? 'fr')) === 'en') ? 'en' : 'fr';
$S = [
  'fr' => [
    'title' => "Connexion sécurisée", 'sub' => "Un vrai login : mot de passe haché, jamais stocké en clair.",
    'email' => "Email", 'pass' => "Mot de passe", 'login' => "Se connecter", 'logout' => "Se déconnecter",
    'ph_email' => "ton@email.fr", 'ph_pass' => "Ton mot de passe",
    'err_csrf' => "Jeton de sécurité invalide. Recharge la page et réessaie.",
    'err_fields' => "Remplis l'email et le mot de passe.",
    // ANTI-ÉNUMÉRATION : un seul message, qu'on se trompe d'email OU de mot de passe.
    'err_bad' => "Identifiants invalides. Réessaie.",
    'welcome' => "Tu es connecté ✓", 'welcome_text' => "Bienvenue ! Cette zone n'est visible qu'une fois authentifié. Dans une vraie appli, c'est ici que vivrait le tableau de bord.",
    'as' => "Connecté en tant que",
    'demo_hint' => "Compte de démo : <strong>demo@exemple.fr</strong> / <strong>motdepasse123</strong>",
    'note' => "Le mot de passe est vérifié avec password_verify() contre une empreinte. On ne le compare jamais en clair.",
    'credit' => 'Login PHP sur un serveur · Mini-projet du cours <a href="/apprendre/projets/">Projets appliqués</a>',
  ],
  'en' => [
    'title' => "Secure login", 'sub' => "A real login: hashed password, never stored in clear.",
    'email' => "Email", 'pass' => "Password", 'login' => "Log in", 'logout' => "Log out",
    'ph_email' => "you@email.com", 'ph_pass' => "Your password",
    'err_csrf' => "Invalid security token. Reload the page and try again.",
    'err_fields' => "Fill in the email and the password.",
    'err_bad' => "Invalid credentials. Try again.",
    'welcome' => "You are logged in ✓", 'welcome_text' => "Welcome! This area is only visible once authenticated. In a real app, this is where the dashboard would live.",
    'as' => "Logged in as",
    'demo_hint' => "Demo account: <strong>demo@exemple.fr</strong> / <strong>motdepasse123</strong>",
    'note' => "The password is checked with password_verify() against a hash. We never compare it in clear.",
    'credit' => 'PHP login on a server · A mini-project from the <a href="/apprendre/projets/">Applied projects</a> course',
  ],
][$lang];

function e($s) { return htmlspecialchars((string)$s, ENT_QUOTES, 'UTF-8'); }

// --- 2) "Base" des utilisateurs --------------------------------------------
// En vrai ce serait une table SQL. Ce qu'on y stocke, c'est l'EMPREINTE du mot
// de passe (60 caractères, calculée une fois à l'inscription), JAMAIS le mot de
// passe lui-même. Ce hash est celui de "motdepasse123".
$users = [
    'demo@exemple.fr' => '$2y$12$MjVS8JCDniAL27YSMae4UOthBPM2M8vl4042BwII3y0KGLx3N9QCa',
];

// --- 3) Déconnexion ---------------------------------------------------------
if (($_GET['logout'] ?? '') === '1') {
    unset($_SESSION['auth_user']);
    session_regenerate_id(true);  // on repart sur une session neuve
    header('Location: ?lang=' . $lang);
    exit;
}

$error = '';

// --- 4) Traitement de la connexion ------------------------------------------
if ($_SERVER['REQUEST_METHOD'] === 'POST' && empty($_SESSION['auth_user'])) {
    if (!isset($_POST['csrf']) || !hash_equals($csrf, $_POST['csrf'])) {
        $error = $S['err_csrf'];
    } else {
        $email = trim($_POST['email'] ?? '');
        $pass  = (string)($_POST['pass'] ?? '');

        if ($email === '' || $pass === '') {
            $error = $S['err_fields'];
        } else {
            // On récupère l'empreinte stockée pour cet email (ou null si inconnu).
            $hash = $users[$email] ?? null;

            // password_verify : compare le mot de passe tapé à l'empreinte, en
            // temps constant. Si l'email est inconnu, $hash est null → false.
            if ($hash !== null && password_verify($pass, $hash)) {
                // SUCCÈS. On régénère l'ID de session : un attaquant qui aurait
                // "fixé" l'ancien ID avant la connexion ne peut plus s'en servir
                // (parade contre la "session fixation").
                session_regenerate_id(true);
                $_SESSION['auth_user'] = $email;
                header('Location: ?lang=' . $lang);  // PRG : pas de re-POST au refresh
                exit;
            }
            // ÉCHEC : message identique pour "email inconnu" et "mauvais mot de
            // passe". On ne révèle pas quels comptes existent (anti-énumération).
            $error = $S['err_bad'];
        }
    }
}

$logged = $_SESSION['auth_user'] ?? null;
?>
<!DOCTYPE html>
<html lang="<?= e($lang) ?>">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?= e($S['title']) ?></title>
<meta name="robots" content="noindex, follow">
<link rel="icon" type="image/svg+xml" href="/assets/favicon.svg">
<style>
  :root { --ink:#1a1d24; --muted:#5a6270; --accent:#267d42; --border:#e2e6ea; --warn:#a8341f; }
  * { box-sizing:border-box; }
  html,body { margin:0; padding:0; }
  body { font-family:'Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif; background:#f4f6f8; color:var(--ink); min-height:100vh; display:flex; flex-direction:column; align-items:center; padding:32px 18px 48px; line-height:1.5; }
  .app { width:100%; max-width:460px; }
  header { text-align:center; margin-bottom:18px; }
  h1 { font-size:1.5rem; margin:0 0 6px; letter-spacing:-0.01em; }
  .sub { color:var(--muted); font-size:0.95rem; margin:0 0 16px; }
  .lang-switch { display:inline-flex; border:1.5px solid var(--border); border-radius:999px; overflow:hidden; background:#fff; }
  .lang-btn { border:0; background:transparent; padding:7px 18px; font:inherit; font-weight:700; font-size:0.8rem; color:var(--muted); cursor:pointer; text-decoration:none; }
  .lang-btn.active { background:var(--accent); color:#fff; }
  .lang-btn:focus-visible { outline:3px solid rgba(38,125,66,0.4); outline-offset:2px; }

  form, .card { background:#fff; border:1px solid var(--border); border-radius:14px; padding:22px; }
  label { display:block; font-weight:700; font-size:0.9rem; margin:14px 0 6px; }
  label:first-child { margin-top:0; }
  input[type=text], input[type=email], input[type=password] { width:100%; padding:11px 13px; border:1.5px solid var(--border); border-radius:10px; font:inherit; font-size:1rem; color:var(--ink); }
  input:focus-visible { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(38,125,66,0.12); }
  .btn { margin-top:18px; width:100%; min-height:50px; border-radius:12px; border:0; background:var(--accent); color:#fff; font:inherit; font-weight:700; font-size:1rem; cursor:pointer; text-align:center; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; }
  .btn:hover { background:#1f6a37; }
  .btn:focus-visible { outline:3px solid rgba(38,125,66,0.4); outline-offset:2px; }
  .btn-ghost { background:#fff; color:var(--accent); border:1.5px solid var(--accent); }
  .btn-ghost:hover { background:#eaf6ee; }
  .note { color:var(--muted); font-size:0.82rem; margin-top:14px; }
  .hint { background:#eef3f8; border:1px solid #d6e1ec; border-radius:10px; padding:10px 13px; font-size:0.85rem; color:#33506b; margin-bottom:16px; }
  .hint strong { color:#1f3a52; }

  .alert { border-radius:10px; padding:12px 14px; margin-bottom:16px; font-size:0.92rem; }
  .alert-err { background:#fdecea; color:var(--warn); border:1px solid #f3c4be; }
  .card h2 { margin:0 0 8px; color:var(--accent); }
  .who { background:#f4f6f8; border-radius:10px; padding:10px 13px; margin:14px 0; font-size:0.9rem; }
  .who dt { font-size:0.72rem; text-transform:uppercase; letter-spacing:0.04em; color:var(--muted); }
  .who dd { margin:2px 0 0; font-weight:700; word-break:break-word; }
  .credit { text-align:center; color:var(--muted); font-size:0.78rem; margin-top:22px; }
  .credit a { color:var(--accent); }
</style>
</head>
<body>
<main class="app">
  <header>
    <h1><?= e($S['title']) ?></h1>
    <p class="sub"><?= e($S['sub']) ?></p>
    <div class="lang-switch" role="group" aria-label="Langue / Language">
      <a class="lang-btn <?= $lang==='fr'?'active':'' ?>" href="?lang=fr">FR</a>
      <a class="lang-btn <?= $lang==='en'?'active':'' ?>" href="?lang=en">EN</a>
    </div>
  </header>

<?php if ($logged): ?>
  <!-- ESPACE PROTÉGÉ : visible seulement si $_SESSION['auth_user'] existe. -->
  <div class="card">
    <h2><?= e($S['welcome']) ?></h2>
    <p><?= e($S['welcome_text']) ?></p>
    <dl class="who">
      <dt><?= e($S['as']) ?></dt>
      <dd><?= e($logged) ?></dd>
    </dl>
    <a class="btn btn-ghost" href="?lang=<?= e($lang) ?>&logout=1"><?= e($S['logout']) ?></a>
  </div>
<?php else: ?>
  <form method="post" action="">
    <p class="hint"><?= $S['demo_hint'] /* texte rédigé par nous */ ?></p>

    <?php if ($error): ?>
      <div class="alert alert-err"><?= e($error) ?></div>
    <?php endif; ?>

    <input type="hidden" name="csrf" value="<?= e($csrf) ?>">
    <input type="hidden" name="lang" value="<?= e($lang) ?>">

    <label for="email"><?= e($S['email']) ?></label>
    <input type="email" id="email" name="email" value="<?= e($_POST['email'] ?? '') ?>" placeholder="<?= e($S['ph_email']) ?>" autocomplete="username" required>

    <label for="pass"><?= e($S['pass']) ?></label>
    <input type="password" id="pass" name="pass" placeholder="<?= e($S['ph_pass']) ?>" autocomplete="current-password" required>

    <button class="btn" type="submit"><?= e($S['login']) ?></button>
    <p class="note"><?= e($S['note']) ?></p>
  </form>
<?php endif; ?>

  <p class="credit"><?= $S['credit'] ?></p>
</main>
</body>
</html>