OAuth Supabase 🌐

Deskripsi

Dalam repo ini, mengimplementasikan OAuth atau autentikasi menggunakan layanan dari Supabase. Berisikan implementasi singkat dari code pembuatan loginpage, dan dashboard.

Dependencies

• @supabase/auth-ui-react ✨
• @supabase/auth-ui-shared 🌐
• @supabase/supabase-js 📊
• Tailwind 🎨
• Vite 🛠️
• React ⚙️

Set Up Supabase

Langkah 1:

Pastikan sudah membuat layanan Supabase Project atau buat gunakan link Supabase.

Langkah 2:

Jangan lupa untuk menseting konfigurasi redirect url jika login sukses pada aplikasi.

Langkah 3:

Pastikan sudah menyalakan layanan Oauth yang akan digunakan, disini saya menggunakan discord, Aktifkan layanan pada Authentication lalu pergi ke Providers, copy call back url untuk diberikan pada discord

Langkah 4:

Pastikan sudah menyalakan discord developer, lalu anda dapat menuju ke Discord Developer Panel, Lalu buat aplikasi baru.

Langkah 5:

Setelah itu akan muncul tampilan dashboard, pergi ke bagian Oauth.

Langkah 6:

Copy client id dan buat ulang client secret lalu copy. Setelah itu paste url redirect nya berisikan url yang didapatkan dilangkah sebelum nya.

Kembali pada Supabase Providers atau yang Langkah 3, isi client id dan juga secret sesuai dengan yang didapatkan di Langkah 6. Click Save.

Atau

Anda bisa melihat tutorial selengkapnya di Cooper Code

Instalasi Project

Jalankan perintah:

git clone https://github.com/panntod/Oauth-Supabase.git

Setelah itu masuk ke direktori, dengan menjalankan:

cd Oauth-Supabase

Setelah itu instalasi dependensi, dengan menjalankan:

npm install

Setelah itu, ganti .env.example menjadi .env, dan isi dengan code yang kalian dapatkan dari Supabase Project Api

VITE_API_URL=<Ganti Dengan Url Supabase>
VITE_API_KEY=<Ganti Dengan Anon Public Key>