feat: use protected routes

Author: Manu Genia

src/app/_layout.tsx

@@ -14,8 +14,8 @@ import { KeyboardProvider } from 'react-native-keyboard-controller';
 
 import { APIProvider } from '@/api';
 import interceptors from '@/api/common/interceptors';
-import { AuthProvider } from '@/components/providers/auth';
-import { hydrateAuth, loadSelectedTheme } from '@/lib';
+import { AuthProvider, useAuth } from '@/components/providers/auth';
+import { hydrateAuth, loadSelectedTheme, useIsFirstTime } from '@/lib';
 import { useThemeConfig } from '@/lib/use-theme-config';
 
 export { ErrorBoundary } from 'expo-router';
@@ -35,36 +35,65 @@ SplashScreen.setOptions({
   fade: true,
 });
 
-export default function RootLayout() {
+function GuardedStack() {
+  const { isAuthenticated } = useAuth();
   const { t } = useTranslation();
+  const [isFirstTime] = useIsFirstTime();
+
   return (
-    <Providers>
-      <Stack>
-        <Stack.Screen name="(app)" options={{ headerShown: false }} />
+    <Stack>
+      <Stack.Protected guard={isFirstTime}>
         <Stack.Screen name="onboarding" options={{ headerShown: false }} />
-        <Stack.Screen name="forgot-password" />
+      </Stack.Protected>
+
+      <Stack.Protected guard={isAuthenticated}>
+        <Stack.Screen name="(app)" options={{ headerShown: false }} />
         <Stack.Screen
           name="update-password"
           options={{
             title: t('updatePassword.title'),
           }}
         />
+      </Stack.Protected>
+
+      <Stack.Protected guard={!isAuthenticated}>
         <Stack.Screen name="sign-in" options={{ headerShown: false }} />
         <Stack.Screen name="sign-up" />
-        <Stack.Screen
-          name="www"
-          options={{
-            presentation: 'modal',
-            title: '', // Title will be overridden by the screen itself
-          }}
-        />
-      </Stack>
+        <Stack.Screen name="forgot-password" />
+      </Stack.Protected>
+
+      <Stack.Screen
+        name="www"
+        options={{
+          presentation: 'modal',
+          title: '',
+        }}
+      />
+    </Stack>
+  );
+}
+
+export default function RootLayout() {
+  return (
+    <Providers>
+      <RouterContent />
     </Providers>
   );
 }
 
-function Providers({ children }: { children: React.ReactNode }) {
+function RouterContent() {
+  const { ready } = useAuth();
+
+  if (!ready) {
+    return <Stack />;
+  }
+
+  return <GuardedStack />;
+}
+
+function Providers({ children }: Readonly<{ children: React.ReactNode }>) {
   const theme = useThemeConfig();
+
   return (
     <GestureHandlerRootView
       style={styles.container}

src/app/sign-in.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from 'expo-router';
 import React from 'react';
 import { showMessage } from 'react-native-flash-message';
 
@@ -7,12 +6,7 @@ import { LoginForm, type LoginFormProps } from '@/components/login-form';
 import { FocusAwareStatusBar } from '@/components/ui';
 
 export default function Login() {
-  const router = useRouter();
-
   const { mutate: login, isPending } = useLogin({
-    onSuccess: () => {
-      router.push('/');
-    },
     onError: (error) => showMessage({ message: error.message, type: 'danger' }),
   });
 

src/app/sign-up.tsx

@@ -1,4 +1,3 @@
-import { useRouter } from 'expo-router';
 import React from 'react';
 import { showMessage } from 'react-native-flash-message';
 
@@ -8,12 +7,7 @@ import { SignUpForm } from '@/components/sign-up-form';
 import { FocusAwareStatusBar } from '@/components/ui';
 
 export default function SignIn() {
-  const router = useRouter();
-
   const { mutate: signUp, isPending } = useSignUp({
-    onSuccess: () => {
-      router.push('/');
-    },
     onError: (error) => showMessage({ message: error.message, type: 'danger' }),
   });