There was a TypeError encountered because 'undefined' is not able to be evaluated as an object when trying to execute '_ExponentFacebook.default.initializeAsync'

Question

There was a TypeError encountered because 'undefined' is not able to be evaluated as an object when trying to execute '_ExponentFacebook.default.initializeAsync'

I am encountering a TypeError while attempting to implement Facebook Auth in my firebase react native project, specifically at the InitalizeAsync method.

import * as Facebook from 'expo-facebook';

export const loginWithFacebook = async () => {
  await Facebook.initializeAsync('ID_OF_APP');
  const {type, token}: any = await Facebook.logInWithReadPermissionsAsync({
    permissions: ['public_profile', 'email'],
  });

I have been troubleshooting this issue for the past day with no success so far.

Note that ID_OF_APP is mentioned here only for illustration purposes and is not my actual code.

typescript react-native expo facebook-authentication

Answer 1

Answer №1

Give this approach a try

import { AccessToken, LoginManager } from "react-native-fbsdk"

        state = {
                email: '',
                sso_token: '',
                sso_uid: '',
                loading: false,
            }    

authenticateUser(token) {
    axios({
        method: 'GET',
        url: `https://graph.facebook.com/v2.5/me?fields=email,name,friends&access_token=${token}`,
        responseType: 'json'
    }).then((response) => {

        const { data } = response

        const { first_name, last_name } = this.split_name(data.name)

        this.setState(
            { sso_token: token, sso_uid: data.id, email: data.email, first_name, last_name },
        )
    }).catch((err) => { console.warn(err) })
}

 onFacebookSignIn() {
    this.setState({ loading: true })

    LoginManager.logInWithPermissions(["email", "public_profile"])
        .then(result => {
            if (result.isCancelled) {
                this.setState({ loading: false })
            }
            else {
                AccessToken.getCurrentAccessToken()
                    .then((data) => {
                        const { accessToken } = data
                        this.authenticateUser(accessToken)
                    })
                    .catch((error) => {
                        console.warn(error)
                    })
            }
        })
        .catch(error => {
            console.warn(error)
            this.setState({ loading: false })
        }

Answer 2

Give this approach a try

import { AccessToken, LoginManager } from "react-native-fbsdk"

        state = {
                email: '',
                sso_token: '',
                sso_uid: '',
                loading: false,
            }    

authenticateUser(token) {
    axios({
        method: 'GET',
        url: `https://graph.facebook.com/v2.5/me?fields=email,name,friends&access_token=${token}`,
        responseType: 'json'
    }).then((response) => {

        const { data } = response

        const { first_name, last_name } = this.split_name(data.name)

        this.setState(
            { sso_token: token, sso_uid: data.id, email: data.email, first_name, last_name },
        )
    }).catch((err) => { console.warn(err) })
}

 onFacebookSignIn() {
    this.setState({ loading: true })

    LoginManager.logInWithPermissions(["email", "public_profile"])
        .then(result => {
            if (result.isCancelled) {
                this.setState({ loading: false })
            }
            else {
                AccessToken.getCurrentAccessToken()
                    .then((data) => {
                        const { accessToken } = data
                        this.authenticateUser(accessToken)
                    })
                    .catch((error) => {
                        console.warn(error)
                    })
            }
        })
        .catch(error => {
            console.warn(error)
            this.setState({ loading: false })
        }

There was a TypeError encountered because 'undefined' is not able to be evaluated as an object when trying to execute '_ExponentFacebook.default.initializeAsync'

Answer №1

Similar questions

What is the process for uploading an image using react native?

You cannot employ typed arguments in combination with Typescript within the VueJS framework

Having trouble with Jest imports not functioning as expected when using ts-jest

You are unable to modify a read-only property of an Object in TypeScript

Trustpilot: The function window.Trustpilot.loadFromElement does not exist in Safari

Create an error handling mechanism that intercepts errors using the displayed information

Clicking on components that are stacked on top of each

Refreshing Angular 4 Checkboxes: A Step-by-Step Guide

TSLint is unable to locate a custom module containing a custom d.ts file

Filtering a list of invoices to find those including a "TV" item within its nested item list can be achieved efficiently using TypeScript

What is the TypeScript definition for the return type of a Reselect function in Redux?

Switch the ngClass on the appropriate ancestor element for the dropdown menu

Troubleshooting TypeScript import problems within apollo-server-express, apollo-server, and apollo-cache-control

Scroll to reach the bottom of the page triggers an activation function

In app.component.ts, the Transloco translateService.translate function is failing to function properly

Hermes js engine encounters a TypeError when attempting to access the property '__expo_module_name__' of an undefined value

Displaying search results in various Angular components

Can we define the input and return types for functions using httpsCallables?

Fill out FormBuilder using data from a service within Angular2

Expo app experiencing issues with the @react-three/fiber node module