Firebase menyediakan layanan autentikasi yang memungkinkan Anda mendaftarkan dan memasukkan pengguna dengan mudah. Anda dapat menggunakan email, kata sandi, nomor telepon, dan penyedia identitas seperti Google dan Facebook.

Dalam tutorial ini, Anda akan belajar bagaimana Anda bisa menggunakan Firebase Authentication di React untuk mengautentikasi pengguna menggunakan email dan kata sandi. Anda akan menyimpan data pengguna yang dikumpulkan di Firestore, database cloud NoSQL juga dari Firebase.

Perhatikan bahwa tutorial ini menggunakan Firebase v9 dan React Router v6.

Buat Aplikasi Firebase

Untuk menghubungkan aplikasi Anda ke Firebase, daftarkan aplikasi Anda dengan Firebase untuk mendapatkan objek konfigurasi. Inilah yang akan Anda gunakan untuk menginisialisasi Firebase di aplikasi React Anda.

Untuk membuat aplikasi firebase, ikuti langkah-langkah berikut.

1. Pergi ke Konsol Firebase dan klik Buat proyek.
2. Beri nama proyek Anda dan klik membuat untuk memulai proses.
3. Klik pada Web ikon (
4. Beri aplikasi Anda nama pilihan Anda dan klik
   instagram viewer
   Daftarkan aplikasi. Anda tidak perlu mengaktifkan Firebase Hosting.
5. Salin objek konfigurasi di bawah Tambahkan Firebase SDK.

Buat Aplikasi Bereaksi

Menggunakan buat-reaksi-aplikasi untuk membuat perancah aplikasi React.

npx create-react-app react-auth-firebase

Arahkan ke folder dan mulai aplikasi.

cd react-auth-firebase
npm jalankan mulai

Otentikasi Pengguna Dengan Fungsi Firebase

Sebelum menggunakan Firebase, instal.

npm saya firebase

Buat file baru, firebase.js, dan inisialisasi Firebase.

impor { initializeApp } dari "firebase/app";
const firebaseConfig = {
 kunci API: ,
 authDomain: ,
 ID proyek: ,
 penyimpananEmber: ,
 messagingSenderId: ,
 ID aplikasi: 
};
// Inisialisasi Firebase
const app = initializeApp (firebaseConfig);

Gunakan objek konfigurasi yang Anda salin saat mendaftarkan aplikasi.

Selanjutnya impor modul Firebase yang akan Anda gunakan.

impor {
 dapatkanAutentikasi,
 buatUserWithEmailAndPassword,
 masukDenganEmailDanPassword,
 keluar,
} dari "firebase/auth";
import { getFirestore, addDoc, collection } dari "firebase/firestore";
const db = getFirestore();
const auth = getAuth();

Ke mengautentikasi pengguna, Anda perlu membuat tiga fungsi: signUp, signIn, dan signOut.

Itu Daftar fungsi meneruskan email dan kata sandi ke buatPenggunaDenganEmailDanPassword untuk mendaftarkan pengguna baru. buatPenggunaDenganEmailDanPassword mengembalikan data pengguna yang akan Anda gunakan untuk membuat catatan pengguna baru di database.

const signUp = async (email, kata sandi) => {
 mencoba {
 const userCredential = menunggu createUserWithEmailAndPassword(
 otentikasi,
 surel,
 kata sandi
 );
 const pengguna = userCredential.user;
 menunggu addDoc (koleksi (db, "pengguna"), {
 uid: pengguna.uid,
 email: pengguna. email,
 });
 kembali benar
 } tangkap (kesalahan) {
 kembalikan {kesalahan: error.message}
 }
};

Perhatikan bahwa Anda tidak memeriksa apakah email sudah digunakan sebelum pendaftaran karena Firebase yang menanganinya untuk Anda.

Selanjutnya, di masuk berfungsi meneruskan email dan kata sandi ke masukDenganEmailDanKata Sandi berfungsi untuk memasukkan pengguna terdaftar.

const signIn = async (email, kata sandi) => {
 mencoba {
 const userCredential = menunggu signInWithEmailAndPassword(
 otentikasi,
 surel,
 kata sandi
 );
 const pengguna = userCredential.user;
 kembali benar
 } tangkap (kesalahan) {
 kembalikan {kesalahan: error.message}
 }
};

Fungsi signUp dan signOut mengembalikan nilai true jika berhasil dan pesan kesalahan jika terjadi kesalahan.

Fungsi signOut cukup mudah. Ini memanggil keluar() fungsi dari Firebase.

const keluar = async() => {
 mencoba {
 menunggu keluar (auth)
 kembali benar
 } tangkap (kesalahan) {
 kembali salah
 }
};

Buat Formulir Bereaksi

Formulir masuk dan pendaftaran akan mengumpulkan email dan kata sandi dari pengguna.

Buat komponen baru Daftar.js dan tambahkan berikut ini.

impor { useState } dari "bereaksi";
import { Tautan } dari "react-router-dom";
impor { signUp } dari "./firebase";
const Daftar = () => {
 const [email, setEmail] = useState("");
 const [kata sandi, setPassword] = useState("");
 const [kesalahan, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 if (kata sandi !== kata sandi2) {
 seterror("Password tidak cocok");
 } lain {
 setEmail("");
 setPassword("");
 const res = menunggu pendaftaran (email, kata sandi);
 if (res.error) seterror (res.error)
 }
 };
 kembali (
 <>
Mendaftar



 {kesalahan? 
{kesalahan}
: nol}


 ketik="email"
 nama="email"
 nilai={email}
 placeholder="Email Anda"
 diperlukan
 onChange={(e) => setEmail (e.target.value)}
 />
 ketik = "kata sandi"
 nama = "kata sandi"
 nilai={kata sandi}
 placeholder="Kata Sandi Anda"
 diperlukan
 onChange={(e) => setPassword (e.target.value)}
 />
Kirim




 sudah terdaftar? Gabung





 );
};
ekspor Pendaftaran default;

Di sini Anda membuat formulir pendaftaran dan melacak email dan kata sandi menggunakan status. Setelah Anda mengirimkan formulir, diKirim peristiwa memicu menanganiKirim() fungsi yang memanggil Daftar() fungsi dari firebase.js. Jika fungsi mengembalikan kesalahan, perbarui status kesalahan dan tampilkan pesan kesalahan.

Untuk formulir masuk, buat Masuk.js dan tambahkan berikut ini.

impor { useState } dari "bereaksi";
impor { masuk } dari "./firebase";
const Masuk = () => {
 const [email, setEmail] = useState("");
 const [kata sandi, setPassword] = useState("");
 const [kesalahan, seterror] = useState("");
 const handleSubmit = async (e) => {
 e.preventDefault();
 setEmail("");
 setPassword("");
 const res = menunggu masuk (email, kata sandi);
 if (res.error) seterror (res.error);
 };
 kembali (
 <>
 {kesalahan? 
{kesalahan}
: nol}


 ketik="teks"
 nama="email"
 nilai={email}
 placeholder="Email Anda"
 onChange={(e) => setEmail (e.target.value)}
 />
 ketik = "kata sandi"
 nama = "kata sandi"
 nilai={kata sandi}
 placeholder="Kata Sandi Anda"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
ekspor Login default;

Formulir masuk sangat mirip dengan halaman pendaftaran kecuali bahwa pengiriman memanggil masuk() fungsi.

Terakhir, buat halaman Profil. Ini adalah halaman tempat aplikasi akan mengarahkan pengguna setelah otentikasi berhasil.

Membuat Profil.js dan tambahkan berikut ini.

impor { signOut } dari "./firebase";
const Profil = () => {
 const handleLogout = async () => {
 menunggu keluar();
 };
 kembali (
 <>
Profil

Keluar
 );
};
ekspor Profil default;

Di komponen ini, Anda memiliki tajuk Profil dan tombol logout. Itu diKlik handler pada tombol memicu menanganiKeluar fungsi yang mengeluarkan pengguna.

Buat Rute Otentikasi

Untuk menyajikan halaman yang Anda buat ke browser, atur react-router-dom.

Install reaksi-router-dom:

npm saya bereaksi-router-dom

Di dalam indeks.js, konfigurasikan reaksi-router-dom:

impor Bereaksi dari "bereaksi";
impor ReactDOM dari "react-dom";
import { BrowserRouter, Routes, Route } dari "react-router-dom";
impor Aplikasi dari "./Aplikasi";
impor Login dari "./Login";
impor Profil dari "./Profil";
ReactDOM.render(




} />
} />
} />



,
 document.getElementById("root")
);

Hingga saat ini, aplikasi dapat mendaftarkan pengguna, mendaftar, dan logout. Jadi bagaimana Anda tahu apakah pengguna masuk atau tidak?

Di bagian selanjutnya dari tutorial ini, Anda akan melihat bagaimana Anda dapat menggunakan konteks React untuk melacak status otentikasi pengguna di seluruh aplikasi.

Kelola Otentikasi Dengan React Context API

React Context adalah alat manajemen keadaan yang menyederhanakan berbagi data di seluruh aplikasi. Ini adalah alternatif yang lebih baik untuk pengeboran prop, di mana data melewati pohon dari induk ke anak hingga mencapai komponen yang membutuhkannya.

Buat Konteks Otentikasi

Dalam src folder, tambahkan AuthContext.js file dan buat dan ekspor Konteks Otentik.

import { createContext } dari "bereaksi";
const AuthContext = createContext();
ekspor AuthContext default;

Selanjutnya, buat penyedia di AuthProvider.js. Ini akan memungkinkan komponen untuk digunakan Konteks Otentik.

impor { getAuth, onAuthStateChanged } dari "firebase/auth";
import { useState, useEffect } dari 'bereaksi';
impor AuthContext dari './AuthContext'
const auth = getAuth()
export const AuthProvider = ({ anak }) => {
 const [pengguna, setUser] = useState (null);
 useEffect(() => {
 onAuthStateChanged (auth,(pengguna) => {
 setUser (pengguna)
 })
 }, []);
kembali (
{anak-anak}
 );
 };

Di sini, Anda mendapatkan nilai pengguna dengan menggunakan diAuthStateChanged() metode dari Firebase. Metode ini mengembalikan objek pengguna jika mengotentikasi pengguna dan null jika tidak bisa. Dengan menggunakan useEffect() kait, nilai pengguna diperbarui setiap kali status autentikasi berubah.

Di dalam index.js, bungkus rute dengan Penyedia Otentik untuk memastikan semua komponen mengakses pengguna dalam konteks:

impor { AuthProvider } dari "./AuthProvider";
ReactDOM.render(




} />
} />
} />



 ,
,
 document.getElementById("root")
);

Buat Rute Terlindungi

Ke lindungi rute sensitif, periksa status autentikasi pengguna yang mencoba menavigasi ke halaman yang dilindungi seperti halaman profil.

Memodifikasi Profil.js untuk mengarahkan pengguna jika mereka tidak diautentikasi.

impor { useContext } dari "bereaksi";
impor AuthContext dari "./AuthContext";
import { useNavigate, Navigasi } dari "react-router-dom";
impor { signOut } dari "./firebase";
const Profil = () => {
 const { pengguna } = useContext (AuthContext);
 const navigasi = useNavigate();
 const handleLogout = async () => {
 menunggu keluar();
 };
 jika (!pengguna) {
 kembali ;
 }
 kembali (
 <>
Profil

Keluar
 );
};
ekspor Profil default;

Aplikasi render bersyarat halaman profil dengan mengarahkan pengguna ke halaman login jika mereka tidak diautentikasi.

Melangkah Lebih Jauh Dengan Otentikasi Firebase

Dalam tutorial ini, Anda menggunakan Firebase untuk mengautentikasi pengguna menggunakan email dan sandi mereka. Anda juga membuat catatan pengguna di Firestore. Firebase menyediakan fungsi untuk bekerja dengan penyedia otentikasi seperti Google, Facebook, dan Twitter.

10 Praktik Terbaik React yang Harus Anda Ikuti Di 2022

Baca Selanjutnya

Tentang Penulis