Merge pull request #173 from nottherealalanturing/navlinks-routeprotection

Navlinks routeprotection

Author: zakkiyyat

mobile/app.json

@@ -10,9 +10,26 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": false
+      "supportsTablet": false,
+      "bundleIdentifier": "com.discoverly.app"
+    },
+    "android": {
+      "package": "com.discoverly.app",
+      "intentFilters": [
+        {
+          "action": "VIEW",
+          "data": [
+            {
+              "scheme": "discoverly"
+            }
+          ],
+          "category": [
+            "BROWSABLE",
+            "DEFAULT"
+          ]
+        }
+      ]
     },
-    "android": {},
     "web": {
       "bundler": "metro"
     },

mobile/app/(auth)/_layout.tsx

@@ -0,0 +1,21 @@
+import { Redirect, Stack } from "expo-router"
+import { useAuthStore } from "../../src/store/useAuthStore"
+
+export default function AuthLayout() {
+  const token = useAuthStore((state) => state.token)
+
+  if (token) {
+    return <Redirect href="/(tabs)/discover" />
+  }
+
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+      }}
+    >
+      <Stack.Screen name="login" />
+      <Stack.Screen name="register" />
+    </Stack>
+  )
+}

mobile/app/(auth)/login.tsx

@@ -10,6 +10,7 @@ import { type LoginFormValues, loginSchema } from "../../src/validation/auth"
 export default function LoginScreen() {
   const router = useRouter()
   const setToken = useAuthStore((state) => state.setToken)
+
   const {
     control,
     handleSubmit,
@@ -43,6 +44,7 @@ export default function LoginScreen() {
       <Typography variant="body" color={colors.muted}>
         Sign in to continue matching with dishes around you.
       </Typography>
+
       <Controller
         control={control}
         name="email"
@@ -61,6 +63,7 @@ export default function LoginScreen() {
           />
         )}
       />
+
       <Controller
         control={control}
         name="password"
@@ -79,6 +82,7 @@ export default function LoginScreen() {
           />
         )}
       />
+
       <Button label="Sign In" loading={isSubmitting} onPress={handleSubmit(onSubmit)} />
       <Link href="/(auth)/register">Go To Register</Link>
     </View>

mobile/app/(auth)/register.tsx

@@ -1,7 +1,7 @@
 import { zodResolver } from "@hookform/resolvers/zod"
 import { Link, useRouter } from "expo-router"
 import { Controller, useForm } from "react-hook-form"
-import { ScrollView, View } from "react-native"
+import { ScrollView } from "react-native"
 import { Button, Input, Typography } from "../../src/components"
 import { useAuthStore } from "../../src/store/useAuthStore"
 import { colors, spacing } from "../../src/theme/tokens"
@@ -10,6 +10,7 @@ import { type RegisterFormValues, registerSchema } from "../../src/validation/au
 export default function RegisterScreen() {
   const router = useRouter()
   const setToken = useAuthStore((state) => state.setToken)
+
   const {
     control,
     handleSubmit,
@@ -46,6 +47,7 @@ export default function RegisterScreen() {
       <Typography variant="body" color={colors.muted}>
         Create your account to start discovering meals instantly.
       </Typography>
+
       <Controller
         control={control}
         name="fullName"
@@ -61,6 +63,7 @@ export default function RegisterScreen() {
           />
         )}
       />
+
       <Controller
         control={control}
         name="email"
@@ -79,24 +82,33 @@ export default function RegisterScreen() {
           />
         )}
       />
+
       <Controller
         control={control}
         name="password"
         render={({ field: { onChange, onBlur, value } }) => (
-          <Input
-            label="Password"
-            placeholder="Minimum 8 characters"
-            secureTextEntry
-            autoCapitalize="none"
-            autoComplete="password-new"
-            textContentType="newPassword"
-            value={value}
-            onChangeText={onChange}
-            onBlur={onBlur}
-            error={errors.password?.message}
-          />
+          <>
+            <Input
+              label="Password"
+              placeholder="Minimum 8 characters"
+              secureTextEntry
+              autoCapitalize="none"
+              autoComplete="password-new"
+              textContentType="newPassword"
+              value={value}
+              onChangeText={onChange}
+              onBlur={onBlur}
+              error={errors.password?.message}
+            />
+            {!errors.password?.message ? (
+              <Typography variant="caption" color={colors.muted}>
+                Minimum 8 characters
+              </Typography>
+            ) : null}
+          </>
         )}
       />
+
       <Controller
         control={control}
         name="confirmPassword"
@@ -113,6 +125,7 @@ export default function RegisterScreen() {
           />
         )}
       />
+
       <Button label="Sign Up" loading={isSubmitting} onPress={handleSubmit(onSubmit)} />
       <Link href="/(auth)/login">Back To Login</Link>
     </ScrollView>

mobile/app/(tabs)/_layout.tsx

@@ -1,9 +1,15 @@
-import { Tabs } from "expo-router"
+import { Redirect, Tabs } from "expo-router"
 import { useCartStore } from "../../src/store/useCartStore"
+import { useAuthStore } from "../../src/store/useAuthStore"
 
 export default function TabsLayout() {
+  const token = useAuthStore((state) => state.token)
   const itemCount = useCartStore((state) => state.items.length)
 
+  if (!token) {
+    return <Redirect href="/(auth)/login" />
+  }
+
   return (
     <Tabs>
       <Tabs.Screen name="discover" options={{ title: "Discover" }} />

mobile/app/(tabs)/profile.tsx

@@ -1,9 +1,25 @@
-import { Text, View } from "react-native"
+import { useRouter } from "expo-router"
+import { Pressable, Text, View } from "react-native"
+import { useAuthStore } from "../../src/store/useAuthStore"
 
 export default function ProfileScreen() {
+  const router = useRouter()
+  const logout = useAuthStore((state) => state.logout)
+
+  const onLogout = () => {
+    logout()
+    router.replace("/(auth)/login")
+  }
+
   return (
-    <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
+    <View style={{ flex: 1, alignItems: "center", justifyContent: "center", gap: 12 }}>
       <Text>User Profile & Wallet.</Text>
+      <Pressable
+        onPress={onLogout}
+        style={{ backgroundColor: "#E53935", borderRadius: 10, paddingHorizontal: 14, paddingVertical: 10 }}
+      >
+        <Text style={{ color: "#fff", fontWeight: "700" }}>Logout</Text>
+      </Pressable>
     </View>
   )
 }

mobile/app/index.tsx

@@ -1,5 +1,8 @@
 import { Redirect } from "expo-router"
+import { useAuthStore } from "../src/store/useAuthStore"
 
 export default function IndexScreen() {
-  return <Redirect href="/(auth)/login" />
+  const token = useAuthStore((state) => state.token)
+
+  return <Redirect href={token ? "/(tabs)/discover" : "/(auth)/login"} />
 }