Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Otentikasi adalah komponen kunci dari pengembangan aplikasi. Ini membantu melindungi data pengguna dan mencegah aktivitas jahat. Sederhananya, ini menentukan kredibilitas identitas pengguna, memastikan bahwa hanya pengguna resmi yang dapat mengakses aplikasi dan sumber dayanya.

Membuat sistem autentikasi khusus dapat menjadi tugas yang memakan waktu, dan di sinilah NextAuth.js berguna. Ini memberikan dukungan otentikasi yang aman untuk aplikasi yang dibangun dengan kerangka kerja Next.js.

Apa itu NextAuth.js?

NextAuth.js adalah pustaka ringan sumber terbuka yang menyediakan otentikasi dan otorisasi dukungan untuk aplikasi Next.js. Ini memungkinkan pengembang dengan cepat dan mudah menyiapkan autentikasi dan otorisasi untuk aplikasi Next.js mereka. Ini menyediakan fitur seperti otentikasi dengan banyak penyedia, email, dan otentikasi tanpa kata sandi.

instagram viewer

Bagaimana NextAuth.js Bekerja dalam Otentikasi?

Solusi autentikasi NextAuth.js menyediakan API sisi klien yang Anda bisa integrasikan ke dalam aplikasi Next.js Anda. Anda dapat menggunakannya untuk mengautentikasi pengguna dengan penyedia masuk berbeda yang telah membuat akun dengan mereka.

Di balik layar, pengguna dialihkan ke halaman masuk penyedia. Setelah autentikasi berhasil, penyedia mengembalikan data sesi yang berisi muatan pengguna. Muatan ini kemudian dapat mengotorisasi akses ke aplikasi dan sumber dayanya.

Pembaruan Fitur Baru di NextAuth.js (v4)

Pada Desember 2022, NextAuth.js merilis versi keempatnya. Versi ini telah diperbaiki dari versi sebelumnya, v3, dengan pembaruan dan modifikasi baru. Perubahan terutama berfokus pada peningkatan penggunaan perpustakaan dalam proses otentikasi.

1. Pembaruan pada Kait useSession

Anda dapat menggunakan kait useSession untuk memeriksa apakah pengguna masuk atau tidak. Dalam versi baru ini, hook useSession mengembalikan objek yang menyediakan cara yang lebih mudah untuk menguji status, berkat penambahan opsi status. Lihat kode di bawah ini:

impor { useSession } dari"auth-berikutnya/bereaksi"
eksporbawaanfungsiKomponen() {
const { data: sesi, status } = useSession()


jika (status "diotentikasi") { 
kembali<P>Masuk sebagai {session.user.email}P>
 }
kembali<P> Tidak masuk P>
}

2. Konteks SessionProvider Menjadi Wajib

Versi baru empat mengamanatkan penggunaan konteks SessionProvider. Ini berarti Anda harus membungkus aplikasi Anda dengan Penyedia useSession. NextAuth.js merekomendasikan untuk membungkus aplikasi Anda di dalam _app.jsx mengajukan.

Selain itu, metode clientMaxAge telah diganti dengan refetchInterval. Ini akan mempermudah pengambilan sesi secara berkala di latar belakang.

impor { Penyedia Sesi } dari"auth-berikutnya/bereaksi"
eksporbawaanfungsiAplikasi({
 Komponen, pageProps: { session, ...pageProps }, 
}) {
kembali ( 
<Penyedia Sesisidang={sidang}refetchInterval={5 * 60}>
<Komponen {...halamanProps} />Penyedia Sesi>
 )
}

3. Mengimpor Penyedia Secara Individual

NextAuth.js menyediakan beberapa layanan penyedia yang dapat Anda gunakan untuk memasukkan pengguna. Mereka termasuk:

  • Menggunakan Penyedia OAuth bawaan (mis. GitHub, Google).
  • Menggunakan Penyedia Email.

Dalam versi baru ini, Anda perlu mengimpor setiap penyedia satu per satu.

impor Penyedia Google dari"auth-berikutnya/penyedia/google"
impor Auth0Provider dari"auth-berikutnya/penyedia/auth0";

4. Perubahan Kecil Lainnya

  • Impor sisi klien telah diganti namanya menjadi next-auth/react from next-auth/client.
  • Perubahan pada argumen metode callback: 
    masuk({ pengguna, akun, profil, email, kredensial })
    sesi({ sesi, token, pengguna })
    jwt({ token, pengguna, akun, profil, isNewUser })

Memulai Dengan NextAuth.js di Otentikasi

Untuk mengintegrasikan NextAuth.js di aplikasi Next.js Anda, ikuti langkah-langkah berikut:

  1. Buat Aplikasi Next.js dengan menjalankan perintah ini: npx buat-aplikasi-berikutnya
  2. Berlari npm instal autentikasi berikutnya di terminal Anda untuk menginstal NextAuth.js di Aplikasi Next.js Anda.
  3. Mengunjungi NextAuth.js dokumentasi resmi dan pilih penyedia pilihan Anda dari daftar yang didukung. Selanjutnya, buat akun di konsol pengembang dari penyedia pilihan Anda dan daftarkan aplikasi Next.js Anda.
  4. Di konsol pengembang penyedia pilihan Anda, tentukan URL rute rumah dan URL pengalihan panggilan balik, simpan perubahan dan salin ID Klien Dan Rahasia Klien.
  5. Di direktori root aplikasi Next.js Anda, buat file .env untuk menampung ID klien Dan Rahasia Klien.
  6. Terakhir, di direktori /pages/api, buat folder baru bernama autentikasi. Di folder auth, buat file baru, dan beri nama [...nextauth].js. Pada file yang dibuat, tambahkan kode di bawah ini. Kode menunjukkan API sisi klien NextAuth.js menggunakan Penyedia Google: 
impor Penyedia Google dari"auth-berikutnya/penyedia/google";
penyedia: [
 Penyedia Google({
clientId: proses.env.GOOGLE_CLIENT_ID,
rahasia klien: proses.env.GOOGLE_CLIENT_SECRET
 })
]

Anda sekarang dapat melanjutkan dan membuat halaman otentikasi login. Berikut adalah rendering DOM untuk komponen login:

impor Reaksi dari'reaksi';
impor { useSession, masuk, keluar } dari"auth-berikutnya/bereaksi"
eksporbawaanfungsiKomponen() {
const { data: sesi } = useSession()


 jika (sesi) {
kembali (
<>
<P> Masuk sebagai {session.user.email} P>
<tombolonClick={() => signOut()}>Keluartombol>

 )
 }
kembali (
<>
<P> Tidak masuk P>
<tombolonClick={() => signIn()}>Masuktombol>

 )
}

Itu useSession Hook mengakses objek sesi pengguna saat ini. Setelah pengguna masuk dan diautentikasi oleh Google, objek sesi dengan muatan pengguna dikembalikan. Ini memungkinkan Next.js merender detail pengguna di sisi klien aplikasi, dalam hal ini email.

Sistem Otentikasi Khusus vs. Solusi Siap Pakai Seperti NextAuth.js

Memilih antara membangun sistem autentikasi khusus dan mengintegrasikan autentikasi siap pakai solusi seperti NextAuth.js, penting untuk mempertimbangkan biaya, kerumitan, dan keamanan masing-masing larutan.

Jika Anda memiliki sumber daya dan keahlian untuk mengembangkan sistem autentikasi khusus, itu mungkin pendekatan terbaik untuk Anda. Namun, jika Anda mencari solusi out-of-the-box yang mudah diterapkan, aman, dan hemat biaya, NextAuth.js mungkin merupakan pilihan yang baik untuk dipertimbangkan. Pada akhirnya, pilihan akan bergantung pada kebutuhan dan preferensi Anda.