Met deze bibliotheek kunt u Google-authenticatie naadloos integreren in uw Next.js-toepassing, zodat u deze niet helemaal opnieuw hoeft te ontwikkelen.

Het integreren van een veilig authenticatiesysteem is een cruciale ontwikkelingsstap die niet alleen een veilige omgeving voor gebruikers biedt, maar ook vertrouwen in uw product wekt. Dit systeem zorgt ervoor dat hun gegevens worden beschermd en dat alleen geautoriseerde personen toegang hebben tot de applicatie.

Het vanaf de basis opbouwen van een veilige authenticatie kan een tijdrovend proces zijn dat een grondige aanpak vereist begrip van authenticatieprotocollen en -processen, vooral bij het omgaan met verschillende authenticatie aanbieders.

Met NextAuth kunt u uw focus verleggen naar het bouwen van de kernfuncties. Lees verder om te leren hoe u Google social login in uw applicatie kunt integreren met behulp van NextAuth.

Hoe werkt NextAuth

VolgendeAuth.js is een open-source authenticatiebibliotheek die het proces van toevoegen vereenvoudigt

authenticatie en authorisatie functionaliteit voor Next.js-applicaties en het aanpassen van authenticatieworkflows. Het biedt een scala aan functies, zoals e-mail, authenticatie zonder wachtwoord en ondersteuning voor verschillende authenticatieproviders zoals Google, GitHub en meer.

Op een hoog niveau fungeert NextAuth als een middleware, die het authenticatieproces tussen uw applicatie en de provider vergemakkelijkt. Onder de motorkap, wanneer een gebruiker probeert in te loggen, wordt hij doorgestuurd naar de inlogpagina van Google. Na succesvolle authenticatie retourneert Google een payload die de gegevens van de gebruiker bevat, zoals hun naam en e-mailadres. Deze gegevens worden gebruikt om toegang tot de applicatie en zijn bronnen te autoriseren.

Met behulp van de payload-gegevens maakt NextAuth een sessie voor elke geverifieerde gebruiker en slaat het sessietoken op in een beveiligde HTTP-only cookie. Het sessietoken wordt gebruikt om de identiteit van de gebruiker te verifiëren en de authenticatiestatus te behouden. Dit proces geldt ook voor andere providers met kleine variaties in de implementatie.

Registreer uw Next.js-toepassing in de Google Developer Console

NextAuth biedt ondersteuning voor de Google-authenticatieservice. Om ervoor te zorgen dat uw applicatie communiceert met Google API's en gebruikers in staat stelt zich te authenticeren hun Google-inloggegevens, moet u uw app registreren op de Google-ontwikkelaarsconsole en verkrijg een klant identificatie En Cliënt geheim.

Navigeer hiervoor naar Google-ontwikkelaarsconsole. Log vervolgens in met uw Google-account om toegang te krijgen tot de console. Nadat u bent ingelogd, maakt u een nieuw project aan.

Selecteer op de overzichtspagina van het project de API's en services tabblad uit de lijst met services in het linkermenuvenster en ten slotte de Referenties keuze.

Klik op de Credentials maken knop om uw klant-ID en klantgeheim te genereren. Geef vervolgens het type toepassing op uit de gegeven opties en geef vervolgens een naam op voor uw toepassing.

Geef daarna de thuisroute-URL van uw app op en geef ten slotte de geautoriseerde omleidings-URI voor uw toepassing op. Voor dit geval zou het moeten zijn http://localhost: 3000/api/auth/callback/google zoals gespecificeerd door de instellingen van de Google-provider van NextAuth.

Na succesvolle registratie zal Google u voorzien van een Client ID en Client Secret voor gebruik in uw app.

Stel de NextJS-toepassing in

Om aan de slag te gaan, maakt u lokaal een Next.js-project:

npx create-next-app next-auth-app

Nadat de installatie is voltooid, navigeert u naar de nieuw gemaakte projectmap en voert u deze opdracht uit om de ontwikkelingsserver te laten draaien.

npm run dev

Open uw browser en navigeer naar http://localhost: 3000. Dit zou het verwachte resultaat moeten zijn.

U kunt de code van dit project vinden in de bijbehorende GitHub-opslagplaats.

Het .env-bestand instellen

Maak in de hoofdmap van uw project een nieuw bestand en geef het een naam .env om uw klant-ID, geheim en de basis-URL te bewaren.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'klant identificatie'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'geheim'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

De NextAUTH-URL wordt gebruikt om de basis-URL van uw toepassing op te geven, die wordt gebruikt voor het omleiden van gebruikers nadat de authenticatie is voltooid.

Integreer NextAuth in uw Next.js-toepassing

Installeer eerst de bibliotheek van NextAuth in uw project.

npm install next-auth

Vervolgens in de /pages map, maak een nieuwe map aan en geef deze een naam api. Wijzig de map in de api map en maak een andere map met de naam autoriseren. Voeg in de auth-map een nieuw bestand toe en geef het een naam [...nextauth].js en voeg de volgende regels code toe.

importeren VolgendeAuth van"next-auth/next";
importeren GoogleProvider van"next-auth/providers/google";
exporterenstandaard VolgendeAuth({
 aanbieders:[
 GoogleProvider({
 client-ID: proces.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: proces.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Deze code configureert Google als authenticatieprovider. De NextAuth-functie definieert het Google-providerconfiguratieobject dat twee eigenschappen opneemt: een client-ID en een clientgeheim dat de provider initialiseert.

Open vervolgens de pagina's/_app.js bestand en breng de volgende wijzigingen aan in de code.

importeren'../styles/globals.css'
importeren { SessieProvider } van"volgende-authenticatie/reageren"
functieMijnApp({ Component, pageProps: { session, ...pageProps } }) {
opbrengst (


 </SessionProvider>
 )
}
exporterenstandaard MijnApp

NextAuth's SessieProvider component biedt beheerfunctionaliteit voor authenticatiestatus aan de Next.js-app. Het duurt een sessie prop die de authenticatiesessiegegevens bevat die zijn geretourneerd door de API van Google, inclusief gebruikersgegevens zoals hun ID, e-mailadres en toegangstoken.

Door het inpakken van de MijnApp component met de SessionProvider component wordt het authenticatiesessieobject met gebruikersgegevens beschikbaar gesteld in de hele applicatie, waardoor de applicatie kan blijven bestaan ​​en pagina's kan weergeven op basis van hun authenticatiestatus.

Configureer het bestand index.js

Open de pagina's/index.js bestand, verwijder de standaardcode en voeg de onderstaande code toe om een ​​inlogknop te maken die gebruikers naar een inlogpagina leidt.

importeren Hoofd van'volgende/hoofd'
importeren stijlen van'../styles/Home.module.css'
importeren { gebruikRouter } van'volgende/router';
exporterenstandaardfunctieThuis() {
const router = gebruikRouter();

opbrengst (





Create Next App<<span>/title></span><br> <meta name="<span">"description" content=<span>"Gegenereerd door create next app"</span> /> <br> <koppeling rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Welkom bij <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> Ga aan de slag door <span>in te loggen</span>{<span>' ' </span>}<br> <code classname="{styles.code}"><span>met</span> uw Google-account<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Inloggen<<span>/button></span><br> <<span>/p></span><br> < <span>/main></span></button></code></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Deze code gebruikt de Next.js <strong>useRouter</strong> hook om routering binnen de applicatie af te handelen door een routerobject te definiëren. Wanneer op de inlogknop wordt geklikt, roept de handlerfunctie de methode <strong>router.push</strong> aan om om te leiden de gebruiker naar de inlogpagina.</p> <h3 id="create-a-login-authentication-page">Maak een inlogverificatie aan Pagina</h3> <p>Maak in de directory <strong>pages</strong> een nieuw bestand <strong>Login.js</strong> en voeg vervolgens de volgende regels code toe.</p> <pre> <code><span>importeren</span> { useSession, signIn, signOut } <span>van</span> <span>"next-auth/react"</span><br><span>importeren</span> { useRouter } <span>van</span> <span>'next /router'</span>;<br><span>importeer</span> stijlen <span>uit</span> <span>'../styles/Login.module.css'</span><p><span>exporteren</span> <span>standaard</span> <span><span>functie</span> < span>Inloggen</span>() {<br> <span>const</span> { <span>data</span>: sessie } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (sessie) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Volgende app maken<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Ondertekend < span>in <span>als</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> Gebruikersprofiel<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Afmelden<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>retour</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Volgende app maken<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Je bent niet <span>ingelogd</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Ondertekenen <span>in</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> en <strong>signOut</strong> zijn hooks geleverd door <strong>next-auth</strong>. <strong>useSession</strong> hook wordt gebruikt om toegang te krijgen tot het huidige gebruikerssessie-object zodra een gebruiker zich aanmeldt en succesvol is geauthenticeerd door Google.</p> <p>Hierdoor kan Next.js de authenticatiestatus behouden en de gebruikersgegevens weergeven aan de clientzijde van de app, in dit geval de e-mail.</p> <p>Bovendien kunt u met behulp van het sessieobject eenvoudig aangepaste gebruikersprofielen voor uw toepassing maken en de gegevens opslaan in een database zoals als PostgreSQL. U kunt <span>een PostgreSQL-database verbinden met uw Next.js-toepassing met behulp van Prisma</span>.</p> <p>Met de signOut-hook kan een gebruiker zich afmelden bij de toepassing. Deze hook verwijdert het sessie-object dat is gemaakt tijdens het aanmeldingsproces en de gebruiker wordt afgemeld.</p> <p>Ga je gang en start de ontwikkelingsserver om werk de wijzigingen bij en ga naar uw Next.js-applicatie die in de browser draait om de authenticatiefunctionaliteit te testen.</p> <pre> <code>npm run dev</code> </pre> <p>Verder kunt u <span>Tailwind CSS gebruiken met uw Next.js-app</span> om de authenticatiemodellen te stylen.</p> <h2 id="authentication-using-nextauth"> Authenticatie met behulp van NextAuth  h2> </h2>
<p>NextAuth ondersteunt meerdere authenticatieservices die eenvoudig kunnen worden geïntegreerd in uw Next.js-applicaties om client-side authenticatie.</p> <p>Bovendien kunt u een database integreren om de gegevens van uw gebruikers op te slaan en het toegangstoken om server-side authenticatie voor volgende authenticatieverzoeken aangezien NextAuth ondersteuning biedt voor verschillende database-integraties.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></koppeling>