Bottom Tab Navigation in Expo Router 3 (SDK 50) with Authentication

Since my last article about how to create a tab router in Expo did so well, I thought I’d create an updated version. This version uses Expo Router v3 and Expo SDK 50.

I will keep this short, since you can see the fully working code on Github here, and there are not that many changes since the last version.

Expo SDK 50

Updates

The main difference is the file structure. In the previous version we only protected our routes by using a hook in our auth provider, but swiping back from the home page took you back to the login page, sometimes creating weird edge cases.

Now we use this file structure. The two folders (auth) and (public) helps us keep the authenticated paths protected.

This means that our AuthProvider now has this logic for protecting our routes:

function useProtectedRoute(user: User | null) {
  const segments = useSegments();

  useEffect(() => {
    const inAuthGroup = segments[0] === "(auth)";

    console.log(inAuthGroup);

    if (!user && inAuthGroup) {
      router.replace("/login");
    } else if (user && !inAuthGroup) {
      router.replace("/(auth)/(tabs)/");
    }
  }, [user, segments]);
}

Here’s is video on the finished results:

Finished results

Conclusion

There you have it! Again, a super easy way to get a tab router in Expo Router v3 (Expo SDK 50). I’ve also thrown in Nativewind (tailwind) for styling.

Don’t forget to check out the repo on Github.

Hope this helps!