Memahami OAuth 2.0 Flow
OAuth 2.0 Authorization Code Flow dengan PKCE merupakan salah satu pendekatan yang aman untuk aplikasi web. Alurnya dimulai ketika pengguna diarahkan ke provider untuk melakukan login dan memberikan izin.
Setelah berhasil, provider mengarahkan pengguna kembali ke aplikasi dengan authorization code. Code tersebut kemudian ditukar oleh server menjadi access token yang dapat digunakan untuk mengakses resource sesuai permission yang diberikan.
Setup NextAuth.js
Untuk mempermudah implementasi authentication di Next.js, gunakan NextAuth.js.
Install package dengan:
npm install next-authPada Next.js App Router, buat route authentication seperti:
/api/auth/[...nextauth]/route.tsKemudian konfigurasi provider seperti Google dan GitHub menggunakan client ID serta client secret yang diperoleh dari developer console masing-masing provider.
Session dengan Database
Untuk aplikasi yang membutuhkan session persisten, Anda dapat menggunakan database adapter seperti Prisma atau TypeORM.
Session berbasis database memungkinkan aplikasi menyimpan informasi session secara terpusat dan memudahkan pengelolaan seperti account linking, session management, dan token lifecycle.
Gunakan konfigurasi session sesuai kebutuhan aplikasi dan hindari menyimpan informasi sensitif secara sembarangan.
Melindungi Routes
Route yang membutuhkan autentikasi harus dilindungi agar hanya dapat diakses pengguna yang memiliki session valid.
Pada Next.js App Router, middleware dapat digunakan untuk menentukan route yang membutuhkan authentication. Gunakan matcher untuk menentukan path yang harus dilindungi.
Untuk mengambil session, gunakan pendekatan server-side seperti getServerSession() pada server dan useSession() pada client component sesuai kebutuhan.
Account Linking
Aplikasi yang mendukung beberapa provider dapat menghadapi kondisi ketika satu pengguna login menggunakan Google dan GitHub dengan alamat email yang sama.
Account linking harus dilakukan dengan hati-hati. Jangan hanya mengandalkan kesamaan email tanpa memastikan bahwa akun tersebut telah terverifikasi dan provider memberikan informasi identitas yang dapat dipercaya.
Konfigurasi seperti allowDangerousEmailAccountLinking sebaiknya digunakan hanya setelah memahami risiko keamanannya.
Custom Login Page
NextAuth.js memungkinkan Anda membuat halaman login sendiri melalui konfigurasi pages.
Buat halaman seperti:
/auth/signinKemudian tampilkan tombol login untuk provider yang tersedia, misalnya Continue with Google atau Continue with GitHub.
Tambahkan juga penanganan error seperti OAuthAccountNotLinked dan EmailSignin, serta pastikan redirect setelah login mengarah ke halaman yang sesuai.
Praktik Keamanan OAuth
Jangan menyimpan client secret di frontend atau memasukkannya langsung ke repository. Gunakan environment variable untuk credential.
Pastikan redirect URI dikonfigurasi secara ketat, gunakan HTTPS pada production, dan validasi session serta token pada setiap request yang membutuhkan akses terproteksi.
Kesimpulan
OAuth 2.0 dengan NextAuth.js dapat menyederhanakan implementasi login dan SSO pada aplikasi Next.js. Dengan Authorization Code Flow, PKCE, session management, route protection, serta konfigurasi provider yang tepat, aplikasi dapat memiliki sistem authentication yang lebih aman dan mudah dikelola.