Slik integrerer du Google-autentisering i Next.js-apper ved å bruke NextAuth

Integrering av et sikkert autentiseringssystem er et viktig utviklingstrinn som ikke bare gir et trygt miljø for brukerne, men som også skaper tillit til produktet ditt. Dette systemet sikrer at dataene deres er beskyttet og at kun autoriserte personer har tilgang til applikasjonen.

Å bygge en sikker autentisering fra grunnen av kan være en tidkrevende prosess som krever en grundig forståelse av autentiseringsprotokoller og prosesser, spesielt ved håndtering av annen autentisering tilbydere.

Ved å bruke NextAuth kan du flytte fokus til å bygge kjernefunksjonene. Les videre for å lære hvordan du integrerer Googles sosiale pålogging i applikasjonen din ved hjelp av NextAuth.

Hvordan fungerer NextAuth

NextAuth.js er et åpen kildekode-autentiseringsbibliotek som forenkler prosessen med å legge til autentisering og autorisasjon funksjonalitet til Next.js-applikasjoner samt tilpasse autentiseringsarbeidsflyter. Den gir en rekke funksjoner som e-post, passordløs autentisering og støtte for ulike autentiseringsleverandører som Google, GitHub og mer.

På et høyt nivå fungerer NextAuth som en mellomvare, og letter autentiseringsprosessen mellom applikasjonen din og leverandøren. Under panseret, når en bruker prøver å logge på, blir de omdirigert til Googles påloggingsside. Etter vellykket autentisering returnerer Google en nyttelast som inkluderer brukerens data, for eksempel navn og e-postadresse. Disse dataene brukes til å autorisere tilgang til applikasjonen og dens ressurser.

Ved å bruke nyttelastdataene oppretter NextAuth en økt for hver autentisert bruker og lagrer økttokenet i en sikker HTTP-bare informasjonskapsel. Sesjonstokenet brukes til å bekrefte brukerens identitet og opprettholde autentiseringsstatusen. Denne prosessen gjelder også for andre tilbydere med små variasjoner i gjennomføringen.

Registrer Next.js-applikasjonen din på Google Developer Console

NextAuth gir støtte for Googles autentiseringstjeneste. Men for applikasjonen din å samhandle med Google APIer og tillate brukere å autentisere seg med deres Google-legitimasjon, må du registrere appen din på Googles utviklerkonsoll og få en klient-ID og Klienthemmelighet.

For å gjøre det, naviger til Google Developer Console. Deretter logger du på med Google-kontoen din for å få tilgang til konsollen. Når du er logget på, oppretter du et nytt prosjekt.

På prosjektets oversiktsside velger du APIer og tjenester fanen fra listen over tjenester i venstre menypanel og til slutt Legitimasjon alternativ.

Klikk på Opprett legitimasjon for å generere klient-ID og klienthemmelighet. Deretter spesifiserer du applikasjonstypen fra de gitte alternativene og oppgir deretter et navn for applikasjonen.

Deretter spesifiserer du appens hjemmerute-URL og til slutt spesifiser den autoriserte omdirigerings-URIen for applikasjonen din. For dette tilfellet burde det være det http://localhost: 3000/api/auth/callback/google som spesifisert av NextAuths Google-leverandørinnstillinger.

Etter vellykket registrering vil Google gi deg en klient-ID og klienthemmelighet for bruk i appen din.

Sett opp NextJS-applikasjonen

For å komme i gang, lag et Next.js-prosjekt lokalt:

npx create-next-app next-auth-app

Etter at oppsettet er fullført, naviger til den nyopprettede prosjektkatalogen og kjør denne kommandoen for å spinne opp utviklingsserveren.

npm kjøre dev

Åpne nettleseren og naviger til http://localhost: 3000. Dette bør være det forventede resultatet.

Du kan finne dette prosjektets kode i sin GitHub-depot.

Sette opp .env-filen

Opprett en ny fil i prosjektets rotmappe og navngi den .env for å holde klient-ID, hemmelighet og basis-URL.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'klient-ID'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'hemmelig'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

NextAUTH-URLen brukes til å spesifisere basis-URLen til applikasjonen din, som brukes til å omdirigere brukere etter at autentiseringen er fullført.

Integrer NextAuth i Next.js-applikasjonen din

Installer først NextAuths bibliotek i prosjektet ditt.

npm install next-auth

Neste, i /pages katalog, opprett en ny mappe og navngi den api. Endre katalogen til api mappe, og opprett en annen mappe kalt auth. I auth-mappen legger du til en ny fil og gir den et navn [...nextauth].js og legg til følgende kodelinjer.

import NextAuth fra"neste-auth/neste";
import GoogleProvider fra"next-auth/providers/google";
eksportmisligholde NextAuth({
 leverandører:[
 GoogleProvider({
 klient-ID: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Denne koden konfigurerer Google som autentiseringsleverandør. NextAuth-funksjonen definerer Google-leverandørkonfigurasjonsobjektet som tar inn to egenskaper: en klient-ID og en klienthemmelighet som initialiserer leverandøren.

Deretter åpner du pages/_app.js fil og gjør følgende endringer i koden.

import'../styles/globals.css'
import { SessionProvider } fra"neste-auth/reager"
funksjonMin App({ Component, pageProps: { session, ...pageProps } }) {
komme tilbake (


 </SessionProvider>
 )
}
eksportmisligholde Min App 

NextAuth's SessionProvider komponenten gir funksjonalitet for administrasjon av autentiseringstilstand til Next.js-appen. Det tar en økt prop som inneholder autentiseringsøktdataene returnert fra Googles API som inkluderer brukerdetaljer som ID, e-post og tilgangstoken.

Ved å pakke inn Min App komponent med SessionProvider-komponenten, blir autentiseringsøktobjektet med brukerdetaljer gjort tilgjengelig gjennom hele applikasjonen, slik at applikasjonen kan bestå og gjengi sider basert på deres autentiseringsstatus.

Konfigurer filen index.js

Åpne pages/index.js fil, slett koden og legg til koden nedenfor for å opprette en påloggingsknapp som dirigerer brukere til en påloggingsside.

import Hode fra'neste/hode'
import stiler fra'../styles/Home.module.css'
import { useRouter } fra'neste/ruter';
eksportmisligholdefunksjonHjem() {
konst ruter = brukRouter();

komme tilbake (