Skip to content

3.4: Protected Route

Compare
Choose a tag to compare
@nandorojo nandorojo released this 07 Oct 21:08
· 7 commits to setup since this release

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.