@terreno/mcp 57.21.0 → 58.0.0-beta.1

package/src/docs/templates/bootstrap/frontend/app/(tabs)/profile.template.tsx

@@ -1,21 +1,18 @@
+import {useSession} from "@terreno/syncdb/auth";
 import {Box, Button, Card, Heading, Page, Spinner, TapToEdit, Text, TextField} from "@terreno/ui";
 import type React from "react";
 import {useCallback, useEffect, useMemo, useState} from "react";
-import {signOut} from "@/lib/betterAuth";
-import {logout, syncBetterAuthSession, useAppDispatch} from "@/store/index";
-import {useGetMeQuery, usePatchMeMutation} from "@/store/sdk";
+import {useGetAuthMeQuery, usePatchAuthMeMutation} from "@/store/apiSdk";
 
 const ProfileScreen: React.FC = () => {
-  const dispatch = useAppDispatch();
-  const {data: profile, isLoading} = useGetMeQuery();
-  const [updateProfile] = usePatchMeMutation();
+  const {logout} = useSession();
+  const {data: user, isLoading} = useGetAuthMeQuery();
+  const [updateProfile] = usePatchAuthMeMutation();
   const [name, setName] = useState<string>("");
   const [email, setEmail] = useState<string>("");
   const [currentPassword, setCurrentPassword] = useState<string>("");
   const [saveError, setSaveError] = useState<string | null>(null);
 
-  const user = profile?.data;
-
   // Copy the server name into local state without resetting an in-progress email edit.
   useEffect(() => {
     if (!user) {
@@ -32,11 +29,10 @@ const ProfileScreen: React.FC = () => {
     setEmail(user.email || "");
   }, [user?.email]);
 
+  // logout signs syncDb out, then Better Auth, and clears cached API responses.
   const handleLogout = useCallback(async (): Promise<void> => {
-    await signOut();
-    dispatch(logout());
-    await syncBetterAuthSession(dispatch);
-  }, [dispatch]);
+    await logout();
+  }, [logout]);
 
   const handleSaveName = useCallback(
     async (value: string): Promise<void> => {

package/src/docs/templates/bootstrap/frontend/app/_layout.template.tsx

@@ -1,19 +1,18 @@
-import FontAwesome from "@expo/vector-icons/FontAwesome";
-import {DarkTheme, DefaultTheme, ThemeProvider} from "expo-router/react-navigation";
-import {useFonts} from "expo-font";
+import {SessionProvider, useSession} from "@terreno/syncdb/auth";
+import {baseUrl} from "@terreno/syncdb/config";
+import {ApiClientProvider, SyncDbProvider} from "@terreno/syncdb/react";
+import {Spinner, TerrenoProvider} from "@terreno/ui";
 import {Stack} from "expo-router";
-import * as SplashScreen from "expo-splash-screen";
+import {DefaultTheme, ThemeProvider} from "expo-router/react-navigation";
+import type React from "react";
 import {useEffect} from "react";
 import "react-native-reanimated";
-import {baseUrl, selectBetterAuthUserId} from "@terreno/rtk";
-import {installTerrenoDevConsoleLogger} from "@terreno/syncdb";
-import {TerrenoProvider} from "@terreno/ui";
-import {Provider, useSelector} from "react-redux";
-import {PersistGate} from "redux-persist/integration/react";
-import {useColorScheme} from "@/components/useColorScheme";
-import store, {persistor} from "@/store/index";
+import {installDevConsoleLogger} from "@terreno/syncdb/app";
+import {betterAuthClient} from "@/lib/betterAuth";
+import {apiClient} from "@/store/apiClient";
+import {setSyncDbReady, syncDb} from "@/store/syncdb";
 
-installTerrenoDevConsoleLogger({baseUrl});
+installDevConsoleLogger({baseUrl});
 
 export {ErrorBoundary} from "expo-router";
 
@@ -21,54 +20,78 @@ export const unstable_settings = {
   initialRouteName: "(tabs)",
 };
 
-SplashScreen.preventAutoHideAsync();
-
-export default function RootLayout(): React.ReactElement | null {
-  const [loaded, error] = useFonts({
-    SpaceMono: require("../assets/fonts/SpaceMono-Regular.ttf"),
-    ...FontAwesome.font,
-  });
-
-  useEffect(() => {
-    if (error) {
-      throw error;
-    }
-  }, [error]);
-
-  useEffect(() => {
-    if (loaded) {
-      SplashScreen.hideAsync();
-    }
-  }, [loaded]);
-
-  if (!loaded) {
-    return null;
-  }
+// Logging out signs syncDb out (stop + wipe) and drops cached API responses so the next
+// user never sees the previous user's data.
+const SYNC_DBS = [syncDb];
 
+// TerrenoProvider loads the Nunito/Titillium Web families @terreno/ui renders with, so this
+// app ships no font assets of its own. Add `useFonts` here only for extra custom faces.
+// SessionProvider owns the Better Auth session (`useSession()`); ApiClientProvider gives the
+// generated hooks in store/apiSdk.ts their request client. No Redux store.
+export default function RootLayout(): React.ReactElement {
   return (
-    <Provider store={store}>
-      <PersistGate loading={null} persistor={persistor}>
-        <TerrenoProvider openAPISpecUrl={`${baseUrl}/openapi.json`}>
+    <TerrenoProvider openAPISpecUrl={`${baseUrl}/openapi.json`}>
+      <ApiClientProvider client={apiClient}>
+        <SessionProvider
+          authClient={betterAuthClient}
+          onLogout={apiClient.reset}
+          syncDbs={SYNC_DBS}
+        >
           <RootLayoutNav />
-        </TerrenoProvider>
-      </PersistGate>
-    </Provider>
+        </SessionProvider>
+      </ApiClientProvider>
+    </TerrenoProvider>
   );
 }
 
 function RootLayoutNav(): React.ReactElement {
-  const colorScheme = useColorScheme();
-  const userId = useSelector(selectBetterAuthUserId);
+  const {userId, isLoading: isAuthLoading} = useSession();
+
+  // Start syncdb after login; stop on logout or user switch.
+  useEffect(() => {
+    if (!userId) {
+      setSyncDbReady(false);
+      return;
+    }
+    let stopped = false;
+    void syncDb
+      .start()
+      .then(() => {
+        if (!stopped) {
+          setSyncDbReady(true);
+        }
+      })
+      .catch((startError: unknown) => {
+        console.error("[syncdb] start failed", startError);
+        setSyncDbReady(false);
+      });
+    return () => {
+      stopped = true;
+      setSyncDbReady(false);
+      void syncDb.stop();
+    };
+  }, [userId]);
+
+  if (isAuthLoading) {
+    return <Spinner />;
+  }
 
   return (
-    <ThemeProvider value={colorScheme === "dark" ? DarkTheme : DefaultTheme}>
-      <Stack>
-        {!userId ? (
-          <Stack.Screen name="login" options={{headerShown: false}} />
-        ) : (
-          <Stack.Screen name="(tabs)" options={{headerShown: false}} />
-        )}
-      </Stack>
-    </ThemeProvider>
+    <SyncDbProvider client={syncDb}>
+      <ThemeProvider value={DefaultTheme}>
+        {/* Stack.Protected is the supported way to gate routes on auth state. Rendering
+            Stack.Screen children behind a raw conditional (or a fragment) crashes the
+            navigator, because Stack reads its screen config off the child elements. */}
+        <Stack>
+          <Stack.Protected guard={!userId}>
+            <Stack.Screen name="login" options={{headerShown: false}} />
+            <Stack.Screen name="signup" options={{headerShown: false}} />
+          </Stack.Protected>
+          <Stack.Protected guard={Boolean(userId)}>
+            <Stack.Screen name="(tabs)" options={{headerShown: false}} />
+          </Stack.Protected>
+        </Stack>
+      </ThemeProvider>
+    </SyncDbProvider>
   );
 }

package/src/docs/templates/bootstrap/frontend/app/login.template.tsx

@@ -1,116 +1,54 @@
-import {Box, Button, Heading, Page, Text, TextField, useToast} from "@terreno/ui";
+import {useSession} from "@terreno/syncdb/auth";
+import {baseUrl} from "@terreno/syncdb/config";
+import {LoginScreen} from "@terreno/ui";
+import {useRouter} from "expo-router";
 import type React from "react";
 import {useCallback, useState} from "react";
-import {useEmailLoginMutation, useEmailSignUpMutation} from "@/store/sdk";
-
-const LoginScreen: React.FC = () => {
-  const [name, setName] = useState<string>("");
-  const [email, setEmail] = useState<string>("");
-  const [password, setPassword] = useState<string>("");
-  const [isSignUp, setIsSignUp] = useState<boolean>(false);
-  const toast = useToast();
-
-  const [emailLogin, {isLoading: isLoginLoading, error: loginError}] = useEmailLoginMutation();
-  const [emailSignUp, {isLoading: isSignUpLoading, error: signUpError}] = useEmailSignUpMutation();
-
-  const handleSubmit = useCallback(async (): Promise<void> => {
-    if (!email || !password) {
-      toast.warn("Email and password are required");
-      return;
-    }
-
-    if (isSignUp && !name) {
-      toast.warn("Signup requires name");
-      return;
-    }
-
-    try {
-      if (isSignUp) {
-        await emailSignUp({email, name, password}).unwrap();
-      } else {
-        await emailLogin({email, password}).unwrap();
+import {betterAuthClient} from "@/lib/betterAuth";
+
+const Login: React.FC = () => {
+  const router = useRouter();
+  const {refresh} = useSession();
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(
+    async (values: Record<string, string>): Promise<void> => {
+      const {email, password} = values;
+      setErrorMessage(undefined);
+      setIsSubmitting(true);
+      try {
+        const result = await betterAuthClient.signIn.email({email, password});
+        if (result.error) {
+          setErrorMessage(result.error.message ?? "Sign in failed.");
+          return;
+        }
+        // Resolve the new session now instead of waiting for the next session push.
+        await refresh();
+        router.replace("/(tabs)");
+      } catch (error: unknown) {
+        console.error("[login] Sign in threw", {baseUrl, error});
+        setErrorMessage("Sign in failed. Please try again.");
+      } finally {
+        setIsSubmitting(false);
       }
-    } catch (err) {
-      console.error("Authentication error:", err);
-    }
-  }, [email, password, name, isSignUp, emailLogin, emailSignUp, toast]);
-
-  const toggleMode = useCallback((): void => {
-    setIsSignUp(!isSignUp);
-  }, [isSignUp]);
-
-  const isLoading = isLoginLoading || isSignUpLoading;
-  const error = loginError || signUpError;
-  const isSubmitDisabled = !email || !password || (isSignUp && !name) || isLoading;
+    },
+    [refresh, router]
+  );
 
   return (
-    <Page navigation={undefined}>
-      <Box
-        alignItems="center"
-        alignSelf="center"
-        flex="grow"
-        justifyContent="center"
-        maxWidth={400}
-        padding={4}
-        width="100%"
-      >
-        <Box marginBottom={8}>
-          <Heading>{isSignUp ? "Create Account" : "Welcome Back"}</Heading>
-        </Box>
-        <Box gap={4} width="100%">
-          {isSignUp && (
-            <TextField
-              disabled={isLoading}
-              onChange={setName}
-              placeholder="Name"
-              title="Name"
-              value={name}
-            />
-          )}
-          <TextField
-            autoComplete="username"
-            disabled={isLoading}
-            onChange={setEmail}
-            placeholder="Email"
-            title="Email"
-            type="email"
-            value={email}
-          />
-          <TextField
-            disabled={isLoading}
-            onChange={setPassword}
-            placeholder="Password"
-            title="Password"
-            type="password"
-            value={password}
-          />
-          {Boolean(error) && (
-            <Text color="error">
-              {(error as {data?: {message?: string}})?.data?.message || "An error occurred"}
-            </Text>
-          )}
-          <Box marginTop={4}>
-            <Button
-              disabled={isSubmitDisabled}
-              fullWidth
-              loading={isLoading}
-              onClick={handleSubmit}
-              text={isSignUp ? "Sign Up" : "Login"}
-            />
-          </Box>
-          <Box marginTop={2}>
-            <Button
-              disabled={isLoading}
-              fullWidth
-              onClick={toggleMode}
-              text={isSignUp ? "Already have an account? Login" : "Need an account? Sign Up"}
-              variant="outline"
-            />
-          </Box>
-        </Box>
-      </Box>
-    </Page>
+    <LoginScreen
+      error={errorMessage}
+      fields={[
+        {autoComplete: "username", label: "Email", name: "email", required: true, type: "email"},
+        {label: "Password", name: "password", required: true, type: "password"},
+      ]}
+      loading={isSubmitting}
+      onSignUpPress={() => router.push("/signup")}
+      onSubmit={handleSubmit}
+      title="Welcome"
+    />
   );
 };
 
-export default LoginScreen;
+export default Login;

package/src/docs/templates/bootstrap/frontend/app/signup.template.tsx

@@ -0,0 +1,53 @@
+import {useSession} from "@terreno/syncdb/auth";
+import {SignUpScreen, simplePasswordRequirements} from "@terreno/ui";
+import {useRouter} from "expo-router";
+import type React from "react";
+import {useCallback, useState} from "react";
+import {betterAuthClient} from "@/lib/betterAuth";
+
+const SignUp: React.FC = () => {
+  const router = useRouter();
+  const {refresh} = useSession();
+  const [errorMessage, setErrorMessage] = useState<string | undefined>(undefined);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  const handleSubmit = useCallback(
+    async (values: Record<string, string>): Promise<void> => {
+      const {email, password, name} = values;
+      setErrorMessage(undefined);
+      setIsSubmitting(true);
+      try {
+        const result = await betterAuthClient.signUp.email({email, name, password});
+        if (result.error) {
+          setErrorMessage(result.error.message ?? "Sign up failed.");
+          return;
+        }
+        // Resolve the new session now instead of waiting for the next session push.
+        await refresh();
+        router.replace("/(tabs)");
+      } catch {
+        setErrorMessage("Sign up failed. Please try again.");
+      } finally {
+        setIsSubmitting(false);
+      }
+    },
+    [refresh, router]
+  );
+
+  return (
+    <SignUpScreen
+      error={errorMessage}
+      fields={[
+        {label: "Name", name: "name", required: true, type: "text"},
+        {autoComplete: "off", label: "Email", name: "email", required: true, type: "email"},
+        {label: "Password", name: "password", required: true, type: "password"},
+      ]}
+      loading={isSubmitting}
+      onLoginPress={() => router.back()}
+      onSubmit={handleSubmit}
+      passwordRequirements={simplePasswordRequirements}
+    />
+  );
+};
+
+export default SignUp;

package/src/docs/templates/bootstrap/frontend/lib/betterAuth.template.md

@@ -0,0 +1,18 @@
+import {createBetterAuthClient} from "@terreno/syncdb/auth";
+import {baseUrl} from "@terreno/syncdb/config";
+import Constants from "expo-constants";
+
+const getAppScheme = (): string => {
+  const expoExtra = Constants.expoConfig?.extra;
+  return expoExtra?.scheme ?? "{{appName}}";
+};
+
+/**
+ * Expo-ready Better Auth client (SecureStore on native, AsyncStorage on web). Feeds
+ * `SessionProvider` (app/_layout.tsx) and the shared auth provider in store/syncdb.ts.
+ */
+export const betterAuthClient = createBetterAuthClient({
+  baseURL: baseUrl,
+  scheme: getAppScheme(),
+  storagePrefix: "{{appName}}",
+});

package/src/docs/templates/bootstrap/frontend/store/apiClient.template.md

@@ -0,0 +1,33 @@
+/**
+ * Request client for every non-synced backend route (`/auth/me`, modelRouter actions, admin).
+ * Synced collections go through `syncDb` instead. Generated hooks in `store/apiSdk.ts` use the
+ * client that `ApiClientProvider` (in `app/_layout.tsx`) puts in context.
+ */
+import {type ApiClient, createApiClient} from "@terreno/syncdb/api";
+import {appHeaders, baseUrl} from "@terreno/syncdb/config";
+import {authProvider} from "@/store/syncdb";
+
+/** Failures callers already handle (signed out, missing rows) are not worth a warning. */
+const QUIET_STATUSES = new Set([401, 404]);
+
+export const apiClient: ApiClient = createApiClient({
+  authProvider,
+  baseUrl,
+  credentials: "include",
+  headers: appHeaders,
+  onError: (error, args): void => {
+    if (QUIET_STATUSES.has(error.status)) {
+      return;
+    }
+    console.warn(`${args.method ?? "GET"} ${args.url} failed: ${error.message}`);
+  },
+});
+
+/** Bearer header for `@terreno/admin-frontend`'s `AdminProvider` fetch client. */
+export const getAdminAuthHeaders = async (): Promise<Record<string, string>> => {
+  const token = await authProvider.getToken();
+  if (!token) {
+    return {};
+  }
+  return {Authorization: `Bearer ${token}`};
+};

package/src/docs/templates/bootstrap/frontend/store/apiSdk.template.md

@@ -0,0 +1,76 @@
+// GENERATED by @terreno/syncdb (terreno-syncdb-codegen --api-out). Do not edit.
+// Typed request hooks for every non-synced @terreno/api route. Synced collections use the
+// collection hooks from the sync SDK instead. Run `bun run sdk` with the backend running to
+// regenerate this file from its OpenAPI spec.
+// biome-ignore-all lint/suspicious/noConfusingVoidType: no-argument operations type their argument as void so callers can omit it
+
+import type {ApiRequestArgs} from "@terreno/syncdb/api";
+import {
+  type UseApiMutationOptions,
+  type UseApiMutationResult,
+  type UseApiQueryOptions,
+  type UseApiQueryResult,
+  type UseLazyApiQueryOptions,
+  type UseLazyApiQueryResult,
+  useApiMutation,
+  useApiQuery,
+  useLazyApiQuery,
+} from "@terreno/syncdb/react";
+
+type ApiSdkQueryOptions<T> = Omit<UseApiQueryOptions<T, T>, "providesTags" | "transformResponse">;
+type ApiSdkLazyOptions<T> = Omit<UseLazyApiQueryOptions<T, never>, "providesTags" | "toRequest">;
+
+export type GetAuthMeArgs = void;
+
+export type GetAuthMeRes = {
+  admin?: boolean;
+  email: string;
+  name?: string;
+  _id: string;
+  id: string;
+  created?: string;
+  updated?: string;
+};
+
+export const getAuthMeRequest = (): ApiRequestArgs => ({
+  method: "GET",
+  url: `/auth/me`,
+});
+
+/** Get the current user */
+export const useGetAuthMeQuery = (
+  _arg?: GetAuthMeArgs,
+  options: ApiSdkQueryOptions<GetAuthMeRes> = {}
+): UseApiQueryResult<GetAuthMeRes> =>
+  useApiQuery<GetAuthMeRes>(getAuthMeRequest(), {...options, providesTags: ["auth"]});
+
+export const useLazyGetAuthMeQuery = (
+  options: ApiSdkLazyOptions<GetAuthMeRes> = {}
+): UseLazyApiQueryResult<GetAuthMeRes, GetAuthMeArgs> =>
+  useLazyApiQuery<GetAuthMeRes, GetAuthMeArgs>({
+    ...options,
+    providesTags: ["auth"],
+    toRequest: (): ApiRequestArgs => getAuthMeRequest(),
+  });
+
+export type PatchAuthMeArgs = {
+  email?: string;
+  name?: string;
+};
+
+export type PatchAuthMeRes = GetAuthMeRes;
+
+export const patchAuthMeRequest = (arg: PatchAuthMeArgs): ApiRequestArgs => ({
+  body: arg,
+  method: "PATCH",
+  url: `/auth/me`,
+});
+
+/** Update the current user */
+export const usePatchAuthMeMutation = (
+  options: UseApiMutationOptions<PatchAuthMeArgs, PatchAuthMeRes> = {}
+): UseApiMutationResult<PatchAuthMeArgs, PatchAuthMeRes> =>
+  useApiMutation<PatchAuthMeArgs, PatchAuthMeRes>(patchAuthMeRequest, {
+    invalidatesTags: ["auth"],
+    ...options,
+  });

package/src/docs/templates/bootstrap/frontend/store/syncdb.template.md

@@ -0,0 +1,56 @@
+import {
+  betterAuthAdapter,
+  bridgeBetterAuthReactClient,
+  createSyncDb,
+  type SyncDb,
+} from "@terreno/syncdb";
+import {baseUrl} from "@terreno/syncdb/config";
+import {betterAuthClient} from "@/lib/betterAuth";
+
+export const SYNC_DB_NAME = "{{appName}}";
+
+/** Add synced collection names here as you register modelRouter sync scopes on the backend. */
+export const SYNC_COLLECTIONS: string[] = [];
+
+/**
+ * Shared by the sync client and the request client (store/apiClient.ts) so both send the same
+ * Better Auth session token and refresh the same way. bridgeBetterAuthReactClient turns the
+ * Better Auth session atom into push updates; pollIntervalMs is only a fallback if that atom
+ * is unavailable, so keep it slow.
+ */
+export const authProvider = betterAuthAdapter(bridgeBetterAuthReactClient(betterAuthClient), {
+  pollIntervalMs: 60_000,
+});
+
+export const syncDb: SyncDb = createSyncDb({
+  authProvider,
+  baseUrl,
+  collections: SYNC_COLLECTIONS,
+  name: SYNC_DB_NAME,
+});
+
+/**
+ * Tracks whether `syncDb.start()` has resolved for the current login. Screens gate
+ * `mutate()` on it: `start()` must resolve an authenticated user before writes are safe.
+ */
+let syncDbReady = false;
+const syncDbReadyListeners = new Set<() => void>();
+
+export const setSyncDbReady = (ready: boolean): void => {
+  if (syncDbReady === ready) {
+    return;
+  }
+  syncDbReady = ready;
+  for (const listener of syncDbReadyListeners) {
+    listener();
+  }
+};
+
+export const subscribeSyncDbReady = (listener: () => void): (() => void) => {
+  syncDbReadyListeners.add(listener);
+  return () => {
+    syncDbReadyListeners.delete(listener);
+  };
+};
+
+export const getSyncDbReadySnapshot = (): boolean => syncDbReady;

package/src/docs/templates/bootstrap/frontend/utils/index.template.md

@@ -5,7 +5,3 @@ export const captureException = (error: unknown): void => {
 export const captureMessage = (message: string): void => {
   console.warn("Captured message:", message);
 };
-
-export const createSentryReduxEnhancer = (): unknown => {
-  return undefined;
-};