Ketika kita membuat aplikasi terkadang kita membutuhkan user untuk memasukkan username, email dan passwordnya. Hal ini penting untuk memberikan hak akses kepada user untuk bisa menggunakan aplikasi sesuai dengan yang ia butuhkan
Proses ini disebut Authentication yaitu memberikan hak akses kepada user untuk bisa masuk kedalam aplikasi kita
Selain ada istilah Authentication, ada juga istilah yang erat kaitannya dengan Authentication ini yang disebut Authorization. Yaitu sebuah proses dimana kita sebagai programmer memberikan role atau peran khusus kepada user yang sudah di-autentikasi agar bisa menggunakan apa yang boleh dan tidak boleh digunakan
Misalnya kamu login ke aplikasi sekolah, biasanya akan ada pertanya dulu. Apakah kamu login sebagai guru atau murid (atau biasanya diaplikasi lain sudah otomatis mengenalinya lewat username atau ID yang tergantung dari role_id yang dibeirkan). Ini lah yang biasa disebut dengan Authorization
Karena tutorial ini membahas NextJS dan Typescript. Maka kita akan belajar bagaimana cara membuat Authencation ini dengan mudah.
Kenapa dengan mudah? Memang ada cara susahnya? Ada!. Kalo kalian menggunakan aplikasi dengan framework Codeigniter 3 membuat Authencation sangat lah sulit. Kalian harus mengecheck apakah username dan password tersedia di table. Dan beberapa validasi lain yang njlimet jika ingin aplikasi kalian aman
Namun jika kalian menggunakan NextJS, ReactJS, atau framework modern lainnya, hal ini sangat mudah dilakukan
Ada sebuah framework bernama Clerk
logo Clerk
Menurut website resminya, Clerk is more than a “sign-in box”. Integrate complete user management UIs and APIs, purpose-built for React, Next.js, and the Modern Web.
Selain digunakan agar user bisa login, dan pembuatanya yang sangat sederhana. Clerk juga memilki fitur dimana terdapat user management yang memungkinkan programmer atau developer bisa memberikan role akses atau authorization di dalamnya
Postingan ini akan melanjutkan tutorial sebelumnya, yang berjudul
Tutorial NextJS 13 & Typescript: Membuat Navbar Dengan Shadcn/UI
Jadi pastikan kalian membaca dan mengikut instruksi disana dengan seksama ya
Langkah Langkah
Pertama, kalian install clerk dengan npm
npm install @clerk/nextjs
Lalu kalian login ke dalam web resmi Clerk untuk mendapatkan key yang akan kita masukkan ke dalam .env di project kita
Sebelumnya kalian akan disuruh memasukkan nama project kalian.
Kalo sudah, kalian akan mendapatkan kode berikut. jika kalian punya, buat dan namakan .env
Dan akan menjadi seperti ini
Tapi kita tidak ingin file .env ini diketahui orang ketika kita push project ini ke repository. Maka dari itu kita harus mengabaikan file .env setiap saat kita ingin mempush perubahan file atau project ke dalam repository
Masukkan .env di dalam file .gitignore seperti gambar diatas
Setelah melakukan semua langkah di atas, saatnya kita ngoding dan menulis beberapa sintaks untuk memberi tahu bahwa aplikasi kita sudah terintergrasi dengan Clerk
Caranya adalah dengan memasukkan perintah <ClerkProvider> ...... </ClerkProvider>. Diantara tag html dan tag tag lain di file layout.tsx
buka file layout.tsx di folder app dan pastikan isi kodenya berisi berikut
Setelah itu kita akan membuat middleware.ts, sebuah script khusus yang berjalan di tengah tengah komunikasi aplikasi kita dengan server. Caranya adalah dengan memasukkan kode ini ke dalam file middleware.ts
Kalian bisa memasukkan kode ini dari sini ya. Tinggal copy-paste aja
Lalu buat folder bernama (auth) dan buat folder sign-up di dalam folder (auth). lalu folder [[...sign-up]] di dalamnya dan baru lah kalian membuat file bernama page.tsx yang berisi kode berikut
Hal yang sama dilakukan pada file sign-in
Jadi kalo dilihat sekarang struktur folder app kita akan menjadi seperti ini
Lalu kalian tambahkan kode ini ke dalam file .env kalian. Kode ini berfungsi untuk memberi tahu clerk dimakan route sign-in dan sign-up kita
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/
Lalu masukkan kode <UserButton afterSignOutUrl="/"/> di dalam file page.tsx di dalam folder app, sehingga file tersebut akan menjadi seperti ini
Sekarang kita jalankan aplikasi kita dengan memasukkan perintah berikut, npm run dev
Maka kita akan mendapati halaman utama sudah memiliki komponen login seperti ini, lengkap dengan cara login menggunakan Google
Dan setelah kita coba login, makan kita akan dibawa ke halaman utama, seperti ini. Dan lihat kita berhasil login, bahkan Clerk menyimpan data diri kita sebagai user yang sudah login
