Skip to content

This repository contains my adventures in mastering OAuth 2.0 by using the Supabase service📚

Notifications You must be signed in to change notification settings

panntod/Oauth-Supabase

Repository files navigation

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:

Image's Create Project

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

Langkah 2:

Image's Config Project

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

Langkah 3:

Image's Provider

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:

Image's Create Discord

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

Langkah 5:

Image's Discord Dashboard

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

Langkah 6:

Image's Discord Dashboard

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
Image's Api

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>

About

This repository contains my adventures in mastering OAuth 2.0 by using the Supabase service📚

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published