fix(mobile): avoid duplicate Clerk auth back buttons

apps/mobile/src/features/settings/SettingsAuthRouteScreen.logic.test.ts

@@ -0,0 +1,26 @@
+import { describe, expect, it } from "vite-plus/test";
+
+import { resolveSettingsAuthHeaderOptions } from "./SettingsAuthRouteScreen.logic";
+
+describe("resolveSettingsAuthHeaderOptions", () => {
+  it("keeps the native header while Clerk restores the session", () => {
+    expect(resolveSettingsAuthHeaderOptions({ isLoaded: false, isSignedIn: undefined })).toEqual({
+      headerShown: true,
+      title: "Sign in",
+    });
+  });
+
+  it("lets Clerk own navigation during authentication", () => {
+    expect(resolveSettingsAuthHeaderOptions({ isLoaded: true, isSignedIn: false })).toEqual({
+      headerShown: false,
+      title: "Sign in",
+    });
+  });
+
+  it("restores the native header for the account screen", () => {
+    expect(resolveSettingsAuthHeaderOptions({ isLoaded: true, isSignedIn: true })).toEqual({
+      headerShown: true,
+      title: "Account",
+    });
+  });
+});

apps/mobile/src/features/settings/SettingsAuthRouteScreen.logic.ts

@@ -0,0 +1,9 @@
+export function resolveSettingsAuthHeaderOptions(input: {
+  readonly isLoaded: boolean;
+  readonly isSignedIn: boolean | undefined;
+}) {
+  return {
+    headerShown: !input.isLoaded || input.isSignedIn === true,
+    title: input.isSignedIn ? "Account" : "Sign in",
+  };
+}

apps/mobile/src/features/settings/SettingsAuthRouteScreen.tsx

@@ -6,6 +6,7 @@ import { useEffect } from "react";
 import { View } from "react-native";
 
 import { hasCloudPublicConfig } from "../cloud/publicConfig";
+import { resolveSettingsAuthHeaderOptions } from "./SettingsAuthRouteScreen.logic";
 
 export function SettingsAuthRouteScreen() {
   const navigation = useNavigation();
@@ -21,16 +22,19 @@ export function SettingsAuthRouteScreen() {
 
 function ConfiguredSettingsAuthRouteScreen() {
   const { isLoaded, isSignedIn } = useAuth({ treatPendingAsSignedOut: false });
+  const navigation = useNavigation();
 
   return (
     <>
-      <NativeStackScreenOptions options={{ title: isSignedIn ? "Account" : "Sign in" }} />
+      <NativeStackScreenOptions
+        options={resolveSettingsAuthHeaderOptions({ isLoaded, isSignedIn })}
+      />
       <View collapsable={false} className="flex-1 overflow-hidden bg-sheet">
         {isLoaded ? (
           isSignedIn ? (
             <UserProfileView isDismissible={false} />
           ) : (
-            <AuthView isDismissible={false} />
+            <AuthView isDismissible onDismiss={() => navigation.goBack()} />
           )
         ) : null}
       </View>