I lettori come te aiutano a sostenere MUO. Quando effettui un acquisto utilizzando i link sul nostro sito, potremmo guadagnare una commissione di affiliazione. Per saperne di più.

L'autenticazione è un componente chiave dello sviluppo delle applicazioni. Aiuta a proteggere i dati degli utenti e prevenire attività dannose. In poche parole, determina la credibilità dell'identità di un utente, assicurando che solo gli utenti autorizzati possano accedere a un'applicazione e alle sue risorse.

La creazione di un sistema di autenticazione personalizzato può richiedere molto tempo ed è qui che NextAuth.js torna utile. Fornisce un supporto di autenticazione sicuro per le applicazioni create con il framework Next.js.

Cos'è NextAuth.js?

SuccessivoAuth.js è una libreria leggera open source che fornisce autenticazione e autorizzazione supporto per le applicazioni Next.js. Consente agli sviluppatori di configurare rapidamente e facilmente l'autenticazione e l'autorizzazione per le loro app Next.js. Fornisce funzionalità come l'autenticazione con più provider, e-mail e autenticazione senza password.

instagram viewer

Come funziona NextAuth.js nell'autenticazione?

La soluzione di autenticazione di NextAuth.js fornisce un'API lato client che puoi integra nella tua applicazione Next.js. Puoi usarlo per autenticare gli utenti con diversi provider di accesso con cui hanno creato account.

Sotto il cofano, gli utenti vengono reindirizzati alla pagina di accesso di un provider. Al termine dell'autenticazione, il provider restituisce i dati della sessione che contengono il payload dell'utente. Questo payload può quindi autorizzare l'accesso all'applicazione e alle relative risorse.

Nuovi aggiornamenti delle funzionalità in NextAuth.js (v4)

Nel dicembre 2022, NextAuth.js ha rilasciato la sua quarta versione. Questa versione è stata migliorata rispetto alla versione precedente, v3, con nuovi aggiornamenti e modifiche. Le modifiche si concentrano principalmente sul miglioramento dell'utilizzo della libreria nel processo di autenticazione.

1. Aggiornamenti all'hook useSession

È possibile utilizzare l'hook useSession per verificare se un utente è connesso o meno. In questa nuova versione, l'hook useSession restituisce un oggetto che fornisce un modo più diretto per testare gli stati, grazie all'aggiunta dell'opzione status. Vedi il codice qui sotto:

importare {usaSessione} da"prossima autenticazione/reazione"
esportarepredefinitofunzioneComponente() {
cost { dati: sessione, stato } = useSession()


Se (stato "autenticato") { 
ritorno<P>Accesso eseguito come {session.user.email}P>
 }
ritorno<P> Accesso non eseguito P>
}

2. Il contesto SessionProvider diventa obbligatorio

La nuova versione quattro impone l'utilizzo del contesto SessionProvider. Ciò significa che dovrai avvolgere la tua app con useSession Provider. NextAuth.js consiglia di avvolgere la tua app all'interno del file _app.jsx file.

Inoltre, il metodo clientMaxAge è stato sostituito con refetchInterval. Ciò semplificherà il recupero periodico della sessione in background.

importare { Fornitore di sessione } da"prossima autenticazione/reazione"
esportarepredefinitofunzioneApp({
 Componente, pageProps: { sessione, ...pageProps }, 
}) {
ritorno ( 
<Fornitore di sessionesessione={sessione}refetchIntervallo={5 * 60}>
<Componente {...pageProps} />Fornitore di sessione>
 )
}

3. Importazione di fornitori singolarmente

NextAuth.js fornisce diversi servizi di provider che puoi utilizzare per accedere a un utente. Loro includono:

  • Utilizzo di provider OAuth integrati (ad es. GitHub, Google).
  • Utilizzo del provider di posta elettronica.

In questa nuova versione, devi importare ogni provider singolarmente.

importare Fornitore di Google da"prossima-autenticazione/provider/google"
importare Auth0Provider da"prossima-autenticazione/provider/auth0";

4. Altre modifiche minori

  • L'importazione lato client è stata rinominata in next-auth/react da next-auth/client.
  • Modifiche agli argomenti dei metodi di callback: 
    signIn({ utente, account, profilo, email, credenziali })
    sessione({ sessione, token, utente })
    jwt({ token, utente, account, profilo, isNewUser })

Introduzione a NextAuth.js nell'autenticazione

Per integrare NextAuth.js nelle tue applicazioni Next.js, procedi nel seguente modo:

  1. Crea un'applicazione Next.js eseguendo questo comando: npx create-next-app
  2. Correre npm install next-auth nel tuo terminale per installare NextAuth.js nella tua applicazione Next.js.
  3. Visitare il SuccessivoAuth.js documentazione ufficiale e selezionare il/i fornitore/i preferito/i dall'elenco di quelli supportati. Successivamente, crea un account nella console per sviluppatori del/i provider selezionato/i e registra la tua applicazione Next.js.
  4. Nella console per sviluppatori del/i provider selezionato/i, specifica il file URL del percorso di casa e il URL di reindirizzamento della richiamata, salva le modifiche e copia il file Identificativo cliente E Segreto del cliente.
  5. Nella directory principale dell'applicazione Next.js, crea un file .env per contenere il file Identificativo cliente E Segreto del cliente.
  6. Infine, nella directory /pages/api, crea una nuova cartella chiamata aut. Nella cartella auth, crea un nuovo file e chiamalo [...nextauth].js. Nel file creato, aggiungi il codice qui sotto. Il codice mostra l'API lato client NextAuth.js utilizzando un provider Google: 
importare Fornitore di Google da"prossima-autenticazione/provider/google";
fornitori: [
 GoogleProvider({
Identificativo cliente: processi.env.GOOGLE_CLIENT_ID,
clientSecret: processi.env.GOOGLE_CLIENT_SECRET
 })
]

Ora puoi andare avanti e creare una pagina di autenticazione dell'accesso. Ecco un rendering DOM per un componente di accesso:

importare Reagire da'reagire';
importare { useSession, signIn, signOut } da"prossima autenticazione/reazione"
esportarepredefinitofunzioneComponente() {
cost { dati: sessione } = useSession()


 se (sessione) {
ritorno (
<>
<P> Accesso eseguito come {session.user.email} P>
<pulsanteal clic={() => signOut()}>Escipulsante>

 )
 }
ritorno (
<>
<P> Accesso non eseguito P>
<pulsanteal clic={() => signIn()}>Accedipulsante>

 )
}

IL useSession Hook accede all'oggetto della sessione utente corrente. Una volta che un utente accede e viene autenticato da Google, viene restituito un oggetto sessione con il payload dell'utente. Ciò consente a Next.js di eseguire il rendering dei dettagli dell'utente sul lato client dell'app, in questo caso l'e-mail.

Sistemi di autenticazione personalizzati vs. Soluzioni pronte all'uso come NextAuth.js

Scegliere tra la creazione di un sistema di autenticazione personalizzato e l'integrazione di un'autenticazione pronta all'uso soluzione come NextAuth.js, è importante considerare il costo, la complessità e la sicurezza di ciascuno soluzione.

Se disponi delle risorse e delle competenze per sviluppare un sistema di autenticazione personalizzato, questo potrebbe essere l'approccio migliore per te. Tuttavia, se stai cercando una soluzione pronta all'uso che sia facile da implementare, sicura e conveniente, NextAuth.js potrebbe essere una buona scelta da prendere in considerazione. In definitiva, la scelta dipenderà dalle tue esigenze e preferenze.