Aadarsh Verma

Posted on May 4

Complete Guide to React Native Firebase🔥: Google Authentication and Realtime Database CRUD Operations

#react #reactnative #firebase #javascript

Introduction

Hey there! I'm Aadarsh Verma,
Here's the thing - I started this cool project because everyone in my class was doing the same old web applications with HTML, CSS, JS. I wanted to stand out, to be that guy who takes a different route. So I decided to develop a mobile app!

Sure, I could've chosen Java or Kotlin, but who has time for that when you're juggling college assignments, right? That's when I discovered React Native - same JavaScript foundation, but for mobile apps! Win-win! 🎯

My React Native Journey

Let me be real with you - I failed multiple times trying to build this Google Auth + CRUD app. The lack of proper tutorials, mentors, and clear guidance was frustrating. But you know what? I had two secret weapons: determination and the official React Native Firebase documentation!

Building FireApp (Yes, I named it after myself 😎)

Let's jump right in and create our React Native app with Firebase integration.

Step 1: Setting Up Your React Native Project

// I'm using Bare React Native
// Open your terminal and run:
npx react-native init fireApp

// This command will download all necessary files and dependencies

Step 2: Adding Firebase to Your React Native Project

First, install the required packages:

# Install Firebase core
npm install @react-native-firebase/app

# For Google Authentication
npm install @react-native-firebase/auth
npm install @react-native-google-signin/google-signin

# For Realtime Database
npm install @react-native-firebase/database

Step 3: Firebase Setup in Firebase Console

Go to Firebase Console
Create a new project (name it "FireApp" 🔥)
Add Android/iOS app to your project
Download google-services.json (Android) or GoogleService-Info.plist (iOS)
Place these files in their respective folders

Step 4: Configuring Google Authentication

import { GoogleSignin } from '@react-native-google-signin/google-signin';
import auth from '@react-native-firebase/auth';

// Initialize Google Sign In
GoogleSignin.configure({
  webClientId: 'YOUR_WEB_CLIENT_ID', // from Firebase Console
});

// Sign In function
const signInWithGoogle = async () => {
  try {
    const { idToken } = await GoogleSignin.signIn();
    const googleCredential = auth.GoogleAuthProvider.credential(idToken);
    await auth().signInWithCredential(googleCredential);
    console.log('Signed in with Google!');
  } catch (error) {
    console.error(error);
  }
};

Step 5: Setting Up Firebase Realtime Database

import database from '@react-native-firebase/database';

// Create (Add Data)
const addData = async (key, value) => {
  try {
    await database()
      .ref(`/users/${key}`)
      .set({
        name: value,
        age: 20,
        timestamp: database.ServerValue.TIMESTAMP
      });
    console.log('Data added successfully!');
  } catch (error) {
    console.error(error);
  }
};

// Read (Fetch Data)
const readData = async () => {
  try {
    const snapshot = await database().ref('/users').once('value');
    const data = snapshot.val();
    console.log('User data: ', data);
  } catch (error) {
    console.error(error);
  }
};

// Update Data
const updateData = async (key, newValue) => {
  try {
    await database()
      .ref(`/users/${key}`)
      .update({
        name: newValue,
        lastUpdated: database.ServerValue.TIMESTAMP
      });
    console.log('Data updated successfully!');
  } catch (error) {
    console.error(error);
  }
};

// Delete Data
const deleteData = async (key) => {
  try {
    await database()
      .ref(`/users/${key}`)
      .remove();
    console.log('Data deleted successfully!');
  } catch (error) {
    console.error(error);
  }
};

Step 6: Creating a Complete App Component

import React, { useState, useEffect } from 'react';
import { View, Text, Button, TextInput } from 'react-native';
import auth from '@react-native-firebase/auth';
import database from '@react-native-firebase/database';
import { GoogleSignin } from '@react-native-google-signin/google-signin';

const FireApp = () => {
  const [user, setUser] = useState(null);
  const [text, setText] = useState('');
  const [data, setData] = useState(null);

  useEffect(() => {
    // Listen for authentication state to change
    const subscriber = auth().onAuthStateChanged(setUser);
    return subscriber; // unsubscribe on unmount
  }, []);

  const signInWithGoogle = async () => {
    // ... (Google sign in code from above)
  };

  const signOut = async () => {
    try {
      await auth().signOut();
      console.log('User signed out!');
    } catch (error) {
      console.error(error);
    }
  };

  // CRUD Operations
  const handleCreate = () => {
    if (user && text) {
      addData(user.uid, text);
      setText('');
    }
  };

  const handleRead = async () => {
    if (user) {
      const snapshot = await database().ref(`/users/${user.uid}`).once('value');
      setData(snapshot.val());
    }
  };

  const handleUpdate = () => {
    if (user && text) {
      updateData(user.uid, text);
      setText('');
    }
  };

  const handleDelete = () => {
    if (user) {
      deleteData(user.uid);
      setData(null);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      {user ? (
        <>
          <Text>Welcome, {user.email}</Text>
          <Button title="Sign Out" onPress={signOut} />

          <TextInput
            value={text}
            onChangeText={setText}
            placeholder="Enter data"
            style={{ borderWidth: 1, marginTop: 20, padding: 10 }}
          />

          <View style={{ marginTop: 20 }}>
            <Button title="Create" onPress={handleCreate} />
            <Button title="Read" onPress={handleRead} />
            <Button title="Update" onPress={handleUpdate} />
            <Button title="Delete" onPress={handleDelete} />
          </View>

          {data && (
            <Text style={{ marginTop: 20 }}>
              Current Data: {JSON.stringify(data, null, 2)}
            </Text>
          )}
        </>
      ) : (
        <Button title="Sign In with Google" onPress={signInWithGoogle} />
      )}
    </View>
  );
};

export default FireApp;

Pro Tips from My Experience 💡

Error Handling: Always wrap Firebase operations in try-catch blocks
Authentication State: Use listeners to track auth state changes
Database Security: Set up proper Firebase rules
Offline Support: Firebase Realtime Database has built-in offline support!
Debug Mode: Enable Firebase debug mode during development

Common Pitfalls I Encountered

Forgetting to configure SHA-1 fingerprint for Android
Not enabling Google Sign-In in Firebase Console
Firebase rules too restrictive (or too open!)
Mixing promises with async/await

Resources That Saved My Life 🙏

Conclusion

Building FireApp was challenging but incredibly rewarding. React Native with Firebase is a powerful combination for creating cross-platform mobile apps. Remember, every expert was once a beginner. Keep coding, keep failing, and most importantly, keep learning!

Go build something amazing! 🚀

P.S.: If you're stuck somewhere, DM me on LinkedIn or check out my GitHub for the complete source code!

#ReactNative #Firebase #MobileDevelopment #Authentication #CRUD #IndianDevelopers

DEV Community