Search code examples
firebasereact-nativeexporeact-native-fbsdk

How to login with my own Facebook app instead of Expo Go?


I'm trying to implement a Facebook login with Firebase on my Expo React Native app. I've tried all steps available on Youtube and ended up using the old and deprecated expo-facebook module. Everything worked as expected, but when I pressed login with Facebook, the app name and icon on the login web UI of Facebook showed Expo Go instead of my app. And if I changed my initializeAsync appId string, nothing happen and still showed that Expo Go screen.

Below is the screenshot:

enter image description here

And here is the login function code:

import * as Facebook from "expo-facebook";
import firebase from "firebase/compat/app";
import "firebase/compat/auth";
import "firebase/compat/firestore";
import firebaseConfig from "../firebase";

firebase.initializeApp(firebaseConfig);

const facebookLogin = async (setName) => {
  try {
    await Facebook.initializeAsync({
      appId: "xxx",
      appName: "xxx",
    });
    const { type, token } = await Facebook.logInWithReadPermissionsAsync({
      permissions: ["public_profile"],
    });
    if (type === "success") {
        fetch(`https://graph.facebook.com/me?access_token=${token}`)
          .then((res) => res.json())
          .then((data) => {
            console.log(data);
            setName(data.name);
          })
          .catch((err) => console.log(err));
    }
  } catch ({ message }) {
    console.log(`Facebook login error: ` + message);
  }
};

export default facebookLogin;



Solution

  • Solved by running production mode expo run:ios then the login screen having logo and app name as expected.