@checkstack/auth-frontend 0.5.15 → 0.5.16

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @checkstack/auth-frontend
 
+## 0.5.16
+
+### Patch Changes
+
+- e01945b: Reduce excessive /api/auth/get-session requests
+
+  - Enable better-auth's `cookieCache` on the server (5-minute TTL) so repeated session
+    checks verify a signed cookie instead of querying the database. Compatible with
+    horizontal scaling since validation uses the shared `BETTER_AUTH_SECRET`.
+
+  - Introduce a `SessionProvider` React context that fetches the session exactly once
+    at the top of the component tree. All 7+ components that previously called
+    `useSession()` independently now read from this shared context — eliminating
+    duplicate HTTP requests on every page load.
+
+  - Remove the `useAuthClient()` hook which created per-component better-auth client
+    instances via `useMemo`, causing separate nanostore atoms and independent fetches.
+    All imperative usages (signIn, signUp, resetPassword, etc.) now use the singleton
+    `getAuthClientLazy()` instead.
+
 ## 0.5.15
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@checkstack/auth-frontend",
-  "version": "0.5.15",
+  "version": "0.5.16",
   "type": "module",
   "main": "src/index.tsx",
   "checkstack": {

package/src/components/ChangePasswordPage.tsx

@@ -19,7 +19,7 @@ import {
   AlertDescription,
   Checkbox,
 } from "@checkstack/ui";
-import { useAuthClient } from "../lib/auth-client";
+import { getAuthClientLazy } from "../lib/auth-client";
 
 export const ChangePasswordPage = () => {
   const navigate = useNavigate();
@@ -32,7 +32,7 @@ export const ChangePasswordPage = () => {
   const [error, setError] = useState<string>();
   const [success, setSuccess] = useState(false);
   const [validationErrors, setValidationErrors] = useState<string[]>([]);
-  const authClient = useAuthClient();
+  const authClient = getAuthClientLazy();
 
   // Validate new password on change
   useEffect(() => {

package/src/components/ForgotPasswordPage.tsx

@@ -14,13 +14,13 @@ import {
   CardContent,
   CardFooter,
 } from "@checkstack/ui";
-import { useAuthClient } from "../lib/auth-client";
+import { getAuthClientLazy } from "../lib/auth-client";
 
 export const ForgotPasswordPage = () => {
   const [email, setEmail] = useState("");
   const [loading, setLoading] = useState(false);
   const [submitted, setSubmitted] = useState(false);
-  const authClient = useAuthClient();
+  const authClient = getAuthClientLazy();
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();

package/src/components/LoginPage.tsx

@@ -39,7 +39,7 @@ import {
 import { authApiRef, EnabledAuthStrategy } from "../api";
 import { useEnabledStrategies } from "../hooks/useEnabledStrategies";
 import { useAccessRules } from "../hooks/useAccessRules";
-import { useAuthClient } from "../lib/auth-client";
+import { getAuthClientLazy } from "../lib/auth-client";
 import { SocialProviderButton } from "./SocialProviderButton";
 import { useEffect } from "react";
 
@@ -417,7 +417,6 @@ export const LoginNavbarAction = () => {
   const authApi = useApi(authApiRef);
   const { data: session, isPending } = authApi.useSession();
   const { accessRules, loading: accessRulesLoading } = useAccessRules();
-  const authClient = useAuthClient();
   const [hasCredentialAccount, setHasCredentialAccount] =
     useState<boolean>(false);
   const [credentialLoading, setCredentialLoading] = useState(true);
@@ -427,7 +426,7 @@ export const LoginNavbarAction = () => {
       setCredentialLoading(false);
       return;
     }
-    authClient.listAccounts().then((result) => {
+    getAuthClientLazy().listAccounts().then((result) => {
       if (result.data) {
         const hasCredential = result.data.some(
           (account) => account.providerId === "credential",
@@ -436,7 +435,7 @@ export const LoginNavbarAction = () => {
       }
       setCredentialLoading(false);
     });
-  }, [session?.user, authClient]);
+  }, [session?.user]);
 
   if (isPending || accessRulesLoading || credentialLoading) {
     return <div className="w-20 h-9 bg-muted animate-pulse rounded-full" />;

package/src/components/OnboardingPage.tsx

@@ -20,7 +20,7 @@ import {
   AlertTitle,
   AlertDescription,
 } from "@checkstack/ui";
-import { useAuthClient } from "../lib/auth-client";
+import { getAuthClientLazy } from "../lib/auth-client";
 
 export const OnboardingPage = () => {
   const navigate = useNavigate();
@@ -36,7 +36,7 @@ export const OnboardingPage = () => {
   const authClient = usePluginClient(AuthApi);
   const completeOnboardingMutation =
     authClient.completeOnboarding.useMutation();
-  const betterAuthClient = useAuthClient();
+  const betterAuthClient = getAuthClientLazy();
 
   // Check if onboarding is needed
   const { data: onboardingStatus, isLoading: checkingStatus } =

package/src/components/RegisterPage.tsx

@@ -23,7 +23,7 @@ import {
 } from "@checkstack/ui";
 import { useEnabledStrategies } from "../hooks/useEnabledStrategies";
 import { SocialProviderButton } from "./SocialProviderButton";
-import { useAuthClient } from "../lib/auth-client";
+import { getAuthClientLazy } from "../lib/auth-client";
 
 export const RegisterPage = () => {
   const [name, setName] = useState("");
@@ -35,7 +35,7 @@ export const RegisterPage = () => {
   const authApi = useApi(authApiRef);
   const authClient = usePluginClient(AuthApi);
   const { strategies, loading: strategiesLoading } = useEnabledStrategies();
-  const authBetterClient = useAuthClient();
+  const authBetterClient = getAuthClientLazy();
 
   // Validate password on change
   useEffect(() => {

package/src/components/ResetPasswordPage.tsx

@@ -19,7 +19,7 @@ import {
   AlertTitle,
   AlertDescription,
 } from "@checkstack/ui";
-import { useAuthClient } from "../lib/auth-client";
+import { getAuthClientLazy } from "../lib/auth-client";
 
 export const ResetPasswordPage = () => {
   const [searchParams] = useSearchParams();
@@ -32,7 +32,7 @@ export const ResetPasswordPage = () => {
   const [error, setError] = useState<string>();
   const [success, setSuccess] = useState(false);
   const [validationErrors, setValidationErrors] = useState<string[]>([]);
-  const authClient = useAuthClient();
+  const authClient = getAuthClientLazy();
 
   // Validate password on change
   useEffect(() => {

package/src/hooks/useAccessRules.ts

@@ -1,12 +1,11 @@
-import { usePluginClient } from "@checkstack/frontend-api";
+import { useApi, usePluginClient } from "@checkstack/frontend-api";
 import { AuthApi } from "@checkstack/auth-common";
-import { useAuthClient } from "../lib/auth-client";
+import { authApiRef } from "../api";
 
 export const useAccessRules = () => {
-  const authBetterClient = useAuthClient();
+  const authApi = useApi(authApiRef);
   const authClient = usePluginClient(AuthApi);
-  const { data: session, isPending: sessionPending } =
-    authBetterClient.useSession();
+  const { data: session, isPending: sessionPending } = authApi.useSession();
 
   // Query: Fetch access rules (only when user is authenticated)
   const { data, isLoading } = authClient.accessRules.useQuery(

package/src/index.tsx

@@ -24,6 +24,7 @@ import { ProfilePage } from "./components/ProfilePage";
 import { authApiRef, AuthApi, AuthSession } from "./api";
 import { getAuthClientLazy } from "./lib/auth-client";
 import { AuthAccessApi } from "./lib/AuthAccessApi";
+import { useSessionContext } from "./lib/SessionProvider";
 
 import { useNavigate } from "react-router-dom";
 import { Settings2, User } from "lucide-react";
@@ -107,12 +108,7 @@ class BetterAuthApi implements AuthApi {
   }
 
   useSession() {
-    const { data, isPending, error } = getAuthClientLazy().useSession();
-    return {
-      data: data as AuthSession | undefined,
-      isPending,
-      error: error as Error | undefined,
-    };
+    return useSessionContext();
   }
 }
 
@@ -120,6 +116,9 @@ class BetterAuthApi implements AuthApi {
 export { TeamAccessEditor } from "./components/TeamAccessEditor";
 export type { TeamAccessEditorProps } from "./components/TeamAccessEditor";
 
+// Re-export SessionProvider for App.tsx to wrap the component tree
+export { SessionProvider } from "./lib/SessionProvider";
+
 export const authPlugin = createFrontendPlugin({
   metadata: pluginMetadata,
   apis: [

package/src/lib/SessionProvider.tsx

@@ -0,0 +1,64 @@
+import React, { createContext, useContext } from "react";
+import { getAuthClientLazy } from "./auth-client";
+import type { AuthSession } from "../api";
+
+// =============================================================================
+// SESSION CONTEXT
+// =============================================================================
+
+interface SessionContextValue {
+  data: AuthSession | undefined;
+  isPending: boolean;
+  error: Error | undefined;
+}
+
+const SessionContext = createContext<SessionContextValue>({
+  data: undefined,
+  isPending: true,
+  error: undefined,
+});
+
+// =============================================================================
+// PROVIDER
+// =============================================================================
+
+/**
+ * SessionProvider fetches the session exactly once at the top of the tree
+ * and distributes the result via React context.
+ *
+ * All consumers calling `authApi.useSession()` read from this context
+ * instead of each independently fetching `/api/auth/get-session`.
+ *
+ * Must be placed inside RuntimeConfigProvider (needs baseUrl for the client).
+ */
+export const SessionProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => {
+  const { data, isPending, error } = getAuthClientLazy().useSession();
+
+  const value: SessionContextValue = {
+    data: data as AuthSession | undefined,
+    isPending,
+    error: error as Error | undefined,
+  };
+
+  return (
+    <SessionContext.Provider value={value}>{children}</SessionContext.Provider>
+  );
+};
+
+// =============================================================================
+// HOOK
+// =============================================================================
+
+/**
+ * Read session data from the SessionProvider context.
+ *
+ * This does NOT trigger a fetch — it reads the value provided by the
+ * single SessionProvider at the top of the tree.
+ *
+ * @throws If called outside a SessionProvider
+ */
+export function useSessionContext(): SessionContextValue {
+  return useContext(SessionContext);
+}

package/src/lib/auth-client.ts

@@ -1,35 +1,20 @@
-import { useMemo } from "react";
 import { createAuthClient } from "better-auth/react";
-import {
-  useRuntimeConfig,
-  getCachedRuntimeConfig,
-} from "@checkstack/frontend-api";
+import { getCachedRuntimeConfig } from "@checkstack/frontend-api";
 
 // Cache for lazy-initialized client
 let cachedClient: ReturnType<typeof createAuthClient> | undefined;
 let cachedBaseUrl: string | undefined;
 
 /**
- * React hook to get the auth client with proper runtime config.
- * Uses RuntimeConfigProvider to get the base URL.
- */
-export function useAuthClient() {
-  const { baseUrl } = useRuntimeConfig();
-
-  return useMemo(
-    () =>
-      createAuthClient({
-        baseURL: baseUrl,
-        basePath: "/api/auth",
-      }),
-    [baseUrl]
-  );
-}
-
-/**
- * Lazy-initialized auth client for class-based APIs.
+ * Lazy-initialized auth client for imperative (non-hook) APIs like
+ * `getAuthClientLazy().listAccounts()` or `getAuthClientLazy().signOut()`.
+ *
  * Uses the cached runtime config from RuntimeConfigProvider.
  *
+ * IMPORTANT: Do NOT call `.useSession()` on this client from components.
+ * Use `authApi.useSession()` (via `useApi(authApiRef)`) instead — it reads
+ * from the shared SessionProvider context and does not trigger extra fetches.
+ *
  * Note: This should only be called AFTER RuntimeConfigProvider has loaded.
  * Components rendered inside the provider tree are guaranteed to have config available.
  */
@@ -48,3 +33,4 @@ export function getAuthClientLazy(): ReturnType<typeof createAuthClient> {
 
   return cachedClient;
 }
+