React Academy · Lezione

Credentials Provider e login personalizzato

Autentichi gli utenti tramite un database con un credentials provider e un form di login personalizzato.

Credentials Provider e login personalizzato è una lezione React Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento React Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso React Academy include 4 lezioni in totale.

Quando utilizzare il Credentials provider

Utilizzi il provider Credentials quando esegue l'autenticazione tramite il proprio database (email e password) invece di un provider OAuth. È necessaria una gestione attenta dell'hashing delle password e della sicurezza.

Definire il Credentials provider

Aggiunga Credentials all'array dei provider. La funzione authorize riceve le credenziali inviate e restituisce un oggetto utente oppure 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 };
      },
    }),
  ],
});

Modulo di accesso personalizzato

Crei un modulo di accesso come Client Component che chiami signIn('credentials', { email, password }) da 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 per la gestione degli errori

Passi redirect: false a signIn() per ricevere l'oggetto risultato e gestire gli errori nel componente invece di essere reindirizzato a una pagina di errore.

const result = await signIn('credentials', { email, password, redirect: false });
if (result?.error) {
  // result.error is 'CredentialsSignin' for auth failures
  setError('Invalid email or password');
}

Validazione Zod in authorize

Convalidi le credenziali con Zod all'interno della funzione authorize prima di accedere al database.

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
}

Strategia di sessione per le credenziali

Il provider delle credenziali richiede una strategia di sessione JWT, senza bisogno di un adapter per il database per le sessioni. Imposti esplicitamente session: { strategy: 'jwt' }.

export const { handlers, auth } = NextAuth({
  session: { strategy: 'jwt' },
  providers: [Credentials({ ... })],
});

Aggiungere campi personalizzati alla sessione

Passi i dati aggiuntivi dell'utente attraverso le callback JWT e della sessione per renderli disponibili in 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;
  },
},

Hash delle password

Esegua sempre l'hashing delle password con bcrypt prima di salvarle. Non salvi mai le password in testo semplice.

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);

Limitare la frequenza dei tentativi di accesso

Protegga l'endpoint delle credenziali dagli attacchi brute force limitando la frequenza dei tentativi di accesso tramite middleware o uno store in memoria.

// 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;

Flusso di registrazione

La registrazione è separata da Auth.js: crei l'utente nel database, con la password sottoposta ad hashing, tramite una Server Action o una API route, quindi effettui l'accesso con signIn('credentials', ...).

Verifica rapida

Perché dovrebbe passare redirect: false quando chiama signIn() in un modulo di accesso personalizzato?

Riepilogo

Il provider delle credenziali chiama la funzione authorize con i dati inviati dal modulo. Convalidi i dati con Zod, confronti le password sottoposte ad hashing con bcrypt e restituisca un oggetto utente oppure null. Utilizzi redirect: false nel modulo per gestire gli errori personalizzati e usi sempre la strategia JWT con le credenziali.

Domande Frequenti

La lezione «Credentials Provider e login personalizzato» è gratuita?

Sì — il testo completo di «Credentials Provider e login personalizzato» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso React Academy, passa a CoddyKit PRO. Il corso React Academy include 4 lezioni in totale.

Cosa imparerò in «Credentials Provider e login personalizzato»?

Autentichi gli utenti tramite un database con un credentials provider e un form di login personalizzato. Eserciti React Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare React Academy?

Non è richiesta alcuna esperienza precedente. React Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Credentials Provider e login personalizzato»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione React Academy?

Sì. Ogni lezione React Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

Configurazione di Auth.js nell'App Router di Next.js
Gestione delle sessioni e hook useSession
Credentials Provider e login personalizzato
Protezione delle route basata sul middleware

← Torna a React Academy