Yasya Indra Blog

 

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

 

 

 

 

Ada dua stack teknologi yang saya perhatikan sedang ramai diperbincangkan di sosial media. Pertama, NextJS dan kedua Typescript. Sebenarnya apa sih yang bikin kedua teknologi ini trending?

 

 

Saya mendefisinisikan Typescript adalah javascript dengan gaya. Artinya Typescript adalah javascript yang memiliki fitur lanjutan dimana kita sebagai programmer bisa mengoptimasi penggunaan tipe data menjadi lebih detail sehingga kode minim error

 

 

"Ahh, saya ngoding pake Typescript justru muncul banyak error" 

 

Eitssss, jangan salah. Disitulah peran Typescript dimana ia mengingatkan programmer bahwa ada beberapa sisi dalam codingan kita yang bisa diimprove lagi

 

 

Kali ini kita akan menjajal menggunakan NextJS dan Typescript untuk membuat Navbar sederhana. Dengan adanya tutorial ini, saya berharap kita semakin faham alur ngoding menggunakan NextJS dan barang kali lebih luwes ketika ingin membuat komponen ReactJS yang lain

Baca Juga: Mari Bongkar Satu Persatu Apa Itu M.E.R.N.

Instal NextJS

Sebelum kalian menginstal NextJS pastikan kalian sudah menginstal NextJS. Kenapa? karena NextJS membutuhkan beberapa module yang dijalankan dalam NodeJS

 

Buat folder project dengan nama sesuai dengan seleramu. Misal, project-lima

 

Masukan perintah berikut

 

npx create-next-app@latest . 

 

Buat folder baru bernama (root) dan pindahkan file page.tsx

Ubah isi file page.tsx menjadi berikut ini

Setelah itu kita akan memanfaatkan sebuah UI Library bernama Shadcn/UI yang akhir akhir ini juga lagi ngtrend bersamaan dengan NextJS

 

Akan tetapi kalian harus memasukkan perintah ini untuk menginisiasikan bahwa project kita ini berada dalam lingkup development yang sama dengan Shadcn/UI

 

npx shadcn-ui@latest init

Kalian akan ditodong beberapa pertanyaan seperti ini, jawab dengan pilihan yang tulisannya saya tebali

 

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css (tulis app/globals.css atau enter saja)
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js (enter)
Configure the import alias for components: › @/components (enter)
Configure the import alias for utils: › @/lib/utils (enter)
Are you using React Server Components? › no / yes

Setelah itu kita akan menginstal beberapa komponen dari UI library ini yang kita butuhkan untuk membuat Navbar

Cara menggunakannya tinggal masukkan perintah berikut

 

npx shadcn-ui@latest add popover

npx shadcn-ui@latest add button

npx shadcn-ui@latest add command

npx shadcn-ui@latest add dialog

 

Secara otomatis Shadcn/UI akan membuatkan folder bernama components yang berisikan file file dari librarynya

Sekarang buat file bernama Navbar.tsx

Lalu masukkkan kode berikut

 

 

Tentu kalian akan menjumpai beberapa error. Itu karena ada beberapa komponen lain yang belum kita buat seperti StoreSwitcher dan MainNav

 

 

Buat file bernama MainNav.tsx dan isikan codingan ini

 

 

 

Kita juga akan membuat StoreSwitcher yang berguna jika kita ingin memilih settingan yang kitsa inginkan. 

 

 

Sekarang buka file layout.tsx. Oh iya, kalian bisa dengan mudah mencarinya dengan menekan ctrl + p lalu masukkan nama filenya

Tambahkan <Navbar/> di dalam body html, lebih lengkapnya bisa liat kodingan dibawah

 Maka hasil akhirnya menjadi seperti ini

Itu dia cara kita membuat navabr sederhana menggunakan Shadcn/UI, semoga bermanfaat

 

Ketika kita ingin membuat portfolio atau landing page, kita ingin pengunjung untuk bisa mengirimkan pesan. Pesan itu bisa dikirim ke WhatsApp, DM Instagram atau Email. 

Platform platform ini punya kelebihan dan kekurangannya masing masing. Salah satunya adalah Email. Email merupakan platform (bisa jadi) social media tertua dan masih exist hingga kini. Mau apapun social medianya, email masih jadi salah satu cara untuk mengautentikasi user untuk bisa mendaftar dan masuk

Tidak hanya itu, komunikasi menggunakan email juga dinilai formal dan sering dibutuhkan untuk beberapa kondisi seperti melamar pekerjaan, menawarkan job atau promosi

Nah, pasti kita butuh penggunaan email ini website pribadi kita. Jadi ketika pengunjung tertarik dengan produk kita atai jasa kita, pengunjung tinggal masukkan nama, email dan isi pesannya sehingga bisa diterima oleh email kita

Bagaimana caranya? Yuk kita ikuti langkah langkah dibawah

Pertama. Buat form html lalu tambahkan script berikut

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@emailjs/browser@3/dist/email.min.js"></script>
    <script type="text/javascript">
        (function() {
            // https://dashboard.emailjs.com/admin/account
            emailjs.init('YOUR_PUBLIC_KEY');
        })();
    </script>
    <script type="text/javascript">
        window.onload = function() {
            document.getElementById('contact-form').addEventListener('submit', function(event) {
                event.preventDefault();
                // generate a five digit number for the contact_number variable
                this.contact_number.value = Math.random() * 100000 | 0;
                // these IDs from the previous steps
                emailjs.sendForm('contact_service', 'contact_form', this)
                    .then(function() {
                        console.log('SUCCESS!');
                    }, function(error) {
                        console.log('FAILED...', error);
                    });
            });
        }
    </script>
 

letakkan kode diatas di antara tag <head> dan </head>

Lalu buat form seperti ini

    <form id="contact-form">
        <input type="hidden" name="contact_number">
        <label>Name</label>
        <input type="text" name="user_name">
        <label>Email</label>
        <input type="email" name="user_email">
        <label>Message</label>
        <textarea name="message"></textarea>
        <input type="submit" value="Send">
    </form>

di atas input mempunya property name bernama user_name, ini akan kita manfaatkan untuk mengedit email yang akan kita terima

Setelah itu, kita akan menggunakan tool bernama emailjs. sebuah cdn javascript yang memudahkan kita untuk mengirim email dari website html css static tanpa menggunakan framework seperti React, atau Vue

 Kalian daftar lalu setelah itu buka dashboard, lalu kalian pilih email service

Lalu pilih Add New Service dan pilih Gmail, maka kalian akan mendapatkan Service ID, ini akan pakai saat mengatur kode yang berada di template website tadi

Lalu pilih Email Templates yang berada di sidebar, dan pilih Setting maka kalian akan melihat Template ID

Kita juga membutuhkan PUBLIC KEY, yang bisa kita lihat di Account berada di sidebar 

Kita balik lagi kodingan form html yang barusan kita buat

Ganti YOUR PUBLIC KEY dengan PUBLIC KEY kalian

        (function() {
            // https://dashboard.emailjs.com/admin/account
            emailjs.init('YOUR_PUBLIC_KEY');
        })();

Lalu ganti contact_form dengan Template ID, dan contact_service dengan Service ID

emailjs.sendForm('contact_service', 'contact_form', this)

Setelah itu kita uji coba

Dan tadaaaa, email berhasil diterima