Firebase, kullanıcıları kolayca kaydetmenize ve oturum açmanıza olanak tanıyan kimlik doğrulama hizmetleri sağlar. E-posta, şifreler, telefon numaraları ve Google ve Facebook gibi kimlik sağlayıcıları kullanabilirsiniz.

Bu eğiticide, kullanıcıların bir e-posta ve parola kullanarak kimliklerini doğrulamak için React'te Firebase Kimlik Doğrulamasını nasıl kullanabileceğinizi öğreneceksiniz. Firebase'den de bir NoSQL bulut veritabanı olan Firestore'da toplanan kullanıcı verilerini depolayacaksınız.

Bu öğreticinin Firebase v9 ve React Router v6 kullandığını unutmayın.

Bir Firebase Uygulaması Oluşturun

Uygulamanızı şuraya bağlamak için Firebase, bir yapılandırma nesnesi almak için uygulamanızı Firebase'e kaydedin. Bu, React uygulamanızda Firebase'i başlatmak için kullanacağınız şeydir.

Bir firebase uygulaması oluşturmak için aşağıdaki adımları izleyin.

1. Şuraya gidin: Firebase konsolu ve tıklayın Bir proje oluşturun.
2. Projenize bir isim verin ve tıklayın oluşturmak süreci başlatmak için.
3. Tıkla ağ simge (
instagram viewer
4. Uygulamanıza istediğiniz bir adı verin ve tıklayın. Uygulamayı kaydet. Firebase Hosting'i etkinleştirmeniz gerekmez.
5. Altındaki yapılandırma nesnesini kopyalayın Firebase SDK'sını ekleyin.

Bir React Uygulaması Oluşturun

Kullanmak oluştur-tepki-uygulaması bir React uygulamasını desteklemek için.

npx create-tepki-uygulama tepki-auth-firebase

Klasöre gidin ve uygulamayı başlatın.

cd tepki-auth-firebase
npm çalıştırma başlangıcı

Firebase İşlevleriyle Kullanıcıların Kimliğini Doğrulayın

Firebase'i kullanmadan önce kurun.

npm ve firebase

Yeni bir dosya oluşturun, firebase.js, ve Firebase'i başlatın.

"firebase/app" öğesinden { initializeApp } içe aktarın;
const firebaseConfig = {
 APIAnahtarı: ,
 authDomain: ,
 proje kimliği: ,
 depolamaKepçe: ,
 mesajlaşmaSenderId: ,
 uygulama kimliği: 
};
// Firebase'i başlat
const app = initializeApp (firebaseConfig);

Uygulamayı kaydettiğinizde kopyaladığınız yapılandırma nesnesini kullanın.

Ardından, kullanacağınız Firebase modüllerini içe aktarın.

içe aktarmak {
 getAuth,
 createUserWithEmailAndPassword,
 SignInWithEmailAndPassword,
 oturumu Kapat,
} "firebase/auth" dan;
"firebase/firestore"dan { getFirestore, addDoc, koleksiyon } içe aktarın;
const db = getFirestore();
const auth = getAuth();

İle kullanıcıların kimliğini doğrula, üç işlev oluşturmanız gerekir: SignUp, SignIn ve SignOut.

bu üye olmak işlev e-postayı ve şifreyi şu adrese iletir: CreateUserWithEmailAndPassword Yeni bir kullanıcı kaydetmek için. CreateUserWithEmailAndPassword veritabanında yeni bir kullanıcı kaydı oluşturmak için kullanacağınız kullanıcı verilerini döndürür.

const kayıt = zaman uyumsuz (e-posta, şifre) => {
 denemek {
 const userCredential = createUserWithEmailAndPassword( bekleniyor
 yetki,
 e-posta,
 şifre
 );
 const user = userCredential.user;
 addDoc'u bekleyin (koleksiyon (db, "kullanıcılar")), {
 kullanıcı kimliği: kullanıcı.uid,
 e-posta: kullanıcı.e-posta,
 });
 doğru dön
 } yakalama (hata) {
 {hata: error.message} döndür
 }
};

Kayıttan önce e-postanın kullanımda olup olmadığını kontrol etmediğinizi unutmayın çünkü bunu sizin için Firebase halleder.

Sonraki kayıt olmak işlevi, e-postayı ve şifreyi SignInWithEmailAndPassword kayıtlı bir kullanıcının oturum açma işlevi.

const oturum açma = zaman uyumsuz (e-posta, şifre) => {
 denemek {
 const userCredential = signInWithEmailAndPassword'ü bekleyin(
 yetki,
 e-posta,
 şifre
 );
 const user = userCredential.user;
 doğru dön
 } yakalama (hata) {
 {hata: error.message} döndür
 }
};

Hem SignUp hem de SignOut işlevleri başarılı olursa true döndürür ve bir hata oluşursa bir hata mesajı verir.

SignOut işlevi oldukça basittir. Şunu çağırır: oturumu Kapat() Firebase'den işlev.

const signOut = zaman uyumsuz() => {
 denemek {
 çıkış bekle (auth)
 doğru dön
 } yakalama (hata) {
 yanlış döndür
 }
};

Tepki Formları Oluşturun

Oturum açma ve kayıt formları, kullanıcıdan e-posta ve şifreyi alacaktır.

Yeni bir bileşen oluştur Signup.js ve aşağıdakileri ekleyin.

"tepki" den { useState } içe aktar;
"react-router-dom"dan { Link } içe aktar;
"./firebase"den { kayıt } içe aktar;
const Kayıt = () => {
 const [e-posta, setEmail] = useState("");
 const [parola, setPassword] = useState("");
 const [hata, seterror] = useState("");
 const handleSubmit = zaman uyumsuz (e) => {
 e.preventDefault();
 if (şifre !== şifre2) {
 seterror("Şifreler uyuşmuyor");
 } Başka {
 setEmail("");
 şifreyi belirle("");
 const res = kaydolmayı bekle (e-posta, şifre);
 if (res.error) seterror (res.error)
 }
 };
 dönüş (
 <>
Üye olmak



 {hata? 
{hata}
: boş}


 type="e-posta"
 isim = "e-posta"
 değer={e-posta}
 placeholder="E-postanız"
 gereklidir
 onChange={(e) => setEmail (e.target.value)}
 />
 type="şifre"
 isim = "şifre"
 değer={şifre}
 placeholder="Şifreniz"
 gereklidir
 onChange={(e) => setPassword (e.target.value)}
 />
Göndermek




 zaten kayıtlı? Giriş yapmak





 );
};
varsayılan Kaydı dışa aktar;

Burada bir kayıt formu oluşturuyorsunuz ve durumu kullanarak e-posta ve şifreyi takip ediyorsunuz. Formu gönderdikten sonra, onSubmit olay tetikler tutamakGönder() çağıran fonksiyon üye olmak() işlevinden firebase.js. İşlev bir hata döndürürse, hata durumunu güncelleyin ve hata mesajını görüntüleyin.

Oturum açma formu için oluştur Signin.js ve aşağıdakileri ekleyin.

"tepki" den { useState } içe aktar;
"./firebase"den { login } içe aktar;
const Giriş = () => {
 const [e-posta, setEmail] = useState("");
 const [parola, setPassword] = useState("");
 const [hata, seterror] = useState("");
 const handleSubmit = zaman uyumsuz (e) => {
 e.preventDefault();
 setEmail("");
 şifreyi belirle("");
 const res = oturum açmayı bekle (e-posta, şifre);
 if (res.error) seterror (res.error);
 };
 dönüş (
 <>
 {hata? 
{hata}
: boş}


 tür = "metin"
 isim = "e-posta"
 değer={e-posta}
 placeholder="E-postanız"
 onChange={(e) => setEmail (e.target.value)}
 />
 type="şifre"
 isim = "şifre"
 değer={şifre}
 placeholder="Şifreniz"
 onChange={(e) => setPassword (e.target.value)}
 />




 );
};
varsayılan Girişi dışa aktar;

Oturum açma formu, gönderimin aşağıdakileri çağırması dışında kayıt sayfasına oldukça benzer. kayıt olmak() işlev.

Son olarak, Profil sayfasını oluşturun. Bu, uygulamanın başarılı bir kimlik doğrulamasından sonra kullanıcıları yönlendireceği sayfadır.

Yaratmak Profil.js ve aşağıdakileri ekleyin.

{signOut } dosyasını "./firebase"den içe aktarın;
const Profil = () => {
 const handleLogout = zaman uyumsuz () => {
 SignOut()'u bekleyin;
 };
 dönüş (
 <>
Profil

Çıkış Yap
 );
};
varsayılan Profili dışa aktar;

Bu bileşende, Profil başlığına ve çıkış düğmesine sahipsiniz. bu tıklamada düğmedeki işleyici tetikler koluÇıkış Kullanıcının oturumunu kapatan işlev.

Kimlik Doğrulama Yolları Oluşturun

Oluşturduğunuz sayfaları tarayıcıya sunmak için react-router-dom.

Düzenlemek tepki-yönlendirici-dom:

npm i tepki-yönlendirici-dom

İçinde indeks.js, yapılandır tepki-yönlendirici-dom:

React'i "tepki" den içe aktar;
ReactDOM'u "react-dom"dan içe aktar;
"react-router-dom"dan { BrowserRouter, Routes, Route } içe aktarın;
Uygulamayı "./App" içinden içe aktarın;
Girişi "./Login"den içe aktar;
Profili "./Profile" dosyasından içe aktar;
ReactDOM.render(




} />
} />
} />



,
 Document.getElementById("kök")
);

Bu noktaya kadar, uygulama bir kullanıcıyı kaydedebilir, kaydedebilir ve oturumunu kapatabilir. Peki bir kullanıcının oturum açıp açmadığını nasıl anlarsınız?

Bu öğreticinin sonraki bölümünde, bir kullanıcının uygulama genelinde kimlik doğrulama durumunu takip etmek için React bağlamını nasıl kullanabileceğinizi göreceksiniz.

React Context API ile Kimlik Doğrulamayı Yönetin

React Context, uygulamalar arasında veri paylaşımını basitleştiren bir durum yönetimi aracıdır. Verilerin ağaçtan üst öğeden alt öğeye, ona ihtiyaç duyan bileşene ulaşana kadar geçtiği prop sondajına daha iyi bir alternatiftir.

Kimlik Doğrulama Bağlamı Oluştur

İçinde kaynak klasör, ekle AuthContext.js dosya ve oluştur ve dışa aktar AuthContext.

"tepki" den { createContext } içe aktar;
const AuthContext = createContext();
varsayılan AuthContext'i dışa aktar;

Ardından, sağlayıcıyı şurada oluşturun: AuthProvider.js. Bileşenlerin kullanılmasına izin verecek AuthContext.

"firebase/auth" öğesinden { getAuth, onAuthStateChanged } içe aktarın;
'tepkiden' içe { useState, useEffect };
AuthContext'i './AuthContext'ten içe aktarın
const auth = getAuth()
dışa aktarma const AuthProvider = ({ çocuklar }) => {
 const [kullanıcı, setUser] = useState (boş);
 useEffect(() => {
 onAuthStateChanged (auth,(user) => {
 setUser (kullanıcı)
 })
 }, []);
dönüş (
{çocuklar}
 );
 };

Burada, kullanarak kullanıcı değerini alıyorsunuz. onAuthStateChanged() Firebase'den yöntem. Bu yöntem, kullanıcının kimliğini doğrularsa bir kullanıcı nesnesi, yapamazsa null döndürür. kullanarak useEffect() kancası, kimlik doğrulama durumu her değiştiğinde kullanıcı değeri güncellenir.

İçinde index.jsile rotaları sarın Yetki Sağlayıcı tüm bileşenlerin kullanıcıya bağlamda erişmesini sağlamak için:

{ AuthProvider } dosyasını "./AuthProvider" içinden içe aktarın;
ReactDOM.render(




} />
} />
} />



 ,
,
 Document.getElementById("kök")
);

Korumalı Rotalar Oluşturun

İle hassas rotaları koruyun, profil sayfası gibi korumalı bir sayfaya gitmeye çalışan bir kullanıcının kimlik doğrulama durumunu kontrol edin.

değiştir Profil.js kimliği doğrulanmamışsa bir kullanıcıyı yeniden yönlendirmek için.

"tepki" den { useContext } içe aktar;
AuthContext'i "./AuthContext" içinden içe aktarın;
"react-router-dom"dan { useNavigate, Navigate } içe aktar;
{signOut } dosyasını "./firebase"den içe aktarın;
const Profil = () => {
 const { kullanıcı } = useContext (AuthContext);
 const gezinme = useNavigate();
 const handleLogout = zaman uyumsuz () => {
 SignOut()'u bekleyin;
 };
 if (!kullanıcı) {
 dönüş ;
 }
 dönüş (
 <>
Profil

Çıkış Yap
 );
};
varsayılan Profili dışa aktar;

Uygulama koşullu olarak oluşturur kimlik doğrulaması yapılmadıysa, kullanıcıyı oturum açma sayfasına yönlendirerek profil sayfası.

Firebase Kimlik Doğrulaması ile Daha İleri Gitmek

Bu eğiticide, kullanıcıların e-postalarını ve parolalarını kullanarak kimliklerini doğrulamak için Firebase'i kullandınız. Ayrıca Firestore'da kullanıcı kayıtları oluşturdunuz. Firebase, Google, Facebook ve Twitter gibi kimlik doğrulama sağlayıcılarıyla çalışmak için işlevler sağlar.

2022'de İzlemeniz Gereken 10 En İyi React Uygulaması

Sonrakini Oku

Yazar hakkında