Bagaimana Cara Menggunakan Endpoint Sendiri untuk Autentikasi di NextAuth.js?

Published in

Sainseni

3 min readJun 23, 2022

Abstrak

Autentikasi NextAuth.js dengan endpoint eksternal bisa menggunakan Credentials Provider. Kita hanya perlu mendefinisikan apa saja yang diperlukan untuk proses fetch ke endpoint eksternal. Lalu melakukan fetch. Jika respons sesuai yang kita inginkan, tinggal melakukan return. Proses selesai.

Latar Belakang

Framework Next.js memiliki library NextAuth.js untuk menangani masalah autentikasi atau per-login-an. Sebenarnya, NextAuth.js memiliki berbagai macam provider untuk digunakan sebagai metode autentikasi, seperti, dengan Google, Auth0, Github, Twitter, Line, dll.

Namun sayangnya, pada project yang saya kerjakan, autentikasinya menggunakan Strapi dengan endpoint eksternal, dan NextAuth.js tidak menyediakan penghubung untuk metode tersebut.

Beruntung NextAuth.js menyediakan Credentials Provider, sehingga kita bisa menggunakan endpoint apa pun di luar sana.

Pembahasan

Untuk bagian instalasi dan seterusnya, bisa dibaca pada dokumentasi resmi berikut ini https://next-auth.js.org/getting-started/example.

Ketika sampai pada tahap membuat API untuk NextAuth.js, berikut adalah contoh menggunakan Credentials Provider.

Penjelasan mengenai kode akan dituliskan setelah kode di bawah.

Catatan: jika menggunakan javascript, rename menjadi […nexauth].js

Penjelasan

Kode di atas merupakan contoh penggunaan pada NextAuth.js versi 4. Jika versi tersebut berbeda dengan yang kamu gunakan, jangan lupa membaca dokumentasi untuk melihat apa saja yang berbeda.

Berikut adalah penjelasan dari tiap bait kodenya.

Deskripsi

Pada bagian ini kita mendefinisikan nama dari provider yang digunakan untuk autentikasi. Bagian name akan muncul pada button login nantinya.

credentials mendefinisikan data apa saja yang perlu dikirim saat melakukan autentikasi, sederhananya, ini adalah yang akan ditampilkan dalam form login. Jika hanya menggunakan email dan password, maka cukup tuliskan dua hal di atas. Atau jika menggunakan username maka tuliskan username.

Proses Inti

Bisa dibilang, ini merupakan proses inti dari custom provider. Kita melakukan fetch ke API endpoint eksternal untuk melakukan autentikasi. Masukkan apa saja yang diperlukan ke dalam body. Sesuaikan dengan apa yang dibutuhkan oleh endpoint. Jika memerlukan header tambahan, tambahkan pada bagian headers.

Menerima Data

Setelah mendapat respons dari API, maka kita memasukkan respons tersebut pada user. Bagian inilah yang nantinya akan disimpan oleh NextAuth.js. Bagian-bagian ini fleksibel, artinya kamu bebas memasukkan bagian apa pun ke dalam user. Pada intinya, bagian ini hanya dijalankan sekali saat proses login.

Callback

Pada bagian ini, kita memasukkan data user ke dalam session dan jwt agar bisa dipanggil ketika menggunakan getSession() atau getToken().

Untuk lebih lengkap, kamu bisa membacanya pada dokumentasi berikut ini https://next-auth.js.org/configuration/callbacks.

Penutup

Kode di atas hanya contoh singkat dan sederhana, belum memuat handling error. Untuk selanjutnya, kamu bisa menambahkan logic jika seandainya API menyatakan bahwa user tersebut tidak berhak untuk masuk.

Logic bisa dituliskan pada fungsi authorize, setelah proses fetch.

Berikut contohnya.