fitaiProto/SESSION_EXISTS_FIX.md

Session Exists Error - Fix Documentation

Problem

When a user was already signed in and attempted to access the sign-in screen, Clerk would throw a session_exists error:

{
  "clerkError": true,
  "code": "api_response_error",
  "status": 400,
  "errors": [
    {
      "code": "session_exists",
      "message": "Session already exists",
      "longMessage": "You're already signed in.",
      "meta": {}
    }
  ]
}

This occurred because:

1. The sign-in/sign-up screens didn't check if a user was already authenticated before rendering
2. The error handling didn't gracefully handle the session_exists error code
3. Users could navigate to auth screens even when already signed in

Solution

Implemented a two-part fix in both sign-in.tsx and sign-up.tsx:

1. Proactive Redirect on Mount

Added useAuth hook to check authentication status and redirect before any sign-in/sign-up attempts:

const { isSignedIn } = useAuth();

React.useEffect(() => {
  if (isSignedIn) {
    router.replace('/(tabs)');
  }
}, [isSignedIn]);

2. Error Handling for Session Exists

Added specific error handling for the session_exists error code:

catch (err: any) {
  console.error('Sign-in error:', JSON.stringify(err, null, 2));

  // Handle specific error codes
  if (err.errors?.[0]?.code === 'session_exists') {
    // User is already signed in, just redirect
    router.replace('/(tabs)');
    return;
  }

  setError(
    err.errors?.[0]?.message ||
      'Failed to sign in. Please check your credentials.'
  );
}

3. Loading State UI

Added a loading state UI while redirecting to prevent showing the form briefly:

if (isSignedIn) {
  return (
    <View style={[styles.container, styles.centerContent]}>
      <ActivityIndicator size="large" color="#2563eb" />
      <Text style={styles.loadingText}>Redirecting...</Text>
    </View>
  );
}

Files Modified

• apps/mobile/src/app/(auth)/sign-in.tsx - Added authentication check and session_exists handling
• apps/mobile/src/app/(auth)/sign-up.tsx - Added authentication check and session_exists handling

Testing

To test the fix:

1. Sign in normally - should work as before
2. Navigate to sign-in when already signed in - should immediately redirect to /(tabs)
3. Try to sign in when already signed in - should handle gracefully and redirect
4. Sign out and sign back in - should work normally

Root Cause

The root cause was that Clerk's authentication state wasn't being checked before allowing users to access or interact with authentication screens. This is a common pattern in auth flows where you want to prevent already-authenticated users from seeing auth screens.

Best Practices Applied

1. ✅ Check auth state on mount - Prevents unnecessary API calls
2. ✅ Handle specific error codes - Graceful degradation for edge cases
3. ✅ Show loading states - Better UX during redirects
4. ✅ Fail safely - Redirect to app instead of showing errors

Related Documentation

• Clerk Expo SDK: https://clerk.com/docs/references/expo/overview
• Clerk Error Handling: https://clerk.com/docs/custom-flows/error-handling
• React Navigation Auth Flow: https://reactnavigation.org/docs/auth-flow

Notes

• This fix prevents the error from occurring in the first place by checking authentication status
• The error handling serves as a safety net for edge cases (e.g., race conditions, slow network)
• The same pattern should be applied to any other authentication-related screens in the future