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.
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</title>
"description" content="Genererad av skapa nästa app" />
"icon" href="/favicon.ico" />
</Head>
Välkommen till " https://nextjs.org">Next.js!</a>
</h1>
Kom igång genom att logga in{' ' }
med ditt Google-konto</code>
</div>
)
}
Den här koden använder Next.js useRouter-kroken för att hantera routing inom programmet genom att definiera ett routerobjekt. När du klickar på inloggningsknappen anropar hanterarfunktionen metoden router.push för att omdirigera användaren till inloggningssidan.
Skapa en inloggningsautentisering Sida
I katalogen pages skapar du en ny fil Login.js och lägger sedan till följande kodrader.
import { useSession, signIn, signOut } från "next-auth/react"
import { useRouter } från 'next /router';
importera stilar från '../styles/Login.module.css'export standard funktion < span>Logga in() {
const { data: session } = useSession()
const router = useRouter();
if (session) {
return (
"title">Skapa nästa app</h1>
Signerad < span>i som {session.user.email}
</h2>