Questa libreria ti consente di integrare perfettamente l'autenticazione di Google nella tua applicazione Next.js, eliminando la necessità di svilupparla da zero.

L'integrazione di un sistema di autenticazione sicuro è una fase di sviluppo cruciale che non solo fornisce un ambiente sicuro per gli utenti, ma infonde anche fiducia nel tuo prodotto. Questo sistema garantisce che i loro dati siano protetti e che solo le persone autorizzate possano accedere all'applicazione.

La creazione di un'autenticazione sicura da zero può essere un processo dispendioso in termini di tempo che richiede un'analisi approfondita comprensione dei protocolli e dei processi di autenticazione, soprattutto quando si gestiscono autenticazioni diverse fornitori.

Utilizzando NextAuth, puoi spostare la tua attenzione sulla creazione delle funzionalità principali. Continua a leggere per sapere come integrare l'accesso social di Google nella tua applicazione utilizzando NextAuth.

Come funziona NextAuth

SuccessivoAuth.js è una libreria di autenticazione open source che semplifica il processo di aggiunta

instagram viewer
autenticazione e autorizzazione funzionalità alle applicazioni Next.js e personalizzazione dei flussi di lavoro di autenticazione. Fornisce una gamma di funzionalità come e-mail, autenticazione senza password e supporto per vari provider di autenticazione come Google, GitHub e altri.

Ad alto livello, NextAuth funge da middleware, facilitando il processo di autenticazione tra la tua applicazione e il provider. Sotto il cofano, quando un utente tenta di accedere, viene reindirizzato alla pagina di accesso di Google. Dopo l'autenticazione, Google restituisce un payload che include i dati dell'utente, come il nome e l'indirizzo email. Questi dati vengono utilizzati per autorizzare l'accesso all'applicazione e alle sue risorse.

Utilizzando i dati del payload, NextAuth crea una sessione per ogni utente autenticato e archivia il token di sessione in un cookie solo HTTP sicuro. Il token di sessione viene utilizzato per verificare l'identità dell'utente e mantenere il suo stato di autenticazione. Questo processo si applica anche ad altri fornitori con lievi variazioni nell'implementazione.

Registra la tua applicazione Next.js su Google Developer Console

NextAuth fornisce supporto per il servizio di autenticazione di Google. Tuttavia, affinché la tua applicazione interagisca con le API di Google e consenta agli utenti di autenticarsi con le loro credenziali Google, dovrai registrare la tua app sulla console per sviluppatori di Google e ottenere un Identificativo cliente E Segreto del cliente.

Per farlo, vai a Console per gli sviluppatori di Google. Quindi, accedi con il tuo account Google per accedere alla console. Una volta effettuato l'accesso, crea un nuovo progetto.

Nella pagina della panoramica del progetto, seleziona il file API e servizi scheda dall'elenco dei servizi nel riquadro del menu a sinistra e, infine, il file Credenziali opzione.

Clicca sul Crea credenziali pulsante per generare l'ID client e il segreto client. Successivamente, specifica il tipo di applicazione dalle opzioni fornite e quindi fornisci un nome per la tua applicazione.

Successivamente, specifica l'URL della home route della tua app e infine specifica l'URI di reindirizzamento autorizzato per la tua applicazione. Per questo caso, dovrebbe essere http://localhost: 3000/api/auth/callback/google come specificato dalle impostazioni del provider Google di NextAuth.

Al termine della registrazione, Google ti fornirà un ID client e un segreto client da utilizzare nella tua app.

Configurare l'applicazione NextJS

Per iniziare, crea un progetto Next.js in locale:

npx create-next-app next-auth-app

Al termine dell'installazione, vai alla directory del progetto appena creata ed esegui questo comando per avviare il server di sviluppo.

npm esegue lo sviluppo

Apri il tuo browser e vai a http://localhost: 3000. Questo dovrebbe essere il risultato atteso.

Puoi trovare il codice di questo progetto nel suo file Deposito GitHub.

Impostazione del file .env

Nella cartella principale del tuo progetto, crea un nuovo file e assegnagli un nome .env per contenere l'ID cliente, il segreto e l'URL di base.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'Identificativo cliente'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'segreto'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

L'URL NextAUTH viene utilizzato per specificare l'URL di base dell'applicazione, utilizzato per reindirizzare gli utenti dopo il completamento dell'autenticazione.

Integra NextAuth nella tua applicazione Next.js

Innanzitutto, installa la libreria di NextAuth nel tuo progetto.

npm install next-auth

Successivamente, nel /pages directory, creare una nuova cartella e assegnarle un nome API. Cambia la directory in API folder e crea un'altra cartella chiamata aut. Nella cartella auth, aggiungi un nuovo file e assegnagli un nome [...nextauth].js e aggiungi le seguenti righe di codice.

importare AvantiAuth da"prossima-autenticazione/successiva";
importare Fornitore di Google da"prossima-autenticazione/provider/google";
esportarepredefinito ProssimaAuth({
 fornitori:[
 GoogleProvider({
 ID cliente: processo.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Questo codice configura Google come provider di autenticazione. La funzione NextAuth definisce l'oggetto di configurazione del provider Google che accetta due proprietà: un ID client e un segreto client che inizializza il provider.

Quindi, apri il file pagine/_app.js file e apportare le seguenti modifiche al codice.

importare'../styles/globals.css'
importare { Fornitore di sessione } da"prossima autenticazione/reazione"
funzioneMiaApp({ Component, pageProps: { session, ...pageProps } }) {
ritorno (


 </SessionProvider>
 )
}
esportarepredefinito MiaApp

AvantiAuth's Fornitore di sessione Il componente fornisce funzionalità di gestione dello stato di autenticazione all'app Next.js. Ci vuole un sessione prop che contiene i dati della sessione di autenticazione restituiti dall'API di Google che include i dettagli dell'utente come ID, email e token di accesso.

Avvolgendo il MiaApp componente con il componente SessionProvider, viene reso disponibile l'oggetto della sessione di autenticazione con i dettagli dell'utente in tutta l'applicazione, consentendo all'applicazione di persistere e rendere le pagine in base al loro stato di autenticazione.

Configura il file index.js

Apri il pagine/index.js file, eliminare il codice boilerplate e aggiungere il codice seguente per creare un pulsante di accesso che indirizza gli utenti a una pagina di accesso.

importare Testa da'successivo/testa'
importare stili da'../stili/Home.module.css'
importare {usaRouter} da'prossimo/router';
esportarepredefinitofunzioneCasa() {
cost router = usaRouter();

ritorno (





Crea la prossima app<<span>/title></span><br> <meta name="<span">"description" content=<span>"Generato da crea la prossima app"</span> /> <br> <link rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Benvenuto in <a href="<span">" https://nextjs.org">Next.js!<<span>/a></span><br> <<span>/h1></span></a>
</h1></main></p>
<p> </p>
<p classname="{styles.description}"><br> Inizia <span>accedendo</span>{<span>' ' </span>}<br> <codice classname="{styles.code}"><span>con</span> il tuo account Google<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Accedi<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></codice></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Questo codice utilizza l'hook Next.js <strong>useRouter</strong> per gestire il routing all'interno dell'applicazione definendo un oggetto router. Quando si fa clic sul pulsante di accesso, la funzione del gestore chiama il metodo <strong>router.push</strong> per reindirizzare l'utente alla pagina di accesso.</p> <h3 id="create-a-login-authentication-page">Crea un'autenticazione di accesso Pagina</h3> <p>Nella directory <strong>pages</strong>, crea un nuovo file <strong>Login.js</strong>, quindi aggiungi le seguenti righe di codice.</p> <pre> <code><span>importa</span> { useSession, signIn, signOut } <span>da</span> <span>"next-auth/react"</span><br><span>import</span> { useRouter } <span>da</span> <span>'prossimo /router'</span>;<br><span>importa</span> stili <span>da</span> <span>'../styles/Login.module.css'</span><p><span>export</span> <span>default</span> <span><span>function</span> < span>Login</span>() {<br> <span>const</span> { <span>data</span>: sessione } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (sessione) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Crea la prossima app<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Firmato < span>in <span>come</span> {session.user.email} <br><<span>/h2> </span><br> <div classname="{styles.btns}">
<br> <button classname="{styles.button}" onclick="{()"> router.push(<span>'/Profile'< /span>)}><br> Profilo utente<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Esci<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>ritorno</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Crea la prossima app<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Non hai eseguito l'accesso <span></span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Firma <span>in</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> e <strong>signOut</strong> sono hook forniti da <strong>next-auth</strong>. L'hook <strong>useSession</strong> viene utilizzato per accedere all'oggetto della sessione utente corrente una volta che un utente effettua l'accesso e viene autenticato correttamente da Google.</p> <p>Ciò consente a Next.js di mantenere lo stato di autenticazione e di visualizzare i dettagli dell'utente sul lato client dell'app, in questo caso il email.</p> <p>Inoltre, utilizzando l'oggetto sessione, puoi facilmente creare profili utente personalizzati per la tua applicazione e archiviare i dati in un database come come PostgreSQL. Puoi <span>connettere un database PostgreSQL con la tua applicazione Next.js utilizzando Prisma</span>.</p> <p>L'hook signOut consente a un utente di disconnettersi dall'applicazione. Questo hook eliminerà l'oggetto di sessione creato durante il processo di accesso e l'utente verrà disconnesso.</p> <p>Vai avanti e avvia il server di sviluppo per aggiorna le modifiche e vai all'applicazione Next.js in esecuzione sul browser per testare la funzionalità di autenticazione.</p> <pre> <code>npm run dev</code> </pre> <p>Inoltre, puoi <span>utilizzare Tailwind CSS con la tua app Next.js</span> per definire lo stile dei modelli di autenticazione.</p> <h2 id="authentication-using-nextauth"> Autenticazione tramite NextAuth  h2> </h2>
<p>NextAuth supporta più servizi di autenticazione che possono essere facilmente integrati nelle tue applicazioni Next.js per gestire il lato client autenticazione.</p> <p>Inoltre, puoi integrare un database per archiviare i dati dei tuoi utenti e il token di accesso per implementare lato server autenticazione per successive richieste di autenticazione poiché NextAuth fornisce supporto per diverse integrazioni di database.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre>