Skip to content

Releases: nandorojo/nextjs-conf-22-example

3.5: React Native Firebase

07 Oct 21:27
Compare
Choose a tag to compare

Fixed React Native Firebase version and added the config plugin.

3.4: Protected Route

07 Oct 21:08
Compare
Choose a tag to compare

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

07 Oct 20:58
Compare
Choose a tag to compare
v3.3

3️⃣ 3.3 Account Tab on Native

3.2: Account page + AuthGate

07 Oct 20:57
Compare
Choose a tag to compare
  • Add MyAccountScreen to the website
  • Add AuthGate component to block certain pages

3.1: Auth credentials + context

07 Oct 20:36
Compare
Choose a tag to compare
v3.1

3️⃣ 3.1 Auth credentials + context

Chapter 3: Install Firebase Auth

07 Oct 20:03
Compare
Choose a tag to compare
  • 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

07 Oct 19:20
Compare
Choose a tag to compare

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

07 Oct 19:19
Compare
Choose a tag to compare
  • Here we move the home tab into its own stack and style its header

Chapter 2: Nested Navigators

07 Oct 17:37
Compare
Choose a tag to compare
v2

2️⃣ Chapter 2: Nested navigators

1.2: Providers on Native

07 Oct 16:54
Compare
Choose a tag to compare

Add our <Provider> to wrap our native app.