3️⃣ 3.4 Protected Route

Author: nandorojo

apps/expo/app/(tabs).tsx

@@ -3,9 +3,12 @@ import { StatusBar } from 'expo-status-bar'
 import { Tabs } from 'expo-router'
 import { useDripsyTheme } from 'dripsy'
 import { Ionicons } from '@expo/vector-icons'
+import { useAuth } from 'app/features/auth/context'
 
 function MyTabs() {
   const { colors } = useDripsyTheme().theme
+  const auth = useAuth()
+
   return (
     <Tabs
       screenOptions={{
@@ -45,6 +48,7 @@ function MyTabs() {
               />
             )
           },
+          tabBarButton: auth ? undefined : () => null,
         }}
       />
       <Tabs.Screen

packages/app/features/auth/firebase/init.web.ts

@@ -13,7 +13,6 @@ let auth: ReturnType<typeof initializeAuth>
 
 if (typeof window !== 'undefined') {
   const firebaseApp = initializeApp({
-    // TODO REPLACE THIS WITH YOUR AUTH CONFIG
     apiKey: 'AIzaSyAQZ1A-bJMQqjdzNQhRPkbA7swEFnwUS_w',
     authDomain: 'solito-example.firebaseapp.com',
     projectId: 'solito-example',

packages/app/features/user/list-screen.tsx

@@ -1,6 +1,7 @@
 import { View, Image, ScrollView, Text } from 'dripsy'
 import { Link } from 'solito/link'
 import { Fragment } from 'react'
+import { AuthGate } from '../auth/gate'
 
 const users = [
   {
@@ -27,42 +28,46 @@ const users = [
 
 export default function UsersListScreen() {
   return (
-    <ScrollView sx={{ flex: 1, bg: '$background' }}>
-      <View sx={{ p: '$3', width: '100%', maxWidth: 800, alignSelf: 'center' }}>
-        {users.map((user) => {
-          return (
-            <Fragment key={user.id}>
-              <Link href={`/users/${user.id}`}>
-                <View
-                  sx={{
-                    mb: '$3',
-                    flexDirection: 'row',
-                  }}
-                >
-                  <Image
-                    source={{ uri: user.avatar, cache: 'force-cache' }}
+    <AuthGate>
+      <ScrollView sx={{ flex: 1, bg: '$background' }}>
+        <View
+          sx={{ p: '$3', width: '100%', maxWidth: 800, alignSelf: 'center' }}
+        >
+          {users.map((user) => {
+            return (
+              <Fragment key={user.id}>
+                <Link href={`/users/${user.id}`}>
+                  <View
                     sx={{
-                      size: 50,
-                      borderRadius: '$rounded',
-                      mr: '$3',
+                      mb: '$3',
+                      flexDirection: 'row',
                     }}
-                    {...{
-                      alt: `${user.id}'s avatar`,
-                      accessibilityLabel: `${user.id}'s avatar`,
-                    }}
-                  />
+                  >
+                    <Image
+                      source={{ uri: user.avatar, cache: 'force-cache' }}
+                      sx={{
+                        size: 50,
+                        borderRadius: '$rounded',
+                        mr: '$3',
+                      }}
+                      {...{
+                        alt: `${user.id}'s avatar`,
+                        accessibilityLabel: `${user.id}'s avatar`,
+                      }}
+                    />
 
-                  <View sx={{ flex: 1, justifyContent: 'center' }}>
-                    <Text sx={{ fontWeight: '600', fontSize: 14 }}>
-                      {user.id}
-                    </Text>
+                    <View sx={{ flex: 1, justifyContent: 'center' }}>
+                      <Text sx={{ fontWeight: '600', fontSize: 14 }}>
+                        {user.id}
+                      </Text>
+                    </View>
                   </View>
-                </View>
-              </Link>
-            </Fragment>
-          )
-        })}
-      </View>
-    </ScrollView>
+                </Link>
+              </Fragment>
+            )
+          })}
+        </View>
+      </ScrollView>
+    </AuthGate>
   )
 }

packages/app/layout/web/index.tsx

@@ -1,3 +1,4 @@
+import { useAuth } from 'app/features/auth/context'
 import { View, Text, A } from 'dripsy'
 import { useRouter } from 'next/router'
 import { Fragment } from 'react'
@@ -7,6 +8,7 @@ const tabs: Array<{
   pathname: string
   isActive(pathname: string): boolean
   name: string
+  protected?: boolean
 }> = [
   {
     pathname: '/',
@@ -17,6 +19,7 @@ const tabs: Array<{
     pathname: '/users',
     isActive: (pathname) => pathname.startsWith('/users'),
     name: 'Users',
+    protected: true,
   },
   {
     pathname: '/account',
@@ -30,6 +33,7 @@ const height = 34
 // this will only run on Web
 export function WebLayout({ children }: { children: React.ReactNode }) {
   const { pathname } = useRouter()
+  const auth = useAuth()
   return (
     <>
       <View
@@ -54,6 +58,9 @@ export function WebLayout({ children }: { children: React.ReactNode }) {
         >
           {tabs.map((tab) => {
             const active = tab.isActive(pathname)
+            if (tab.protected && !auth) {
+              return null
+            }
             return (
               <Fragment key={tab.pathname}>
                 <Link href={tab.pathname}>