Cara Membuat Auth dengan NextAuth di Next.js

Dalam artikel ini, kita akan membahas cara membuat authentication (auth) menggunakan NextAuth.js di aplikasi Next.js. Authentication (autentikasi) sendiri adalah komponen penting dalam pengembangan aplikasi web modern.

Dengan autentikasi yang kuat, Anda dapat melindungi data sensitif pengguna dan memberikan pengalaman pengguna yang lebih aman dan terkendali.

Next.js adalah framework React yang populer untuk pengembangan aplikasi web, dan NextAuth.js adalah pustaka autentikasi yang kuat yang berintegrasi dengan baik dalam Next.js.

Apa Itu NextAuth.js?

NextAuth.js adalah pustaka autentikasi yang dibangun di atas framework Next.js. Ini menyediakan solusi lengkap untuk autentikasi pengguna dengan dukungan untuk berbagai penyedia seperti GitHub, Google, Facebook, dan banyak lagi.

NextAuth.js juga menyediakan integrasi yang mulus dengan basis data Anda dan berbagai skenario autentikasi, termasuk autentikasi OAuth, otentikasi sosial, dan banyak lagi.

Persiapan Awal

Sebelum kita mulai, pastikan Anda telah mengatur proyek Next.js Anda. Jika Anda belum, Anda dapat membuatnya dengan perintah berikut:

npx create-next-app my-auth-app
cd my-auth-app

Selanjutnya, kita perlu menginstal NextAuth.js ke dalam proyek kita:

npm install next-auth

Konfigurasi NextAuth.js

Untuk mengkonfigurasi NextAuth.js, Anda perlu membuat file next-auth.js di direktori Anda. File ini akan berisi pengaturan autentikasi Anda, seperti penyedia yang akan Anda gunakan.

Berikut contoh file konfigurasi next-auth.js:

import NextAuth from 'next-auth'
import Providers from 'next-auth/providers'

export default NextAuth({
  providers: [
    Providers.Google({
      clientId: process.env.GOOGLE_CLIENT_ID,
      clientSecret: process.env.GOOGLE_CLIENT_SECRET,
    }),
  ],
})

Pastikan Anda menggantikan process.env.GOOGLE_CLIENT_ID dan process.env.GOOGLE_CLIENT_SECRET dengan kredensial OAuth Google Anda. Anda juga bisa menambahkan penyedia lain seperti GitHub, Facebook, atau penyedia OAuth lainnya.

Buat Component Autentikasi

Selanjutnya, kita akan membuat komponen yang akan digunakan untuk autentikasi pengguna. Ini bisa menjadi bagian dari header, tampilan login khusus, atau di mana saja di situs Anda.

Berikut contoh komponen autentikasi sederhana:

import { useSession, signIn, signOut } from 'next-auth/react'

function AuthButton() {
  const { data: session } = useSession()

  if (session) {
    return (
      <button onClick={() => signOut()}>Keluar</button>
    )
  } else {
    return (
      <button onClick={() => signIn('google')}>Masuk dengan Google</button>
    )
  }
}

export default AuthButton

Buat Component Autentikasi

Sekarang kita dapat menggunakan komponen autentikasi yang telah dibuat di berbagai bagian situs Anda. Contoh penggunaannya sebagai berikut:

import AuthButton from '../components/AuthButton'

function Home() {
  return (
    <div>
      <h1>Selamat datang di Aplikasi Auth Next.js</h1>
      <AuthButton />
    </div>
  )
}

export default Home

Uji Coba Autentikasi

Sekarang Anda telah mengatur autentikasi dengan NextAuth.js di Next.js, Anda dapat menjalankan proyek Anda dan mencobanya. Pastikan Anda telah menambahkan kredensial penyedia OAuth yang Anda gunakan di konfigurasi next-auth.js.

Untuk menjalankan proyek Next.js Anda, gunakan perintah berikut:

npm run dev

Kemudian, buka situs Anda di peramban dan coba tombol “Masuk dengan Google” atau tombol autentikasi lain yang Anda buat. Anda harus dapat masuk dengan sukses dan keluar jika diperlukan.

Kesimpulan

Dalam tutorial ini, kita telah membahas cara membuat auth pengguna dengan NextAuth.js di Next.js. Autentikasi adalah komponen penting dalam pengembangan aplikasi web, dan NextAuth.js menyederhanakannya dengan menyediakan integrasi dengan berbagai penyedia autentikasi.

Dengan langkah-langkah yang telah kami berikan, Anda sekarang memiliki dasar untuk mengimplementasikan autentikasi di proyek Next.js Anda. Selamat mengembangkan!