HTTPS en local

Guide pour configurer HTTPS sur votre machine locale (nécessaire pour Stripe).

Pourquoi HTTPS en local?

Stripe webhooks require HTTPS
Certains navigateurs refusent cookies sans HTTPS
Tester la production en local

Étape 1 : Installer mkcert

macOS


brew install mkcert
brew install nss  # Pour Firefox

Ubuntu/Debian


curl -JLO "https://dl.filippo.io/mkcert/latest?for=linux/amd64"
chmod +x mkcert-v*-linux-amd64
sudo mv mkcert-v*-linux-amd64 /usr/local/bin/mkcert

Windows


choco install mkcert
# Ou télécharger https://github.com/FiloSottile/mkcert/releases

Étape 2 : Créer une CA locale


# Créer et installer une autorité de certification locale
mkcert -install
 
# Sur macOS, vous devez entrer le mot de passe

Étape 3 : Générer les certificats


# Créer les certificats pour localhost
mkcert localhost 127.0.0.1 ::1 localhost.local
 
# Cela crée :
# - localhost+2.pem (certificat)
# - localhost+2-key.pem (clé privée)

Déplacez-les dans votre projet :


mkdir -p .certificates
mv localhost+2.pem .certificates/localhost.pem
mv localhost+2-key.pem .certificates/localhost-key.pem

Étape 4 : Configurer Next.js

Créez next-https.js :


const fs = require('fs')
const https = require('https')
const next = require('next')
 
const app = next({ dev: true })
const handle = app.getRequestHandler()
 
const httpsOptions = {
  key: fs.readFileSync('./.certificates/localhost-key.pem'),
  cert: fs.readFileSync('./.certificates/localhost.pem'),
}
 
app.prepare().then(() => {
  https.createServer(httpsOptions, (req, res) => {
    handle(req, res)
  }).listen(3000, (err) => {
    if (err) throw err
    console.log('> Serveur HTTPS sur https://localhost:3000')
  })
})

Étape 5 : Créer un script npm

Dans package.json :


{
  "scripts": {
    "dev": "next dev",
    "dev:https": "node next-https.js",
    "build": "next build",
    "start": "next start"
  }
}

Étape 6 : Lancer le serveur HTTPS


pnpm dev:https
 
# Le serveur est maintenant sur
# https://localhost:3000

Vous verrez un warning mais c’est normal (certificat auto-signé).

Cliquez “Avancer” ou “Accepter le risque”

Configurer Stripe pour les webhooks

Utiliser ngrok pour exposer votre serveur


# Installer ngrok
brew install ngrok  # macOS
# Ou choco install ngrok  # Windows
 
# Se connecter (créez un compte gratuit sur ngrok.com)
ngrok config add-authtoken <votre-token>
 
# Exposer votre serveur local
ngrok http https://localhost:3000
# Vous recevez une URL publique
 
# Exemple output:
# Forwarding  https://abc123.ngrok.io -> http://localhost:3000

Configurer les webhooks Stripe

Stripe Dashboard → Developers → Webhooks
Ajouter un endpoint
URL : https://abc123.ngrok.io/api/webhooks/stripe
Événements : payment_intent.succeeded, etc.
Cliquez Add endpoint

Maintenant Stripe envoie les webhooks à votre serveur local!

Tester les webhooks

Avec le CLI Stripe


# Installer le Stripe CLI
brew install stripe/stripe-cli/stripe  # macOS
# Ou choco install stripe-cli  # Windows
 
# Se connecter
stripe login
 
# Écouter les événements localement
stripe listen --forward-to localhost:3000/api/webhooks/stripe
 
# Vous recevez une clé webhook
# Ajoutez-la à .env.local
STRIPE_WEBHOOK_SECRET="whsec_..."

Déclencher un événement de test


# Dans un autre terminal
stripe trigger payment_intent.succeeded
 
# Vérifiez les logs du serveur local
# Vous devez voir l'événement traité

Tester un paiement complet

Lancez le serveur HTTPS :


pnpm dev:https

Lancez ngrok :


ngrok http https://localhost:3000

Mettez à jour les webhooks Stripe avec l’URL ngrok
Accédez à https://localhost:3000
Lancez un paiement de test
Utilisez une carte de test Stripe :


4242 4242 4242 4242
Exp: 12/26
CVC: 424

Vérifiez les webhooks :


stripe logs tail

Désactiver les avertissements de certificat

Chrome

Ouvrez https://localhost:3000
Cliquez “Pas sécurisé”
Cliquez “Certificat”
Cochez “Faire confiance à ce certificat”

Firefox

Acceptez une fois
L’avertissement ne revient plus

Safari

Cmd+Click sur l’avertissement
“Afficher les détails”
“Faire confiance à ce certificat”

Dépannage

”Certificate has not been installed"


mkcert -install

"Cannot find module ‘https’”

Node.js built-in, doit marcher. Essayez :


node -e "require('https')"

ngrok : “Tunnel limit exceeded”

Vous avez dépassé 2 tunnels simultanés

Solutions :

Créer un compte ngrok premium
Ou redémarrer ngrok

Alternative : Caddy

Si mkcert ne marche pas :


# Installer Caddy
brew install caddy
 
# Fichier Caddyfile
echo "localhost:3000 {
  reverse_proxy http://localhost:3001
  tls internal
}" > Caddyfile
 
# Lancer Caddy
caddy run
 
# Lancer Next.js sur un autre port
PORT=3001 pnpm dev

Prochaines étapes

→ Gestion base de données → Tests