firebase - Why won't my function open up the Facebook Login page for React Native (Expo)?

问题描述

I am fairly new to developing in React Native with Expo and I am wondering what I am doing wrong for this Facebook login functionality.

I am currently getting the following warning when clicking the login button:

Possible Unhandled Promise Rejection (id:4): Error: An exception was thrown while calling 'ExponentFacebook.loginWithReadPermissionsAsync' with arguments '(My Facebook App ID)':-[_NSCFString objectForKeyedSubscript:]: unrecognized selector sent to instance...

I have been able to solve other errors which have popped up, but I am not sure what this error means so I am stumped on how to move forward.

Here is my app.json file:

{
  "expo": {
    "name": "XXXXXXX",
    "slug": "XXXXXXX",
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./app/assets/icon.png",
    "extra": {
      "firebase": {
        "apiKey": "XXXXXXX",
        "authDomain": "XXXXXXX",
        "databaseURL": "XXXXXXX",
        "projectId": "XXXXXXX",
        "storageBucket": "XXXXXXX",
        "messagingSenderId": "XXXXXXX"
      },
      "facebook": {
        "appId": "XXXXXXX"
      }
    },
    "splash": {
      "image": "./app/assets/splash.png",
      "resizeMode": "contain",
      "backgroundColor": "#ffffff"
    },
    "updates": {
      "fallbackToCacheTimeout": 0
    },
    "assetBundlePatterns": [
      "**/*"
    ],
    "ios": {
      "supportsTablet": true,
      "bundleIdentifier": "host.exp.exponent"
    },
    "android": {
      "adaptiveIcon": {
        "foregroundImage": "./app/assets/adaptive-icon.png",
        "backgroundColor": "#FFFFFF"
      }
    },
    "web": {
      "favicon": "./app/assets/favicon.png"
    }
  }
}

Here is my auth.js file:

import firebase from './firebase.js';
import * as Facebook from 'expo-facebook';

const appId = Expo.Constants.manifest.extra.facebook.appId;

Facebook.initializeAsync({appId: appId, appName: "XXXXXXX"});

export async function FacebookLogin() {

  Facebook.initializeAsync({appId: appId, appName: "XXXXXXX"});

  const appId = Expo.Constants.manifest.extra.facebook.appId;
  const permissions = ['public_profile', 'email'];
  
  const { type, token } = await
  Facebook.logInWithReadPermissionsAsync(
         appId,{
                permission: permissions
      } 
  );

  if (type == "success") {
    const credential =   
      firebase
        .auth
        .FacebookAuthProvider
        .credential(token);
  }
  firebase
   .auth().signInWithCredential(credential).catch(error => {
       console.log(error);
   });
}

And here is my welcomeScreen.js file with my Facebook button:

import React from "react";
import { Image, ImageBackground } from "react-native";

import Disclaimer from "../components/Welcome/Disclaimer";
import LoginButton from "../components/Welcome/LoginButton";
import BusinessLink from "../components/Welcome/BusinessLink";
import {FacebookLogin} from "../../utils/auth.js";

import defaultStyles from "../config/styles";


function WelcomeScreen() {
      return (
        <ImageBackground
          style={defaultStyles.welcomebackground}
          source={require("../assets/appbg.png")}
        >
          <Image style={defaultStyles.welcomelogo} source={require("../assets/logo.png")} />
          <Disclaimer />
          <LoginButton text="Login with Instagram" source={require("../assets/instagram.png")} press={} />
          <LoginButton text="Login with Google" source={require("../assets/google.png")}  press={} />
          <LoginButton text="Login with Facebook" source={require("../assets/facebook.png")}  press={ () => FacebookLogin() } />

          <BusinessLink />
        </ImageBackground>
    );
}
export default WelcomeScreen;

Please let me know if you can see any glaring issues or if you need any more information from me. I have also tried getting a google login button working without any luck as well.

标签： firebasereact-nativefirebase-authenticationexpofacebook-authentication

firebase - Why won't my function open up the Facebook Login page for React Native (Expo)?

问题描述

解决方案

推荐阅读