3.5: React Native Firebase

Fixed React Native Firebase version and added the config plugin.

3.4: Protected Route

This release adds a "protected route" meaning you can only see it when you're signed in.

The method for doing this is quite simple. The route isn't actually "protected" at all. Rather, we simply hide links to it from the tab bar and website header.

If someone happens to visit that page, we don't redirect them anywhere. Instead, we "gate" the component they want to reach, and only render it once they have authenticated. This is far, far better than redirects, since it:

1. Ensures someone doesn't lose their state and intended destination
2. Allows for asynchronous authentication methods loading on the frontend
   a. Consider the following:
   i. User opens app://account
   ii. App opens, and starts loading the auth from local storage
   iii. If you unmount the /account screen, then it will never go there at all, since the deep linking can't resolve to it
   iv. By contrast, if you use an auth gate, it will automatically open to the correct page, show a loader, and then present the correct component. Or, it will prompt them to sign in, and once they have, it will render the screen they want.
   v. This method also provides a much simpler DX.

3.3: Account Tab on Native

v3.3

3️⃣ 3.3 Account Tab on Native

3.2: Account page + AuthGate

• Add MyAccountScreen to the website
• Add AuthGate component to block certain pages

3.1: Auth credentials + context

v3.1

3️⃣ 3.1 Auth credentials + context

Chapter 3: Install Firebase Auth

• Here we move our Stack into a single component.
• We also install firebase in packages/app, and @react-native-firebase/auth + @react-native-firebase/app in apps/expo
  • libraries with native code must be installed in apps/expo
  • Finally, we initialize our Firebase code

Up next: create our apps on Firebase's website, and add the credentials for iOS, Android and Web.

2.2: Web Header

Here we add a header to the website. This component will only be used on Web.

Websites should design their own navigation layout (headers, footers, sidebars, etc) from scratch. On the other hand, native apps should generally use the built-in navigation primitives and extend them from there.

2.1: Home tab stack

• Here we move the home tab into its own stack and style its header

Chapter 2: Nested Navigators

v2

2️⃣ Chapter 2: Nested navigators

1.2: Providers on Native

Add our <Provider> to wrap our native app.