Artikel ini akan mempelajari langkah-langkah yang diperlukan untuk mengimplementasikan autentikasi tanpa kata sandi di proyek Next.js menggunakan pustaka NextAuth.js. Selain itu, kami akan menggunakan Prisma sebagai adaptor database kami untuk mencapai hal ini.
Otentikasi tanpa kata sandi adalah pendekatan inovatif yang menghilangkan kebutuhan akan kombinasi nama pengguna dan kata sandi tradisional. Sebaliknya, ia menawarkan pengalaman autentikasi yang lebih aman dan ramah pengguna dengan memanfaatkan metode alternatif, seperti tautan ajaib email atau kode satu kali yang dikirim melalui SMS.
Next.js adalah framework React yang populer untuk membangun aplikasi web, yang dikenal karena kesederhanaan dan efisiensinya. Kita dapat dengan mudah memasukkan autentikasi tanpa kata sandi ke dalam proyek kita dengan mengintegrasikan NextAuth.js, pustaka autentikasi yang dirancang secara eksplisit untuk Next.js.
Selain itu, kami akan mengandalkan Prisma sebagai adaptor database kami. Prisma adalah alat ORM (Pemetaan Relasional Objek) yang menyederhanakan interaksi database dengan menyediakan pembuat kueri yang aman untuk tipe dan dibuat secara otomatis. Ini mendukung banyak database, termasuk PostgreSQL, MySQL, dan SQLite, menjadikannya pilihan serbaguna untuk implementasi otentikasi kami.
Sepanjang panduan ini, kami akan memberikan petunjuk langkah demi langkah tentang cara menyiapkan dan mengonfigurasi autentikasi tanpa kata sandi menggunakan NextAuth.js di proyek Next.js. Kami juga akan mendemonstrasikan cara mengintegrasikan Prisma sebagai adaptor basis data kami, memungkinkan komunikasi yang lancar antara aplikasi kami dan basis data.
Sekarang kami akan mempelajari cara meningkatkan keamanan dan pengalaman pengguna aplikasi Next.js menggunakan autentikasi tanpa kata sandi serta kemampuan NextAuth.js dan Prisma. Mari kita mulai.
Apa itu login tanpa kata sandi?
Login tanpa kata sandi, seperti namanya, adalah metode autentikasi yang menghilangkan kebutuhan akan kombinasi nama pengguna dan kata sandi tradisional. Sebaliknya, ia menggunakan cara alternatif untuk memverifikasi identitas pengguna, seperti tautan ajaib email atau kode satu kali yang dikirim melalui SMS. Pendekatan ini menawarkan beberapa keunggulan dibandingkan metode login tradisional. Pertama, ini menghilangkan risiko kerentanan terkait kata sandi, seperti kata sandi yang lemah atau penggunaan kembali kata sandi. Kedua, ini menyederhanakan pengalaman pengguna dengan menghilangkan kebutuhan untuk mengingat dan memasukkan kata sandi yang rumit.
Untuk menerapkan login tanpa kata sandi menggunakan tautan ajaib email atau kode satu kali, kita memerlukan server SMTP (Simple Mail Transfer Protocol).
Server SMTP bertanggung jawab untuk mengirim email melalui Internet. Dalam konteks otentikasi tanpa kata sandi, server mengirimkan tautan ajaib atau kode satu kali ke alamat email pengguna yang terdaftar. Saat pengguna memulai proses login, email yang berisi tautan atau kode unik dibuat dan dikirim ke pengguna. Pengguna kemudian dapat mengklik link tersebut atau memasukkan kode untuk menyelesaikan proses otentikasi. Server SMTP bertindak sebagai perantara antara aplikasi dan layanan email pengguna, memastikan pengiriman pesan otentikasi aman dan andal. Dengan memanfaatkan server SMTP, kami dapat secara efektif menerapkan login tanpa kata sandi dan memberikan pengalaman autentikasi yang lancar bagi pengguna kami.
Mari kita mulai!
Pertama, kita perlu membuat proyek Next.js baru yang baru. Untuk melakukannya, gunakan perintah berikut:
npx create-next-app@latest
Setelah Anda membuat proyek Next.js baru, Anda dapat menavigasi ke direktori proyek yang baru dibuat.
Dengan mengubah direktori menjadi proyek, Anda akan dapat menjelajahi berbagai folder dan file yang membentuk struktur proyek Next.js.
Memahami struktur proyek sangat penting untuk pengembangan dan pengorganisasian aplikasi Next.js Anda secara efektif. Dengan mengacu pada dokumentasi resmi, Anda dapat memanfaatkan praktik terbaik dan mendapatkan wawasan tentang cara menyusun kode, mengelola aset statis, dan membuat komponen yang dapat digunakan kembali.
Menginstal dependensi kami
Untuk mengaktifkan autentikasi tanpa kata sandi di proyek Next.js menggunakan NextAuth.js, pertama-tama kita harus menginstal dependensi yang diperlukan. Jalankan perintah yarn add next-auth nodemailer untuk menambahkan NextAuth.js dan nodemailer ke proyek kita.
Kami secara khusus menggunakan nodemailer karena merupakan modul yang populer dan serbaguna untuk mengirim email di Node.js. Ini memberikan cara yang mudah dan andal untuk mengirim tautan ajaib atau kode satu kali yang diperlukan untuk otentikasi tanpa kata sandi melalui email.
Selanjutnya, mari kita integrasikan Prisma sebagai adaptor database kita. Mulailah dengan menginstal paket Prisma yang diperlukan menggunakan perintah:
yarn add @prisma/client @next-auth/prisma-adapter
Paket-paket ini akan memungkinkan komunikasi yang lancar antara aplikasi Next.js dan database. Selain itu, kita juga perlu menginstal Prisma sebagai dependensi dev dengan menjalankan:
yarn add prisma --dev
Langkah ini memastikan kami memiliki alat yang diperlukan untuk bekerja dengan Prisma dan pembuat kueri yang dibuat secara otomatis untuk interaksi database.
Dengan menginstal dependensi ini, kami menetapkan dasar untuk mengimplementasikan autentikasi tanpa kata sandi menggunakan NextAuth.js dan Prisma di proyek Next.js kami.
Siapkan Prisma
Prisma perlu diatur dan memiliki akses ke server SMTP untuk pengiriman email guna menggunakan autentikasi tanpa kata sandi dalam proyek Next.js. Tutorial ini akan memandu Anda dalam menggunakan akun Gmail pribadi Anda untuk mengirim email. Ikuti langkah-langkah di bawah ini agar penyiapan berhasil.
Pertama, buat folder "prisma" di root proyek Anda. Folder ini akan menampung file dan konfigurasi terkait Prisma. Kemudian, di dalam folder "prisma", buat file baru bernama "schema.prisma" File skema menentukan struktur database Anda dan berfungsi sebagai cetak biru untuk kode Prisma yang dibuat secara otomatis.
Jika Anda baru mengenal konsep skema, jangan khawatir! Skema menentukan tabel, bidang, hubungan, dan batasan database Anda. Untuk membuat skema, Anda dapat merujuk ke dokumentasi resmi NextAuth.js dan menyalin contoh skema yang disediakan di sana. Skema ini adalah titik awal dan dapat disesuaikan agar sesuai dengan kebutuhan aplikasi Anda.
Selanjutnya, buat file ".env" di root proyek Anda. File ini akan menyimpan variabel lingkungan Anda, termasuk konfigurasi yang diperlukan untuk server SMTP Anda. Untuk mengisi file ".env", Anda dapat menyalin contoh konfigurasi yang disediakan di bawah. Pastikan untuk memasukkan kredensial akun Gmail Anda dan pengaturan server SMTP di bidang yang sesuai.
EMAIL_SERVER_USER="YourGmailAddress"
EMAIL_SERVER_PASSWORD="GmailPassOrGeneratedPass"
EMAIL_SERVER_HOST=smtp.gmail.com
EMAIL_SERVER_PORT=587
EMAIL_FROM="noreply@example.com"
NEXTAUTH_URL=http://localhost:3000
NEXTAUTH_SECRET=ThisNeedsToBeSuperSecret
Dengan mengikuti langkah-langkah ini, Anda telah menyiapkan Prisma dan mengonfigurasi server SMTP untuk mengirim email menggunakan akun Gmail Anda. Persiapan ini sangat penting untuk mengaktifkan alur autentikasi tanpa kata sandi di proyek Next.js Anda.
Catatan
Anda harus membuat kata sandi aplikasi jika Anda telah mengaktifkan Otentikasi Dua Faktor (2FA) untuk akun Google Anda. Kata sandi aplikasi adalah kata sandi berbeda yang memberikan akses ke aplikasi atau perangkat tertentu tanpa mengungkapkan kata sandi akun Google utama Anda. Ikuti petunjuk di bawah ini untuk membuat kata sandi aplikasi.
-
Buka halaman setelan Akun Google dengan mengunjungi https://myaccount.google.com/.
-
Navigasikan ke tab "Keamanan".
-
Cari bagian "2FA", gulir ke bawah dan pilih "Kata Sandi Aplikasi".
-
Anda mungkin diminta memasukkan kembali kata sandi akun Google Anda untuk verifikasi keamanan.
-
Di bawah tarik-turun "Pilih aplikasi", pilih "Mail" atau "Lainnya (Nama khusus)".
-
Jika opsi "Mail" tersedia, pilihlah.
-
Jika opsi "Mail" tidak tersedia, pilih "Lainnya (Nama khusus)" dan berikan nama khusus untuk identifikasi.
-
Klik tombol "Buat" atau "Buat Kata Sandi".
-
Google akan membuatkan kata sandi aplikasi unik untuk Anda. Catat kata sandi ini, karena kami akan menggunakan kata sandi ini dalam aplikasi kami untuk mengirim email.
-
Gunakan kata sandi aplikasi yang dihasilkan ini dalam konfigurasi server SMTP aplikasi Next.js Anda. Ganti kata sandi akun Gmail biasa Anda dengan kata sandi aplikasi ini.
Hal ini memastikan bahwa meskipun 2FA diaktifkan, aplikasi Anda dapat mengirim email dengan aman menggunakan akun Gmail Anda.
PostgreSQL menggunakan Supabase
Sebelum kita melanjutkan, kita perlu memastikan bahwa database untuk proyek kita berfungsi dengan benar. Untuk demo ini, kami merekomendasikan penggunaan database Supabase PostgreSQL. Untuk memulai proyek Supabase dan mendapatkan URL koneksi PostgreSQL, ikuti langkah-langkah berikut:
-
Buka supabase.io dan masuk ke akun Anda atau buat akun baru jika Anda belum memilikinya.
-
Setelah login, Anda akan diarahkan ke dashboard Supabase. Klik "Buat Proyek Baru" untuk memulai proyek baru.
-
Beri nama proyek Anda dan pilih wilayah yang paling dekat dengan lokasi Anda saat ini. Ingat kata sandi Anda, Anda akan memerlukannya nanti.
-
Setelah Anda membuat proyek, Anda akan dibawa ke dashboard proyek. Klik "Database" di sidebar kiri untuk mengakses pengaturan database.
-
Di bagian "Database", Anda akan menemukan URL koneksi PostgreSQL. URL ini berisi semua informasi yang diperlukan untuk terhubung ke database proyek Supabase Anda, seperti host, port, nama database, nama pengguna, dan kata sandi. Ini akan ditampilkan dalam format:
postgres://<nama pengguna>:<kata sandi>@<host>:<port>/<database>
- Salin URL koneksi PostgreSQL dan jaga keamanannya. Anda memerlukannya untuk membuat koneksi antara aplikasi Anda dan database Supabase.
// .env
DATABASE_URL=postgresql://postgres:[Password]@db.ixjsisbwdafsjvgifliu.supabase.co:5432/postgres
```
Sekarang, mari pastikan bahwa kita membuat klien Prisma dengan menjalankan perintah berikut: `npx prisma generate`.
Klien Prisma adalah klien database yang dibuat secara otomatis berdasarkan skema Anda. Secara default, Klien Prisma dibuat ke dalam folder `node_modules/.prisma/client`, namun Anda dapat [menentukan lokasi khusus jika diperlukan](https://www.prisma.io/docs/concepts/components/prisma-client/working-with-prismaclient/generating-prisma-client#using-a-custom-output-path).
Selanjutnya, kita akan melanjutkan untuk membuat migrasi awal kita. Jalankan perintah berikut: `npx prisma migrasi dev`. Anda dapat memberi nama deskriptif pada setiap migrasi.
Di Prisma, migrasi adalah metode yang digunakan untuk mengelola penyesuaian skema database Anda seiring berjalannya waktu. Ini memungkinkan Anda mengubah struktur database tanpa kehilangan data yang sudah ada sebelumnya. Migrasi ini sangat penting karena memastikan skema database Anda selaras dengan kebutuhan aplikasi Anda seiring perubahannya. Dengan alat migrasi Prisma, Anda dapat dengan mudah membuat versi, menerapkan, dan mengembalikan perubahan ini, menyederhanakan kerja tim, dan mempertahankan skema database yang seragam di berbagai lingkungan.
Sekarang, jika kita memeriksa database kita, kita akan dapat melihat perubahan dari migrasi awal kita tercermin di bagian database.
Dengan melakukan migrasi awal, kami telah menerapkan modifikasi pada skema database kami seperti yang ditentukan dalam skrip migrasi.
### Menyiapkan NextAuthJS dengan Adaptor Prisma
Dalam aplikasi Next.js, NextAuthJS menggunakan rute catch-all, juga dikenal sebagai rute wildcard atau fallback, untuk mengelola permintaan autentikasi. Rute dinamis ini ditentukan menggunakan sistem perutean berbasis file di Next.js.
Buat folder bernama "**api**" di dalam direktori "**app**" Anda. Di dalam folder "**api**", buat folder "**auth**". Di dalam folder "**auth**", buat rute penampung semua yang disebut "**[...nextauth]**" sebagai folder. Terakhir, buat file "**route.ts**" di dalam folder rute catch-all dan tambahkan kode berikut.
```jsx
// app/api/auth/[...nextauth]/route.ts
import { PrismaAdapter } from '@next-auth/prisma-adapter';
import { PrismaClient } from '@prisma/client';
import NextAuth from 'next-auth';
import EmailProvider from 'next-auth/providers/email';
const prisma = new PrismaClient();
export const authOptions = {
adapter: PrismaAdapter(prisma),
providers: [
EmailProvider({
server: {
host: process.env.EMAIL_SERVER_HOST,
port: process.env.EMAIL_SERVER_PORT,
auth: {
user: process.env.EMAIL_SERVER_USER,
pass: process.env.EMAIL_SERVER_PASSWORD,
},
},
from: process.env.EMAIL_FROM,
}),
]
};
const handler = NextAuth(authOptions);
export { handler as GET, handler as POST };
Dalam file rute penampung semua, kami mengimpor pustaka NextAuthJS dan menyiapkan opsi autentikasi, penyedia, dan konfigurasi. NextAuthJS menangani penguraian permintaan masuk, mengidentifikasi tindakan otentikasi yang diperlukan, dan menjalankan logika yang sesuai sesuai dengan opsi yang ditentukan.
Kode yang diberikan menyiapkan NextAuthJS dengan adaptor Prisma untuk autentikasi menggunakan penyedia email. Mari kita jelaskan setiap pernyataan:
- Impor:
-
PrismaAdapterdanPrismaClientmasing-masing diimpor dari@next-auth/prisma-adapterdan@prisma/client. Ini digunakan untuk mengintegrasikan NextAuthJS dengan Prisma. -
NextAuthdiimpor darinext-authdan merupakan perpustakaan utama untuk menangani otentikasi di aplikasi Next.js. -
EmailProviderdiimpor darinext-auth/providers/emaildan digunakan sebagai penyedia otentikasi berbasis email.
- Pengaturan Prisma:
- Sebuah instance dari
PrismaClientdibuat menggunakannew PrismaClient(). Hal ini memungkinkan komunikasi dengan Prisma ORM dan database yang mendasarinya.
- Opsi Otentikasi:
-
authOptionsadalah objek yang mendefinisikan konfigurasi untuk otentikasi di NextAuthJS. -
Properti
adapterdisetel kePrismaAdapter(prisma), yang menghubungkan NextAuthJS dengan Prisma menggunakanPrismaAdapter. -
Array
providersberisi satu penyedia,EmailProvider. Ini dikonfigurasi dengan detail server email yang diperlukan dan alamat emailfrom.
- Pengendali Otentikasi Berikutnya:
-
Fungsi
NextAuthdipanggil denganauthOptionssebagai argumen, sehingga membuat pengendali autentikasi. -
Penangan yang dihasilkan ditugaskan ke variabel
handler.
- Ekspor:
handlerdiekspor sebagaiGETdanPOSTuntuk mendukung permintaan HTTP GET dan POST.
Sekarang, mari jalankan server kita dan uji fungsinya. Pertama, mulai server pengembangan dengan menjalankan yarn dev. Selanjutnya, buka browser Anda dan kunjungi localhost:3000 untuk melihat aplikasi beraksi.
Untuk menguji fungsionalitas autentikasi, kunjungi localhost:3000/api/auth/signin. Di sini, Anda akan merasakan keajaiban NextAuthJS. Templat yang disediakan yang disertakan dengan NextAuthJS memungkinkan proses masuk tanpa kata sandi. Untuk mencobanya, masukkan alamat email yang valid.
Setelah Anda mengirimkan email, NextAuthJS akan menangani proses di balik layar. Pertama, ia akan membuat dan mengirim email berisi tautan masuk unik ke alamat email yang diberikan. Tautan ini berfungsi sebagai token autentikasi yang aman bagi pengguna. Kemudian, ketika pengguna mengklik link tersebut, NextAuthJS akan memvalidasi token dan mengautentikasi pengguna.
Fitur login tanpa kata sandi ini meningkatkan keamanan dan pengalaman pengguna dengan menghilangkan kebutuhan akan kata sandi. Pengguna dapat mengakses akun mereka dengan cepat dan aman hanya dengan mengeklik tautan yang diterima melalui email. Ini menyederhanakan proses login dan mengurangi risiko kerentanan terkait kata sandi.
Saat pengguna mengeklik email masuk yang dibuat oleh NextAuthJS dan diautentikasi, beberapa tindakan terjadi di belakang layar untuk memfasilitasi pengalaman masuk yang lancar.
1. Validasi Tautan Email: Saat pengguna mengklik tautan masuk, NextAuthJS memvalidasi token autentikasi yang tertanam dalam tautan. Token ini menjamin keamanan dan integritas proses otentikasi.
2. Proses Otentikasi: Setelah validasi token berhasil, NextAuthJS mengidentifikasi pengguna dan menyelesaikan proses autentikasi. Ini memverifikasi identitas pengguna berdasarkan token yang disediakan dan faktor autentikasi tambahan apa pun yang dikonfigurasi, seperti autentikasi multifaktor.
3. Pembuatan Sesi: Setelah autentikasi berhasil, NextAuthJS membuat sesi untuk pengguna. Sesi adalah keadaan persisten yang mewakili status autentikasi pengguna dan memungkinkan mereka mengakses sumber daya yang dilindungi tanpa harus mengautentikasi ulang untuk permintaan berikutnya.
4. Cookie: NextAuthJS menyetel cookie aman khusus HTTP di browser pengguna untuk mengelola sesi. Cookies ini memainkan peran penting dalam mempertahankan status terotentikasi pengguna di beberapa permintaan. Cookie biasanya menyertakan cookie sesi dan opsional cookie token penyegaran, bergantung pada konfigurasi autentikasi.
-
Cookie Sesi: Cookie sesi berisi pengidentifikasi sesi (misalnya, string yang dibuat secara acak) yang secara unik mengidentifikasi sesi pengguna. Ini membantu NextAuthJS mengaitkan permintaan berikutnya dengan sesi dan pengguna yang benar.
-
Cookie Token CSRF: NextAuthJS menetapkan cookie token CSRF (Pemalsuan Permintaan Lintas Situs) untuk melindungi dari serangan CSRF. Token CSRF adalah nilai unik yang dihasilkan oleh NextAuthJS dan disimpan dalam cookie. Ini digunakan untuk memvalidasi dan memverifikasi keaslian permintaan berikutnya yang dibuat oleh pengguna. Saat pengguna mengirimkan formulir atau melakukan tindakan sensitif, token CSRF disertakan dalam header atau isi permintaan untuk memastikan bahwa permintaan berasal dari sesi pengguna yang diautentikasi dan bukan dari sumber jahat.
-
Cookie URL Panggilan Balik: NextAuthJS menyetel cookie URL panggilan balik untuk menyimpan URL asli yang coba diakses pengguna sebelum dialihkan ke alur autentikasi. Cookie ini membantu NextAuthJS mengarahkan pengguna kembali ke halaman yang diinginkan setelah otentikasi berhasil. Ini memastikan pengalaman pengguna yang lancar dengan mengembalikan pengguna ke tujuan yang diinginkan secara lancar, bukan ke laman landas umum.
Dengan menggunakan cookie khusus HTTP yang aman, NextAuthJS memastikan bahwa status autentikasi tetap aman dan anti kerusakan. Cookie dienkripsi, mencegah akses tidak sah atau modifikasi oleh pelaku jahat.
Kerja bagus karena berhasil mengintegrasikan NextAuthJS dengan adaptor Prisma ke dalam aplikasi Next.js Anda! Dengan kemudahan dan kemampuan beradaptasi yang disediakan oleh NextAuthJS, Anda kini memiliki sistem otentikasi yang andal.
Lihat repositori GitHub yang tertaut di bawah untuk mengetahui kode yang digunakan dalam panduan ini: https://github.com/codelabsacademy/next-auth-guide.
Tapi mengapa berhenti di sini? Jika Anda tertarik dengan pengembangan web dan ingin meningkatkan keterampilan Anda, pertimbangkan untuk mendaftar ke kamp pelatihan pengembangan web kami. Bootcamp kami menawarkan pengalaman belajar yang komprehensif, membekali Anda dengan pengetahuan dan keterampilan praktis yang diperlukan untuk unggul dalam dunia pengembangan web yang dinamis.
Dengan bergabung dalam bootcamp kami, Anda akan mendapatkan pengalaman langsung dengan teknologi mutakhir, mengerjakan proyek dunia nyata, dan menerima panduan yang dipersonalisasi dari pakar industri. Baik Anda seorang pemula atau pengembang berpengalaman, program kami dirancang untuk meningkatkan keterampilan pengembangan web Anda ke tingkat berikutnya.
Jangan lewatkan kesempatan ini untuk mempercepat perjalanan pengembangan web Anda. Daftar untuk bootcamp pengembangan web kami hari ini dan buka potensi penuh Anda di bidang pengembangan web yang menarik. Bersama-sama, mari kita bangun pengalaman digital yang luar biasa dan membentuk masa depan web.
