Implementazione dell'accesso senza password in un progetto Next.js 13 con NextAuth.js e Prisma

Questo articolo approfondirà i passaggi necessari per implementare l'autenticazione senza password in un progetto Next.js utilizzando la libreria NextAuth.js. Inoltre, utilizzeremo Prisma come adattatore di database per raggiungere questo obiettivo.

L'autenticazione senza password è un approccio innovativo che elimina la necessità di combinazioni tradizionali di nome utente e password. Offre invece un'esperienza di autenticazione più sicura e intuitiva sfruttando metodi alternativi, come collegamenti magici e-mail o codici monouso inviati tramite SMS.

Next.js è un popolare framework React per la creazione di applicazioni web, noto per la sua semplicità ed efficienza. Possiamo facilmente incorporare l'autenticazione senza password nel nostro progetto integrando NextAuth.js, una libreria di autenticazione progettata esplicitamente per Next.js.

Inoltre, faremo affidamento su Prisma come adattatore del database. Prisma è uno strumento ORM (Object-Relational Mapping) che semplifica le interazioni del database fornendo un generatore di query indipendente dai tipi e generato automaticamente. Supporta più database, tra cui PostgreSQL, MySQL e SQLite, rendendolo una scelta versatile per la nostra implementazione dell'autenticazione.

In questa guida forniremo istruzioni dettagliate su come impostare e configurare l'autenticazione senza password utilizzando NextAuth.js in un progetto Next.js. Dimostreremo anche come integrare Prisma come adattatore per database, consentendo una comunicazione continua tra la nostra applicazione e il database.

Esploreremo ora come migliorare la sicurezza e l'esperienza utente della nostra applicazione Next.js utilizzando l'autenticazione senza password e le funzionalità di NextAuth.js e Prisma. Cominciamo.

Cos'è l'accesso senza password?

L'accesso senza password, come suggerisce il nome, è un metodo di autenticazione che elimina la necessità delle tradizionali combinazioni di nome utente e password. Utilizza invece mezzi alternativi per verificare l'identità di un utente, come collegamenti magici via e-mail o codici monouso inviati tramite SMS. Questo approccio offre numerosi vantaggi rispetto ai metodi di accesso tradizionali. In primo luogo, elimina il rischio di vulnerabilità legate alle password, come password deboli o riutilizzo delle password. In secondo luogo, semplifica l'esperienza dell'utente eliminando la necessità di ricordare e inserire password complesse.

Per implementare l'accesso senza password utilizzando collegamenti magici e-mail o codici monouso, abbiamo bisogno di un server SMTP (Simple Mail Transfer Protocol).

Un server SMTP è responsabile dell'invio di e-mail su Internet. Nel contesto dell'autenticazione senza password, il server invia i magic link o i codici monouso all'indirizzo e-mail registrato dell'utente. Quando un utente avvia la procedura di accesso, viene generata e inviata all'utente un'e-mail contenente un collegamento o un codice univoco. L'utente può quindi fare clic sul collegamento o inserire il codice per completare il processo di autenticazione. Il server SMTP funge da intermediario tra l'applicazione e il servizio di posta elettronica dell'utente, garantendo la consegna sicura e affidabile dei messaggi di autenticazione. Utilizzando un server SMTP, possiamo implementare in modo efficace l'accesso senza password e fornire un'esperienza di autenticazione senza interruzioni per i nostri utenti.

Iniziamo!

Innanzitutto, dobbiamo generare un nuovo progetto Next.js. Per fare ciò, utilizzare il seguente comando:

npx create-next-app@latest

Dopo aver generato il nuovo progetto Next.js, puoi accedere alla directory del progetto appena creato.

Cambiando la directory nel progetto, potrai esplorare le varie cartelle e file che compongono la struttura del progetto Next.js.

Comprendere la struttura del progetto è essenziale per uno sviluppo e un'organizzazione efficaci della tua applicazione Next.js. Facendo riferimento alla documentazione ufficiale, puoi sfruttare le migliori pratiche e ottenere informazioni su come strutturare il codice, gestire le risorse statiche e creare componenti riutilizzabili.

Installazione delle nostre dipendenze

Per abilitare l'autenticazione senza password nel nostro progetto Next.js utilizzando NextAuth.js, dobbiamo prima installare le dipendenze richieste. Esegui il comando yarn add next-auth nodemailer per aggiungere sia NextAuth.js che nodemailer al nostro progetto.

Utilizziamo specificamente nodemailer poiché è un modulo popolare e versatile per l'invio di e-mail in Node.js. Fornisce un modo semplice e affidabile per inviare tramite e-mail i collegamenti magici o i codici monouso richiesti per l'autenticazione senza password.

Successivamente, integriamo Prisma come nostro adattatore di database. Inizia installando i pacchetti Prisma richiesti utilizzando il comando:

yarn add @prisma/client @next-auth/prisma-adapter

Questi pacchetti consentiranno una comunicazione continua tra la nostra applicazione Next.js e il database. Inoltre, dobbiamo anche installare Prisma come dipendenza dello sviluppatore eseguendo:

yarn add prisma --dev

Questo passaggio garantisce la disponibilità degli strumenti necessari per lavorare con Prisma e il suo generatore di query generato automaticamente per le interazioni con il database.

Installando queste dipendenze, poniamo le basi per l'implementazione dell'autenticazione senza password utilizzando NextAuth.js e Prisma nel nostro progetto Next.js.

Configura Prisma

È necessario configurare Prisma e avere accesso a un server SMTP per l'invio di e-mail per utilizzare l'autenticazione senza password in un progetto Next.js. Questo tutorial ti guiderà attraverso l'utilizzo del tuo account Gmail personale per inviare e-mail. Seguire i passaggi seguenti per una configurazione corretta.

Innanzitutto, crea una cartella "prisma" nella radice del tuo progetto. Questa cartella ospiterà i file e le configurazioni relativi a Prisma. Quindi, all'interno della cartella "prisma", crea un nuovo file chiamato "schema.prisma". Il file di schema definisce la struttura del tuo database e funge da modello per il codice generato automaticamente da Prisma.

Se sei nuovo al concetto di schema, non preoccuparti! Uno schema specifica le tabelle, i campi, le relazioni e i vincoli del database. Per creare lo schema, puoi fare riferimento alla documentazione ufficiale di NextAuth.js e copiare lo schema di esempio fornito lì. Questo schema è un punto di partenza e può essere personalizzato per soddisfare i requisiti dell'applicazione.

Successivamente, crea un file ".env" nella radice del tuo progetto. Questo file memorizzerà le variabili di ambiente, incluse le configurazioni necessarie per il tuo server SMTP. Per popolare il file ".env", è possibile copiare le configurazioni di esempio fornite di seguito. Assicurati di inserire le credenziali del tuo account Gmail e le impostazioni del server SMTP nei campi corrispondenti.

EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"

NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret

Seguendo questi passaggi, avrai impostato Prisma e configurato il server SMTP per l'invio di email utilizzando il tuo account Gmail. Questi preparativi sono cruciali per abilitare il flusso di autenticazione senza password nel tuo progetto Next.js.

Nota

Devi creare una password per l'app se hai abilitato l'autenticazione a due fattori (2FA) per il tuo account Google. Una password per l'app è una password distinta che consente l'accesso a particolari app o dispositivi senza esporre la password del tuo account Google principale. Segui le istruzioni riportate di seguito per generare una password per l'app.

1. Vai alla pagina delle impostazioni dell'Account Google visitando https://myaccount.google.com/.

2. Passare alla scheda "Sicurezza".

3. Cerca la sezione "2FA", scorri verso il basso e seleziona "Password app".

4. Potrebbe esserti richiesto di inserire nuovamente la password del tuo account Google per la verifica di sicurezza.

5. Nel menu a discesa "Seleziona app", scegli "Posta" o "Altro (nome personalizzato)".

• Se l'opzione "Posta" è disponibile, selezionala.

• Se l'opzione "Posta" non è disponibile, scegli "Altro (nome personalizzato)" e fornisci un nome personalizzato per l'identificazione.

6. Fare clic sul pulsante "Genera" o "Genera password".

7. Google genererà per te una password univoca per l'app. Prendi nota di questa password, poiché la utilizzeremo nella nostra applicazione per l'invio di e-mail.

8. Utilizza la password dell'app generata nella configurazione del server SMTP dell'applicazione Next.js. Sostituisci la normale password del tuo account Gmail con questa password dell'app.

Ciò garantisce che anche con 2FA abilitato, la tua applicazione possa inviare e-mail in modo sicuro utilizzando il tuo account Gmail.

PostgreSQL utilizzando Supabase

Prima di poter procedere, dobbiamo assicurarci che il database per il nostro progetto funzioni correttamente. Per questa demo, ti consigliamo di utilizzare il database Supabase PostgreSQL. Per iniziare con un progetto Supabase e ottenere l'URL di connessione PostgreSQL, attenersi alla seguente procedura:

1. Vai su supabase.io e accedi al tuo account o creane uno nuovo se non ne hai uno.

2. Una volta effettuato l'accesso, verrai indirizzato alla dashboard di Supabase. Fare clic su "Crea nuovo progetto" per avviare un nuovo progetto.

3. Dai un nome al tuo progetto e seleziona la regione più vicina alla tua posizione attuale. Ricorda la tua password, ti servirà più tardi.

4. Una volta creato il progetto, verrai indirizzato alla dashboard del progetto. Fai clic su "Database" nella barra laterale sinistra per accedere alle impostazioni del database.

5. Nella sezione "Database", troverai l'URL di connessione PostgreSQL. Questo URL contiene tutte le informazioni necessarie per connettersi al database del tuo progetto Supabase, come host, porta, nome del database, nome utente e password. Verrà visualizzato nel formato: postgres://<nome utente>:<password>@<host>:<porta>/<database>

6. Copia l'URL di connessione PostgreSQL e mantienilo sicuro. Ne avrai bisogno per stabilire una connessione tra la tua applicazione e il database Supabase.

    // .env
    
    DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
    ```

Ora assicuriamoci di generare il nostro client Prisma eseguendo il seguente comando: `npx prisma generate`.

Il Prisma Client è un client di database generato automaticamente in base al tuo schema. Per impostazione predefinita, Prisma Client viene generato nella cartella `node_modules/.prisma/client`, ma puoi [specificare una posizione personalizzata se necessario](https://www.prisma.io/docs/concepts/components/prisma-client/lavorare-con-prismaclient/generare-prisma-client#usando-un-percorso-di-output-personalizzato).

Successivamente, procederemo alla creazione della nostra migrazione iniziale. Esegui il seguente comando: "npx prisma migrate dev". Puoi assegnare a ciascuna migrazione un nome descrittivo.

In Prisma, una migrazione è un metodo utilizzato per gestire le modifiche allo schema del database col passare del tempo. Ti consente di modificare la struttura del tuo database senza perdere alcun dato preesistente. Queste migrazioni sono cruciali poiché garantiscono che lo schema del database sia in linea con le esigenze dell'applicazione man mano che cambiano. Con lo strumento di migrazione di Prisma, puoi comodamente versione, applicare e ripristinare queste modifiche, semplificando il lavoro di squadra e mantenendo uno schema di database uniforme in vari ambienti.

Ora, se controlliamo il nostro database, saremo in grado di vedere le modifiche rispetto alla nostra migrazione iniziale riflesse nella sezione del database.

Eseguendo la migrazione iniziale, abbiamo applicato le modifiche allo schema del nostro database come definito nello script di migrazione.

![Database Tables after Migration](https://drive.google.com/uc?export=view&id=1PZ6ban5h4VZs3UHQoJS_5kNYkhqs-MAx)

### Configurazione di NextAuthJS con Prisma Adapter

In un'applicazione Next.js, NextAuthJS utilizza la route catch-all, nota anche come percorso jolly o fallback, per gestire le richieste di autenticazione. Questo percorso dinamico viene definito utilizzando il sistema di routing basato su file in Next.js.

Crea una cartella denominata "**api**" all'interno della directory "**app**". All'interno della cartella "**api**", crea una cartella "**auth**". All'interno della cartella "**auth**", crea un percorso catch-all chiamato "**[...nextauth]**" come cartella. Infine, crea un file "**route.ts**" all'interno della cartella catch-all del percorso e aggiungi il seguente codice.

```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';

const prisma = new PrismaClient();

export const authOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    EmailProvider({
      server: {
        host: process.env.EMAIL_SERVER_HOST,
        port: process.env.EMAIL_SERVER_PORT,
        auth: {
          user: process.env.EMAIL_SERVER_USER,
          pass: process.env.EMAIL_SERVER_PASSWORD,
        },
      },
      from: process.env.EMAIL_FROM,
    }),
  ]
};

const handler = NextAuth(authOptions);

export { handler as GET, handler as POST };

Nel file di route catch-all, importiamo la libreria NextAuthJS e configuriamo le opzioni di autenticazione, i provider e le configurazioni. NextAuthJS gestisce l'analisi delle richieste in entrata, identifica l'azione di autenticazione necessaria ed esegue la logica appropriata in base alle opzioni specificate.

Il codice fornito configura NextAuthJS con l'adattatore Prisma per l'autenticazione utilizzando un provider di posta elettronica. Spieghiamo ogni affermazione:

1. Importazioni:

• PrismaAdapter e PrismaClient vengono importati rispettivamente da @next-auth/prisma-adapter e @prisma/client. Questi vengono utilizzati per integrare NextAuthJS con Prisma.

• NextAuth viene importato da next-auth ed è la libreria principale per la gestione dell'autenticazione nelle applicazioni Next.js.

• EmailProvider viene importato da next-auth/providers/email e viene utilizzato come provider per l'autenticazione basata su posta elettronica.

2. Impostazione Prisma:

• Un'istanza di PrismaClient viene creata utilizzando new PrismaClient(). Ciò consente la comunicazione con Prisma ORM e il database sottostante.

3. Opzioni di autenticazione:

• authOptions è un oggetto che definisce la configurazione per l'autenticazione in NextAuthJS.

• La proprietà adapter è impostata su PrismaAdapter(prisma), che collega NextAuthJS con Prisma utilizzando PrismaAdapter.

• L'array providers contiene un singolo provider, EmailProvider. È configurato con i dettagli necessari del server di posta elettronica e l'indirizzo email da.

4. Gestore NextAuth:

• La funzione NextAuth viene chiamata con authOptions come argomento, creando un gestore di autenticazione.

• Il gestore risultante viene assegnato alla variabile handler.

5. Esporta:

• handler viene esportato come GET e POST per supportare sia le richieste HTTP GET che POST.

Ora eseguiamo il nostro server e testiamo la funzionalità. Innanzitutto, avvia il server di sviluppo eseguendo "yarn dev". Successivamente, apri il browser e visita localhost:3000 per vedere l'applicazione in azione.

Per testare la funzionalità di autenticazione, visitare localhost:3000/api/auth/signin. Qui sperimenterai la magia di NextAuthJS. Il modello fornito incluso con NextAuthJS consente un processo di accesso senza password. Per provarlo, inserisci un indirizzo email valido.

Una volta inviata l'e-mail, NextAuthJS gestirà il processo dietro le quinte. Innanzitutto, genererà e invierà un'e-mail contenente un collegamento di accesso univoco all'indirizzo e-mail fornito. Questo collegamento funge da token di autenticazione sicura per l'utente. Quindi, quando l'utente fa clic sul collegamento, NextAuthJS convaliderà il token e autenticherà l'utente.

Questa funzionalità di accesso senza password migliora la sicurezza e l'esperienza dell'utente eliminando la necessità di password. Gli utenti possono accedere in modo rapido e sicuro ai propri account semplicemente facendo clic sul collegamento ricevuto via e-mail. Semplifica il processo di accesso e riduce il rischio di vulnerabilità legate alla password.

Quando un utente fa clic sull'e-mail di accesso generata da NextAuthJS e viene autenticato, dietro le quinte vengono eseguite diverse azioni per facilitare un'esperienza di accesso senza interruzioni.

1. Convalida del collegamento e-mail: quando l'utente fa clic sul collegamento di accesso, NextAuthJS convalida il token di autenticazione incorporato nel collegamento. Questo token garantisce la sicurezza e l'integrità del processo di autenticazione.

2. Processo di autenticazione: una volta completata con successo la convalida del token, NextAuthJS identifica l'utente e completa il processo di autenticazione. Verifica l'identità dell'utente in base al token fornito e a eventuali fattori di autenticazione aggiuntivi configurati, come l'autenticazione a più fattori.

3. Creazione della sessione: dopo aver eseguito con successo l'autenticazione, NextAuthJS crea una sessione per l'utente. Una sessione è uno stato persistente che rappresenta lo stato di autenticazione dell'utente e gli consente di accedere alle risorse protette senza doversi autenticare nuovamente per le richieste successive.

4. Cookie: NextAuthJS imposta cookie sicuri solo HTTP nel browser dell'utente per gestire la sessione. Questi cookie svolgono un ruolo cruciale nel mantenere lo stato autenticato dell'utente attraverso più richieste. I cookie in genere includono un cookie di sessione e facoltativamente un cookie del token di aggiornamento, a seconda della configurazione di autenticazione.

1. Cookie di sessione: il cookie di sessione contiene un identificatore di sessione (ad esempio, una stringa generata casualmente) che identifica in modo univoco la sessione dell'utente. Aiuta NextAuthJS ad associare le richieste successive alla sessione e all'utente corretti.

2. Cookie token CSRF: NextAuthJS imposta un cookie token CSRF (Cross-Site Request Forgery) per proteggere dagli attacchi CSRF. Il token CSRF è un valore univoco generato da NextAuthJS e memorizzato nel cookie. Viene utilizzato per validare e verificare l'autenticità delle successive richieste effettuate dall'utente. Quando l'utente invia moduli o esegue azioni sensibili, il token CSRF viene incluso nelle intestazioni o nel corpo della richiesta per garantire che la richiesta provenga dalla sessione dell'utente autenticato e non da una fonte dannosa.

3. Cookie URL di richiamata: NextAuthJS imposta un cookie URL di richiamata per memorizzare l'URL originale a cui l'utente stava tentando di accedere prima di essere reindirizzato al flusso di autenticazione. Questo cookie aiuta NextAuthJS a reindirizzare l'utente alla pagina desiderata dopo aver eseguito con successo l'autenticazione. Garantisce un'esperienza utente fluida riportando l'utente senza problemi alla destinazione prevista invece che a una pagina di destinazione generica.

Utilizzando cookie sicuri solo HTTP, NextAuthJS garantisce che lo stato di autenticazione rimanga sicuro e a prova di manomissione. I cookie sono crittografati, impedendo l'accesso non autorizzato o la modifica da parte di soggetti malintenzionati.

Ottimo lavoro per aver integrato con successo NextAuthJS con l'adattatore Prisma nella tua applicazione Next.js! Con la facilità e l'adattabilità fornite da NextAuthJS, ora disponi di un sistema di autenticazione affidabile.

Controlla il repository GitHub collegato di seguito per il codice utilizzato in questa guida: https://github.com/codelabsacademy/next-auth-guide.

Ma perché fermarsi qui? Se sei appassionato di sviluppo web e desideri migliorare le tue capacità, valuta la possibilità di iscriverti al nostro bootcamp di sviluppo web. Il nostro bootcamp offre un'esperienza di apprendimento completa, fornendoti le conoscenze e le abilità pratiche necessarie per eccellere nel dinamico mondo dello sviluppo web.

Unendoti al nostro bootcamp, acquisirai esperienza pratica con tecnologie all'avanguardia, lavorerai su progetti reali e riceverai indicazioni personalizzate da esperti del settore. Che tu sia un principiante o uno sviluppatore esperto, il nostro programma è progettato per portare le tue capacità di sviluppo web a un livello superiore.

Non perdere questa opportunità per accelerare il tuo percorso di sviluppo web. Richiedi oggi stesso il nostro bootcamp sullo sviluppo web e sblocca tutto il tuo potenziale nell'entusiasmante campo dello sviluppo web. Insieme, creiamo esperienze digitali straordinarie e modelliamo il futuro del Web.