updated navigation for login and signup

FastNotes/app/login.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { Link, Stack } from 'expo-router'
-import { Pressable, Text, TextInput, View } from 'react-native'
+import { Keyboard, KeyboardAvoidingView, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native'
 import { supabase } from '@/libs/supabase'
 import { useAppTheme } from '@/src/theme/AppThemeProvider'
 import { loginScreenStyles as styles } from '@/src/styles/app-styles'
@@ -36,55 +36,69 @@ export default function LoginScreen() {
   return (
     <>
       <Stack.Screen options={{ title: 'Login' }} />
-      <View style={[styles.container, { backgroundColor: palette.background }]}>
+      <KeyboardAvoidingView
-        <Text style={[styles.title, { color: palette.text }]}>Login</Text>
+        style={[styles.keyboardAvoider, { backgroundColor: palette.background }]}
-
+        behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-        <Text style={[styles.label, { color: palette.text }]}>E-mail</Text>
+      >
-        <TextInput
+        <ScrollView
-            autoCapitalize="none"
+          style={styles.scrollView}
-            autoComplete="email"
+          contentContainerStyle={styles.scrollContent}
-            keyboardType="email-address"
+          keyboardShouldPersistTaps="handled"
-            onChangeText={setEmail}
+          keyboardDismissMode={Platform.OS === 'ios' ? 'interactive' : 'on-drag'}
-            placeholder="name@email.com"
-            placeholderTextColor={palette.mutedText}
-            style={[styles.input, { color: palette.text, backgroundColor: palette.input, borderColor: palette.border }]}
-            value={email}
-        />
-
-        <Text style={[styles.label, { color: palette.text }]}>Password</Text>
-        <TextInput
-            autoCapitalize="none"
-            autoComplete="password"
-            onChangeText={setPassword}
-            placeholder="Password"
-            placeholderTextColor={palette.mutedText}
-            secureTextEntry
-            style={[styles.input, { color: palette.text, backgroundColor: palette.input, borderColor: palette.border }]}
-            value={password}
-        />
-
-        {errorMessage ? (
-          <Text style={styles.errorText}>{errorMessage}</Text>
-        ) : null}
-
-        <Pressable
-          disabled={isSubmitting}
-          onPress={onLogin}
-            style={({ pressed }) => [
-                styles.loginButton,
-                pressed && !isSubmitting ? styles.loginButtonPressed : null,
-                isSubmitting ? styles.loginButtonDisabled : null,
-          ]}
         >
-          <Text style={styles.loginButtonText}>
+          <Pressable style={styles.dismissArea} onPress={Keyboard.dismiss}>
-            {isSubmitting ? 'Logging in...' : 'Log in'}
+            <View style={styles.form}>
-          </Text>
+              <Text style={[styles.title, { color: palette.text }]}>Login</Text>
-        </Pressable>
 
-        <Link href="/signup" style={styles.link}>
+              <Text style={[styles.label, { color: palette.text }]}>E-mail</Text>
-          <Text style={[styles.linkText, { color: colorScheme === "dark" ? "#8ab4ff" : "#0b57d0" }]}>Create a new account</Text>
+              <TextInput
-        </Link>
+                  autoCapitalize="none"
-      </View>
+                  autoComplete="email"
+                  keyboardType="email-address"
+                  onChangeText={setEmail}
+                  placeholder="name@email.com"
+                  placeholderTextColor={palette.mutedText}
+                  style={[styles.input, { color: palette.text, backgroundColor: palette.input, borderColor: palette.border }]}
+                  value={email}
+              />
+
+              <Text style={[styles.label, { color: palette.text }]}>Password</Text>
+              <TextInput
+                  autoCapitalize="none"
+                  autoComplete="password"
+                  onChangeText={setPassword}
+                  placeholder="Password"
+                  placeholderTextColor={palette.mutedText}
+                  secureTextEntry
+                  style={[styles.input, { color: palette.text, backgroundColor: palette.input, borderColor: palette.border }]}
+                  value={password}
+              />
+
+              {errorMessage ? (
+                <Text style={styles.errorText}>{errorMessage}</Text>
+              ) : null}
+
+              <Pressable
+                disabled={isSubmitting}
+                onPress={onLogin}
+                  style={({ pressed }) => [
+                      styles.loginButton,
+                      pressed && !isSubmitting ? styles.loginButtonPressed : null,
+                      isSubmitting ? styles.loginButtonDisabled : null,
+                ]}
+              >
+                <Text style={styles.loginButtonText}>
+                  {isSubmitting ? 'Logging in...' : 'Log in'}
+                </Text>
+              </Pressable>
+
+              <Link href="/signup" style={styles.link}>
+                <Text style={[styles.linkText, { color: colorScheme === "dark" ? "#8ab4ff" : "#0b57d0" }]}>Create a new account</Text>
+              </Link>
+            </View>
+          </Pressable>
+        </ScrollView>
+      </KeyboardAvoidingView>
     </>
   )
 }

FastNotes/app/newNote.tsx

@@ -88,7 +88,7 @@ export default function NewNoteScreen() {
                 return
             }
 
-            router.replace("/index")
+            router.replace("/")
         }
     }
 

FastNotes/app/signup.tsx

@@ -1,7 +1,7 @@
 import { supabase } from "@/libs/supabase"
-import { Link, Stack } from "expo-router"
+import { Link, Stack, router } from "expo-router"
 import { useState } from "react"
-import { Pressable, Text, TextInput, View } from 'react-native'
+import { Keyboard, KeyboardAvoidingView, Platform, Pressable, ScrollView, Text, TextInput, View } from 'react-native'
 import { useAppTheme } from "@/src/theme/AppThemeProvider"
 import { signupScreenStyles as styles } from "@/src/styles/app-styles"
 
@@ -59,60 +59,80 @@ export default function SignupScreen(){
     return (
     <>
     <Stack.Screen options={{title: "Signup"}}/>
-    <View style={[styles.container, { backgroundColor: palette.background }]}>
+    <KeyboardAvoidingView
-        <Text style={[styles.title, { color: palette.text }]}>Sign up</Text>
+        style={[styles.keyboardAvoider, { backgroundColor: palette.background }]}
-
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
-        <Text style={[styles.label, { color: palette.text }]}>E-mail</Text>
+    >
-        <TextInput
+        <ScrollView
-            autoCapitalize="none"
+            style={styles.scrollView}
-            autoComplete="email"
+            contentContainerStyle={styles.scrollContent}
-            keyboardType="email-address"
+            keyboardShouldPersistTaps="handled"
-            onChangeText={setEmail}
+            keyboardDismissMode={Platform.OS === "ios" ? "interactive" : "on-drag"}
-            placeholder="name@email.com"
-            placeholderTextColor={palette.mutedText}
-            style={[styles.input, { color: palette.text, backgroundColor: palette.input, borderColor: palette.border }]}
-            value={email}
-        />
-
-        <Text style={[styles.label, { color: palette.text }]} >Password</Text>
-        <TextInput 
-            autoCapitalize="none"
-            autoComplete="password"
-            onChangeText={setPassword}
-            placeholder="Password"
-            placeholderTextColor={palette.mutedText}
-            secureTextEntry
-            style={[styles.input, { color: palette.text, backgroundColor: palette.input, borderColor: palette.border }]}
-            value={password}
-        />
-
-        {errorMessage ? (
-          <Text style={styles.errorText}>{errorMessage}</Text>
-        ) : null}
-
-        {successMessage ? (
-          <Text style={styles.successText}>{successMessage}</Text>
-        ) : null}
-
-        <Pressable
-          disabled={isSubmitting}
-          onPress={onSignup}
-          style={({ pressed }) => [
-            styles.actionButton,
-            pressed && !isSubmitting ? styles.actionButtonPressed : null,
-            isSubmitting ? styles.actionButtonDisabled : null,
-          ]}
         >
-          <Text style={styles.actionButtonText}>
+            <Pressable style={styles.dismissArea} onPress={Keyboard.dismiss}>
-            {isSubmitting ? 'Creating account...' : 'Sign up'}
+                <View style={styles.form}>
-          </Text>
+                    <Pressable
-        </Pressable>
+                        onPress={() => router.replace("/login")}
+                        style={styles.backButton}
+                    >
+                        <Text style={[styles.backButtonText, { color: palette.text }]}>Back to login</Text>
+                    </Pressable>
 
-        <Link href="/login" style={styles.link}>
+                    <Text style={[styles.title, { color: palette.text }]}>Sign up</Text>
-          <Text style={[styles.linkText, { color: colorScheme === "dark" ? "#8ab4ff" : "#0b57d0" }]}>Already have an account? Log in</Text>
-        </Link>
 
-    </View>
+                    <Text style={[styles.label, { color: palette.text }]}>E-mail</Text>
+                    <TextInput
+                        autoCapitalize="none"
+                        autoComplete="email"
+                        keyboardType="email-address"
+                        onChangeText={setEmail}
+                        placeholder="name@email.com"
+                        placeholderTextColor={palette.mutedText}
+                        style={[styles.input, { color: palette.text, backgroundColor: palette.input, borderColor: palette.border }]}
+                        value={email}
+                    />
+
+                    <Text style={[styles.label, { color: palette.text }]} >Password</Text>
+                    <TextInput 
+                        autoCapitalize="none"
+                        autoComplete="password"
+                        onChangeText={setPassword}
+                        placeholder="Password"
+                        placeholderTextColor={palette.mutedText}
+                        secureTextEntry
+                        style={[styles.input, { color: palette.text, backgroundColor: palette.input, borderColor: palette.border }]}
+                        value={password}
+                    />
+
+                    {errorMessage ? (
+                      <Text style={styles.errorText}>{errorMessage}</Text>
+                    ) : null}
+
+                    {successMessage ? (
+                      <Text style={styles.successText}>{successMessage}</Text>
+                    ) : null}
+
+                    <Pressable
+                      disabled={isSubmitting}
+                      onPress={onSignup}
+                      style={({ pressed }) => [
+                        styles.actionButton,
+                        pressed && !isSubmitting ? styles.actionButtonPressed : null,
+                        isSubmitting ? styles.actionButtonDisabled : null,
+                      ]}
+                    >
+                      <Text style={styles.actionButtonText}>
+                        {isSubmitting ? 'Creating account...' : 'Sign up'}
+                      </Text>
+                    </Pressable>
+
+                    <Link href="/login" style={styles.link}>
+                      <Text style={[styles.linkText, { color: colorScheme === "dark" ? "#8ab4ff" : "#0b57d0" }]}>Already have an account? Log in</Text>
+                    </Link>
+                </View>
+            </Pressable>
+        </ScrollView>
+    </KeyboardAvoidingView>
     </>
     )
 }

FastNotes/providers/auth-provider.tsx

@@ -10,12 +10,37 @@ const buildClaims = (user?: { id: string; email?: string | null } | null) =>
       }
     : null
 
+const isInvalidRefreshTokenError = (error: { message?: string; status?: number } | null) => {
+  if (!error) {
+    return false
+  }
+
+  const message = error.message?.toLowerCase() ?? ''
+
+  return error.status === 401 && (
+    message.includes('invalid refresh token') ||
+    message.includes('refresh token not found')
+  )
+}
+
 export default function AuthProvider({ children }: PropsWithChildren) {
   const [claims, setClaims] = useState<Record<string, any> | undefined | null>()
   const [profile, setProfile] = useState<any>()
   const [isLoading, setIsLoading] = useState<boolean>(true)
 
   useEffect(() => {
+    const clearInvalidSession = async () => {
+      const { error } = await supabase.auth.signOut({ scope: 'local' })
+
+      if (error) {
+        console.error('Error clearing invalid local session:', error)
+      }
+
+      setClaims(null)
+      setProfile(null)
+      setIsLoading(false)
+    }
+
     const hydrateSession = async () => {
       const {
         data: { session },
@@ -23,6 +48,12 @@ export default function AuthProvider({ children }: PropsWithChildren) {
       } = await supabase.auth.getSession()
 
       if (error) {
+        if (isInvalidRefreshTokenError(error)) {
+          console.warn('Clearing expired auth session:', error.message)
+          await clearInvalidSession()
+          return
+        }
+
         console.error('Error hydrating session:', error)
       }
 

FastNotes/src/styles/app-styles.ts

@@ -72,10 +72,23 @@ export const themedTextStyles = StyleSheet.create({
 })
 
 export const loginScreenStyles = StyleSheet.create({
-    container: {
+    keyboardAvoider: {
+        flex: 1,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+        justifyContent: "center",
+        paddingHorizontal: 24,
+        paddingVertical: 32,
+    },
+    dismissArea: {
         flex: 1,
         justifyContent: "center",
-        padding: 24,
+    },
+    form: {
         gap: 12,
     },
     title: {
@@ -125,12 +138,33 @@ export const loginScreenStyles = StyleSheet.create({
 })
 
 export const signupScreenStyles = StyleSheet.create({
-    container: {
+    keyboardAvoider: {
+        flex: 1,
+    },
+    scrollView: {
+        flex: 1,
+    },
+    scrollContent: {
+        flexGrow: 1,
+        justifyContent: "center",
+        paddingHorizontal: 24,
+        paddingVertical: 32,
+    },
+    dismissArea: {
         flex: 1,
         justifyContent: "center",
-        padding: 24,
+    },
+    form: {
         gap: 12,
     },
+    backButton: {
+        alignSelf: "flex-start",
+        paddingVertical: 8,
+    },
+    backButtonText: {
+        fontSize: 16,
+        fontWeight: "600",
+    },
     title: {
         fontSize: 28,
         fontWeight: "700",