[auth] Prevent users from navigating backwards during auth flow (#24)

* Replace router.push with router.replace for auth actions

* Fix all eslint warnings and errors :)

* Clear router stack when on home and logging in/signing up

---------

Co-authored-by: Aditya Pawar <[email protected]>

src/app/auth/index.tsx

@@ -8,8 +8,11 @@ function LoginScreen() {
   return (
     <SafeAreaView style={globalStyles.container}>
       <Text style={globalStyles.h1}>Auth</Text>
-      <Button title="Login" onPress={() => router.push('/auth/onboarding')} />
-      <Button title="Sign Up" onPress={() => router.push('/auth/signup')} />
+      <Button
+        title="Login"
+        onPress={() => router.replace('/auth/onboarding')}
+      />
+      <Button title="Sign Up" onPress={() => router.replace('/auth/signup')} />
       <Button title="[temp] Home" onPress={() => router.push('/home')} />
     </SafeAreaView>
   );

src/app/auth/login.tsx

@@ -1,31 +1,36 @@
+import { Link, router } from 'expo-router';
 import React, { useState } from 'react';
-import { Redirect, Link } from 'expo-router';
 import { Alert, View } from 'react-native';
 import { Button, Input } from 'react-native-elements';
-import { useSession } from '../../utils/AuthContext';
+
 import globalStyles from '../../styles/globalStyles';
+import { useSession } from '../../utils/AuthContext';
 
 function LoginScreen() {
   const sessionHandler = useSession();
   const [email, setEmail] = useState('');
   const [password, setPassword] = useState('');
   const [loading, setLoading] = useState(false);
 
-  if (sessionHandler.session) {
-    return <Redirect href="/home" />;
-  }
+  const resetAndPushToRouter = (path: string) => {
+    while (router.canGoBack()) {
+      router.back();
+    }
+    router.replace(path);
+  };
 
   const signInWithEmail = async () => {
     setLoading(true);
-    const { error, data } = await sessionHandler.signInWithEmail(
-      email,
-      password,
-    );
+    const { error } = await sessionHandler.signInWithEmail(email, password);
 
     if (error) Alert.alert(error.message);
     setLoading(false);
   };
 
+  if (sessionHandler.session) {
+    resetAndPushToRouter('/home');
+  }
+
   return (
     <View style={globalStyles.auth_container}>
       <View style={[globalStyles.verticallySpaced, globalStyles.mt20]}>

src/app/auth/onboarding.tsx

@@ -1,15 +1,16 @@
+import DateTimePicker from '@react-native-community/datetimepicker';
+import { Redirect, router } from 'expo-router';
 import { useState, useEffect } from 'react';
 import { View, Alert, ScrollView, Platform } from 'react-native';
 import { Button, Input } from 'react-native-elements';
-import DateTimePicker from '@react-native-community/datetimepicker';
-import { Redirect, router } from 'expo-router';
-import supabase from '../../utils/supabase';
+
 import UserStringInput from '../../components/UserStringInput';
-import { useSession } from '../../utils/AuthContext';
 import globalStyles from '../../styles/globalStyles';
+import { useSession } from '../../utils/AuthContext';
+import supabase from '../../utils/supabase';
 
 function OnboardingScreen() {
-  const { session, signOut } = useSession();
+  const { session } = useSession();
   const [loading, setLoading] = useState(true);
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
@@ -29,7 +30,7 @@ function OnboardingScreen() {
         .eq('user_id', session?.user.id)
         .single();
 
-      if (error && status !== 406) {
+      if (error && status !== 406 && error instanceof Error) {
         throw error;
       }
 
@@ -81,12 +82,12 @@ function OnboardingScreen() {
           .eq('user_id', session?.user.id)
           .select('*');
 
-        if (error) throw error;
+        if (error && error instanceof Error) throw error;
       } else {
         // Create user if they don't exist
         const { error } = await supabase.from('profiles').insert(updates);
 
-        if (error) throw error;
+        if (error && error instanceof Error) throw error;
       }
 
       Alert.alert('Succesfully updated user!');
@@ -153,7 +154,7 @@ function OnboardingScreen() {
         />
       </View>
       <View style={globalStyles.verticallySpaced}>
-        <Button title="Skip" onPress={() => router.push('/home')} />
+        <Button title="Skip" onPress={() => router.replace('/home')} />
       </View>
     </ScrollView>
   );

src/app/auth/signup.tsx

@@ -1,9 +1,10 @@
-import React, { useEffect, useState } from 'react';
 import { Redirect, Link, router } from 'expo-router';
-import { Alert, View, Text } from 'react-native';
+import React, { useState } from 'react';
+import { Alert, View } from 'react-native';
 import { Button, Input } from 'react-native-elements';
-import { useSession } from '../../utils/AuthContext';
+
 import globalStyles from '../../styles/globalStyles';
+import { useSession } from '../../utils/AuthContext';
 
 function SignUpScreen() {
   const { session, signUp, signInWithEmail } = useSession();

src/app/index.tsx

@@ -1,4 +1,5 @@
 import { Redirect } from 'expo-router';
+
 import { useSession } from '../utils/AuthContext';
 
 function StartPage() {

src/app/settings.tsx

@@ -1,14 +1,26 @@
-import { Redirect, router } from 'expo-router';
+import { router } from 'expo-router';
+import { useEffect } from 'react';
 import { Text, View } from 'react-native';
 import { Button } from 'react-native-elements';
 import { SafeAreaView } from 'react-native-safe-area-context';
-import { useSession } from '../utils/AuthContext';
+
 import globalStyles from '../styles/globalStyles';
+import { useSession } from '../utils/AuthContext';
 
 function SettingsScreen() {
   const { session, signOut } = useSession();
 
-  if (!session) return <Redirect href="/auth/login" />;
+  const resetAndPushToRouter = (path: string) => {
+    while (router.canGoBack()) {
+      router.back();
+    }
+    router.replace(path);
+  };
+
+  useEffect(() => {
+    if (!session) resetAndPushToRouter('/auth/login');
+  }, [session]);
+
   return (
     <SafeAreaView style={globalStyles.container}>
       <Text style={globalStyles.h1}>Settings</Text>

src/utils/AuthContext.tsx

@@ -44,7 +44,7 @@ export function AuthContextProvider({
       setSession(newSession);
     });
 
-    supabase.auth.onAuthStateChange((event, newSession) => {
+    supabase.auth.onAuthStateChange((_event, newSession) => {
       setSession(newSession);
     });
   }, []);