How to Integrate Firebase with a React Native Expo App in 5 Minutes

Firebase is a powerful backend-as-a-service platform offering a suite of tools for user authentication, real-time databases, analytics, and more. If you’re developing with React Native using Expo, integrating Firebase is a simple and fast way to add robust features like authentication and real-time data synchronization. In this blog post, I’ll show you how to integrate Firebase with an Expo-based React Native app in just 5 minutes. We'll cover setting up Firebase for an Expo project, using Firebase Authentication for signing users up and logging them in, and utilizing Firebase's Realtime Database to store and retrieve data. Let’s get started! Prerequisites Before we begin, ensure you have the following: Node.js installed. An existing Expo project. If you don’t have one, create one with expo init. A Firebase account and project. If you don’t have one, create a Firebase project at the Firebase Console. Install the Expo Firebase SDK by using the expo install command. Step 1: Install Firebase SDK for Expo Expo offers an easy way to install Firebase packages. Open your terminal and navigate to your Expo project directory, then install the Firebase dependencies: expo install firebase This will install the necessary Firebase SDK for Expo apps. Step 2: Set Up Firebase in the Firebase Console Go to Firebase Console: Visit Firebase Console. Create a New Project: If you don't already have a Firebase project, create one. Add Firebase to Your App: For Web: Since Expo uses a web-based setup, we’ll configure it as a web app in Firebase. Navigate to the Firebase Console and select Web () to add a new web app. Copy the Firebase configuration object that Firebase generates for you. Here’s what a typical Firebase config object looks like: const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID", }; Step 3: Configure Firebase in Your React Native App Once you’ve obtained the Firebase configuration, you can set it up in your React Native Expo app. Open your App.js or any other entry point of your app, and initialize Firebase as follows: import React, { useState } from 'react'; import { TextInput, Button, View, Text } from 'react-native'; import firebase from 'firebase/app'; import 'firebase/auth'; import 'firebase/database'; // Your Firebase config object const firebaseConfig = { apiKey: "YOUR_API_KEY", authDomain: "YOUR_AUTH_DOMAIN", projectId: "YOUR_PROJECT_ID", storageBucket: "YOUR_STORAGE_BUCKET", messagingSenderId: "YOUR_MESSAGING_SENDER_ID", appId: "YOUR_APP_ID", }; // Initialize Firebase if it's not already initialized if (!firebase.apps.length) { firebase.initializeApp(firebaseConfig); } else { firebase.app(); // Use the default app } const App = () => { const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [user, setUser] = useState(null); const signUp = async () => { try { await firebase.auth().createUserWithEmailAndPassword(email, password); alert('User created!'); } catch (error) { alert(error.message); } }; const signIn = async () => { try { await firebase.auth().signInWithEmailAndPassword(email, password); alert('User signed in!'); } catch (error) { alert(error.message); } }; const signOut = async () => { try { await firebase.auth().signOut(); setUser(null); alert('User signed out!'); } catch (error) { alert(error.message); } }; return ( {user && Welcome, {user.email}} ); }; export default App; What’s happening here? Firebase Initialization: We initialize Firebase using the configuration object you copied from the Firebase Console. Authentication: The app includes basic functionality for signing up and signing in users with Firebase Authentication. Now, Firebase is connected to your Expo app, and you can use Firebase services like authentication directly. Step 4: Use Firebase Realtime Database (Optional) Firebase offers a Realtime Database that syncs data across all clients in real-time. Let’s add a simple example to store and retrieve data. First, add the Firebase Database module: import 'firebase/database'; Then, use the Firebase Realtime Database API to store and fetch data: const writeData = () => { firebase.database().ref('/users/1').set({ name: 'John Doe', email: email, }).then(() => { alert('Data saved!'); }).catch(error => alert(error.message)); }; const readData = () => { firebase.database().ref('/users/1').once('value') .then(snapshot => { const data = snapshot.val(); alert('User data: ' + JSON.stringify(data)); }) .catch(er

expo install firebase

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

import React, { useState } from 'react';
import { TextInput, Button, View, Text } from 'react-native';
import firebase from 'firebase/app';
import 'firebase/auth';
import 'firebase/database';

// Your Firebase config object
const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "YOUR_AUTH_DOMAIN",
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
  appId: "YOUR_APP_ID",
};

// Initialize Firebase if it's not already initialized
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
} else {
  firebase.app(); // Use the default app
}

const App = () => {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const [user, setUser] = useState(null);

  const signUp = async () => {
    try {
      await firebase.auth().createUserWithEmailAndPassword(email, password);
      alert('User created!');
    } catch (error) {
      alert(error.message);
    }
  };

  const signIn = async () => {
    try {
      await firebase.auth().signInWithEmailAndPassword(email, password);
      alert('User signed in!');
    } catch (error) {
      alert(error.message);
    }
  };

  const signOut = async () => {
    try {
      await firebase.auth().signOut();
      setUser(null);
      alert('User signed out!');
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    <View style={{ padding: 20 }}>
      <TextInput
        placeholder="Email"
        value={email}
        onChangeText={setEmail}
        style={{ borderBottomWidth: 1, marginBottom: 10 }}
      />
      <TextInput
        placeholder="Password"
        secureTextEntry
        value={password}
        onChangeText={setPassword}
        style={{ borderBottomWidth: 1, marginBottom: 20 }}
      />
      <Button title="Sign Up" onPress={signUp} />
      <Button title="Sign In" onPress={signIn} />
      <Button title="Sign Out" onPress={signOut} />
      {user && <Text>Welcome, {user.email}</Text>}
    </View>
  );
};

export default App;

import 'firebase/database';

const writeData = () => {
  firebase.database().ref('/users/1').set({
    name: 'John Doe',
    email: email,
  }).then(() => {
    alert('Data saved!');
  }).catch(error => alert(error.message));
};

const readData = () => {
  firebase.database().ref('/users/1').once('value')
    .then(snapshot => {
      const data = snapshot.val();
      alert('User data: ' + JSON.stringify(data));
    })
    .catch(error => alert(error.message));
};

expo start

What's Your Reaction?

0

Like

0

Dislike

0

Love

0

Funny

0

Angry

0

Sad

0

Wow

Related Posts

How Technology is Revolutionizing Global Expansion for ...

Jan 18, 2025  0

Showing E-commerce More Clearly

Jan 18, 2025  0

Leveraging Azure Key Vault for Secrets Management and E...

Jan 15, 2025  0