Originally published on melvinkoh.me If you are building a pure Expo app, without ejecting it, and are trying to integrate with Firebase Authentication using Facebook Log-In, you are at the right place. In this tutorial, I will be guiding you step by step to set up Firebase Authentication using Facebook OAuth Provider in a Expo project. Motivation You do not want to eject your Expo app, but you want to embrace the simplicity of Firebase Authentication using Facebook as OAuth provider. Limitations In order to use Firebase Auth without ejecting Expo, the only option, which is also the is to use the Firebase JavaScript/Web SDK. recommended way Using Firebase JavaScript SDK on React Native means we lose the ability to use the pre-built UI and some other features. Let’s Get Started! Step 1: Configure Firebase Project and Facebook App 1. Create a Facebook app, if you haven’t already. 2. Get the App ID and App Secret of your Facebook App > Facebook App ID and Secret 3. Paste them into your Firebase Console. > Paste your Facebook App ID and App Secret into your Firebase Console 4. Copy the OAuth redirect URI of your Firebase project and paste it to your Facebook Dev Console. > Paste your Firebase OAuth redirect URI into your Facebook Dev Console Step 2: Set up Bundle ID for Facebook App Add the following into your Facebook Dev Console: iOS Bundle ID: host.exp.Exponent Android Key Hashes: rRW++LUjmZZ+58EbN5DVhGAnkX4= > Configure iOS Bundle ID and Android Key Hashes Up to now, your Facebook app and Firebase project are ready. We can proceed to consume Firebase Auth. Step 3: Installing and Initializing Firebase in Expo First of all, install : firebase npm install --save firebase To initialize Firebase in Expo, I define my Firebase project attributes and Facebook App ID as an in manifest file: extra app.json { : {
    ... : { : { : , : , : , : , : , : }, : { : },
    }
  }
} "expo" "extra" "firebase" "apiKey" "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" "authDomain" "xxxxxxxxxx.firebaseapp.com" "databaseURL" "xxxxxxxxxxxxxxxxxxxxxxxxxx" "projectId" "xxxxxxxxxx" "storageBucket" "xxxxxxxxxx.appspot.com" "messagingSenderId" "xxxxxxxxxxxx" "facebook" "appId" "xxxxxxxxxxxxxxx" Since Firebase App can only be initialized once, I create a new module in my Expo project with: firebase.js * firebase firebase.initializeApp(Expo.Constants.manifest.extra.firebase); firebase; // In /utils/firebase.js // We should import firebase from this module instead of the default package. import as from 'firebase' // Should not be used elsewhere in the project export default Other parts of our project should no longer import firebase from the default package but to import from . firebase /utils/firebase Step 4: Setting Up Your Code > Flow of log in with Facebook The logic of logging in with Facebook should be: User triggers log in Expo opens up the Facebook App or a pop-up Web View User authorizes your App Redirect and return Facebook credentials to your App Sign in Firebase with Facebook credentials Done! Your user is now logged in with Facebook. The code should be: firebase { appId = Expo.Constants.manifest.extra.facebook.appId; permissions = [ , ]; {
    type,
    token,
  } = Expo.Facebook.logInWithReadPermissionsAsync(
    appId,
    {permissions}
  ); (type) { : { firebase.auth().setPersistence(firebase.auth.Auth.Persistence.LOCAL); credential = firebase.auth.FacebookAuthProvider.credential(token); facebookProfileData = firebase.auth().signInAndRetrieveDataWithCredential(credential); .resolve({ : });
    } : { .reject({ : });
    }
  }
} // Say this is /utils/auth.js import from './firebase' export async ( ) function signInWithFacebook const const 'public_profile' 'email' // Permissions required, consult Facebook docs const await switch case 'success' await // Set persistent auth state const const await // Sign in with Facebook credential // Do something with Facebook profile data // OR you have subscribed to auth state change, authStateChange handler will process the profile data return Promise type 'success' case 'cancel' return Promise type 'cancel' Voila! Here we have our Firebase Auth set up to handle Facebook login in an Expo app. About Token Refresh There are 3 types of token involved in our scenario: ID Token -> User’s Firebase auth token Refresh Token -> User’s Firebase refresh token Facebook Short-Lived Access Token -> This is only used once to identify user’s Firebase UID when user log in. If you are using Firebase Firestore or Realtime Database, you don’t have to bother about refreshing token as they will be taken care of as a prerequisite of maintaining database connection. If, however, you are using only Firebase Auth, you will need to refresh the token every hour. To refresh user’s auth token, simply run: firebase.auth().currentUser.getIdToken( ); true If you find this useful, feel free to share it on Twitter!

Flow

Facebook

Initialized

Winner of Noonies 2020 for the award Hacker Noon Contributor of the Year - REACT NATIVE.

2020 - Hacker Noon Contributor of the Year in REACT NATIVE

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

Firebase Auth using Facebook Log-In on Expo, React Native

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Melvin Koh

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

Firebase Auth using Facebook Log-In on Expo, React Native

Too Long; Didn't Read

Companies Mentioned

Coin Mentioned

Melvin Koh

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES