Mit dieser Bibliothek können Sie die Google-Authentifizierung nahtlos in Ihre Next.js-Anwendung integrieren, sodass Sie sie nicht von Grund auf neu entwickeln müssen.

Die Integration eines sicheren Authentifizierungssystems ist ein entscheidender Entwicklungsschritt, der nicht nur eine sichere Umgebung für Benutzer bietet, sondern auch Vertrauen in Ihr Produkt schafft. Dieses System stellt sicher, dass ihre Daten geschützt sind und nur autorisierte Personen auf die Anwendung zugreifen können.

Der Aufbau einer sicheren Authentifizierung von Grund auf kann ein zeitaufwändiger Prozess sein, der eine gründliche Prüfung erfordert Verständnis von Authentifizierungsprotokollen und -prozessen, insbesondere beim Umgang mit unterschiedlichen Authentifizierungen Anbieter.

Mit NextAuth können Sie sich auf den Aufbau der Kernfunktionen konzentrieren. Lesen Sie weiter, um zu erfahren, wie Sie Google Social Login mit NextAuth in Ihre Anwendung integrieren.

Wie funktioniert NextAuth?

WeiterAuth.js ist eine Open-Source-Authentifizierungsbibliothek, die das Hinzufügen vereinfacht

instagram viewer
Authentifizierung und Autorisierung Funktionalität für Next.js-Anwendungen sowie das Anpassen von Authentifizierungs-Workflows. Es bietet eine Reihe von Funktionen wie E-Mail, passwortlose Authentifizierung und Unterstützung für verschiedene Authentifizierungsanbieter wie Google, GitHub und mehr.

Auf hoher Ebene fungiert NextAuth als Middleware und erleichtert den Authentifizierungsprozess zwischen Ihrer Anwendung und dem Anbieter. Unter der Haube wird ein Benutzer, wenn er versucht, sich anzumelden, auf die Anmeldeseite von Google umgeleitet. Bei erfolgreicher Authentifizierung gibt Google eine Nutzlast zurück, die die Daten des Benutzers enthält, wie z. B. seinen Namen und seine E-Mail-Adresse. Diese Daten werden verwendet, um den Zugriff auf die Anwendung und ihre Ressourcen zu autorisieren.

Unter Verwendung der Nutzlastdaten erstellt NextAuth eine Sitzung für jeden authentifizierten Benutzer und speichert das Sitzungstoken in einem sicheren Nur-HTTP-Cookie. Das Sitzungstoken wird verwendet, um die Identität des Benutzers zu überprüfen und seinen Authentifizierungsstatus beizubehalten. Dieser Prozess gilt auch für andere Anbieter mit geringfügigen Abweichungen in der Implementierung.

Registrieren Sie Ihre Next.js-Anwendung in der Google Developer Console

NextAuth bietet Unterstützung für den Google-Authentifizierungsdienst. Damit Ihre Anwendung jedoch mit Google-APIs interagieren und Benutzern die Authentifizierung ermöglichen kann ihre Google-Anmeldeinformationen müssen Sie Ihre App in der Google-Entwicklerkonsole registrieren und erhalten ein Kunden ID Und Client-Geheimnis.

Navigieren Sie dazu zu Google Developer Console. Melden Sie sich als Nächstes mit Ihrem Google-Konto an, um auf die Konsole zuzugreifen. Erstellen Sie nach der Anmeldung ein neues Projekt.

Wählen Sie auf der Übersichtsseite des Projekts die aus APIs und Dienste Registerkarte aus der Liste der Dienste im linken Menübereich und schließlich die Referenzen Möglichkeit.

Klick auf das Anmeldeinformationen erstellen Schaltfläche, um Ihre Client-ID und Ihr Client-Geheimnis zu generieren. Geben Sie als Nächstes den Anwendungstyp aus den angegebenen Optionen an und geben Sie dann einen Namen für Ihre Anwendung ein.

Geben Sie anschließend die Homerouten-URL Ihrer App und schließlich den autorisierten Umleitungs-URI für Ihre Anwendung an. Für diesen Fall sollte es sein http://localhost: 3000/api/auth/callback/google wie in den Google-Anbietereinstellungen von NextAuth angegeben.

Nach erfolgreicher Registrierung stellt Google Ihnen eine Client-ID und ein Client-Secret zur Verwendung in Ihrer App zur Verfügung.

Richten Sie die NextJS-Anwendung ein

Erstellen Sie zunächst lokal ein Next.js-Projekt:

npx create-next-app next-auth-app

Navigieren Sie nach Abschluss der Einrichtung zum neu erstellten Projektverzeichnis und führen Sie diesen Befehl aus, um den Entwicklungsserver hochzufahren.

npm laufen dev

Öffnen Sie Ihren Browser und navigieren Sie zu http://localhost: 3000. Dies sollte das erwartete Ergebnis sein.

Sie finden den Code dieses Projekts in seiner GitHub-Repository.

Einrichten der .env-Datei

Erstellen Sie im Stammordner Ihres Projekts eine neue Datei und benennen Sie sie .env um Ihre Client-ID, Ihr Geheimnis und die Basis-URL zu speichern.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'Kunden ID'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'Geheimnis'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

Die NextAUTH-URL wird verwendet, um die Basis-URL Ihrer Anwendung anzugeben, die zum Umleiten von Benutzern verwendet wird, nachdem die Authentifizierung abgeschlossen ist.

Integrieren Sie NextAuth in Ihre Next.js-Anwendung

Installieren Sie zunächst die Bibliothek von NextAuth in Ihrem Projekt.

npm installiere next-auth

Als nächstes im /pages Verzeichnis, erstellen Sie einen neuen Ordner und benennen Sie ihn API. Wechseln Sie in das Verzeichnis API Ordner und erstellen Sie einen weiteren Ordner namens Authentifizierung Fügen Sie im Ordner auth eine neue Datei hinzu und benennen Sie sie [...nextauth].js und fügen Sie die folgenden Codezeilen hinzu.

importieren NextAuth aus"nächster Autor/nächster";
importieren GoogleProvider aus"next-auth/provider/google";
ExportStandard NextAuth({
 Anbieter:[
 GoogleProvider({
 clientId: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: process.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Dieser Code konfiguriert Google als Authentifizierungsanbieter. Die NextAuth-Funktion definiert das Google-Provider-Konfigurationsobjekt, das zwei Eigenschaften übernimmt: eine Client-ID und ein Client-Secret, das den Provider initialisiert.

Als nächstes öffnen Sie die Seiten/_app.js Datei und nehmen Sie die folgenden Änderungen am Code vor.

importieren'../styles/globals.css'
importieren { Sitzungsanbieter } aus"nächstes authentifizieren/reagieren"
FunktionMeine App({ Komponente, pageProps: { Sitzung, ...pageProps } }) {
zurückkehren (


 </SessionProvider>
 )
}
ExportStandard Meine App

NextAuths Sitzungsanbieter Die Komponente stellt der Next.js-App Authentifizierungsstatus-Verwaltungsfunktionen bereit. Es dauert ein Sitzung prop, die die von der Google-API zurückgegebenen Authentifizierungssitzungsdaten enthält, die Benutzerdetails wie ID, E-Mail und Zugriffstoken enthalten.

Durch Umhüllen der Meine App Komponente mit der SessionProvider-Komponente wird das Authentifizierungs-Session-Objekt mit Benutzerdetails zur Verfügung gestellt in der gesamten Anwendung, sodass die Anwendung Seiten basierend auf ihrem Authentifizierungsstatus beibehalten und rendern kann.

Konfigurieren Sie die index.js-Datei

Öffne das Seiten/index.js Datei, löschen Sie den Boilerplate-Code und fügen Sie den folgenden Code hinzu, um eine Anmeldeschaltfläche zu erstellen, die Benutzer zu einer Anmeldeseite weiterleitet.

importieren Kopf aus'weiter/Kopf'
importieren Stile aus'../styles/Home.module.css'
importieren {useRouter} aus'weiter/router';
ExportStandardFunktionHeim() {
konst router = useRouter();

zurückkehren (





Nächste App erstellen<<span>/title></span><br> <meta name="<span">"description" content=<span>"Generated by 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> Willkommen bei <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> Legen Sie los, indem Sie sich <span>anmelden</span>{<span>' ' </span>}<br> <code classname="{styles.code}"><span>mit</span> Ihrem 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></code></p>
<p><code> <<span>/div></span><br> )<br>}<br></code> </p> <p>Dieser Code verwendet den <strong>useRouter</strong>-Hook von Next.j, um das Routing innerhalb der Anwendung zu handhaben, indem ein Router-Objekt definiert wird. Wenn auf die Anmeldeschaltfläche geklickt wird, ruft die Handler-Funktion die Methode <strong>router.push</strong> zum Umleiten auf den Benutzer auf die Anmeldeseite.</p> <h3 id="Erstelle-eine-Anmeldeauthentifizierungsseite">Erstelle eine Anmeldeauthentifizierung Seite</h3> <p>Erstellen Sie im Verzeichnis <strong>pages</strong> eine neue Datei <strong>Login.js</strong> und fügen Sie dann die folgenden Codezeilen hinzu.</p> <pre> <code><span>importieren</span> { useSession, signIn, signOut } <span>from</span> <span>"next-auth/react"</span><br><span>import</span> { useRouter } <span>from</span> <span>'next /router'</span>;<br><span>importiere</span> Stile <span>aus</span> <span>'../styles/Login.module.css'</span><p><span>export</span> <span>default</span> <span><span>function</span> < span>Login</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">Nächste App erstellen<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Signiert < 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> Benutzerprofil<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Abmelden<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>zurück</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Nächste App erstellen<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Sie sind nicht <span>angemeldet</span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Signieren <span>in</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> und <strong>signOut</strong> sind Hooks, die von <strong>next-auth</strong> bereitgestellt werden. Der Hook <strong>useSession</strong> wird verwendet, um auf das aktuelle Benutzersitzungsobjekt zuzugreifen, sobald sich ein Benutzer anmeldet und erfolgreich authentifiziert wurde Google.</p> <p>Dies ermöglicht Next.js, den Authentifizierungsstatus beizubehalten und die Benutzerdetails auf der Clientseite der App zu rendern, in diesem Fall die E-Mail.</p> <p>Außerdem können Sie mit dem Sitzungsobjekt ganz einfach benutzerdefinierte Benutzerprofile für Ihre Anwendung erstellen und die Daten in einer Datenbank wie z als PostgreSQL. Sie können <span>eine PostgreSQL-Datenbank mithilfe von Prisma mit Ihrer Next.js-Anwendung verbinden</span>.</p> <p>Der Hook signOut ermöglicht es einem Benutzer, sich von der Anwendung abzumelden. Dieser Hook löscht das Sitzungsobjekt, das während des Anmeldevorgangs erstellt wurde, und der Benutzer wird abgemeldet.</p> <p>Fahren Sie fort und starten Sie den Entwicklungsserver Aktualisieren Sie die Änderungen und gehen Sie zu Ihrer Next.js-Anwendung, die im Browser ausgeführt wird, um die Authentifizierungsfunktion zu testen.</p> <pre> <code>npm run dev</code> </pre> <p>Außerdem können Sie <span>Tailwind CSS mit Ihrer Next.js-App verwenden</span>, um die Authentifizierungsmodelle zu gestalten.</p> <h2 id="authentication-using-nextauth"> Authentifizierung mit NextAuth  h2> </h2>
<p>NextAuth unterstützt mehrere Authentifizierungsdienste, die einfach in Ihre Next.js-Anwendungen integriert werden können, um sie clientseitig zu handhaben Authentifizierung.</p> <p>Zusätzlich können Sie eine Datenbank integrieren, um die Daten Ihrer Benutzer zu speichern und das Zugriffstoken serverseitig zu implementieren Authentifizierung für nachfolgende Authentifizierungsanfragen, da NextAuth Unterstützung für verschiedene Datenbankintegrationen bietet.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre>