From 059331031004b0d4c5798f52969eb661c31c8615 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Qu=E1=BB=91c=20Kh=C3=A1nh?= <bkdev98@gmail.com>
Date: Mon, 2 Sep 2024 18:29:28 +0700
Subject: [PATCH] fix(mobile): fix local auth guard cause router crashes (#253)

Resolves https://github.com/get6pm/6pm/issues/251
---
 apps/mobile/app/(app)/_layout.tsx          | 256 +++++++++++----------
 apps/mobile/components/auth/auth-local.tsx |   2 +-
 2 files changed, 130 insertions(+), 128 deletions(-)

diff --git a/apps/mobile/app/(app)/_layout.tsx b/apps/mobile/app/(app)/_layout.tsx
index 71627cf6..ec2cb574 100644
--- a/apps/mobile/app/(app)/_layout.tsx
+++ b/apps/mobile/app/(app)/_layout.tsx
@@ -12,6 +12,7 @@ import { useLingui } from '@lingui/react'
 import { Link, Redirect, SplashScreen, Stack } from 'expo-router'
 import { PlusIcon } from 'lucide-react-native'
 import { useEffect } from 'react'
+import { View } from 'react-native'
 
 export default function AuthenticatedLayout() {
   const { isLoaded, isSignedIn } = useUser()
@@ -35,134 +36,135 @@ export default function AuthenticatedLayout() {
     return <Redirect href={'/onboarding/step-one'} />
   }
 
-  if (shouldAuthLocal) {
-    return <AuthLocal onAuthenticated={() => setShouldAuthLocal(false)} />
-  }
-
   return (
-    <Stack
-      screenOptions={{
-        headerShown: true,
-        headerBackTitleVisible: false,
-        headerTintColor: theme[colorScheme ?? 'light'].primary,
-        headerShadowVisible: false,
-        headerTitleStyle: {
-          fontFamily: 'Inter Medium',
-          fontSize: 16,
-          color: theme[colorScheme ?? 'light'].primary,
-        },
-        headerStyle: {
-          backgroundColor: theme[colorScheme ?? 'light'].background,
-        },
-        headerLeft: () => <BackButton />,
-      }}
-    >
-      <Stack.Screen
-        name="(tabs)"
-        options={{
-          headerShown: false,
-        }}
-      />
-      <Stack.Screen
-        name="transaction/new-record"
-        options={{
-          presentation: 'modal',
-          headerTitle: '',
-          // headerShown: false,
-        }}
-      />
-      <Stack.Screen
-        name="review-transactions"
-        options={{
-          headerTitle: t(i18n)`Review transactions`,
-        }}
-      />
-      <Stack.Screen
-        name="transaction/[transactionId]"
-        options={{
-          presentation: 'modal',
-          headerShown: false,
-        }}
-      />
-      <Stack.Screen
-        name="language"
-        options={{
-          presentation: 'modal',
-          headerTitle: t(i18n)`Language`,
-        }}
-      />
-      <Stack.Screen
-        name="profile"
-        options={{
-          presentation: 'modal',
-          headerTitle: t(i18n)`Profile`,
-        }}
-      />
-      <Stack.Screen
-        name="appearance"
-        options={{ headerTitle: t(i18n)`Appearance` }}
-      />
-      <Stack.Screen
-        name="wallet/accounts"
-        options={{
-          headerTitle: t(i18n)`Wallet accounts`,
-          headerRight: () => (
-            <Link href="/wallet/new-account" asChild>
-              <Button size="icon" variant="ghost">
-                <PlusIcon className="size-6 text-primary" />
-              </Button>
-            </Link>
-          ),
-        }}
-      />
-      <Stack.Screen
-        name="wallet/new-account"
-        options={{
-          presentation: 'modal',
-          headerTitle: t(i18n)`New account`,
-        }}
-      />
-      <Stack.Screen
-        name="wallet/[walletId]"
-        options={{
-          presentation: 'modal',
-          headerTitle: t(i18n)`Edit account`,
-        }}
-      />
-      <Stack.Screen
-        name="category/index"
-        options={{
-          headerTitle: t(i18n)`Categories`,
-          headerRight: () => (
-            <Link href="/category/new-category" asChild>
-              <Button size="icon" variant="ghost">
-                <PlusIcon className="size-6 text-primary" />
-              </Button>
-            </Link>
-          ),
-        }}
-      />
-      <Stack.Screen
-        name="category/new-category"
-        options={{
-          presentation: 'modal',
-          headerTitle: t(i18n)`New category`,
-        }}
-      />
-      <Stack.Screen
-        name="category/[categoryId]"
-        options={{
-          presentation: 'modal',
-          headerTitle: t(i18n)`Edit category`,
-        }}
-      />
-      <Stack.Screen
-        name="budget/new-budget"
-        options={{
-          presentation: 'modal',
-          headerTitle: t(i18n)`New budget`,
+    <View className="flex-1">
+      {shouldAuthLocal && (
+        <AuthLocal onAuthenticated={() => setShouldAuthLocal(false)} />
+      )}
+      <Stack
+        screenOptions={{
+          headerShown: true,
+          headerBackTitleVisible: false,
+          headerTintColor: theme[colorScheme ?? 'light'].primary,
+          headerShadowVisible: false,
+          headerTitleStyle: {
+            fontFamily: 'Inter Medium',
+            fontSize: 16,
+            color: theme[colorScheme ?? 'light'].primary,
+          },
+          headerStyle: {
+            backgroundColor: theme[colorScheme ?? 'light'].background,
+          },
+          headerLeft: () => <BackButton />,
         }}
-      />
-    </Stack>
+      >
+        <Stack.Screen
+          name="(tabs)"
+          options={{
+            headerShown: false,
+          }}
+        />
+        <Stack.Screen
+          name="transaction/new-record"
+          options={{
+            presentation: 'modal',
+            headerTitle: '',
+            // headerShown: false,
+          }}
+        />
+        <Stack.Screen
+          name="review-transactions"
+          options={{
+            headerTitle: t(i18n)`Review transactions`,
+          }}
+        />
+        <Stack.Screen
+          name="transaction/[transactionId]"
+          options={{
+            presentation: 'modal',
+            headerShown: false,
+          }}
+        />
+        <Stack.Screen
+          name="language"
+          options={{
+            presentation: 'modal',
+            headerTitle: t(i18n)`Language`,
+          }}
+        />
+        <Stack.Screen
+          name="profile"
+          options={{
+            presentation: 'modal',
+            headerTitle: t(i18n)`Profile`,
+          }}
+        />
+        <Stack.Screen
+          name="appearance"
+          options={{ headerTitle: t(i18n)`Appearance` }}
+        />
+        <Stack.Screen
+          name="wallet/accounts"
+          options={{
+            headerTitle: t(i18n)`Wallet accounts`,
+            headerRight: () => (
+              <Link href="/wallet/new-account" asChild>
+                <Button size="icon" variant="ghost">
+                  <PlusIcon className="size-6 text-primary" />
+                </Button>
+              </Link>
+            ),
+          }}
+        />
+        <Stack.Screen
+          name="wallet/new-account"
+          options={{
+            presentation: 'modal',
+            headerTitle: t(i18n)`New account`,
+          }}
+        />
+        <Stack.Screen
+          name="wallet/[walletId]"
+          options={{
+            presentation: 'modal',
+            headerTitle: t(i18n)`Edit account`,
+          }}
+        />
+        <Stack.Screen
+          name="category/index"
+          options={{
+            headerTitle: t(i18n)`Categories`,
+            headerRight: () => (
+              <Link href="/category/new-category" asChild>
+                <Button size="icon" variant="ghost">
+                  <PlusIcon className="size-6 text-primary" />
+                </Button>
+              </Link>
+            ),
+          }}
+        />
+        <Stack.Screen
+          name="category/new-category"
+          options={{
+            presentation: 'modal',
+            headerTitle: t(i18n)`New category`,
+          }}
+        />
+        <Stack.Screen
+          name="category/[categoryId]"
+          options={{
+            presentation: 'modal',
+            headerTitle: t(i18n)`Edit category`,
+          }}
+        />
+        <Stack.Screen
+          name="budget/new-budget"
+          options={{
+            presentation: 'modal',
+            headerTitle: t(i18n)`New budget`,
+          }}
+        />
+      </Stack>
+    </View>
   )
 }
diff --git a/apps/mobile/components/auth/auth-local.tsx b/apps/mobile/components/auth/auth-local.tsx
index d706b7d8..1367a0b0 100644
--- a/apps/mobile/components/auth/auth-local.tsx
+++ b/apps/mobile/components/auth/auth-local.tsx
@@ -29,7 +29,7 @@ export function AuthLocal({ onAuthenticated }: AuthLocalProps) {
   }, [])
 
   return (
-    <SafeAreaView className="flex-1 items-center justify-center gap-4 bg-muted">
+    <SafeAreaView className="absolute top-0 right-0 bottom-0 left-0 z-50 flex-1 items-center justify-center gap-4 bg-muted">
       <LockKeyholeIcon className="size-12 text-primary" />
       <Text className="mx-8">{t(
         i18n,