Kaltaisesi lukijat auttavat tukemaan MUO: ta. Kun teet ostoksen käyttämällä sivustollamme olevia linkkejä, voimme ansaita kumppanipalkkion. Lue lisää.

Todennus on keskeinen osa sovelluskehitystä. Se auttaa suojaamaan käyttäjätietoja ja estämään haitallisia toimia. Yksinkertaisesti sanottuna se määrittää käyttäjän identiteetin uskottavuuden varmistaen, että vain valtuutetut käyttäjät voivat käyttää sovellusta ja sen resursseja.

Mukautetun todennusjärjestelmän luominen voi olla aikaa vievä tehtävä, ja tässä NextAuth.js on hyödyllinen. Se tarjoaa suojatun todennustuen Next.js-kehyksellä rakennetuille sovelluksille.

Mikä on NextAuth.js?

NextAuth.js on avoimen lähdekoodin kevyt kirjasto, joka tarjoaa todennus ja valtuutus tuki Next.js-sovelluksille. Sen avulla kehittäjät voivat nopeasti ja helposti määrittää todennuksen ja valtuutuksen Next.js-sovelluksilleen. Se tarjoaa ominaisuuksia, kuten useiden palveluntarjoajien todentamisen, sähköpostin ja salasanattoman todennuksen.

Miten NextAuth.js toimii todennuksessa?

instagram viewer

NextAuth.js: n todennusratkaisu tarjoaa asiakaspuolen sovellusliittymän, jonka voit tehdä integroida Next.js-sovellukseesi. Voit käyttää sitä käyttäjien todentamiseen eri kirjautumispalveluntarjoajilla, joiden kanssa he ovat luoneet tilit.

Konepellin alla käyttäjät ohjataan palveluntarjoajan kirjautumissivulle. Onnistuneen todennuksen jälkeen palveluntarjoaja palauttaa istuntotiedot, jotka sisältävät käyttäjän hyötykuorman. Tämä hyötykuorma voi sitten valtuuttaa pääsyn sovellukseen ja sen resursseihin.

Uudet ominaisuuspäivitykset NextAuth.js: ssa (v4)

Joulukuussa 2022 NextAuth.js julkaisi neljännen versionsa. Tätä versiota on parannettu aiemmasta versiosta v3 uusilla päivityksillä ja muokkauksilla. Muutokset keskittyvät pääasiassa kirjaston käytön parantamiseen todennusprosessissa.

1. Päivityksiä useSession Hookiin

UseSession-koukun avulla voit tarkistaa, onko käyttäjä kirjautunut sisään vai ei. Tässä uudessa versiossa useSession-koukku palauttaa objektin, joka tarjoaa selkeämmän tavan testata tiloja tila-vaihtoehdon lisäyksen ansiosta. Katso alla oleva koodi:

tuonti { useSession } alkaen"seuraava auth/react"
viedäoletuksenatoimintoKomponentti() {
konst { tiedot: istunto, tila } = useSession()


jos (Tila "todennettu") { 
palata<s>Kirjautunut sisään nimellä {session.user.email}s>
 }
palata<s> Ei kirjautunut sisään s>
}

2. SessionProvider-konteksti tulee pakolliseksi

Uusi versio neljä velvoittaa käyttämään SessionProvider-kontekstia. Tämä tarkoittaa, että sinun on pakattava sovelluksesi useSession Provider -palveluun. NextAuth.js suosittelee käärimään sovelluksesi sisään _app.jsx tiedosto.

Lisäksi clientMaxAge-menetelmä on korvattu refetchIntervalilla. Tämä helpottaa istunnon hakemista säännöllisesti taustalla.

tuonti { SessionProvider } alkaen"seuraava auth/react"
viedäoletuksenatoimintoSovellus({
 Komponentti, pageProps: { session, ...pageProps }, 
}) {
palata ( 
<SessionProvideristunto={istunto}refetchInterval={5 * 60}>
<Komponentti {...sivuProps} />SessionProvider>
 )
}

3. Tuovat palveluntarjoajat erikseen

NextAuth.js tarjoaa useita palveluntarjoajan palveluita, joita voit käyttää käyttäjän kirjautumiseen. Ne sisältävät:

  • Käytä sisäänrakennettuja OAuth-palveluntarjoajia (esim. GitHub, Google).
  • Email Providerin käyttö.

Tässä uudessa versiossa sinun on tuotava jokainen palveluntarjoaja erikseen.

tuonti GoogleProvider alkaen"next-auth/providers/google"
tuonti Auth0Provider alkaen"next-auth/providers/auth0";

4. Muita pieniä muutoksia

  • Asiakaspuolen tuonti on nimetty uudelleen seuraavaksi todennus/reagoi seuraavaksi todennus/asiakas.
  • Muutokset takaisinkutsumenetelmien argumentteihin: 
    kirjautuminen ({ käyttäjä, tili, profiili, sähköposti, tunnistetiedot })
    istunto ({ istunto, tunnus, käyttäjä })
    jwt({ tunnus, käyttäjä, tili, profiili, isuusi käyttäjä })

NextAuth.js: n käytön aloittaminen todentamisessa

Integroi NextAuth.js Next.js-sovelluksiin seuraavasti:

  1. Luo Next.js-sovellus suorittamalla tämä komento: npx Create-next-app
  2. Juosta npm install next-auth päätelaitteeseen asentaaksesi NextAuth.js: n Next.js-sovellukseesi.
  3. Vieraile NextAuth.js viralliset asiakirjat ja valitse haluamasi palveluntarjoaja tuettujen palvelujen luettelosta. Luo seuraavaksi tili valitsemiesi palveluntarjoajien kehittäjäkonsoliin ja rekisteröi Next.js-sovelluksesi.
  4. Määritä valitsemiesi palveluntarjoajien kehittäjäkonsolissa kotireitin URL-osoite ja takaisinsoitto-uudelleenohjauksen URL-osoite, tallenna muutokset ja kopioi Asiakastunnus ja Asiakkaan salaisuus.
  5. Luo Next.js-sovelluksesi juurihakemistoon .env-tiedosto Asiakastunnus ja Asiakkaan salaisuus.
  6. Luo lopuksi /pages/api-hakemistoon uusi kansio nimeltä tod. Luo auth-kansioon uusi tiedosto ja anna sille nimi [...nextauth].js. Lisää luotuun tiedostoon alla oleva koodi. Koodi näyttää NextAuth.js-asiakaspuolen API: n Google-palveluntarjoajan avulla: 
tuonti GoogleProvider alkaen"next-auth/providers/google";
palveluntarjoajat: [
 GoogleProvider({
Asiakastunnus: käsitellä asiaa.env.GOOGLE_CLIENT_ID,
clientSecret: käsitellä asiaa.env.GOOGLE_CLIENT_SECRET
 })
]

Voit nyt jatkaa ja rakentaa kirjautumisen todennussivun. Tässä on DOM-renderöinti kirjautumiskomponentille:

tuonti Reagoi alkaen'reagoi';
tuonti { useSession, signIn, signout } alkaen"seuraava auth/react"
viedäoletuksenatoimintoKomponentti() {
konst { tiedot: istunto } = useSession()


 if (istunto) {
palata (
<>
<s> Kirjautunut sisään nimellä {session.user.email} s>
<-painikettaklikkaamalla={() => signOut()}>Kirjaudu ulos-painiketta>

 )
 }
palata (
<>
<s> Ei kirjautunut sisään s>
<-painikettaklikkaamalla={() => signIn()}>Kirjaudu sisään-painiketta>

 )
}

The useSession Hook käyttää nykyistä käyttäjän istuntoobjektia. Kun käyttäjä kirjautuu sisään ja Google on todentanut hänet, istuntoobjekti käyttäjän hyötykuorman kanssa palautetaan. Tämä sallii Next.js: n renderöidä käyttäjätiedot sovelluksen asiakaspuolella, tässä tapauksessa sähköpostissa.

Mukautetut todennusjärjestelmät vs. Käyttövalmiit ratkaisut, kuten NextAuth.js

Voit valita mukautetun todennusjärjestelmän rakentamisen ja käyttövalmiin todennuksen integroinnin välillä ratkaisu, kuten NextAuth.js, on tärkeää ottaa huomioon kunkin kustannukset, monimutkaisuus ja turvallisuus ratkaisu.

Jos sinulla on resurssit ja asiantuntemus mukautetun todennusjärjestelmän kehittämiseen, se saattaa olla sinulle paras tapa. Jos kuitenkin etsit valmisratkaisua, joka on helppo ottaa käyttöön, turvallinen ja kustannustehokas, NextAuth.js voi olla hyvä valinta. Lopulta valinta riippuu tarpeistasi ja mieltymyksistäsi.