SignIn With Facebook Using Firebase, React Native & Expo

For Expo SDK Version ≥ 46. Android & iOS

Facebook SignIn Using React Native And Firebase

Hey..!! My name is Rohit. Well, I am not a professional content writer. But I will ensure that at the end of this article, you can add a Facebook SignIn Feature With Firebase to your react native & expo applications.

I recommend you to watch the step-by-step tutorial here:

Project setup and Package Requirements

Attention all developers seeking to make social connections and establish themselves while earning passive income — look no further! I highly recommend ‘From Code to Connections’, a book that will guide you through the process. Don’t miss out, grab your copy now on Amazon worldwide or Amazon India! You can also go for Gumroad

• We all know that the expo deprecated the expo-facebook package after the Expo SDK version 46 release. We have to use an alternate method to get our job done.
• The official documentation suggests we use the react-native-fbsdk-next package instead.
• If you check the installation of the ‘react-native-fbsdk-next’ package, it won’t work in the Expo Go mobile application.
• As this package uses native code, we have to use either the Prebuild method or the Development Build method. The Prebuild method requires Android Studio or XCode, depending on the operating system you are working on. On the other hand, you don’t need any third-party software in the Development Build method. Therefore, I will follow the guidelines of the Development Build method. Both of these methods are officially stated by Expo.
• Configure your application according to the development build method. You can watch the step-by-step guideline in the video here.
• Add the following to the app.json file

{
  "expo": {
    "plugins": [
      [
        "react-native-fbsdk-next",
        {
          "appID": "48127127xxxxxxxx",
          "clientToken": "c5078631e4065b60d7544a95xxxxxxxx",
          "displayName": "RN SDK Demo",
        }
      ]
    ]
  }
}

• For the ‘appID’ and ‘clientToken’ set up your account for Android here.
• Now, if you are in test mode, you can fill in limited information in the “Meta for Developers” account. But for the production mode, you have to fill in every piece of information correctly.
• Now, set up your Firebase account for the web. Next, enable the Facebook sign-in from the Authentication section.
• Now, rebuild your application.
• Sometimes the build fails due to the internal server issue. You just have to retry the command
• The project setup and connecting it with the firebase is the toughest part of this project. Coding is easy. I tried to write the steps of project set-up, but it’s too hectic. So, I suggest you watch the first few minutes of the YouTube Video to set up your project.

Project Algo & Code

In the App.js

• Handle the user state change and let the system remember the state change using the useEffect hook

// Handle user state changes
  function onAuthStateChanged(user) {
    setUser(user);
    if(initializing) setInitializing(false);
  }

  useEffect(() => {
    const subscriber = firebase.auth().onAuthStateChanged(onAuthStateChanged);
    return subscriber;
  }, []);

• A function that triggers the Facebook Sign-in

const signInWithFB = async () => {
    try {
      await LoginManager.logInWithPermissions(['public_profile', 'email']);
      const data = await AccessToken.getCurrentAccessToken();
      if (!data) {
        return;
      }
      const facebookCredential = FacebookAuthProvider.credential(data.accessToken);
      const auth = getAuth();
      const response = await signInWithCredential(auth, facebookCredential);
      console.log(response);
    } catch (e) {
      console.log(e);
    }
  }

• Sign-out Function

const signOut = async () => {
    try {
      await firebase.auth().signOut();
    } catch (e) {
      console.log(e);
    }
  }

• That’s it. You can customize the UI of the application according to your project requirement. Now, test the application using the build method.
• If you are confused or lost, I would recommend watching a step-by-step video guide for using Google SignIn with Firebase, React Native, and Expo.

Why do I suggest watching more videos?

I am from India and I love writing code and sharing it with the community. We all know that money is the ultimate motivation for work, and the Medium payment system uses Stripe, which has been in preview mode in India for the past 4–5 years. I waited a year on the Medium platform, but in the end, nothing worked out.

So, I started making YouTube videos to make a living. I have posted the important code in the code snippet, but for a step-by-step guide, please follow the video. And if you go there, don’t forget to subscribe to my channel for React Native, Django, Python, and Data Science-related videos.

Thank you.