title: Implementing Firebase Auth With React Native + react-native-oauth
body: <p>I want to authenticate users w/ Twitter in my React Native app. I'm using the react-native-oauth library <a href="https://github.com/fullstackreact/react-native-oauth" rel="nofollow noreferrer">https://github.com/fullstackreact/react-native-oauth</a></p>
  
  <p>I just want to make sure I'm going about this in the most effective way.</p>
  
  <p>First things first I add firebase to my app in a <code>config/constants</code> file</p>
  
  <pre class="lang-js prettyprint-override"><code>import firebase from 'firebase'
  
  firebase.initializeApp({
      apiKey: "MY-API-KEY",
      authDomain: "MY-AUTH-DOMAIN",
      databaseURL: "MY-DATABASE-URL",
      storageBucket: "MY-STORAGE-BUCKET",
      messagingSenderId: "MY-MESSAGING-ID"
  });
  
  const ref = firebase.database().ref()
  const firebaseAuth = firebase.auth()
  
  export { ref, firebaseAuth }
  </code></pre>
  
  <p>Then I install the react-native-oauth library</p>
  
  <p>Now, in my <code>redux/authentication</code>I would probably do something like this where I eventually dispatch an action that saves the response object in my redux authentication state to use later.</p>
  
  <pre class="lang-js prettyprint-override"><code>import OAuthManager from 'react-native-oauth';
  
  const manager = new OAuthManager('Nimbus') // I'm sort of confused on what the name of the app should be. Is it just the name of the app when I ran react-native init? Or something else?
  
  export default function handleAuthWithFirebase () {
  
      // Some redux thunk
  
      return function (dispatch, getState) {
          dispatch(authenticating());
          manager.configure({
              twitter: {
                  consumer_key: 'SOME_CONSUMER_KEY',
                  consumer_secret: 'SOME_CONSUMER_SECRET'
              },
          });
  
          manager.authorize('twitter', {scopes: 'profile email'})
              .then(resp =&gt; dispatch(getProfile(resp))) // Save response object
              .catch(err =&gt; console.log('There was an error'));
  
          // Do some other stuff like pushing a new route, etc.
      }
  }
  </code></pre>
  
  <p>Then finally, in <code>SplashContainer.js</code> I would add this to the <code>handleSignIn</code> method (ultimately called by the presentational component).</p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { PropTypes, Component } from 'react'
  import { View, Text } from 'react-native'
  
  // Import function
  import { handleAuthWithFirebase } from '~/redux/modules/authentication'
  import { Splash } from '~/components'
  
  export default class SplashContainer extends Component {
      handleSignIn = () =&gt; {
          // Sign in user with Twitter
          handleAuthWithFirebase.bind(this);
      }
      render () {
          return (
              &lt;Splash handleSignIn={this.handleSignIn}/&gt;
          )
      }
  }
  </code></pre>
  
  <p>Sorry, I know it was sort of a lot but just want to make sure I'm implementing this correctly. Any suggestions to improve the flow would be appreciated. Thanks!</p>