Ova vam biblioteka omogućuje besprijekornu integraciju Google autentifikacije u vašu Next.js aplikaciju, eliminirajući potrebu da je razvijate od nule.

Integracija sigurnog sustava provjere autentičnosti ključni je razvojni korak koji ne samo da pruža sigurno okruženje za korisnike, već i ulijeva povjerenje u vaš proizvod. Ovaj sustav osigurava da su njihovi podaci zaštićeni i da samo ovlaštene osobe mogu pristupiti aplikaciji.

Izgradnja sigurne autentifikacije od temelja može biti dugotrajan proces koji zahtijeva temeljitu razumijevanje autentifikacijskih protokola i procesa, posebice pri rukovanju različitim autentifikacijskim postupcima pružatelji usluga.

Koristeći NextAuth, možete prebaciti svoj fokus na izgradnju osnovnih značajki. Čitajte dalje kako biste saznali kako integrirati prijavu na Google društvene mreže u svoju aplikaciju koristeći NextAuth.

Kako radi NextAuth

NextAuth.js je knjižnica za provjeru autentičnosti otvorenog koda koja pojednostavljuje postupak dodavanja autentifikacija i autorizacija

funkcionalnost za Next.js aplikacije kao i prilagođavanje tijeka rada provjere autentičnosti. Omogućuje niz značajki kao što su e-pošta, provjera autentičnosti bez lozinke i podrška za razne pružatelje usluga provjere autentičnosti kao što su Google, GitHub i drugi.

Na visokoj razini, NextAuth djeluje kao posredni softver, olakšavajući proces autentifikacije između vaše aplikacije i pružatelja usluga. Ispod haube, kada se korisnik pokuša prijaviti, preusmjerava se na Googleovu stranicu za prijavu. Nakon uspješne provjere autentičnosti, Google vraća sadržaj koji uključuje korisničke podatke, poput imena i adrese e-pošte. Ovi se podaci koriste za autorizaciju pristupa aplikaciji i njezinim resursima.

Koristeći korisničke podatke, NextAuth stvara sesiju za svakog autentificiranog korisnika i pohranjuje token sesije u sigurni kolačić samo za HTTP. Token sesije koristi se za provjeru identiteta korisnika i održavanje njegovog statusa provjere autentičnosti. Ovaj se postupak također odnosi na druge pružatelje s malim varijacijama u implementaciji.

Registrirajte svoju Next.js aplikaciju na Google Developer Console

NextAuth pruža podršku za Google uslugu autentifikacije. Međutim, kako bi vaša aplikacija mogla komunicirati s Google API-jima i omogućiti korisnicima provjeru autentičnosti njihove Google vjerodajnice, morat ćete registrirati svoju aplikaciju na Google konzoli za razvojne programere i dobiti a ID klijenta i Tajna klijenta.

Da biste to učinili, idite na Google Developer Console. Zatim se prijavite sa svojim Google računom za pristup konzoli. Nakon što se prijavite, kreirajte novi projekt.

Na stranici s pregledom projekta odaberite API-ji i usluge s popisa usluga u lijevom oknu izbornika i na kraju, vjerodajnice opcija.

Klikni na Stvorite vjerodajnice gumb za generiranje ID-a klijenta i Tajne klijenta. Zatim odredite vrstu aplikacije iz danih opcija, a zatim navedite naziv za svoju aplikaciju.

Nakon toga navedite URL početne rute svoje aplikacije i na kraju navedite ovlašteni URI za preusmjeravanje za svoju aplikaciju. Za ovaj slučaj bi trebalo biti http://localhost: 3000/api/auth/callback/google kako je navedeno u postavkama Google davatelja usluge NextAuth.

Nakon uspješne registracije, Google će vam dati ID klijenta i tajnu klijenta za upotrebu u vašoj aplikaciji.

Postavite aplikaciju NextJS

Za početak kreirajte projekt Next.js lokalno:

npx create-next-app next-auth-app

Nakon što je postavljanje dovršeno, idite do novostvorenog direktorija projekta i pokrenite ovu naredbu da biste pokrenuli razvojni poslužitelj.

npm run dev

Otvorite svoj preglednik i idite na http://localhost: 3000. Ovo bi trebao biti očekivani rezultat.

Kôd ovog projekta možete pronaći u GitHub spremište.

Postavljanje .env datoteke

U korijenskoj mapi vašeg projekta stvorite novu datoteku i dajte joj naziv .env za čuvanje vašeg ID-a klijenta, tajne i osnovnog URL-a.

NEXT_PUBLIC_GOOGLE_CLIENT_ID= 'ID klijenta'
NEXT_PUBLIC_GOOGLE_CLIENT_SECRET= 'tajna'
NEXT_PUBLIC_NEXTAUTH_URL= ' http://localhost: 3000'

URL NextAUTH koristi se za određivanje osnovnog URL-a vaše aplikacije, koji se koristi za preusmjeravanje korisnika nakon dovršetka autentifikacije.

Integrirajte NextAuth u svoju aplikaciju Next.js

Najprije instalirajte knjižnicu NextAuth-a u svoj projekt.

npm instaliraj next-auth

Dalje, u /pages imenik, stvorite novu mapu i dajte joj naziv api. Promijenite direktorij u api mapu i stvorite drugu mapu pod nazivom auth. U auth mapu dodajte novu datoteku i dajte joj naziv [...nextauth].js i dodajte sljedeće retke koda.

uvoz NextAuth iz"sljedeća auth/sljedeća";
uvoz GoogleProvider iz"next-auth/providers/google";
izvozzadano NextAuth({
 pružatelji usluga: [
 GoogleProvider({
 clientId: proces.env. NEXT_PUBLIC_GOOGLE_CLIENT_ID,
 clientSecret: proces.env. NEXT_PUBLIC_GOOGLE_CLIENT_SECRET,
 }),
 ]
});

Ovaj kod konfigurira Google kao davatelja autentifikacije. Funkcija NextAuth definira konfiguracijski objekt Google davatelja koji ima dva svojstva: ID klijenta i tajnu klijenta koja inicijalizira davatelja.

Zatim otvorite stranice/_app.js datoteku i napravite sljedeće promjene u kodu.

uvoz'../styles/globals.css'
uvoz {SessionProvider} iz"next-auth/react"
funkcijaMyApp({ Komponenta, pageProps: { session, ...pageProps } }) {
povratak (


 </SessionProvider>
 )
}
izvozzadano MyApp

NextAuth's SessionProvider komponenta pruža funkciju upravljanja stanjem provjere autentičnosti aplikaciji Next.js. Potrebno je a sjednica prop koji sadrži podatke o sesiji provjere autentičnosti vraćene iz Googleovog API-ja koji uključuju podatke o korisniku kao što su njihov ID, e-pošta i pristupni token.

Umotavanjem u MyApp komponentu s komponentom SessionProvider, objekt sesije provjere autentičnosti s detaljima o korisniku postaje dostupan u cijeloj aplikaciji, omogućujući aplikaciji da traje i prikazuje stranice na temelju njihovog stanja provjere autentičnosti.

Konfigurirajte datoteku index.js

Otvori stranice/index.js datoteku, izbrišite predložak koda i dodajte kod u nastavku da biste stvorili gumb za prijavu koji usmjerava korisnike na stranicu za prijavu.

uvoz glava iz'sljedeća/glava'
uvoz stilovi iz'../styles/Home.module.css'
uvoz {useRouter} iz'sljedeći/usmjerivač';
izvozzadanofunkcijaDom() {
konst usmjerivač = useRouter();

povratak (





Stvori sljedeću aplikaciju<<span>/title></span><br> <meta name="<span">"description" content=<span>"Generirano stvaranjem sljedeće aplikacije"</span> /> <br> <veza rel="<span">"icon" href=<span>"/favicon.ico"</span> /><br> <<span>/Head></span><p> <main classname="{styles.main}"><br> <h1 classname="{styles.title}">
<br> Dobro došli u <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> Započnite prijavom <span>u</span>{<span>' ' </span>}<br> <kod classname="{styles.code}"><span>s</span> vašim Google računom<<span>/code></span><br> <button classname="{styles.loginButton}<br/"> onClick={ () => router.push(<span>'/Login'</span>)}> Prijava<<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>Ovaj kôd koristi Next.js <strong>useRouter</strong> kuku za rukovanje usmjeravanjem unutar aplikacije definiranjem objekta usmjerivača. Kada se klikne gumb za prijavu, funkcija rukovatelja poziva metodu <strong>router.push</strong> za preusmjeravanje korisnika na stranicu za prijavu.</p> <h3 id="create-a-login-authentication-page">Stvorite autentifikaciju za prijavu Stranica</h3> <p>U direktoriju <strong>pages</strong> kreirajte novu datoteku <strong>Login.js</strong>, zatim dodajte sljedeće retke koda.</p> <pre> <code><span>import</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>uvezi</span> stilove <span>iz</span> <span>'../styles/Login.module.css'</span><p><span>izvoz</span> <span>zadana</span> <span><span>funkcija</span> < span>Prijava</span>() {<br> <span>const</span> { <span>podaci</span>: sesija } = useSession()<br> <span>const</span> router = useRouter();<br> <span>if</span> (sesija) {<br> <span>return</span> (<br> </p>
<div classname="{styles.container}">
<br> <h1 classname="<span">"title">Stvori sljedeću aplikaciju<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Potpisano < span>u <span>kao</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> Korisnički profil<br> <<span>/button></span><br> <button classname="{styles.button}" onclick="{()"> {<br> signOut()<br> }}><br> Odjava<br> <<span>/button></span> <br> <<span>/div></span><br> <<span>/div></span><br> <<span>/div></span><p><code> )<br> }<br> <span>povratak</span> (<br> <div classname="{styles.container}">
<br> <h1 classname="<span">"title">Stvori sljedeću aplikaciju<<span>/h1></span><br> <div classname="{styles.content}">
<br> <h2> Niste prijavljeni <span></span>!!<<span>/h2></span><br> <button classname="{styles.button}<br/"> onClick={() => signIn()}>Prijava <span>in</span><<span>/button></span><br> <<span>/div></span><br> <<span>/div></span>< br/> )<br>}  <p><strong>useSession</strong>, <strong>signIn</strong> i <strong>signOut</strong> su kuke koje omogućuje <strong>next-auth</strong>. Priključak <strong>useSession</strong> koristi se za pristup trenutnom objektu korisničke sesije nakon što se korisnik prijavi i uspješno ga autentificira Google.</p> <p>Ovo omogućuje Next.js-u da zadrži stanje provjere autentičnosti i prikaže korisničke podatke na klijentskoj strani aplikacije, u ovom slučaju, e-pošta.</p> <p>Štoviše, korištenjem objekta sesije možete jednostavno izgraditi prilagođene korisničke profile za svoju aplikaciju i pohraniti podatke u bazu podataka kao kao PostgreSQL. Možete <span>povezati PostgreSQL bazu podataka sa svojom Next.js aplikacijom pomoću Prisme</span>.</p> <p>Priključak za odjavu omogućuje korisniku da se odjavi iz aplikacije. Ova kuka će izbrisati objekt sesije stvoren tijekom procesa prijave i korisnik će biti odjavljen.</p> <p>Samo naprijed i zavrtite razvojni poslužitelj na ažurirajte promjene i prijeđite na svoju Next.js aplikaciju koja radi u pregledniku da testirate funkciju provjere autentičnosti.</p> <pre> <code>npm run dev</code> </pre> <p>Nadalje, možete <span>koristiti Tailwind CSS sa svojom aplikacijom Next.js</span> za stiliziranje modela autentifikacije.</p> <h2 id="authentication-using-nextauth"> Autentifikacija pomoću NextAuth  h2> </h2>
<p>NextAuth podržava višestruke usluge provjere autentičnosti koje se lako mogu integrirati u vaše Next.js aplikacije za rukovanje na strani klijenta provjera autentičnosti.</p> <p>Dodatno, možete integrirati bazu podataka za pohranu podataka vaših korisnika i pristupni token za implementaciju na strani poslužitelja autentifikaciju za naknadne zahtjeve za autentifikaciju jer NextAuth pruža podršku za različite integracije baza podataka.</p> </button>
</h2>
</div>
</h1>
</div></code></p></button></span></button>
</div>
</h2>
</div>
</h1>
</div></code></pre></veza>