diff --git a/codorials/authentication-with-firebase/app-navigation.md b/codorials/authentication-with-firebase/app-navigation.md
new file mode 100644
index 00000000..b46a611b
--- /dev/null
+++ b/codorials/authentication-with-firebase/app-navigation.md
@@ -0,0 +1,103 @@
+# App Navigation
+
+React Navigation has gone through many cycles of navigation implementations and has been a pain point for developers for a good while.
+A current "go to" navigation library is called [react-navigation](https://reactnavigation.org/). It's pure JavaScript implementation
+which performs well and provides a solid foundation for navigation on both Android and iOS.
+
+Authentication typically requires 3 screens; Login, Register & Forgot Password.
+
+## Installation
+
+Simply install the dependency via NPM, no native installation is needed:
+
+```bash
+npm install --save react-navigation
+```
+
+## Navigation Stacks
+
+Navigation on an app typically works in stacks, where a user can navigate to a new screen (pushing a new screen onto the stack), or backwards (popping
+a screen off the stack).
+
+What's great about this concept is that we can create multiple instances of a stack, for example a stack for unauthenticated users and another for
+authenticated ones.
+
+To create a new stack, we import the `StackNavigator` from `react-navigation`. In it's basic form, the first item of the `StackNavigator` object
+acts as our initial screen on the stack. Lets create a new directory and component for our unauthenticated state:
+
+```js
+// src/screens/unauthenticated/index.js
+
+import { StackNavigator } from 'react-navigation';
+
+import Login from './Login';
+import Register from './Register';
+
+export default StackNavigator({
+ Login: {
+ screen: Login,
+ },
+ Register: {
+ screen: Register,
+ }
+});
+```
+
+In both the `Login` & `Register` files, create a basic React component (change Login to Register where appropriate):
+
+```jsx
+// src/screens/unauthenticated/Login.js
+// src/screens/unauthenticated/Register.js
+
+import React, { Component } from 'react';
+import { View, Text } from 'react-native';
+
+class Login extends Component {
+ render() {
+ return (
+
+
+ Login
+
+
+ );
+ }
+}
+```
+
+## Using the stack
+
+StackNavigator returns a React component which can be rendered in our app. If we go back to our `src/App.js` component, we can now return
+the stack:
+
+```jsx
+// src/App.js
+
+import React, { Component } from 'react';
+
+import UnauthenticatedStack from './screens/unauthenticated';
+
+class App extends Component {
+
+ render() {
+ return ;
+ }
+
+}
+
+export default App;
+```
+
+Our `UnauthenticatedStack` component will now show the `Login` component as it's the first item in the `StackNavigator`. Reload your app and you
+should have your `Login` component rendering!
+
+TODO image
+
+## Styling the navigator
+
+As you can see, `react-navigation` provides a base view which is platform specific.
+
+..
+
+## Pushing a new stack
+
diff --git a/codorials/authentication-with-firebase/config.json b/codorials/authentication-with-firebase/config.json
index 6acbe6ca..1f3692c6 100644
--- a/codorials/authentication-with-firebase/config.json
+++ b/codorials/authentication-with-firebase/config.json
@@ -18,6 +18,10 @@
{
"title": "Integrating Redux",
"file": "integrating-redux"
+ },
+ {
+ "title": "App Navigation",
+ "file": "app-navigation"
}
]
}
diff --git a/codorials/authentication-with-firebase/integrating-redux.md b/codorials/authentication-with-firebase/integrating-redux.md
index 77a37c78..04db370f 100644
--- a/codorials/authentication-with-firebase/integrating-redux.md
+++ b/codorials/authentication-with-firebase/integrating-redux.md
@@ -79,4 +79,4 @@ function bootstrap() {
export default bootstrap;
```
-Our app now has access to the power of Redux!
+Although noting will visually change, our app now has access to the power of Redux!
diff --git a/codorials/authentication-with-firebase/project-structure.md b/codorials/authentication-with-firebase/project-structure.md
index 793cf499..297d4f3f 100644
--- a/codorials/authentication-with-firebase/project-structure.md
+++ b/codorials/authentication-with-firebase/project-structure.md
@@ -70,7 +70,7 @@ consumes our entire application.
Go ahead and boot up your app onto your emulator. You should simply be presented with a plain screen with the words "Bootstrapped!".
-
+
Although a good starting point, we want to separate we'll our business logic out of the bootstrap file, keeping it purely for app
initialization purposes. This can simply be done by creating a basic React component called `App.js`, which will also live in the `src` directory;
diff --git a/codorials/authentication-with-firebase/understanding-firebase-auth.md b/codorials/authentication-with-firebase/understanding-firebase-auth.md
index 26d58e96..64f25e37 100644
--- a/codorials/authentication-with-firebase/understanding-firebase-auth.md
+++ b/codorials/authentication-with-firebase/understanding-firebase-auth.md
@@ -16,14 +16,8 @@ Find the Authentication section and you'll be prompted with a number of options.
You'll see we have a number of options here, however for purposes of this Codorial we'll be using "Email/Password" and "Facebook" as our providers.
Go ahead and enable these:
-
-
-
-
-
-
> If you don't have a Facebook app, simply enter dummy values. We'll cover this later on.
## Listening to the users authentication state