Det här biblioteket gör att du sömlöst kan integrera Google-autentisering i din Next.js-applikation, vilket eliminerar behovet av att utveckla den från grunden.

Att integrera ett säkert autentiseringssystem är ett avgörande utvecklingssteg som inte bara ger en säker miljö för användarna utan också ingjuter förtroende för din produkt. Detta system säkerställer att deras data är skyddade och att endast behöriga personer kan komma åt applikationen.

Att bygga en säker autentisering från grunden kan vara en tidskrävande process som kräver en grundlig förståelse för autentiseringsprotokoll och processer, speciellt vid hantering av olika autentiseringar leverantörer.

Med NextAuth kan du flytta ditt fokus till att bygga kärnfunktionerna. Läs vidare för att lära dig hur du integrerar Googles sociala inloggning i din applikation med NextAuth.

Hur fungerar NextAuth

NextAuth.js är ett autentiseringsbibliotek med öppen källkod som förenklar processen att lägga till autentisering och auktorisering funktionalitet till Next.js-applikationer samt anpassa autentiseringsarbetsflöden. Det ger en rad funktioner som e-post, lösenordslös autentisering och stöd för olika autentiseringsleverantörer som Google, GitHub och mer.

instagram viewer

På en hög nivå fungerar NextAuth som ett mellanprogram, vilket underlättar autentiseringsprocessen mellan din applikation och leverantören. När en användare försöker logga in under huven omdirigeras de till Googles inloggningssida. Efter lyckad autentisering returnerar Google en nyttolast som inkluderar användarens data, som deras namn och e-postadress. Dessa data används för att auktorisera åtkomst till applikationen och dess resurser.

Med hjälp av nyttolastdata skapar NextAuth en session för varje autentiserad användare och lagrar sessionstoken i en säker HTTP-endast-cookie. Sessionstoken används för att verifiera användarens identitet och bevara deras autentiseringsstatus. Denna process gäller även andra leverantörer med små variationer i implementeringen.

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

NextAuth tillhandahåller support för Googles autentiseringstjänst. Men för din applikation att interagera med Googles API: er och tillåta användare att autentisera sig med deras Google-uppgifter måste du registrera din app på Googles utvecklarkonsol och få en Klient ID och Klienthemlighet.

För att göra det, navigera till Google Developer Console. Logga sedan in med ditt Google-konto för att komma åt konsolen. När du är inloggad skapar du ett nytt projekt.

På projektets översiktssida väljer du API: er och tjänster fliken från listan över tjänster i den vänstra menyrutan och slutligen Referenser alternativ.

Klicka på Skapa autentiseringsuppgifter för att generera ditt klient-ID och klienthemlighet. Ange sedan typen av applikation från de givna alternativen och ange sedan ett namn för din applikation.

Ange därefter appens hemvägs-URL och ange slutligen den auktoriserade omdirigerings-URI för din applikation. För det här fallet borde det vara det http://localhost: 3000/api/auth/callback/google som specificerats av NextAuths Google-leverantörsinställningar.

Efter framgångsrik registrering kommer Google att förse dig med ett klient-ID och en klienthemlighet för användning i din app.

Konfigurera NextJS Application

För att komma igång, skapa ett Next.js-projekt lokalt:

npx create-next-app next-auth-app

När installationen är klar, navigera till den nyskapade projektkatalogen och kör detta kommando för att snurra upp utvecklingsservern.

npm kör dev

Öppna din webbläsare och navigera till http://localhost: 3000. Detta bör vara det förväntade resultatet.

Du kan hitta detta projekts kod i dess GitHub-förråd.

Konfigurera .env-filen

Skapa en ny fil i projektets rotmapp och namnge den .env för att hålla ditt klient-ID, hemlighet och bas-URL.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'Klient ID'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'hemlighet'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

NextAUTH URL används för att ange basadressen för din applikation, som används för att omdirigera användare efter att autentiseringen är klar.

Integrera NextAuth i din Next.js-applikation

Installera först NextAuths bibliotek i ditt projekt.

npm installera nästa-auth

Nästa, i /pages katalog, skapa en ny mapp och namnge den api. Ändra katalogen till api mapp och skapa en annan mapp som heter auth. Lägg till en ny fil i auth-mappen och namnge den [...nextauth].js och lägg till följande kodrader.

importera NextAuth från"nästa-auth/nästa";
importera GoogleProvider från"next-auth/providers/google";
exporterastandard NextAuth({
 leverantörer:[
 GoogleProvider({
 clientId: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Den här koden konfigurerar Google som autentiseringsleverantör. NextAuth-funktionen definierar Google-leverantörskonfigurationsobjektet som tar in två egenskaper: ett klient-ID och en klienthemlighet som initierar leverantören.

Öppna sedan pages/_app.js fil och gör följande ändringar i koden.

importera'../styles/globals.css'
importera { SessionProvider } från"nästa-auth/reagera"
fungeraMinApp({ Component, pageProps: { session, ...pageProps } }) {
lämna tillbaka (


 </SessionProvider>
 )
}
exporterastandard MinApp

NextAuth's SessionProvider komponenten tillhandahåller autentiseringstillståndshanteringsfunktioner till Next.js-appen. Det tar en session prop som innehåller autentiseringssessionsdata som returneras från Googles API som inkluderar användarinformation som deras ID, e-post och åtkomsttoken.

Genom att linda in MinApp komponent med SessionProvider-komponenten, görs autentiseringssessionsobjektet med användarinformation tillgängligt genom hela programmet, vilket gör att programmet kan bevaras och rendera sidor baserat på deras autentiseringstillstånd.

Konfigurera filen index.js

Öppna pages/index.js fil, ta bort boilerplate-koden och lägg till koden nedan för att skapa en inloggningsknapp som dirigerar användare till en inloggningssida.

importera Huvud från'nästa/huvud'
importera stilar från'../styles/Home.module.css'
importera { useRouter } från'nästa/router';
exporterastandardfungeraHem() {
konst router = useRouter();

lämna tillbaka (





Skapa nästa app<<span>/title></span><br> <meta name="<span">"description" content=<span>"Genererad av skapa nästa app"</span> /> <br> <l rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Välkommen till <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 igång genom att logga <span>in</span>{<span>' ' </span>}<br> <kod classname="{styles.code}"><span>med</span> ditt Google-konto<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Logga in<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></kod></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Den här koden använder Next.js <strong>useRouter</strong>-kroken för att hantera routing inom programmet genom att definiera ett routerobjekt. När du klickar på inloggningsknappen anropar hanterarfunktionen metoden <strong>router.push</strong> för att omdirigera användaren till inloggningssidan.</p> <h3 id="create-a-login-authentication-page">Skapa en inloggningsautentisering Sida</h3> <p>I katalogen <strong>pages</strong> skapar du en ny fil <strong>Login.js</strong> och lägger sedan till följande kodrader.</p> <pre> <code><span>import</span> { useSession, signIn, signOut } <span>från</span> <span>"next-auth/react"</span><br><span>import</span> { useRouter } <span>från</span> <span>'next /router'</span>;<br><span>importera</span> stilar <span>från</span> <span>'../styles/Login.module.css'</span><p><span>export</span> <span>standard</span> <span><span>funktion</span> < span>Logga in</span>() {<br> <span>const</span> { <span>data</span>: session } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (session) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Skapa nästa app<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Signerad < 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> Användarprofil<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Logga ut<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">Skapa nästa app<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Du är inte inloggad <span>in</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => logga in()}>Signa <span>i</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> och <strong>signOut</strong> är krokar som tillhandahålls av <strong>next-auth</strong>. <strong>useSession</strong>-kroken används för att komma åt det aktuella användarsessionsobjektet när en användare loggar in och har autentiserats av Google.</p> <p>Detta tillåter Next.js att bevara autentiseringstillståndet och återge användarinformationen på klientsidan av appen, i det här fallet e-post.</p> <p>Dessutom kan du med hjälp av sessionsobjektet enkelt bygga anpassade användarprofiler för din applikation och lagra data i en databas som t.ex. som PostgreSQL. Du kan <span>ansluta en PostgreSQL-databas med din Next.js-applikation med Prisma</span>.</p> <p>Utloggningskroken låter en användare logga ut från applikationen. Denna hook tar bort sessionsobjektet som skapades under inloggningsprocessen och användaren kommer att loggas ut.</p> <p>Fortsätt och snurra upp utvecklingsservern för att uppdatera ändringarna och gå över till din Next.js-applikation som körs i webbläsaren för att testa autentiseringsfunktionen.</p> <pre> <code>npm run dev</code> </pre> <p>Vidare kan du <span>använda Tailwind CSS med din Next.js-app</span> för att utforma autentiseringsmodellerna.</p> <h2 id="authentication-using-nextauth"> Autentisering med NextAuth  h2> </h2>
<p>NextAuth stöder flera autentiseringstjänster som enkelt kan integreras i dina Next.js-applikationer för att hantera klientsidan autentisering.</p> <p>Dessutom kan du integrera en databas för att lagra dina användares data och åtkomsttoken för att implementera serversidan autentisering för efterföljande autentiseringsbegäranden eftersom NextAuth ger stöd för olika databasintegreringar.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></l>