Bagaimana Menerapkan Otentikasi Di Next.js Dengan Auth0

"Otentikasi" adalah tindakan memvalidasi bahwa pengguna adalah siapa yang dia klaim. Kami biasanya melakukan ini dengan menerapkan sistem kredensial, seperti pengguna/sandi, pertanyaan keamanan, atau bahkan pengenalan wajah.

“Otorisasi” menentukan apa yang dapat (atau tidak dapat) dilakukan oleh pengguna. Jika kita perlu menangani otentikasi dan otorisasi di aplikasi web kita, kita akan membutuhkan platform atau modul keamanan. Kami dapat mengembangkan platform kami sendiri, mengimplementasikannya, dan memeliharanya. Atau kita dapat memanfaatkan platform otentikasi dan otorisasi yang ada di pasar yang ditawarkan sebagai layanan.

Saat mengevaluasi apakah lebih baik bagi kami untuk membuat platform kami sendiri, atau menggunakan layanan pihak ketiga, ada beberapa hal yang harus kami pertimbangkan:

• Merancang dan membuat layanan otentikasi bukanlah keahlian inti kami. Ada orang yang bekerja dengan fokus khusus pada topik keamanan yang dapat menciptakan platform yang lebih baik dan lebih aman daripada kami;
• Kami dapat menghemat waktu dengan mengandalkan platform otentikasi yang ada dan menggunakannya untuk menambah nilai produk dan layanan yang kami pedulikan;
• Kami tidak menyimpan informasi sensitif dalam database kami. Kami memisahkannya dari semua data yang terlibat dalam aplikasi kami;
• Alat yang ditawarkan layanan pihak ketiga telah meningkatkan kegunaan dan kinerja, yang memudahkan kami untuk mengelola pengguna aplikasi kami.

Mempertimbangkan faktor-faktor ini, kita dapat mengatakan bahwa mengandalkan platform otentikasi pihak ketiga bisa lebih mudah, lebih murah, dan bahkan lebih aman daripada membuat modul keamanan kita sendiri.

Pada artikel ini, kita akan melihat bagaimana menerapkan otentikasi dan otorisasi di aplikasi Next.js kita menggunakan salah satu produk yang ada di pasar: Auth0.

Apa itu Auth0?

Ini memungkinkan Anda untuk menambahkan keamanan ke aplikasi yang dikembangkan menggunakan bahasa atau teknologi pemrograman apa pun.

“Auth0 adalah solusi drop-in yang fleksibel untuk menambahkan layanan otentikasi dan otorisasi ke aplikasi Anda.”

— Dan Arias, auth0.com

Auth0 memiliki beberapa fitur menarik, seperti:

• Single Sign-On : Setelah Anda masuk ke aplikasi yang menggunakan Auth0, Anda tidak perlu memasukkan kredensial Anda lagi saat memasukkan aplikasi lain yang juga menggunakannya. Anda akan secara otomatis masuk ke semuanya;
• Login sosial : Otentikasi menggunakan profil jejaring sosial pilihan Anda;
• Otentikasi Multi-Faktor ;
• Beberapa protokol standar diperbolehkan, seperti OpenID Connect, JSON Web Token, atau OAuth 2.0;
• Alat pelaporan dan analisis .

Ada paket gratis yang dapat Anda gunakan untuk mulai mengamankan aplikasi web Anda, mencakup hingga 7000 pengguna aktif bulanan. Anda akan mulai membayar ketika jumlah pengguna meningkat.

Hal keren lainnya tentang Auth0 adalah kami memiliki Next.js SDK yang tersedia untuk digunakan di aplikasi kami. Dengan library ini, yang dibuat khusus untuk Next.js, kita dapat dengan mudah terhubung ke API Auth0.

Auth0 SDK Untuk Next.js

Seperti yang kami sebutkan sebelumnya, Auth0 membuat (dan memelihara) SDK yang berfokus pada Next.js, di antara SDK lain yang tersedia untuk terhubung ke API menggunakan berbagai bahasa pemrograman. Kami hanya perlu mengunduh paket NPM, mengonfigurasi beberapa detail tentang akun dan koneksi Auth0 kami, dan kami siap melakukannya.

SDK ini memberi kita alat untuk mengimplementasikan otentikasi dan otorisasi dengan metode sisi klien dan sisi server, menggunakan Rute API di backend dan React Context dengan React Hooks di frontend.

Mari kita lihat bagaimana beberapa dari mereka bekerja dalam contoh aplikasi Next.js.

Contoh Aplikasi Next.js Menggunakan Auth0

Mari kembali ke contoh platform video sebelumnya, dan buat aplikasi kecil untuk menunjukkan cara menggunakan Auth0 Next.js SDK. Kami akan mengatur Login Universal Auth0. Kami akan memiliki beberapa URL video YouTube. Mereka akan disembunyikan di bawah platform otentikasi. Hanya pengguna terdaftar yang dapat melihat daftar video melalui aplikasi web kami.

Catatan : Artikel ini berfokus pada konfigurasi dan penggunaan Auth0 di aplikasi Next.js Anda. Kami tidak akan membahas detail seperti gaya CSS atau penggunaan basis data. Jika Anda ingin melihat kode lengkap dari contoh aplikasi, Anda dapat membuka repositori GitHub ini.

Buat Akun Auth0 Dan Konfigurasikan Detail Aplikasi

Pertama-tama, kita perlu membuat akun Auth0 menggunakan halaman Sign Up.

Setelah itu, mari kita pergi ke Dasbor Auth0. Buka Aplikasi dan buat aplikasi baru dengan tipe ["Aplikasi Web Reguler"].

Sekarang mari masuk ke tab Pengaturan aplikasi dan, di bawah bagian URI Aplikasi , konfigurasikan detail berikut dan simpan perubahannya:

• URL Panggilan Balik yang Diizinkan : tambahkan https://localhost:3000/api/auth/callback
• URL Logout yang Diizinkan : tambahkan https://localhost:3000/

Dengan melakukan ini, kami mengonfigurasi URL tempat kami ingin mengarahkan pengguna setelah mereka masuk ke situs kami (Callback), dan URL tempat kami mengarahkan ulang pengguna setelah mereka keluar (Logout). Kita harus menambahkan URL produksi saat kita menerapkan versi final aplikasi kita ke server hosting.

Auth0 Dashboard memiliki banyak konfigurasi dan penyesuaian yang dapat kami terapkan pada proyek kami. Kami dapat mengubah jenis otentikasi yang kami gunakan, halaman login/pendaftaran, data yang kami minta untuk pengguna, mengaktifkan/menonaktifkan pendaftaran baru, mengkonfigurasi basis data pengguna, dan sebagainya.

Buat Aplikasi Next.js

Untuk membuat aplikasi Next.js baru, kami akan menggunakan create-next-app, yang menyiapkan semuanya secara otomatis untuk Anda. Untuk membuat proyek, jalankan:

 npx create-next-app [name-of-the-app]

Atau

 yarn create next-app [name-of-the-app]

Untuk memulai server pengembangan secara lokal dan melihat situs yang baru saja dibuat di browser Anda, buka folder baru yang Anda buat:

 cd [name-of-the-app]

Dan lari:

 npm run dev

Atau

 yarn dev

Instal Dan Konfigurasikan Auth0 Next.js SDK

Mari kita instal Auth0 Next.js SDK di aplikasi kita:

 npm install @auth0/nextjs-auth0

Atau

 yarn add @auth0/nextjs-auth0

Sekarang, di file env.local kami (atau menu variabel lingkungan dari platform hosting kami), mari tambahkan variabel ini:

 AUTH0_SECRET="[A 32 characters secret used to encrypt the cookies]" AUTH0_BASE_URL="https://localhost:3000" AUTH0_ISSUER_BASE_URL="https://[Your tenant domain. Can be found in the Auth0 dashboard under settings]" AUTH0_CLIENT_ AUTH0_CLIENT_SECRET="[Can be found in the Auth0 dashboard under settings]" 

Jika Anda menginginkan lebih banyak opsi konfigurasi, Anda dapat melihat dokumen.

Buat Rute API Dinamis

Next.js menawarkan cara untuk membuat API tanpa server: Rute API. Dengan fitur ini, kita dapat membuat kode yang akan dieksekusi di setiap permintaan pengguna ke rute kita. Kita dapat menentukan rute tetap, seperti /api/index.js . Tetapi kita juga dapat memiliki rute API dinamis, dengan params yang dapat kita gunakan dalam kode rute API kita, seperti /api/blog/[postId].js .

Mari buat file /pages/api/auth/[...auth0].js , yang akan menjadi rute API dinamis. Di dalam file, mari impor metode handleAuth dari Auth0 SDK, dan ekspor hasilnya:

 import { handleAuth } from '@auth0/nextjs-auth0'; export default handleAuth();

Ini akan membuat dan menangani rute berikut:

• /api/auth/login
  Untuk melakukan login atau mendaftar dengan Auth0.
• /api/auth/logout
  Untuk mengeluarkan pengguna.
• /api/auth/callback
  Untuk mengarahkan pengguna setelah login berhasil.
• /api/auth/me
  Untuk mendapatkan informasi profil pengguna.

Dan itu akan menjadi bagian sisi server dari aplikasi kita. Jika kita ingin masuk ke aplikasi kita atau mendaftar untuk akun baru, kita harus mengunjungi https://localhost:3000/api/auth/login . Kita harus menambahkan tautan ke rute itu di aplikasi kita. Sama untuk keluar dari situs kami: Tambahkan tautan ke https://localhost:3000/api/auth/logout .

Tambahkan Komponen Penyedia Pengguna

Untuk menangani status otentikasi pengguna di frontend aplikasi web kami, kami dapat menggunakan komponen UserProvider React, tersedia di Auth0 Next.js SDK. komponen menggunakan React Context secara internal.

Jika Anda ingin mengakses status autentikasi pengguna pada Komponen, Anda harus membungkusnya dengan komponen UserProvider .

 <UserProvider> <Component {...props} /> </UserProvider>

Jika kita ingin mengakses semua halaman dalam aplikasi kita, kita harus menambahkan komponen ke file pages/_app.js . pages/_app.js menimpa komponen React App . Ini adalah fitur yang ditampilkan Next.js untuk menyesuaikan aplikasi kita. Anda dapat membaca lebih lanjut tentang itu di sini.

 import React from 'react'; import { UserProvider } from '@auth0/nextjs-auth0'; export default function App({ Component, pageProps }) { return ( <UserProvider> <Component {...pageProps} /> </UserProvider> ); }

Kami memiliki React hook useUser yang mengakses status otentikasi yang diekspos oleh UserProvider . Kita dapat menggunakannya, misalnya, untuk membuat semacam halaman selamat datang. Mari kita ubah kode file pages/index.js :

 import { useUser } from "@auth0/nextjs-auth0"; export default () => { const { user, error, isLoading } = useUser(); if (isLoading) return <div>Loading...</div>; if (error) return <div>{error.message}</div>; if (user) { return ( <div> <h2>{user.name}</h2> <p>{user.email}</p> <a href="/api/auth/logout">Logout</a> </div> ); } return <a href="/api/auth/login">Login</a>; };

Objek user berisi informasi yang berkaitan dengan identitas pengguna. Jika orang yang mengunjungi halaman tersebut tidak login (kami tidak memiliki objek user yang tersedia), kami akan menampilkan link ke halaman login. Jika pengguna sudah diautentikasi, kami akan menampilkan properti user.name dan user.email pada halaman, dan link Logout.

Mari buat file videos.js, dengan daftar tiga URL video YouTube yang hanya akan terlihat oleh orang yang terdaftar. Untuk hanya mengizinkan pengguna yang masuk untuk melihat halaman ini, kami akan menggunakan metode withPageAuthRequired dari SDK.

 import { withPageAuthRequired } from "@auth0/nextjs-auth0"; export default () => { return ( <div> <a href="https://www.youtube.com/watch?v=5qap5aO4i9A">LoFi Music</a> <a href="https://www.youtube.com/watch?v=fEvM-OUbaKs">Jazz Music</a> <a href="https://www.youtube.com/watch?v=XULUBg_ZcAU">Piano Music</a> </div> ); }; export const getServerSideProps = withPageAuthRequired();

Mempertimbangkan bahwa aplikasi web kami memungkinkan setiap orang untuk mendaftar akun, menggunakan platform Auth0. Pengguna juga dapat menggunakan kembali akun Auth0 yang ada, karena kami menerapkan Universal Login.

Kami dapat membuat halaman pendaftaran kami sendiri untuk meminta rincian lebih lanjut tentang pengguna atau menambahkan informasi pembayaran untuk menagih mereka setiap bulan untuk layanan kami. Kami juga dapat menggunakan metode yang diekspos di SDK untuk menangani otorisasi secara otomatis.

Kesimpulan

Dalam artikel ini, kami melihat cara mengamankan aplikasi Next.js kami menggunakan Auth0, platform otentikasi dan otorisasi. Kami mengevaluasi manfaat menggunakan layanan pihak ketiga untuk otentikasi aplikasi web kami dibandingkan dengan membuat platform keamanan kami sendiri. Kami membuat contoh aplikasi Next.js dan kami mengamankannya menggunakan paket gratis Auth0 dan Auth0 Next.js SDK.

Jika Anda ingin menerapkan contoh aplikasi Auth0 ke Vercel, Anda dapat melakukannya di sini.

Bacaan dan Sumber Daya Lebih Lanjut

• Auth0 Next.js SDK GitHub repositori, Auth0, GitHub
• “Panduan Utama Untuk Otentikasi Next.js Dengan Auth0,” Sandrino Di Mattia, Blog Auth0
  Dalam aplikasi contoh kami, kami menggunakan rendering sisi server, dengan rute API dan pendekatan tanpa server. Jika Anda menggunakan Next.js untuk situs statis, atau server khusus untuk menghosting aplikasi Anda, artikel ini memiliki beberapa detail tentang cara menerapkan autentikasi.
• “Pengalaman Login Universal Baru,” Login Universal Auth0, Dokumen Auth0
• “Login Universal Terpusat vs. Login Tertanam,” Login Universal Auth0, Dokumen Auth0