دليل شامل: إضافة المصادقة لتطبيقات React Native باستخدام Firebase في ثلاث خطوات

تُعد المصادقة (Authentication) حجر الزاوية في بناء تطبيقات ويب وهواتف محمولة آمنة وفعالة. فهي لا تقتصر على حماية البيانات الحساسة فحسب، بل تمكننا أيضاً من تخصيص تجربة المستخدم، وتقييد الوصول إلى الخدمات المدفوعة أو الميزات المحددة، مما يضمن بيئة آمنة للمستخدمين ومنصة موثوقة للمطورين. في هذا الدليل الشامل، سنتعمق في كيفية إضافة المصادقة إلى تطبيق React Native باستخدام خدمة Firebase القوية من Google، وذلك في ثلاث خطوات رئيسية ومفصلة.

1. تثبيت وتهيئة Firebase في تطبيقات React Native

الخطوة الأولى والأكثر أهمية هي تثبيت حزمة Firebase وتهيئتها داخل تطبيقك. في بيئة React Native، نحتاج إلى استخدام حاوية Firebase مخصصة لـ React Native، والتي تُعرف باسم react-native-firebase.

للمشاريع الجديدة (New Projects)

إذا كنت بصدد بدء مشروع React Native جديد من الصفر وتخطط لاستخدام Firebase، فأنت محظوظ! يمكنك تثبيت حزمة react-native-firebase مدمجة مسبقاً باستخدام واجهة سطر الأوامر (CLI) الخاصة بـ React Native:

// npx @react-native-community/cli init --template=@react-native-firebase/template authenticationFirebase

بعد ذلك، قم بتثبيت التبعيات (pods) الخاصة بنظام iOS عن طريق تشغيل الأمر التالي داخل المجلد الجذر لتطبيقك:

cd ios && pod install

في حال واجهت أي مشكلات أثناء إعداد مشروع جديد مع Firebase، يُرجى الرجوع إلى الوثائق الرسمية لـ react-native-firebase للحصول على إرشادات مفصلة.

للمشاريع القائمة (Existing Projects)

إذا كنت ترغب في إضافة react-native-firebase إلى مشروع React Native موجود، يمكنك تثبيت الحزمة الأساسية @react-native-firebase/app باستخدام yarn أو npm:

yarn add @react-native-firebase/app

أو:

npm install @react-native-firebase/app

ثم قم بتثبيت التبعيات (pods) لنظام iOS:

cd ios && pod install

تشغيل التطبيق (Running the App)

بالنسبة لنظام iOS، هناك طريقتان لتشغيل التطبيق. شخصياً، أفضل استخدام Xcode لأنه يوفر رؤية واضحة لأي أخطاء قد تحدث وتتسبب في فشل البناء.

تأكد دائماً من تشغيل حزمة التطبيق عن طريق الأمر yarn start لبدء تشغيل التطبيق. الطريقة الثانية لتشغيل التطبيق على iOS هي استخدام الأمر react-native run-ios.

2. إضافة بيانات اعتماد Firebase لمشروعك

تتطلب هذه الخطوة إنشاء مشروع جديد في لوحة تحكم Firebase Console. بعد إنشاء المشروع، من الصفحة الرئيسية، اختر خيار ‘إضافة Firebase إلى تطبيق iOS‘.

لأنظمة iOS

ستظهر لك الخطوات اللازمة لإضافة بيانات الاعتماد إلى iOS، والتي تتضمن ما يلي:

• تنزيل ملف GoogleService-info.plist ووضعه داخل مجلد iOS ضمن مشروعك.

• تهيئة Firebase داخل تطبيقك.

لأنظمة Android

يختلف إعداد Firebase قليلاً لنظام Android. في إعدادات المشروع ضمن Firebase Console، اختر ‘إضافة Firebase إلى Android‘.

يمكنك إدخال أي اسم تريده لتطبيقك، فقط تأكد من أنه يتوافق مع متطلبات Firebase. ثم انقر على ‘تسجيل’ (Register).
بعد ذلك، ستحتاج إلى تنزيل ملف google-services.json ووضعه داخل مجلد android/app. ثم الخطوة التالية هي تهيئة Android SDK.

الخطوة الأخيرة هي تطبيق إضافة Firebase داخل ملف android/app/build.gradle:

apply plugin: 'com.google.gms.google-services'

إذا واجهت أي مشكلات في تنفيذ الخطوات المذكورة أعلاه، يمكنك دائماً الرجوع إلى وثائق Firebase أو مواقع react-native-firebase للحصول على دعم إضافي. الآن بعد أن انتهينا من التكامل، فإن الخطوة التالية هي تنفيذ وظائف Firebase لإنشاء المستخدمين وتسجيل الدخول في React Native.

3. تنفيذ وظائف تسجيل الدخول والتسجيل (SignIn, Login)

تعتبر هذه المرحلة بسيطة، حيث تتضمن بعض أكواد React و JavaScript لاستدعاء وظائف Firebase. سأقوم بإنشاء واجهة مستخدم بسيطة لتسجيل الدخول والتسجيل (Login و SignUp)، علماً أن هذا الجزء ليس ضرورياً لهذا الشرح ويمكنك تخطيه إذا كنت ترغب في التركيز على المنطق البرمجي فقط.

سنستخدم الدالة createUserWithEmailAndPassword لتسجيل مستخدم جديد. لقد قمت بالفعل بتطبيق جميع عمليات التحقق من الصحة على النموذج، لذا نحتاج فقط إلى استدعاء هذه الدالة لإنشاء المستخدم.

عندما يضغط المستخدم على زر ‘متابعة’ (Continue)، سيتم استدعاء الدالة __doSignUp، والتي ستبدو كالتالي:

 const __doSignUp = () => {
   if (!email) {
     setError("Email required *")
     setValid(false)
     return
   } else if (!password && password.trim() && password.length > 6) {
     setError("Weak password, minimum 5 chars")
     setValid(false)
     return
   } else if (!__isValidEmail(email)) {
     setError("Invalid Email")
     setValid(false)
     return
   }
   __doCreateUser(email, password)
 }
 const __doCreateUser = async (email, password) => {
   try {
     let response = await auth().createUserWithEmailAndPassword(email, password)
     if (response) {
       console.log(tag, "?", response)
     }
   } catch (e) {
     console.error(e.message)
   }
 }

تأكد من تثبيت حزمة @react-native-firebase/auth لتتمكن من استدعاء الدالة auth().createUserWithEmailAndPassword(email, password):

 // import auth
 import auth from "@react-native-firebase/auth"

إذا أطلقت الدالة خطأً، فتأكد من تمكين طريقة المصادقة بالبريد الإلكتروني وكلمة المرور (Email/Password) في قسم المصادقة ضمن Firebase Console.

إذا سارت الأمور على ما يرام وكانت البيانات المدخلة (البريد الإلكتروني وكلمة المرور) صحيحة، فستظهر رسالة تنبيه. وإذا تحققت من قسم المصادقة في Firebase Console، ستلاحظ أنه تم إنشاء مستخدم جديد.

مكون تسجيل المستخدم (SignInComponent)

إليك الكود المصدري الكامل لمكون SignInComponent:

 const SigInComponent = () => {
   const [email, setEmail] = useState("")
   const [password, setPassword] = useState("")
   const [fetching, setFetching] = useState(false)
   const [error, setError] = useState("")
   const [isValid, setValid] = useState(true)
   const __doSignUp = () => {
     if (!email) {
       setError("Email required *")
       setValid(false)
       return
     } else if (!password && password.trim() && password.length > 6) {
       setError("Weak password, minimum 5 chars")
       setValid(false)
       return
     } else if (!__isValidEmail(email)) {
       setError("Invalid Email")
       setValid(false)
       return
     }
     __doCreateUser(email, password)
   }
   const __doCreateUser = async (email, password) => {
     try {
       let response = await auth().createUserWithEmailAndPassword(
         email,
         password
       )
       if (response && response.user) {
         Alert.alert("Success ✅", "Account created successfully")
       }
     } catch (e) {
       console.error(e.message)
     }
   }
   return (
     <SafeAreaView style={styles.containerStyle}>
       <View style={{ flex: 0.2 }}>
         {!!fetching && <ActivityIndicator color={blue} />}
       </View>
       <View style={styles.headerContainerStyle}>
         <Text style={styles.headerTitleStyle}>Sign Up</Text>
       </View>
       <View style={styles.formContainerStyle}>
         <TextInput label={"Email"} autoCapitalize={false} keyboardType="email-address" style={styles.textInputStyle} placeholder="Mail address" onChangeText={text => { setError; setEmail(text) }} error={isValid} />
         <TextInput label={"Password"} secureTextEntry autoCapitalize={false} style={styles.textInputStyle} selectionColor={blue} placeholder="Password" error={isValid} onChangeText={text => setPassword(text)} />
       </View>
       {error ? (
         <View style={styles.errorLabelContainerStyle}>
           <Text style={styles.errorTextStyle}>{error}</Text>
         </View>
       ) : null}
       <View style={styles.signInButtonContainerStyle}>
         <TouchableHighlight style={styles.signInButtonStyle} onPress={__doSignUp} underlayColor={blue}>
           <View style={{ flexDirection: "row", justifyContent: "space-around" }}>
             <Text style={styles.signInButtonTextStyle}>Continue</Text>
           </View>
         </TouchableHighlight>
       </View>
     </SafeAreaView>
   )
 }

مكون تسجيل الدخول (LoginComponent)

بالنسبة لمكون LoginComponent، فإن الأمر مشابه إلى حد كبير، والفرق الوحيد هو أننا نستخدم الدالة signInWithEmailAndPassword بدلاً من createUserWithEmailAndPassword.

 const __doSingIn = async (email, password) => {
   try {
     let response = await auth().signInWithEmailAndPassword(email, password)
     if (response && response.user) {
       Alert.alert("Success ✅", "Authenticated successfully")
     }
   } catch (e) {
     console.error(e.message)
   }
 }

وهكذا، تم تنفيذ المصادقة بنجاح في تطبيقنا!

التحقق من حالة المستخدم المسجل الدخول

تبقى خطوة أخيرة ومهمة: إذا أردنا التحقق مما إذا كان المستخدم مسجلاً للدخول بالفعل، نحتاج إلى عرض شيء مختلف بدلاً من شاشات تسجيل الدخول أو التسجيل. على سبيل المثال، يمكننا عرض الشاشة الرئيسية (Home screen). يمكننا استخدام وحدة Firebase للتحقق من الجلسة، والتي يمكن استيرادها من وحدة auth:

 import auth, { firebase } from "@react-native-firebase/auth"

 componentDidMount() {
   // this.register("said1292@gmail.com", "123456");
   this.__isTheUserAuthenticated();
 }
 __isTheUserAuthenticated = () => {
   let user = firebase.auth().currentUser.uid;
   if (user) {
     console.log(tag, user);
     this.setState({ authenticated: true });
   } else {
     this.setState({ authenticated: false });
   }
 };

يمكننا تغيير واجهة المستخدم بناءً على ما إذا كان المستخدم مصادقاً أم لا. ويمكننا عرض معلومات المستخدم ببساطة باستخدام نفس الطريقة:

firebase.auth().currentUser.email // said543@gmail.com

ولتسجيل الخروج (logout)، يمكنك ببساطة استدعاء الدالة await firebase.auth().signOut().
من المؤكد أن دمج نظام تنقل مثل react-navigation سيكون رائعاً، لكنه لم يكن محور اهتمامنا في هذه المقالة. لذا، لا تتردد في إضافة التنقل لتتمكن من الانتقال بين الشاشات بناءً على حالة المستخدم. يمكنك الاطلاع على الكود المصدري الكامل على GitHub.

الخلاصة التقنية

في هذا الدليل، استعرضنا عملية متكاملة لإضافة المصادقة إلى تطبيقات React Native باستخدام Firebase. لقد رأينا كيف أن Firebase Authentication توفر حلاً قوياً ومرناً للمطورين لإنشاء أنظمة تسجيل دخول وتسجيل مستخدمين آمنة وفعالة بأقل جهد برمجي. من خلال ثلاث خطوات رئيسية – التثبيت، وإعداد بيانات الاعتماد، وتنفيذ وظائف المصادقة – يمكن للمطورين دمج ميزات المصادقة الأساسية بسرعة وكفاءة. يبرز هذا التكامل كخيار ممتاز لتطبيقات React Native التي تتطلب مصادقة قوية مع سهولة في الإعداد والصيانة، مما يتيح للمطورين التركيز بشكل أكبر على بناء تجربة مستخدم فريدة ومبتكرة.