[codorial] WIP Facebook login

codorials/authentication-with-firebase/config.json

@@ -30,6 +30,10 @@
     {
       "title": "Creating a sign-in form",
       "file": "creating-a-signin-form"
+    },
+    {
+      "title": "Facebook Login",
+      "file": "facebook-login"
     }
   ]
 }

codorials/authentication-with-firebase/facebook-login.md

@@ -0,0 +1,117 @@
+# Facebook Login
+
+Rather than users signing in to your app with an email and password, Firebase provides the opportunity to integrate with a number of login providers
+(or even your own!). It does this by creating a `credential` from an [OAuth](https://oauth.net/) request which your login provider returns, such as an
+`accessToken`.
+
+The Firebase API allows us to call `signInAndRetrieveDataWithCredential` with a generated credential. You guessed it, just as we accomplished in
+'Creating a sign in form', the method triggers `onAuthStateChanged` if the request was a success - super simple!
+
+## Installing `react-native-fbsdk`
+
+Luckily as Facebook own React Native, they provide a handy wrapper around the own SDK to integrate with React Native, called [`react-native-fbsdk`](https://github.com/facebook/react-native-fbsdk).
+
+```bash
+npm install --save react-native-fbsdk
+```
+
+To save explaining how to install this library, refer to their [documentation[(https://developers.facebook.com/docs/react-native) on how to
+install the library into your React Native project on both Android & iOS.
+
+## Creating a credential
+
+A credential can be generated by first obtaining an `accessToken` from Facebook. This is returned once a user successfully signs in via their
+Facebook app or popup (which the `react-native-fbsdk` handles).
+
+In our `Login.js` component, go ahead and create a new method called `_facebookLogin`:
+
+```js
+// src/screens/unauthenticated/Login.js
+
+import { AccessToken, LoginManager } from 'react-native-fbsdk'; // import AccessToken and LoginManager
+
+  ...
+
+  _facebookLogin = async () => {
+    try {
+      const result = await LoginManager.logInWithReadPermissions(['public_profile', 'email']);
+
+      if (result.isCancelled) {
+        throw new Error('User cancelled request'); // Handle this however fits the flow of your app
+      }
+
+      console.log(`Login success with permissions: ${result.grantedPermissions.toString()}`);
+
+      // get the access token
+      const data = await AccessToken.getCurrentAccessToken();
+
+      if (!data) {
+        throw new Error('Something went wrong obtaining the users access token'); // Handle this however fits the flow of your app
+      }
+
+      // create a new firebase credential with the token
+      const credential = firebase.auth.FacebookAuthProvider.credential(data.accessToken);
+
+      // login with credential
+      await firebase.auth().signInWithCredential(credential);
+
+    } catch (e) {
+      console.error(e);
+    }
+  };
+
+```
+
+There's quite a few steps involved here, which require asynchronous calls to both Facebook and Firebase so it's important to give feedback to your
+user whilst this process is running. There's also a number of errors which can occur, caused by the user (such as rejecting the request) or
+Firebase not having the Facebook provider enabled, so ensure the error is shown back to the user.
+
+> You may notice here we make use of [`async/await`](https://ponyfoo.com/articles/understanding-javascript-async-await). This allows us to keep our code
+feeling synchronous and handle any false positive errors we want to catch without worry about promise chaining.
+
+### Triggering the method
+
+Quite simply, just like the `_signIn` method we call the `_facebookLogin` method with a custom `Button`:
+
+```jsx
+// src/screens/unauthenticated/Login.js
+
+  ...
+
+  render() {
+      return (
+          <View>
+              <TextInput
+                  placeholder={'Email Address'}
+                  onChangeText={this._updateEmail}
+                  value={this.state.email}
+              />
+
+              <TextInput
+                  placeholder={'Password'}
+                  onChangeText={this._updatePassword}
+                  value={this.state.password}
+              />
+
+              <Button
+                title={'Sign In'}
+                onPress={this._signIn}
+              />
+
+              <Button
+                title={'Sign In with Facebook'}
+                onPress={this._facebookLogin}
+              />
+          </View>
+      );
+  }
+
+```
+
+## Updating your Facebook app ID & secret
+
+Back in step 'Understanding Firebase Authentication', we enabled Firebase as a login provider on Facebook, however may have entered dummy values.
+
+The `react-native-fbsdk` requires you to assign an app ID to your install as mentioned in their [quickstart guide](https://developers.facebook.com/quickstarts/?platform=android).
+Ensure that the app you choose also has the credentials on the Firebase console, otherwise you'll get an error back from Firebase when attempting to
+sign in with the generated credential.

codorials/authentication-with-firebase/handling-authentication-state.md

@@ -122,7 +122,7 @@ Now every time `onAuthStateChanged` is triggered by Firebase, our Redux action w
 
 ### Reducing state
 
-Back on step `Integrating Redux' we setup a very basic Redux store. In order for us to latch onto the dispatched action we need to listen out
+Back on step 'Integrating Redux' we setup a very basic Redux store. In order for us to latch onto the dispatched action we need to listen out
 for the events being sent to the reducer. To do this we import the action type which we exported within `actions.js` and conditionally
 return new state when that action is dispatched: