@doswiftly/cli 0.1.18 → 0.1.20

package/templates/storefront-nextjs-shadcn/graphql/custom.example.graphql

@@ -0,0 +1,159 @@
+# ============================================================================
+# Custom GraphQL Operations — Example File
+# ============================================================================
+#
+# How to add custom queries/mutations to your storefront:
+#
+# 1. Create a .graphql file in this directory (e.g. graphql/my-queries.graphql)
+# 2. Run `pnpm run codegen` to generate TypeScript types
+# 3. Import the generated Document constant from @/generated/graphql
+#
+# Example usage in components:
+#
+#   // Server Component
+#   import { request } from '@/lib/graphql/server';
+#   import { GetFeaturedProductsDocument } from '@/generated/graphql';
+#   const data = await request(GetFeaturedProductsDocument, { first: 6 });
+#
+#   // Client Component
+#   import { useGraphQLQuery } from '@/lib/graphql/hooks';
+#   import { GetFeaturedProductsDocument } from '@/generated/graphql';
+#   const { data } = useGraphQLQuery(GetFeaturedProductsDocument, { first: 6 });
+#
+# To activate these examples, rename this file to custom.graphql and run codegen.
+# ============================================================================
+
+# Get featured products with specific fields
+query GetFeaturedProducts($first: Int = 6) {
+  products(first: $first, query: "tag:featured") {
+    edges {
+      node {
+        id
+        handle
+        title
+        description
+        featuredImage {
+          url
+          altText
+          width
+          height
+        }
+        priceRange {
+          minVariantPrice {
+            amount
+            currencyCode
+          }
+        }
+      }
+      cursor
+    }
+    pageInfo {
+      hasNextPage
+      endCursor
+    }
+  }
+}
+
+# Search products with filters (category, price, attributes)
+query SearchProductsWithFilters(
+  $query: String!
+  $first: Int = 20
+  $after: String
+  $filters: ProductFilterInput
+) {
+  products(
+    query: $query
+    first: $first
+    after: $after
+    filters: $filters
+  ) {
+    edges {
+      node {
+        id
+        handle
+        title
+        vendor
+        productType
+        featuredImage {
+          url
+          altText
+        }
+        priceRange {
+          minVariantPrice {
+            amount
+            currencyCode
+          }
+          maxVariantPrice {
+            amount
+            currencyCode
+          }
+        }
+      }
+      cursor
+    }
+    pageInfo {
+      hasNextPage
+      hasPreviousPage
+      startCursor
+      endCursor
+    }
+    totalCount
+  }
+}
+
+# Get collection with products (inline — useful when collection page needs custom fields)
+query GetCollectionWithProducts(
+  $handle: String!
+  $first: Int = 20
+  $after: String
+) {
+  collection(handle: $handle) {
+    id
+    title
+    description
+    descriptionHtml
+    image {
+      url
+      altText
+    }
+    seo {
+      title
+      description
+    }
+    products(first: $first, after: $after) {
+      edges {
+        node {
+          id
+          handle
+          title
+          description
+          featuredImage {
+            url
+            altText
+          }
+          priceRange {
+            minVariantPrice {
+              amount
+              currencyCode
+              baseAmount
+              baseCurrencyCode
+              isConverted
+            }
+          }
+          vendor
+          productType
+          tags
+          totalInventory
+        }
+        cursor
+      }
+      pageInfo {
+        hasNextPage
+        hasPreviousPage
+        startCursor
+        endCursor
+      }
+      totalCount
+    }
+  }
+}

package/templates/storefront-nextjs-shadcn/hooks/index.ts

@@ -3,7 +3,10 @@
  */
 
 export { useAuth } from "./use-auth";
+export type { LoginResult, LogoutResult, TokenRenewResult } from "./use-auth";
+export { useAuthSync } from "./use-auth-sync";
 export { useCartSync } from "./use-cart-sync";
 export { useCartActions } from "./use-cart-actions";
+export { useCartDI } from "./use-cart-di";
 export { useFilterParams } from "./use-filter-params";
 export type { UseFilterParamsReturn, UseFilterParamsOptions } from "./use-filter-params";

package/templates/storefront-nextjs-shadcn/hooks/use-auth-sync.ts

@@ -0,0 +1,42 @@
+'use client';
+
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';
+import { useAuthStore, useAuthHydrated } from '@doswiftly/storefront-sdk/react';
+import { createAuthTokenClient } from '@doswiftly/storefront-sdk';
+
+const { clearToken } = createAuthTokenClient();
+
+/**
+ * Detects and fixes auth state desync between httpOnly cookie and Zustand store.
+ *
+ * When server says authenticated (cookie exists → initialIsAuthenticated: true)
+ * but store has no accessToken after persist hydration (localStorage empty/cleared),
+ * the client can't make authenticated GraphQL requests.
+ *
+ * Fix: clear the stale cookie, reset auth state, redirect to login.
+ * The user re-authenticates once, which correctly populates both cookie AND localStorage.
+ */
+export function useAuthSync() {
+  const router = useRouter();
+  const isAuthenticated = useAuthStore((s) => s.isAuthenticated);
+  const accessToken = useAuthStore((s) => s.accessToken);
+  const clearAuth = useAuthStore((s) => s.clearAuth);
+  const authHydrated = useAuthHydrated();
+
+  useEffect(() => {
+    if (!authHydrated) return;
+
+    // Desync: cookie exists (isAuthenticated: true from server) but no token in store
+    if (isAuthenticated && !accessToken) {
+      // Reset store state immediately
+      clearAuth();
+      // Clear stale cookie THEN redirect — must await so proxy sees cleared cookie
+      clearToken()
+        .catch(() => {})
+        .finally(() => {
+          router.push('/auth/login');
+        });
+    }
+  }, [authHydrated, isAuthenticated, accessToken, clearAuth, router]);
+}

package/templates/storefront-nextjs-shadcn/hooks/use-auth.ts

@@ -1,310 +1,32 @@
 /**
- * Authentication Hook
+ * useAuth — thin wrapper around SDK's useAuth with template-specific integrations.
  *
- * Provides login, logout, and authentication state management.
- *
- * Security Model:
- * 1. Login: Calls GraphQL mutation → Stores token in httpOnly cookie via API route
- * 2. Logout: Calls GraphQL mutation → Clears httpOnly cookie via API route
- * 3. Token validation: Happens on GraphQL backend (not client-side)
- *
- * Usage:
- * - Login/Register pages: Call login() after successful mutation
- * - Protected pages: Use AuthGuard component (checks cookie existence)
- * - Logout button: Call logout() to clear session
- *
- * @see lib/auth/cookies.ts - Cookie helper functions
- * @see lib/auth/routes.ts - Route configuration
- * @see proxy.ts - Server-side route protection
- *
- * @example
- * ```tsx
- * function LoginForm() {
- *   const { login, isLoading, error } = useAuth();
- *
- *   const handleSubmit = async (e) => {
- *     e.preventDefault();
- *     const result = await login(email, password);
- *     if (result.userErrors.length === 0) {
- *       // Success - redirected to /account
- *     }
- *   };
- *
- *   return <form onSubmit={handleSubmit}>...</form>;
- * }
- * ```
+ * Adds:
+ * - httpOnly cookie management via API routes (onSetToken/onClearToken)
+ * - React Query cache invalidation on login/logout
  */
 
-"use client";
+'use client';
 
-import { useState } from "react";
-import { useRouter, useSearchParams } from "next/navigation";
-import { useMutation, useQueryClient } from "@tanstack/react-query";
-import { getGraphQLClient } from "@/lib/graphql/client";
-import {
-  CustomerLoginDocument,
-  CustomerLogoutDocument,
-  CustomerTokenRenewDocument,
-  type CustomerLoginMutation,
-  type CustomerLogoutMutation,
-  type CustomerTokenRenewMutation,
-} from "@/generated/graphql";
-import { setAuthToken, clearAuthToken, getAuthToken } from "@/lib/auth/cookies";
-import { redirects } from "@/lib/auth/routes";
+import { useAuth as useSDKAuth, type LoginResult, type LogoutResult, type TokenRenewResult } from '@doswiftly/storefront-sdk/react';
+import { createAuthTokenClient } from '@doswiftly/storefront-sdk';
+import { useQueryClient } from '@tanstack/react-query';
 
-/**
- * Login input
- */
-export interface LoginInput {
-  email: string;
-  password: string;
-}
-
-/**
- * Login result
- */
-export interface LoginResult {
-  success: boolean;
-  userErrors: Array<{ message: string; field?: string[] }>;
-  accessToken?: string;
-  expiresAt?: string;
-}
-
-/**
- * Logout result
- */
-export interface LogoutResult {
-  success: boolean;
-  userErrors: Array<{ message: string; field?: string[] }>;
-}
+export type { LoginResult, LogoutResult, TokenRenewResult };
 
-/**
- * Token renew result
- */
-export interface TokenRenewResult {
-  success: boolean;
-  userErrors: Array<{ message: string; field?: string[] }>;
-  accessToken?: string;
-  expiresAt?: string;
-}
+const { setToken, clearToken } = createAuthTokenClient();
 
-/**
- * Authentication hook
- */
 export function useAuth() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
   const queryClient = useQueryClient();
-  const client = getGraphQLClient();
-
-  const [error, setError] = useState<string | null>(null);
-
-  /**
-   * Login mutation
-   */
-  const loginMutation = useMutation({
-    mutationFn: async (input: LoginInput): Promise<LoginResult> => {
-      const data = await client.request<CustomerLoginMutation>(
-        CustomerLoginDocument,
-        { input }
-      );
-
-      const { customerAccessToken, userErrors } =
-        data.customerAccessTokenCreate;
-
-      if (userErrors && userErrors.length > 0) {
-        return {
-          success: false,
-          userErrors: userErrors.map((e: any) => ({
-            message: e.message,
-            field: e.field || undefined,
-          })),
-        };
-      }
-
-      if (!customerAccessToken) {
-        return {
-          success: false,
-          userErrors: [{ message: "Failed to create access token" }],
-        };
-      }
-
-      // Store token in httpOnly cookie via API route
-      await setAuthToken(customerAccessToken.accessToken);
-
-      return {
-        success: true,
-        userErrors: [],
-        accessToken: customerAccessToken.accessToken,
-        expiresAt: customerAccessToken.expiresAt,
-      };
-    },
-    onSuccess: (result: LoginResult) => {
-      if (result.success) {
-        // Clear any cached queries that might need authentication
-        queryClient.invalidateQueries();
 
-        // Redirect to original destination or account page
-        const redirect = searchParams.get("redirect");
-        router.push(redirect || redirects.authenticated);
-      }
+  return useSDKAuth({
+    onSetToken: async (token: string) => {
+      await setToken(token);
+      queryClient.invalidateQueries();
     },
-    onError: (err: unknown) => {
-      setError(err instanceof Error ? err.message : "Login failed");
+    onClearToken: async () => {
+      await clearToken();
+      queryClient.clear();
     },
   });
-
-  /**
-   * Logout mutation
-   */
-  const logoutMutation = useMutation({
-    mutationFn: async (): Promise<LogoutResult> => {
-      const token = getAuthToken();
-
-      if (!token) {
-        // No token to logout
-        return {
-          success: true,
-          userErrors: [],
-        };
-      }
-
-      const data = await client.request<CustomerLogoutMutation>(
-        CustomerLogoutDocument,
-        { customerAccessToken: token }
-      );
-
-      const { userErrors } = data.customerAccessTokenDelete;
-
-      if (userErrors && userErrors.length > 0) {
-        return {
-          success: false,
-          userErrors: userErrors.map((e: any) => ({
-            message: e.message,
-            field: e.field || undefined,
-          })),
-        };
-      }
-
-      // Clear httpOnly cookie via API route
-      await clearAuthToken();
-
-      return {
-        success: true,
-        userErrors: [],
-      };
-    },
-    onSuccess: (result: LogoutResult) => {
-      if (result.success) {
-        // Clear all cached queries
-        queryClient.clear();
-
-        // Redirect to home page
-        router.push("/");
-      }
-    },
-    onError: (err: unknown) => {
-      setError(err instanceof Error ? err.message : "Logout failed");
-    },
-  });
-
-  /**
-   * Token renew mutation
-   */
-  const renewTokenMutation = useMutation({
-    mutationFn: async (): Promise<TokenRenewResult> => {
-      const token = getAuthToken();
-
-      if (!token) {
-        return {
-          success: false,
-          userErrors: [{ message: "No token to renew" }],
-        };
-      }
-
-      const data = await client.request<CustomerTokenRenewMutation>(
-        CustomerTokenRenewDocument,
-        { customerAccessToken: token }
-      );
-
-      const { customerAccessToken, userErrors } =
-        data.customerAccessTokenRenew;
-
-      if (userErrors && userErrors.length > 0) {
-        return {
-          success: false,
-          userErrors: userErrors.map((e: any) => ({
-            message: e.message,
-            field: e.field || undefined,
-          })),
-        };
-      }
-
-      if (!customerAccessToken) {
-        return {
-          success: false,
-          userErrors: [{ message: "Failed to renew access token" }],
-        };
-      }
-
-      // Update token in httpOnly cookie via API route
-      await setAuthToken(customerAccessToken.accessToken);
-
-      return {
-        success: true,
-        userErrors: [],
-        accessToken: customerAccessToken.accessToken,
-        expiresAt: customerAccessToken.expiresAt,
-      };
-    },
-    onError: (err: unknown) => {
-      setError(err instanceof Error ? err.message : "Token renewal failed");
-    },
-  });
-
-  /**
-   * Login function
-   */
-  const login = async (email: string, password: string): Promise<LoginResult> => {
-    setError(null);
-    return loginMutation.mutateAsync({ email, password });
-  };
-
-  /**
-   * Logout function
-   */
-  const logout = async (): Promise<LogoutResult> => {
-    setError(null);
-    return logoutMutation.mutateAsync();
-  };
-
-  /**
-   * Renew token function
-   */
-  const renewToken = async (): Promise<TokenRenewResult> => {
-    setError(null);
-    return renewTokenMutation.mutateAsync();
-  };
-
-  return {
-    // Functions
-    login,
-    logout,
-    renewToken,
-
-    // State
-    isLoggingIn: loginMutation.isPending,
-    isLoggingOut: logoutMutation.isPending,
-    isRenewingToken: renewTokenMutation.isPending,
-    isLoading:
-      loginMutation.isPending ||
-      logoutMutation.isPending ||
-      renewTokenMutation.isPending,
-    error,
-
-    // Results
-    loginResult: loginMutation.data,
-    logoutResult: logoutMutation.data,
-    renewResult: renewTokenMutation.data,
-  };
 }