Day 1: Setting Up Firebase for Authentication and Database

Today, you’ll set up Firebase to manage authentication and store data for your React Native e-commerce app. This setup will provide a foundation for authentication, user data, and real-time database interactions that we’ll build on in the following days.

Table of Contents

What You Will Do Today:

Set up a Firebase project.
Configure Firebase Authentication and Firestore Database.
Initialize Firebase in your React Native app.

Step 1: Setting Up a Firebase Project

Go to the Firebase Console.
Create a new project and give it a name (e.g., ECommerceApp).
Enable Google Analytics if needed.

Configuring Firebase Services

Go to Project Settings and scroll down to Your apps.
Select iOS and Android to add Firebase to your mobile platforms. Download the generated files:

For Android, download google-services.json and place it in your project at android/app/.
For iOS, download GoogleService-Info.plist and place it in ios/yourAppName/.

Enable Firebase Authentication:

Go to Authentication > Sign-in method.
Enable Email/Password authentication for now (we’ll add other providers later).

Set up Firestore as your real-time database:

Go to Firestore Database > Create Database.
Start in Test mode for easy setup, but we’ll apply security rules later.

Step 2: Installing Firebase in Your React Native Project

Initialize a new React Native project:

   npx react-native init ECommerceApp
   cd ECommerceApp

Install Firebase dependencies:

   npm install @react-native-firebase/app @react-native-firebase/auth @react-native-firebase/firestore

For iOS, run the following to install CocoaPods:

   cd ios
   pod install
   cd ..

Step 3: Initializing Firebase in Your App

In App.js, initialize Firebase:

   // App.js
   import React from 'react';
   import { Text, View } from 'react-native';
   import firebase from '@react-native-firebase/app';
   import auth from '@react-native-firebase/auth';
   import firestore from '@react-native-firebase/firestore';

   export default function App() {
     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Text>Welcome to E-Commerce App!</Text>
         <Text>Firebase Setup Completed</Text>
       </View>
     );
   }

Configure Firebase Authentication and Firestore:

To verify the setup, add a test function to authenticate a user and save data to Firestore.

   // App.js (continued)
   import React, { useEffect } from 'react';

   export default function App() {
     useEffect(() => {
       // Test function to authenticate a user and write to Firestore
       const testFirebase = async () => {
         try {
           // Sign up a test user
           await auth().createUserWithEmailAndPassword('[email protected]', 'password123');
           console.log('User registered successfully!');

           // Add test data to Firestore
           await firestore().collection('products').add({
             name: 'Sample Product',
             price: 99.99,
             description: 'This is a sample product.',
           });
           console.log('Sample product added to Firestore!');
         } catch (error) {
           console.error('Error initializing Firebase:', error);
         }
       };

       testFirebase();
     }, []);

     return (
       <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
         <Text>Welcome to E-Commerce App!</Text>
         <Text>Firebase Setup Completed</Text>
       </View>
     );
   }

Run the app to verify:

Use npm start and then npx react-native run-android or npx react-native run-ios to test on your device.
Check the Firebase console under Authentication for the new user and Firestore for the sample product data.

Summary

Today, you successfully set up Firebase in your React Native e-commerce app with Authentication and Firestore Database. You verified the setup by adding a test user and storing sample product data.

Tomorrow, you’ll start building the product listing and detail pages.

Post Views: 8