Dette bibliotek giver dig mulighed for problemfrit at integrere Google-godkendelse i din Next.js-applikation, hvilket eliminerer behovet for at udvikle det fra bunden.

Integrering af et sikkert autentificeringssystem er et afgørende udviklingstrin, der ikke kun giver et sikkert miljø for brugerne, men også indgyder tillid til dit produkt. Dette system sikrer, at deres data er beskyttet, og at kun autoriserede personer kan få adgang til applikationen.

Opbygning af en sikker autentificering fra bunden kan være en tidskrævende proces, der kræver en grundig forståelse af autentificeringsprotokoller og -processer, især ved håndtering af forskellig autentificering udbydere.

Ved at bruge NextAuth kan du flytte dit fokus til at opbygge kernefunktionerne. Læs videre for at lære, hvordan du integrerer Google socialt login i din applikation ved hjælp af NextAuth.

Hvordan virker NextAuth

NextAuth.js er et open source-godkendelsesbibliotek, der forenkler processen med at tilføje autentificering og autorisation

instagram viewer
funktionalitet til Next.js-applikationer samt tilpasning af autentificeringsarbejdsgange. Det giver en række funktioner såsom e-mail, adgangskodefri godkendelse og support til forskellige godkendelsesudbydere såsom Google, GitHub og mere.

På et højt niveau fungerer NextAuth som en middleware, der letter autentificeringsprocessen mellem din applikation og udbyderen. Når en bruger forsøger at logge ind under motorhjelmen, bliver de omdirigeret til Googles login-side. Efter vellykket godkendelse returnerer Google en nyttelast, der inkluderer brugerens data, såsom deres navn og e-mailadresse. Disse data bruges til at autorisere adgang til applikationen og dens ressourcer.

Ved at bruge nyttelastdataene opretter NextAuth en session for hver autentificeret bruger og gemmer sessionstokenet i en sikker HTTP-kun-cookie. Sessionstokenet bruges til at bekræfte brugerens identitet og bevare deres godkendelsesstatus. Denne proces gælder også for andre udbydere med små variationer i implementeringen.

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

NextAuth yder support til Google-godkendelsestjeneste. Men for din applikation at interagere med Google API'er og tillade brugere at godkende med deres Google-legitimationsoplysninger, skal du registrere din app på Googles udviklerkonsol og få en Klient-id og Klientens hemmelighed.

For at gøre det skal du navigere til Google Developer Console. Log derefter ind med din Google-konto for at få adgang til konsollen. Når du er logget ind, skal du oprette et nyt projekt.

På projektets oversigtsside skal du vælge API'er og tjenester fanen fra listen over tjenester i venstre menurude og til sidst Legitimationsoplysninger mulighed.

Klik på Opret legitimationsoplysninger knappen for at generere dit klient-id og klienthemmelighed. Angiv derefter applikationstypen fra de givne muligheder og angiv derefter et navn til din applikation.

Angiv derefter din apps hjemmerute-URL og angiv til sidst den autoriserede omdirigerings-URI for din applikation. I dette tilfælde burde det være det http://localhost: 3000/api/auth/callback/google som angivet af NextAuths Google-udbyderindstillinger.

Efter vellykket registrering vil Google give dig et klient-id og klienthemmelighed til brug i din app.

Konfigurer NextJS-applikationen

For at komme i gang skal du oprette et Next.js-projekt lokalt:

npx create-next-app next-auth-app

Når opsætningen er fuldført, skal du navigere til den nyoprettede projektmappe og køre denne kommando for at skrue udviklingsserveren op.

npm køre dev

Åbn din browser og naviger til http://localhost: 3000. Dette bør være det forventede resultat.

Du kan finde dette projekts kode i dens GitHub-depot.

Opsætning af .env-filen

I dit projekts rodmappe skal du oprette en ny fil og navngive den .env til at holde dit klient-id, din hemmelighed og din basis-URL.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'klient-id'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'hemmelighed'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

NextAUTH URL'en bruges til at angive basis-URL'en for din applikation, som bruges til at omdirigere brugere, efter at godkendelsen er fuldført.

Integrer NextAuth i din Next.js-applikation

Installer først NextAuths bibliotek i dit projekt.

npm installer næste auth

Dernæst i /pages mappe, opret en ny mappe og navngiv den api. Skift mappen til api mappe, og opret en anden mappe kaldet auth. Tilføj en ny fil i godkendelsesmappen og navngiv den [...nextauth].js og tilføj følgende kodelinjer.

importere NextAuth fra"next-auth/next";
importere GoogleProvider fra"next-auth/providers/google";
eksportStandard NextAuth({
 udbydere:[
 GoogleProvider({
 clientId: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Denne kode konfigurerer Google som godkendelsesudbyder. NextAuth-funktionen definerer Google-udbyderens konfigurationsobjekt, der tager to egenskaber: et klient-id og en klienthemmelighed, som initialiserer udbyderen.

Åbn derefter sider/_app.js fil og foretag følgende ændringer i koden.

importere'../styles/globals.css'
importere { SessionProvider } fra"next-auth/react"
fungereMin App({ Component, pageProps: { session, ...pageProps } }) {
Vend tilbage (


 </SessionProvider>
 )
}
eksportStandard Min App

NextAuth's SessionProvider komponent leverer godkendelsestilstandsadministrationsfunktionalitet til Next.js-appen. Det tager en session prop, der indeholder godkendelsessessionsdataene, der returneres fra Googles API, som inkluderer brugeroplysninger såsom deres id, e-mail og adgangstoken.

Ved at pakke ind Min App komponent med SessionProvider-komponenten, gøres autentificeringssessionsobjektet med brugeroplysninger tilgængeligt gennem hele applikationen, hvilket gør det muligt for applikationen at fortsætte og gengive sider baseret på deres godkendelsestilstand.

Konfigurer filen index.js

Åbn sider/indeks.js fil, slet boilerplate-koden og tilføj koden nedenfor for at oprette en login-knap, der dirigerer brugere til en login-side.

importere Hoved fra'næste/hoved'
importere stilarter fra'../styles/Home.module.css'
importere { brug Router } fra'næste/router';
eksportStandardfungereHjem() {
konst router = brugRouter();

Vend tilbage (





Opret næste app<<span>/title></span><br> <meta name="<span">"description" content=<span>"Genereret af create next 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> Velkommen til <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> Kom godt i gang ved at logge <span>ind</span>{<span>' ' </span>}<br> <kode classname="{styles.code}"><span>med</span> din Google-konto<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Login<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></kode></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Denne kode bruger Next.js <strong>useRouter</strong> hook til at håndtere routing i applikationen ved at definere et routerobjekt. Når der klikkes på login-knappen, kalder handlerfunktionen <strong>router.push</strong>-metoden for at omdirigere brugeren til login-siden.</p> <h3 id="create-a-login-authentication-page">Opret en login-godkendelse Side</h3> <p>I mappen <strong>pages</strong> skal du oprette en ny fil <strong>Login.js</strong>, og derefter tilføje følgende kodelinjer.</p> <pre> <code><span>import</span> { useSession, logIn, signOut } <span>fra</span> <span>"next-auth/react"</span><br><span>importer</span> { useRouter } <span>fra</span> <span>'next /router'</span>;<br><span>importer</span> stilarter <span>fra</span> <span>'../styles/Login.module.css'</span><p><span>eksport</span> <span>standard</span> <span><span>funktion</span> < span>Login</span>() {<br> <span>const</span> { <span>data</span>: session } = useSession()<br> <span>const</span> router = useRouter();<br> <span>hvis</span> (session) {<br> <span>retur</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Opret næste app<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Signeret < span>i <span>som</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> Brugerprofil<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> logOut()<br> }}><br> Log ud<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> <br> <span>retur</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Opret næste app<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Du er ikke logget <span>ind</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => login()}>Sign <span>i</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>login</strong> og <strong>log ud</strong> er hooks leveret af <strong>next-auth</strong>. <strong>useSession</strong> hook bruges til at få adgang til det aktuelle brugersessionsobjekt, når en bruger logger ind og er blevet godkendt af Google.</p> <p>Dette giver Next.js mulighed for at bevare godkendelsestilstanden og gengive brugeroplysningerne på klientsiden af ​​appen, i dette tilfælde e-mail.</p> <p>Desuden kan du ved hjælp af sessionsobjektet nemt bygge brugerdefinerede brugerprofiler til din applikation og gemme dataene i en database som f.eks. som PostgreSQL. Du kan <span>forbinde en PostgreSQL-database med din Next.js-applikation ved hjælp af Prisma</span>.</p> <p>LogOut-hooken tillader en bruger at logge ud af applikationen. Denne hook vil slette det sessionsobjekt, der blev oprettet under login-processen, og brugeren vil blive logget ud.</p> <p>Gå videre og skru udviklingsserveren op for at opdater ændringerne, og gå over til din Next.js-applikation, der kører på browseren, for at teste godkendelsesfunktionaliteten.</p> <pre> <code>npm run dev</code> </pre> <p>Yderligere kan du <span>bruge Tailwind CSS med din Next.js-app</span> til at style godkendelsesmodellerne.</p> <h2 id="authentication-using-nextauth"> Godkendelse ved hjælp af NextAuth  h2> </h2>
<p>NextAuth understøtter flere godkendelsestjenester, der nemt kan integreres i dine Next.js-applikationer for at håndtere klientsiden godkendelse.</p> <p>Derudover kan du integrere en database til at gemme dine brugeres data og adgangstokenet til at implementere server-side godkendelse til efterfølgende godkendelsesanmodninger, da NextAuth understøtter forskellige databaseintegrationer.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre>