Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Membangun sistem autentikasi khusus bisa menjadi tugas yang menakutkan. Ini membutuhkan pemahaman yang mendalam tentang protokol otentikasi, dan proses otentikasi dan otorisasi pengguna. Namun, dengan mengintegrasikan alat seperti Supabase, Anda dapat lebih fokus membangun logika inti aplikasi Anda.

Supabase adalah alternatif Firebase sumber terbuka yang menyediakan platform pengembangan berbasis cloud. Ini menawarkan berbagai layanan backend seperti database Postgres yang lengkap, layanan otentikasi, dan fungsionalitas tanpa server.

Ini dirancang agar lebih mudah diakses, memungkinkan Anda menyiapkan proyek dengan cepat. Ikuti terus untuk mempelajari cara mengintegrasikan layanan autentikasi dalam aplikasi React.js Anda.

Buat Proyek Baru di Supabase Developer Console

Untuk membuat proyek baru di Konsol Pengembang Supabase, ikuti langkah-langkah berikut:

instagram viewer
  1. Mendaftar untuk a Supabase akun pengembang. Arahkan ke dasbor dan buat proyek baru.
  2. Isi Nama Proyek, dan kata sandi (ini opsional untuk tutorial ini tetapi disarankan saat menyiapkan database), pilih wilayah, dan terakhir klik Buat proyek baru.
  3. Di bawah Pengaturan API, salin proyek URL dan anon publik kunci.

Siapkan Penyedia Otorisasi

Penyedia autentikasi menyediakan cara yang aman bagi pengguna untuk mengautentikasi menggunakan berbagai info masuk sosial. Supabase secara default menyediakan penyedia email. Selain itu, Anda dapat menambahkan penyedia lain seperti Google, GitHub, atau Discord tergantung pada preferensi Anda.

Tutorial ini akan menunjukkan cara menyiapkan Penyedia Google. Untuk melakukannya, ikuti langkah-langkah berikut:

  1. Di panel kiri, pilih Autentikasi tab.
  2. Di halaman setelan Otentikasi, pilih Penyedia pilihan, dan terakhir, pilih Penyedia Google dari daftar penyedia. Perhatikan bahwa penyedia email sudah dikonfigurasi secara default. Anda tidak perlu melakukan konfigurasi apa pun.
  3. Aktifkan Pemberi tombol beralih.
  4. Penyedia Google memerlukan dua input: ClientID dan ClientSecret. Anda akan mendapatkan kedua nilai ini setelah membuat aplikasi di Google Developer Console. Untuk saat ini, salin Alihkan URL. Anda akan menggunakannya untuk menyiapkan aplikasi di Google Developer Console untuk mendapatkan ClientID dan ClientSecret.

Siapkan Proyek Anda di Google Developer Console (GDC)

Untuk mengautentikasi dengan Google, Anda harus mendaftarkan aplikasi Anda di Google Developer Console (GDC) dan mendapatkan ClientID dan ClientSecret. Ikuti langkah-langkah ini untuk menyiapkan proyek di GDC:

  1. Pergi ke Konsol Pengembang Google dan masuk dengan akun Google Anda untuk mengakses konsol.
  2. Setelah masuk, arahkan ke API dan Layanan tab, pilih Buat Kredensial pilihan, lalu pilih ID klien OAuth.
  3. Tentukan jenis aplikasi dari pilihan yang tersedia dan kemudian isi nama aplikasi Anda.
  4. Setelah itu, tentukan URL rute utama aplikasi Anda (http//:localhost: 3000), dan terakhir, tentukan URL pengalihan panggilan balik. Rekatkan di URL pengalihan yang Anda salin dari halaman pengaturan Penyedia Google Supabase. Klik Menyimpan untuk menyelesaikan proses.
  5. Salin ID Klien Dan Rahasia Klien dan kembali ke dasbor Proyek Supabase Anda dan tempelkan di kolom input ClientID dan ClientSecret di halaman pengaturan Penyedia Google. Klik Menyimpan untuk mengaktifkan Penyedia.

Konfigurasikan Layanan Otentikasi Supabase di Aplikasi React.js

Buat aplikasi React.js, lalu buka folder proyek di editor kode favorit Anda. Selanjutnya, di direktori root folder proyek Anda, buat file ENV untuk menyimpan variabel lingkungan Anda: URL proyek Anda dan kunci anon publik Anda. Buka halaman pengaturan Supabase Anda, buka bagian API, dan salin URL proyek dan kunci anon publik.

REACT_APP_SUPABASE_URL= URL proyek
REACT_APP_SUPABASE_API_KEY = publik kunci anon

1. Instal Paket yang Diperlukan

Jalankan perintah ini di terminal Anda untuk menginstal dependensi yang diperlukan:

instal npm @supabase/auth-ui-react @supabase/supabase-js react react-router-dom

2. Buat Halaman Login dan Komponen Halaman Sukses

Buat folder baru di direktori /src aplikasi React.js Anda, dan beri nama halaman. Di dalam folder ini, buat dua file: Login.js dan Success.js.

3. Komponen Halaman Masuk

Komponen ini akan merender fitur pendaftaran dan masuk, menggunakan UI Otentikasi React.js yang disediakan oleh Supabase. Anda mengimpor UI autentikasi sebagai dependensi (@supabase/auth-UI-react), membuatnya lebih mudah untuk mengimplementasikan fungsi autentikasi.

Di file login.js, tambahkan kode di bawah ini:

impor Reaksi dari'reaksi';
impor {createClient} dari'@supabase/supabase-js';
impor {Auth, ThemeSupa} dari'@supabase/auth-ui-react';
impor {useNavigate} dari'bereaksi-router-dom';
const supabase = buatKlien(
proses.env.REACT_APP_SUPABASE_URL,
proses.env.REACT_APP_SUPABASE_API_KEY
); 
fungsiGabung() {
const navigasi = gunakan Navigasi(); 
 supabase.auth.onAuthStateChange(asinkron (peristiwa) =>{
jika (acara !== "KELUAR") {
 arahkan('/kesuksesan');
 }kalau tidak{
 arahkan('/');
 }
 })
kembali (
<divnama kelas="Aplikasi">
<tajuknama kelas="Tajuk-aplikasi">
 supabaseClient={supabase}
 penampilan={{theme: ThemeSupa}}
 tema="gelap"
 penyedia={['google']}
 /> 
tajuk>
div>
 );
}
eksporbawaan Gabung;

Mari kita uraikan:

  • Inisialisasi klien Supabase dengan variabel lingkungan -- URL proyek Anda dan kunci anon publik Anda di file ENV.
  • Siapkan pendengar acara untuk melacak perubahan dalam status autentikasi menggunakan metode supabase.auth.onAuthStateChange() yaitu Jika status autentikasi bukan "SIGNED_OUT" maka pengguna dinavigasi ke halaman '/ sukses', jika tidak, pengguna dinavigasi ke '/' halaman (beranda/login).
  • Anda akan menggunakan metode navigasi dari hook useNavigate untuk mengelola proses ini.
  • Terakhir, kembalikan div yang berisi komponen React Auth UI dari pustaka Supabase dengan tampilan themeSupa (disediakan oleh Supabase), tema gelap, dan set penyedia Google sebagai properti.

4. Komponen Halaman Sukses

Komponen ini akan merender halaman sukses dengan detail pengguna setelah pengguna berhasil diautentikasi dan tombol keluar.

Di file Success.js, tambahkan kode di bawah ini:

impor Reaksi dari'reaksi';
impor {createClient} dari'@supabase/supabase-js';
impor {useNavigate} dari'bereaksi-router-dom';
impor {useEffect, useState} dari'reaksi';
const supabase = buatKlien(
proses.env.REACT_APP_SUPABASE_URL,
proses.env.REACT_APP_SUPABASE_API_KEY
); 
fungsiKesuksesan() {
const [pengguna, setUser] = useState([]); 
const navigasi = gunakan Navigasi(); 
 gunakanEfek (() => {
asinkronfungsigetUserData(){
menunggu supabase.auth.getUser().kemudian((nilai) => {
jika(nilai.data?.pengguna) {
setUser(nilai.data.pengguna)} 
 }) }
 getUserData();
 },[]);
const avatar = pengguna?.user_metadata?.avatar_url; 
const userName = pengguna?.user_metadata?.full_Name; 
asinkronfungsisignOutUser(){
menunggusupabase.auth.keluar();
 arahkan('/');
 };
kembali (
<divnama kelas="Aplikasi">
<tajuknama kelas="Tajuk-aplikasi">
<h1>Login berhasilh1>
<h2>{nama belakang}h2>
<imgsrc={avatar} />
<tombolonClick={()=> signOutUser()}>Keluartombol>
tajuk>
div>
 );
}
eksporbawaan Kesuksesan;

Mari kita uraikan:

  • Inisialisasi klien Supabase dengan variabel lingkungan -- URL proyek Anda dan kunci anon publik Anda di file ENV.
  • Menggunakan Kait React.js, useState dan useEffect, untuk mendapatkan data dari respons API.
  • Kait useEffect mengimplementasikan fungsi asinkron yang memanggil metode supabase.auth.getUser. Metode ini mengambil informasi pengguna yang terkait dengan sesi pengguna saat ini.
  • Fungsi asinkron kemudian memeriksa untuk melihat apakah data pengguna ada dan menyetelnya ke variabel status jika ada.
  • Fungsi signOutUser menggunakan metode supabase.auth.signOut untuk keluar dari pengguna dan mengarahkan mereka kembali ke halaman masuk saat mereka mengeklik tombol keluar.
  • Terakhir, kembalikan sebuah div dengan beberapa informasi pengguna.

5. Konfigurasikan Rute Halaman

Terakhir, konfigurasikan rute untuk halaman login dan halaman sukses.

Di file app.js, tambahkan kode di bawah ini:

impor Reaksi dari'reaksi';
impor {BrowserRouter sebagai Router, Rute, Rute } dari'bereaksi-router-dom';
impor Gabung dari'./halaman/Masuk';
impor Kesuksesan dari'./halaman/Sukses';
fungsiAplikasi() {
kembali (
<Router>
//Menentukan rute
"/" elemen={} />
"/kesuksesan" elemen={} />
Rute>
Router>
 );
}
eksporbawaan Aplikasi;

Mari kita uraikan:

  • Tentukan dua rute: rute untuk halaman login dan rute untuk halaman sukses menggunakan komponen Router dari perpustakaan react-router.
  • Tetapkan jalur rute masing-masing ke '/' dan '/ sukses', dan tetapkan komponen Login dan Sukses ke rute masing-masing.
  • Terakhir, jalankan perintah ini di terminal Anda untuk mengaktifkan server pengembangan: 
 npm awal
  • Navigasi ke http//:localhost: 3000 di browser Anda untuk melihat hasilnya. Komponen login merender React-auth-UI Supabase dengan penyedia email dan Google.

Anda dapat mengautentikasi menggunakan Google atau mendaftar dengan email dan kata sandi Anda dan menggunakan kredensial ini untuk masuk. Keuntungan menggunakan penyedia login sosial Supabase atau penyedia email adalah Anda tidak perlu khawatir tentang logika pendaftaran.

Setelah pengguna mendaftar dengan penyedia sosial atau dengan email dan kata sandi, data akan disimpan di database pengguna Auth Supabase untuk proyek Anda. Saat mereka masuk menggunakan kredensial mereka, Supabase akan memvalidasi detail terhadap kredensial yang digunakan untuk mendaftar.

Supabase Membuat Otentikasi di React Easy

Supabase menawarkan rangkaian fitur yang komprehensif di luar autentikasi, seperti hosting basis data, akses API, dan streaming data real-time. Ini juga menawarkan fitur seperti pembuat kueri dan visualisasi data untuk membantu pengembang membangun dan mengelola aplikasi mereka dengan lebih efisien.

Dengan dasbor yang intuitif dan API yang kuat, Supabase adalah alat yang ampuh untuk membuat aplikasi yang dapat diskalakan dan aman.