Tu veux que les gens puissent créer un compte sur ton site ? Se connecter avec un email et un mot de passe ? Avoir accès à un espace personnel ?
Règle numéro 1, et la plus importante : Ne code JAMAIS ça toi-même.
Je sais, c'est tentant. "C'est juste un email et un mot de passe, je peux le faire moi-même." "Claude peut m'aider à écrire le code." "Ça doit pas être si compliqué."
Non. Vraiment non. Et je vais t'expliquer pourquoi.
Pourquoi Ne Pas Coder l'Authentification Soi-Même ?
L'authentification (le système de login/mot de passe), c'est comme la serrure de ta maison. Tu pourrais fabriquer ta propre serrure dans ton garage, mais :
- Les cambrioleurs connaissent toutes les failles des serrures faites maison
- Un serrurier professionnel connaît des techniques de protection qu'on ne trouve pas sur YouTube
- Si ta serrure casse, tu es responsable et tout le monde peut entrer
Pour l'authentification web, c'est exactement pareil.
Les risques réels si tu codes l'auth toi-même :
Mots de passe mal protégés :
Tu stockes les mots de passe en clair dans ta base de données ? Ou avec un hash (une transformation cryptographique) mal configuré ? Le jour où quelqu'un accède à ta base, tous les mots de passe sont compromis.
Failles de sécurité découvertes trop tard :
SQL injection, XSS, CSRF... Ces termes barbares représentent des techniques d'attaque que des hackers utilisent tous les jours. Les services d'authentification professionnels ont des équipes dédiées qui cherchent et corrigent ces failles en permanence.
Responsabilité légale :
Si les données de tes utilisateurs fuitent parce que ton système était mal sécurisé, tu peux être tenu responsable (RGPD, entre autres). Les amendes peuvent être salées.
Session hijacking, brute force, timing attacks...
Il existe des dizaines de techniques d'attaque que tu ne connais probablement pas. Les professionnels de la sécurité, eux, les connaissent.
La Solution : Utiliser un Service Spécialisé
Au lieu de réinventer la roue (et de la faire carrée), utilise un service qui ne fait que ça : sécuriser les authentifications.
Clerk : Mon Recommandation
Clerk c'est comme embaucher un agent de sécurité professionnel et formé pour ton site. Il gère :
- L'inscription : formulaire, validation d'email, confirmation
- La connexion : email/mot de passe, mais aussi Google, Apple, GitHub...
- La récupération de mot de passe : "J'ai oublié mon mot de passe" avec email automatique
- La double authentification (2FA) : pour les utilisateurs qui veulent plus de sécurité
- La gestion des sessions : qui est connecté, depuis combien de temps, sur quel appareil
Et c'est gratuit jusqu'à 10 000 utilisateurs actifs par mois. C'est largement assez pour commencer.
Alternatives à Clerk
Tu as le choix. Voici les autres options sérieuses :
- Auth.js (ex NextAuth) : Gratuit et open source, mais demande plus de configuration
- Supabase Auth : Si tu utilises déjà Supabase pour ta base de données, l'auth est incluse
- Firebase Auth : L'option de Google, bien intégrée si tu utilises d'autres services Google
Pour un débutant, je recommande Clerk parce que c'est le plus simple à mettre en place.
Comment Installer Clerk (Étape par Étape)
Étape 1 : Créer un compte Clerk
- Va sur clerk.com
- Clique sur "Start building for free"
- Crée un compte (ironiquement, avec un email/mot de passe ou Google)
Étape 2 : Créer une application
Dans le dashboard Clerk :
- Clique sur "Create application"
- Donne-lui un nom (ex: "Mon Super Projet")
- Choisis les méthodes de connexion que tu veux offrir (email, Google, Apple...)
Étape 3 : Demander à Claude de l'intégrer
C'est là que Claude entre en jeu. Dis-lui simplement :
J'ai créé un compte Clerk et une application. J'ai un site Next.js. Aide-moi à intégrer Clerk pour que les utilisateurs puissent : 1. S'inscrire avec email/mot de passe 2. Se connecter 3. Se déconnecter 4. Voir leur profil Guide-moi étape par étape.
Claude va te guider pour :
- Installer les packages nécessaires (
@clerk/nextjs) - Configurer les variables d'environnement (les clés API)
- Ajouter le "provider" Clerk à ton application
- Créer les pages de connexion et d'inscription
- Protéger les pages réservées aux membres connectés
Étape 4 : Configurer les clés API
Clerk te donne deux clés (dans Settings > API Keys) :
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: la clé publique (visible côté client)CLERK_SECRET_KEY: la clé secrète (JAMAIS visible publiquement)
Où les mettre ?
Dans un fichier .env.local à la racine de ton projet :
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=pk_test_abc123...
CLERK_SECRET_KEY=sk_test_xyz789...Ce fichier .env.local ne doit JAMAIS être envoyé sur GitHub. Assure-toi qu'il est dans ton .gitignore et .claudeignore.
Étape 5 : Tester
- Lance ton site en local
- Va sur la page de connexion
- Crée un compte
- Connecte-toi
- Vérifie que les pages protégées sont bien inaccessibles quand tu n'es pas connecté
Ce Que Ça Donne Concrètement
Une fois Clerk installé, tu auras :
Des pages prêtes à l'emploi :
/sign-in: la page de connexion/sign-up: la page d'inscription/user-profile: la page de profil utilisateur
Des composants React :
// Bouton de connexion/déconnexion automatique
<UserButton />
// Afficher quelque chose seulement si connecté
<SignedIn>
<p>Bonjour, tu es connecté !</p>
</SignedIn>
// Afficher quelque chose seulement si déconnecté
<SignedOut>
<p>Connecte-toi pour voir le contenu</p>
</SignedOut>Un accès aux infos de l'utilisateur :
const { user } = useUser();
console.log(user.firstName); // Le prénom
console.log(user.emailAddresses[0].emailAddress); // L'emailProtéger une Page (Espace Membre)
Tu veux qu'une page soit accessible uniquement aux utilisateurs connectés ? C'est simple.
Comment je protège ma page /dashboard pour qu'elle soit accessible uniquement aux utilisateurs connectés avec Clerk ? Si quelqu'un n'est pas connecté, il doit être redirigé vers la page de connexion.
Claude va te montrer comment utiliser le middleware Clerk pour protéger des routes entières, ou comment utiliser les composants
Personnaliser l'Apparence
Les formulaires Clerk par défaut sont jolis, mais tu veux peut-être les adapter à ton design.
Comment je personnalise l'apparence des formulaires Clerk (couleurs, logo, textes) pour qu'ils correspondent au design de mon site ?
Clerk offre une API de "theming" qui te permet de modifier les couleurs, ajouter ton logo, changer les textes, etc.
Clerk vs Auth.js : Lequel Choisir ?
Si tu hésites, voici un comparatif :
| Critère | Clerk | Auth.js |
|---|---|---|
| Facilité | Très facile (5 minutes) | Moyen (1-2 heures) |
| Prix | Gratuit jusqu'à 10k users | Totalement gratuit |
| Interface prête | Oui, formulaires inclus | Non, tu dois les créer |
| Personnalisation | Moyenne (via theming) | Totale (tu codes tout) |
| Providers sociaux | Inclus (Google, Apple...) | À configurer toi-même |
| Dashboard admin | Oui, pour gérer les users | Non |
Mon conseil :
- Tu débutes ou tu veux aller vite → Clerk
- Tu veux un contrôle total et tu es à l'aise avec le code → Auth.js
- Tu utilises déjà Supabase → Supabase Auth (c'est inclus)
L'Erreur Qui M'a Coûté Cher
Laisse-moi te raconter une histoire vraie.
À mes débuts, j'ai codé mon propre système de connexion pour un client. Je me disais "C'est simple, c'est juste un formulaire". J'ai suivi un tutoriel trouvé sur Google, j'ai implémenté le système en 2 jours.
Ça marchait. Les utilisateurs pouvaient se connecter, créer un compte, tout allait bien.
6 mois plus tard, un utilisateur malveillant a trouvé une faille. Une injection SQL que je n'avais pas protégée correctement. Il a pu accéder aux comptes des autres utilisateurs. Pas aux mots de passe (heureusement ils étaient hashés), mais aux données personnelles : noms, emails, historiques.
Crise totale. Nuit blanche à patcher en urgence. Email d'excuse aux utilisateurs. Perte de confiance du client. J'ai dû faire un audit de sécurité complet, qui a coûté plus cher que le projet initial.
Depuis ce jour, je ne code plus jamais l'authentification moi-même. Jamais. Et toi non plus, tu ne devrais pas.
Connecter l'Authentification à Ta Base de Données
Tu veux stocker des données spécifiques à chaque utilisateur ? Par exemple, les préférences, les achats, les fichiers uploadés ?
J'utilise Clerk pour l'authentification et Supabase pour ma base de données. Comment je fais pour que chaque utilisateur ait ses propres données dans Supabase ? Par exemple, un utilisateur ne doit voir que SES commandes, pas celles des autres.
Claude va te montrer comment :
- Récupérer l'ID de l'utilisateur connecté depuis Clerk
- Stocker cet ID dans ta base Supabase
- Filtrer les requêtes pour n'afficher que les données de l'utilisateur connecté
Les Fonctionnalités Avancées
Une fois les bases en place, tu peux explorer :
Les rôles et permissions :
Certains utilisateurs sont admin, d'autres sont simples membres. Clerk gère ça.
Comment je crée des rôles utilisateurs avec Clerk ? Je veux avoir des 'admin' qui peuvent tout voir et des 'membres' qui ne voient que leurs propres données.
Les webhooks :
Tu veux être notifié quand quelqu'un s'inscrit ? Pour lui envoyer un email de bienvenue ou l'ajouter à ta newsletter ?
Comment je configure un webhook Clerk pour être notifié quand un nouvel utilisateur s'inscrit ? Je veux l'ajouter automatiquement à ma liste Mailchimp.
La connexion sociale uniquement :
Tu ne veux pas gérer les mots de passe du tout ? Tu peux n'autoriser que la connexion via Google/Apple.
Résumé en 30 secondes :
- Ne code JAMAIS l'authentification toi-même
- Utilise Clerk (ou Auth.js, ou Supabase Auth)
- Demande à Claude de t'aider à l'intégrer
- Protège tes clés API dans un fichier
.env - Dors tranquille
La sécurité de tes utilisateurs n'est pas un endroit où faire des économies de temps ou d'argent.
Pour Aller Plus Loin
Pour ceux qui veulent aller plus loin : on a créé le Workshop "Bâtir avec l'IA".
Articles connexes qui pourraient t'intéresser :
- Le fichier .claudeignore - Protéger tes clés API
- Créer une base de données avec Supabase - La base de données parfaite pour accompagner Clerk
- Interview : Comment Julie a créé son SaaS - Un exemple concret avec authentification
- Mettre en ligne ton site - Configurer les variables d'environnement sur Vercel
Services d'authentification :
- Clerk - Ma recommandation pour les débutants
- Auth.js - Alternative open source
- Supabase Auth - Si tu utilises déjà Supabase
- Firebase Auth - L'option Google
— Charles
