react-native-facebook-firebase

Template for using Facebook login with Firebase. State management with Flux + Redux. This example app simply displays your Facebook profile picture, as well as a "bio" that gets stored in the users table of your firebase app. The app listens for changes to your firebase table(s) and updates in real time.

I built this project to be a simple, modular, and easily extended starting point for a common pattern. The other guides and projects I've found only partially demonstrate integrating Firebase, social login, and Flux/Redux, or reflect personal tastes in build environment, additional packages, etc.

This is NOT meant to be a crash course in Firebase or Flux/Redux. I tried to keep everything as simple as possible, but some background is helpful - refs and listeners in Firebase, Scenes/Routers in Flux, and the state/action paradigm of Redux.

Feedback and contributions are most welcome (especially a tester for iPhone)!

Installation

Step 1: Create a firebase app

Step 2: Get an Facebook App Id

Step 3: Enable Facebook Login (Firebase docs)

On the Facebook for Developers site, get the App ID and an App Secret for your app.
In the Firebase console, open the Auth section.
On the Sign in method tab, enable the Facebook sign-in method and specify the App ID and App Secret you got from Facebook.
Then, make sure your OAuth redirect URI (e.g. my-app-12345.firebaseapp.com/__/auth/handler) is listed as one of your OAuth redirect URIs in your Facebook app's settings page on the Facebook for Developers site in the Product Settings > Facebook Login config.

Step 4: Install the project files

Create a new react-native project.
Copy package.json, index.*.js, App.js, and src/ directory to your new project.
Run npm install --save
Run react-native link to compile Facebook SDK native extensions.

Step 5: ANDROID configuration

Make the following changes to your android project files:

Add app id string to strings.xml
Add meta data tag to AndroidManifest.xml
Modify MainActivity.java and MainApplication.java

See ANDROID_TEMPLATE_FILES/ in this project for reference. More information can be found at https://github.com/facebook/react-native-fbsdk.

Step 4 - IOS configuration

Not tested yet. This project uses no Android-specific modules, so it should work by following the official fbdsk iOS instructions.

Usage

Authentication

Auhentication is done from Splash.js, the app landing page. If the user has already been granted a Facebook auth token, checkFirebaseAuth exchanges that token for a credential and sign the user into Firebase, or returns the existing user data if they were already signed in. Otherwise, the user is redirected to Login.js. Facebook tokens are handled entirely by the LoginButton module from fbsdk.

Accessing Firebase

Attach Listeners

Any listeners for changes to your Firebase database should be attached when the user logs in. See firebase.js for the example listener used by this app:


function attachProfileListener(store){
  ...
  const profileRef = firebaseApp.database().ref().child('users').child(currentUser().uid)
  profileRef.on('value', (snapshot) => {
    store.dispatch( updateProfileSuccess( snapshot.val() ) )
  })
}

Whenever the users entry for the current user is updated, we dispatch the updateProfileSuccess action, and then our reducer makes the state changes which are immediately reflected in our React components. For example, our profile.js reducer:


export default function reducer(state = initialState, action) {
  switch (action.type) {
	  case UPDATE_PROFILE_SUCCESS:
	    return {
	      ...state,
	      bio: action.profileData.bio
	    }
      ...

Now the user's newly updated bio will display in Home.js via this.props.bio.

Updating

Updates to firebase are also handled by Redux actions. In this example, Home.js updates the user's bio with the click of a button:


render(){
  ...
    Button 
      onPress={() => {this.props.updateBio(this.state.text) }} 
      title="Update Bio" 
     />      
  ...

The updateBio action (actions/profile.js) calls updateFirebaseProfile, and voila! All our Firebase logic is in one place (firebase.js), and everything is done asynchronously. Our profile listener will dispatch an action once the update is complete and all of our components will be updated.

Wiring up Flux and Redux

Everything is handled in App.js:

Configuring the Redux store
Creating the app's scenes (Splash, Home, and Login)
Mapping Redux state and dispatch actions to props
Connecting a Flux router containing the scenes to Redux, via Provider

J-Priebe/react-native-facebook-firebase