Fournisseur d’identifiants et connexion personnalisée
Authentifiez les utilisateurs auprès d’une base de données avec un fournisseur d’identifiants et un formulaire de connexion personnalisé.
Fournisseur d’identifiants et connexion personnalisée est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Quand utiliser le fournisseur Credentials
Utilisez le fournisseur Credentials lorsque vous vous authentifiez auprès de votre propre base de données (adresse e-mail et mot de passe), plutôt qu’auprès d’un fournisseur OAuth. Cette approche exige une gestion rigoureuse du hachage des mots de passe et de la sécurité.
Définir le fournisseur Credentials
Ajoutez Credentials au tableau des fournisseurs. La fonction authorize reçoit les identifiants envoyés et renvoie un objet utilisateur ou null.
import Credentials from 'next-auth/providers/credentials';
import bcrypt from 'bcryptjs';
export const { handlers, auth } = NextAuth({
providers: [
Credentials({
name: 'Credentials',
credentials: {
email: { label: 'Email', type: 'email' },
password: { label: 'Password', type: 'password' },
},
async authorize(credentials) {
const user = await db.user.findUnique({ where: { email: credentials.email as string } });
if (!user) return null;
const valid = await bcrypt.compare(credentials.password as string, user.passwordHash);
if (!valid) return null;
return { id: user.id, name: user.name, email: user.email };
},
}),
],
});Formulaire de connexion personnalisé
Créez un formulaire de connexion sous la forme d’un composant client qui appelle signIn('credentials', { email, password }) depuis next-auth/react.
'use client';
import { signIn } from 'next-auth/react';
export function LoginForm() {
const [error, setError] = useState('');
async function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
e.preventDefault();
const form = new FormData(e.currentTarget);
const result = await signIn('credentials', {
email: form.get('email'),
password: form.get('password'),
redirect: false, // handle redirect manually
});
if (result?.error) setError('Invalid email or password');
else router.push('/dashboard');
}
return (
<form onSubmit={handleSubmit}>
{error && <p className="error">{error}</p>}
<input name="email" type="email" required />
<input name="password" type="password" required />
<button type="submit">Sign in</button>
</form>
);
}redirect: false pour gérer les erreurs
Passez redirect: false à signIn() pour recevoir l’objet de résultat et gérer les erreurs dans le composant au lieu d’être redirigé vers une page d’erreur.
const result = await signIn('credentials', { email, password, redirect: false });
if (result?.error) {
// result.error is 'CredentialsSignin' for auth failures
setError('Invalid email or password');
}Validation Zod dans authorize
Validez les identifiants avec Zod dans la fonction authorize avant d’interroger la base de données.
import { z } from 'zod';
const schema = z.object({ email: z.string().email(), password: z.string().min(8) });
async authorize(credentials) {
const parsed = schema.safeParse(credentials);
if (!parsed.success) return null;
const { email, password } = parsed.data;
// ... db lookup
}Stratégie de session pour les identifiants
Le fournisseur d’identifiants nécessite une stratégie de session JWT (aucun adaptateur de base de données n’est nécessaire pour les sessions). Définissez explicitement session: { strategy: 'jwt' }.
export const { handlers, auth } = NextAuth({
session: { strategy: 'jwt' },
providers: [Credentials({ ... })],
});Ajouter des champs personnalisés à la session
Transmettez des données utilisateur supplémentaires via les callbacks JWT et de session pour les exposer dans useSession().
callbacks: {
async jwt({ token, user }) {
if (user) { token.id = user.id; token.role = user.role; }
return token;
},
async session({ session, token }) {
session.user.id = token.id as string;
session.user.role = token.role as string;
return session;
},
},Hachage des mots de passe
Hachez toujours les mots de passe avec bcrypt avant de les stocker. Ne stockez jamais les mots de passe en clair.
import bcrypt from 'bcryptjs';
// On registration:
const passwordHash = await bcrypt.hash(password, 12);
await db.user.create({ data: { email, passwordHash } });
// On login (in authorize):
const valid = await bcrypt.compare(submittedPassword, user.passwordHash);Limiter le débit des tentatives de connexion
Protégez le point d’accès des identifiants contre les attaques par force brute en limitant le débit des tentatives de connexion à l’aide de l’intergiciel ou d’un stockage en mémoire.
// middleware.ts or in a rate-limiting library
import { Ratelimit } from '@upstash/ratelimit';
import { Redis } from '@upstash/redis';
const ratelimit = new Ratelimit({ redis: Redis.fromEnv(), limiter: Ratelimit.slidingWindow(10, '10 s') });
// Check in authorize before DB query:
const { success } = await ratelimit.limit(credentials.email as string);
if (!success) return null;Flux d’inscription
L’inscription est distincte d’Auth.js : créez l’utilisateur dans votre base de données (avec un mot de passe haché) via une action serveur ou une route API, puis connectez-le avec signIn('credentials', ...).
Vérification rapide
Pourquoi devez-vous transmettre redirect: false lors de l’appel à signIn() dans un formulaire de connexion personnalisé ?
Récapitulatif
Le fournisseur d’identifiants appelle votre fonction authorize avec les données envoyées par le formulaire. Validez-les avec Zod, comparez les mots de passe hachés avec bcrypt et renvoyez un objet utilisateur ou null. Utilisez redirect: false dans le formulaire pour gérer les erreurs personnalisées et utilisez toujours une stratégie JWT avec les identifiants.
Questions Fréquemment Posées
La leçon « Fournisseur d’identifiants et connexion personnalisée » est-elle gratuite ?
Oui — le texte complet de « Fournisseur d’identifiants et connexion personnalisée » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Fournisseur d’identifiants et connexion personnalisée » ?
Authentifiez les utilisateurs auprès d’une base de données avec un fournisseur d’identifiants et un formulaire de connexion personnalisé. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Fournisseur d’identifiants et connexion personnalisée » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Configurer Auth.js dans l’App Router de Next.js
- Gestion des sessions et hook useSession
- Fournisseur d’identifiants et connexion personnalisée
- Protection des routes basée sur un middleware