feat(auth): migrate to Better Auth + OAuth 2.1 for MCP

apps/expo/app/(app)/(tabs)/profile/index.tsx

@@ -1,9 +1,7 @@
 import { clientEnvs } from '@packrat/env/expo-client';
 import { isString } from '@packrat/guards';
-import type { AlertMethods } from '@packrat/ui/nativewindui';
 import {
   ActivityIndicator,
-  Alert as AlertComponent,
   Avatar,
   AvatarFallback,
   AvatarImage,
@@ -18,6 +16,7 @@ import {
 import AsyncStorage from '@react-native-async-storage/async-storage';
 import { AndroidTabBarInsetFix } from 'expo-app/components/AndroidTabBarInsetFix';
 import { Icon } from 'expo-app/components/Icon';
+import { isLoadingAtom, suppressSignOutNavAtom } from 'expo-app/features/auth/atoms/authAtoms';
 import { withAuthWall } from 'expo-app/features/auth/hocs';
 import { useAuth } from 'expo-app/features/auth/hooks/useAuth';
 import { useUser } from 'expo-app/features/auth/hooks/useUser';
@@ -33,8 +32,8 @@ import { testIds } from 'expo-app/lib/testIds';
 import { buildPackTemplateItemImageUrl } from 'expo-app/lib/utils/buildPackTemplateItemImageUrl';
 import * as FileSystem from 'expo-file-system/legacy';
 import { Link, router, Stack } from 'expo-router';
-import * as Updates from 'expo-updates';
-import { useRef, useState } from 'react';
+import { useSetAtom } from 'jotai';
+import { useState } from 'react';
 import { Alert, Linking, Platform, Pressable, TouchableOpacity, View } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
@@ -246,44 +245,47 @@ function ListHeaderComponent() {
 
 function ListFooterComponent() {
   const { signOut } = useAuth();
-  const { colors } = useColorScheme();
   const { t } = useTranslation();
+  const setIsLoading = useSetAtom(isLoadingAtom);
+  const setSuppressSignOutNav = useSetAtom(suppressSignOutNavAtom);
 
-  const alertRef = useRef<AlertMethods>(null);
   const [isSigningOut, setIsSigningOut] = useState(false);
 
   const handleSignOut = async () => {
-    try {
-      setIsSigningOut(true);
-      await signOut();
-      alertRef.current?.alert({
-        title: t('auth.loggedOut'),
-        message: t('auth.loggedOutMessage'),
-        materialIcon: { name: 'check-circle-outline', color: colors.green },
-        buttons: [
-          {
-            text: t('auth.stayLoggedOut'),
-            style: 'cancel',
-            onPress: async () => {
-              await AsyncStorage.setItem('skipped_login', 'true');
-              await Updates.reloadAsync();
-            },
+    setIsSigningOut(true);
+    await signOut();
+    setIsSigningOut(false);
+
+    // signOut() has completed: auth cleared, spinner showing, auto-navigation
+    // suppressed. Ask the user what to do next.
+    Alert.alert(
+      t('auth.loggedOut'),
+      t('auth.loggedOutMessage'),
+      [
+        {
+          text: t('auth.stayLoggedOut'),
+          onPress: async () => {
+            // Clear spinner first so AppLayout doesn't show auth screen,
+            // then release the suppress flag and navigate home as guest.
+            setIsLoading(false);
+            setSuppressSignOutNav(false);
+            await AsyncStorage.setItem('skipped_login', 'true');
+            router.replace('/');
           },
-          {
-            text: t('auth.signInAgain'),
-            style: 'default',
-            onPress: async () => {
-              await AsyncStorage.setItem('skipped_login', 'false');
-              await Updates.reloadAsync();
-            },
+        },
+        {
+          text: t('auth.signInAgain'),
+          style: 'destructive',
+          onPress: () => {
+            // Release suppress while isLoadingAtom is still true — AppLayout's
+            // useEffect sees isLoadingGlobal=true && !isAuthed and navigates to
+            // /auth via the NativeTabs-safe useEffect path.
+            setSuppressSignOutNav(false);
           },
-        ],
-      });
-    } catch (error) {
-      console.error('Logout failed:', error);
-    } finally {
-      setIsSigningOut(false);
-    }
+        },
+      ],
+      { cancelable: false },
+    );
   };
 
   return (
@@ -294,22 +296,13 @@ function ListFooterComponent() {
           disabled={isSigningOut}
           onPress={() => {
             if (hasUnsyncedChanges()) {
-              alertRef.current?.alert({
-                title: t('profile.syncInProgress'),
-                message: t('profile.syncMessage'),
-                materialIcon: { name: 'repeat' },
-                buttons: [
-                  {
-                    text: t('common.cancel'),
-                    style: 'cancel',
-                  },
-                  {
-                    text: t('auth.proceedLogOut'),
-                    style: 'destructive',
-                    onPress: handleSignOut,
-                  },
-                ],
-              });
+              // Use native Alert on both platforms so the dialog buttons are
+              // accessible to automated testing tools (custom portal-based
+              // dialogs are not surfaced in XCTest/UIAutomator accessibility trees).
+              Alert.alert(t('profile.syncInProgress'), t('profile.syncMessage'), [
+                { text: t('common.cancel'), style: 'cancel' },
+                { text: t('auth.logOut'), style: 'destructive', onPress: handleSignOut },
+              ]);
               return;
             }
             handleSignOut();
@@ -324,7 +317,6 @@ function ListFooterComponent() {
             <Text className="text-destructive">{t('auth.logOut')}</Text>
           )}
         </Button>
-        <AlertComponent title="" buttons={[]} ref={alertRef} />
       </View>
       <AndroidTabBarInsetFix />
     </>

apps/expo/app/(app)/_layout.tsx

@@ -1,7 +1,13 @@
+import { use$ } from '@legendapp/state/react';
 import { ActivityIndicator } from '@packrat/ui/nativewindui';
 import { ThemeToggle } from 'expo-app/components/ThemeToggle';
-import { needsReauthAtom } from 'expo-app/features/auth/atoms/authAtoms';
+import {
+  isLoadingAtom,
+  needsReauthAtom,
+  suppressSignOutNavAtom,
+} from 'expo-app/features/auth/atoms/authAtoms';
 import { useAuthInit } from 'expo-app/features/auth/hooks/useAuthInit';
+import { isAuthed } from 'expo-app/features/auth/store';
 import { getPackTemplateDetailOptions } from 'expo-app/features/pack-templates/utils/getPackTemplateDetailOptions';
 import { getPackTemplateItemDetailOptions } from 'expo-app/features/pack-templates/utils/getPackTemplateItemDetailOptions';
 import SyncBanner from 'expo-app/features/packs/components/SyncBanner';
@@ -10,10 +16,12 @@ import { getPackItemDetailOptions } from 'expo-app/features/packs/utils/getPackI
 import { getTripDetailOptions } from 'expo-app/features/trips/utils/getTripDetailOptions';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import type { TranslationFunction } from 'expo-app/lib/i18n/types';
+import { testIds } from 'expo-app/lib/testIds';
 import 'expo-dev-client';
-import { Stack } from 'expo-router';
+import { type Href, router, Stack, useRouter } from 'expo-router';
 import { useAtomValue } from 'jotai';
-import { View } from 'react-native';
+import { useEffect, useRef } from 'react';
+import { Pressable, Text, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 export {
@@ -23,11 +31,46 @@ export {
 
 export default function AppLayout() {
   const isLoading = useAuthInit();
+  const isAuthedValue = use$(isAuthed);
   const { t } = useTranslation();
   const needsReauth = useAtomValue(needsReauthAtom);
+  const isLoadingGlobal = useAtomValue(isLoadingAtom);
+  const suppressSignOutNav = useAtomValue(suppressSignOutNavAtom);
   const insets = useSafeAreaInsets();
+  // Latches true once we dispatch router.replace('/auth') on sign-out.
+  // Keeps the spinner rendered until AppLayout unmounts so that
+  // auth/index.tsx resetting isLoadingAtom=false never causes AppLayout
+  // to re-render its Stack mid-transition. If the Stack re-initialized
+  // while the root navigator was still committing the replace, it would
+  // re-register with React Navigation and override the in-flight navigation,
+  // landing the user back on the Trips/Profile screen instead of auth.
+  const hasNavigatedToAuthRef = useRef(false);
 
-  if (isLoading) {
+  useEffect(() => {
+    // suppressSignOutNav is true while profile/handleSignOut is showing the
+    // post-sign-out prompt; skip auto-navigation until the user picks an option.
+    if (isLoadingGlobal && !isAuthedValue && !suppressSignOutNav) {
+      hasNavigatedToAuthRef.current = true;
+      // safe-cast: '/auth' is a compile-time string literal recognised by expo-router
+      router.replace('/auth' as Href);
+    }
+  }, [isLoadingGlobal, isAuthedValue, suppressSignOutNav]);
+
+  // If the user has re-authenticated while AppLayout stayed mounted (Expo Router
+  // keeps the (app) screen in the stack during the auth transition), clear the
+  // sign-out latch so the spinner doesn't stay on indefinitely.
+  if (isAuthedValue && hasNavigatedToAuthRef.current) {
+    hasNavigatedToAuthRef.current = false;
+  }
+
+  // Show spinner when: (a) auth initialising on cold start, OR (b) a sign-out
+  // is in progress (isLoadingAtom=true) AND the user is no longer authenticated.
+  // The spinner unmounts NativeTabs so the useEffect above can dispatch to the
+  // root Stack. The !isAuthedValue guard keeps the Stack visible during re-auth
+  // sign-in, where isLoadingAtom is also true but the user is still authed.
+  // hasNavigatedToAuthRef keeps the spinner until AppLayout actually unmounts
+  // after the router.replace('/auth') transition completes.
+  if (isLoading || (isLoadingGlobal && !isAuthedValue) || hasNavigatedToAuthRef.current) {
     return (
       <View className="flex-1 items-center justify-center">
         <ActivityIndicator size="large" color="#3B82F6" />
@@ -285,12 +328,19 @@ const getSettingsOptions = (t: TranslationFunction) =>
     headerRight: () => <ThemeToggle />,
   }) as const;
 
-const getTripNewOptions = (t: TranslationFunction) =>
-  ({
-    title: t('trips.createTrip'),
-    presentation: 'modal',
-    animation: 'slide_from_bottom',
-  }) as const;
+const getTripNewOptions = (t: TranslationFunction) => ({
+  title: t('trips.createTrip'),
+  presentation: 'modal' as const,
+  animation: 'slide_from_bottom' as const,
+  headerLeft: () => {
+    const router = useRouter();
+    return (
+      <Pressable testID={testIds.trips.cancelBtn} onPress={() => router.back()} className="px-2">
+        <Text className="text-primary">{t('common.cancel')}</Text>
+      </Pressable>
+    );
+  },
+});
 
 const getTripEditOptions = (t: TranslationFunction) =>
   ({
@@ -311,12 +361,19 @@ const CONSENT_MODAL_OPTIONS = {
   animation: 'fade_from_bottom', // for android
 } as const;
 
-const getPackNewOptions = (t: TranslationFunction) =>
-  ({
-    title: t('packs.createPack'),
-    presentation: 'modal',
-    animation: 'fade_from_bottom', // for android
-  }) as const;
+const getPackNewOptions = (t: TranslationFunction) => ({
+  title: t('packs.createPack'),
+  presentation: 'modal' as const,
+  animation: 'fade_from_bottom' as const,
+  headerLeft: () => {
+    const router = useRouter();
+    return (
+      <Pressable testID={testIds.packs.cancelBtn} onPress={() => router.back()} className="px-2">
+        <Text className="text-primary">{t('common.cancel')}</Text>
+      </Pressable>
+    );
+  },
+});
 
 const getItemNewOptions = (t: TranslationFunction) =>
   ({

apps/expo/app/(app)/ai-chat.tsx

@@ -20,9 +20,9 @@ import { LocationContext } from 'expo-app/features/ai/components/LocationContext
 import { CustomChatTransport } from 'expo-app/features/ai/lib/CustomChatTransport';
 import { getLocalModel, initLocalModel } from 'expo-app/features/ai/lib/localModelManager';
 import { createLocalTools } from 'expo-app/features/ai/lib/tools';
-import { tokenAtom } from 'expo-app/features/auth/atoms/authAtoms';
 import { useActiveLocation } from 'expo-app/features/weather/hooks';
 import type { WeatherLocation } from 'expo-app/features/weather/types';
+import { authClient } from 'expo-app/lib/auth-client';
 import { useColorScheme } from 'expo-app/lib/hooks/useColorScheme';
 import { useTranslation } from 'expo-app/lib/hooks/useTranslation';
 import { getContextualGreeting, getContextualSuggestions } from 'expo-app/utils/chatContextHelpers';
@@ -90,7 +90,8 @@ export default function AIChat() {
   const locationRef = React.useRef(context.location);
   locationRef.current = context.location;
 
-  const token = useAtomValue(tokenAtom);
+  const { data: _authSession } = authClient.useSession();
+  const token = _authSession?.session?.token ?? null;
   const [input, setInput] = React.useState('');
   const [lastUserMessage, setLastUserMessage] = React.useState('');
   const [previousMessages, setPreviousMessages] = React.useState<UIMessage[]>([]);

apps/expo/app/(app)/current-pack/[id].tsx

@@ -155,7 +155,7 @@ export default function CurrentPackScreen() {
             </Text>
             <Text variant="subhead" className="mt-1 text-muted-foreground">
               {t('packs.lastUpdated', {
-                time: getRelativeTime(pack.localUpdatedAt ?? pack.updatedAt, t as any),
+                time: getRelativeTime(pack.localUpdatedAt ?? pack.updatedAt, t),
               })}
             </Text>
           </View>

apps/expo/app/(app)/feed/[id].tsx

@@ -8,7 +8,7 @@ import { ActivityIndicator, View } from 'react-native';
 
 export default function PostDetailRoute() {
   const { id } = useLocalSearchParams<{ id: string }>();
-  const currentUserId = userStore.id.peek() as number | undefined;
+  const currentUserId = userStore.id.peek() as string | undefined;
 
   const { data: post, isLoading } = useQuery({
     queryKey: ['feed', Number(id)],

apps/expo/app/(app)/recent-packs.tsx

@@ -34,7 +34,7 @@ function RecentPackCard({ pack }: { pack: Pack }) {
               {pack.totalWeight ?? 0} g
             </Text>
             <Text variant="footnote" className="text-muted-foreground">
-              {getRelativeTime(pack.localCreatedAt ?? pack.createdAt, t as any)}
+              {getRelativeTime(pack.localCreatedAt ?? pack.createdAt, t)}
             </Text>
           </View>
         </View>
@@ -45,7 +45,7 @@ function RecentPackCard({ pack }: { pack: Pack }) {
           </View>
           <Text variant="caption1" className="text-muted-foreground">
             {t('packs.lastUpdated', {
-              time: getRelativeTime(pack.localUpdatedAt ?? pack.updatedAt, t as any),
+              time: getRelativeTime(pack.localUpdatedAt ?? pack.updatedAt, t),
             })}
           </Text>
         </View>

apps/expo/app/auth/(login)/reset-password.tsx

@@ -136,7 +136,7 @@ export default function ResetPasswordScreen() {
         setIsLoading(true);
 
         // Call the API to reset the password
-        await resetPassword(params.email, { code: params.code, newPassword: value.password });
+        await resetPassword(params.email, { token: params.code, newPassword: value.password });
 
         // Show success message and navigate to login
         Alert.alert(t('common.success'), t('auth.resetPasswordSuccess'), [

apps/expo/features/auth/atoms/authAtoms.ts

@@ -1,25 +1,8 @@
-import kvStorage from 'expo-app/lib/kvStorage';
 import { atom } from 'jotai';
-import { atomWithStorage } from 'jotai/utils';
 
-// User type definition
-export type User = {
-  id: number;
-  email: string;
-  firstName?: string;
-  lastName?: string;
-  emailVerified: boolean;
-};
-
-// Token storage atom
-export const tokenAtom = atomWithStorage<string | null>('access_token', null, kvStorage);
-
-export const refreshTokenAtom = atomWithStorage<string | null>('refresh_token', null, kvStorage);
-
-// Loading state atom
 export const isLoadingAtom = atom(false);
-
 export const redirectToAtom = atom<string>('/');
-
-// Re-authentication state
 export const needsReauthAtom = atom(false);
+// Prevents AppLayout's useEffect from auto-navigating to /auth during the
+// sign-out flow so the profile screen can show a post-sign-out prompt first.
+export const suppressSignOutNavAtom = atom(false);