create-brainerce-store 1.6.1 → 1.8.0

package/templates/nextjs/base/src/lib/auth.ts

@@ -0,0 +1,148 @@
+/**
+ * Client-side auth helpers that call the BFF proxy API routes.
+ * All mutating requests include the CSRF header.
+ * The token is managed server-side via httpOnly cookies — never exposed to JS.
+ */
+
+const CONNECTION_ID = process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID || '';
+
+const CSRF_HEADERS: Record<string, string> = {
+  'Content-Type': 'application/json',
+  'X-Requested-With': 'brainerce',
+};
+
+interface LoginResult {
+  customer: {
+    id: string;
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    emailVerified: boolean;
+  };
+  expiresAt: string;
+  requiresVerification?: boolean;
+}
+
+interface RegisterResult {
+  customer: {
+    id: string;
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    emailVerified: boolean;
+  };
+  expiresAt: string;
+  requiresVerification?: boolean;
+}
+
+interface AuthStatus {
+  isLoggedIn: boolean;
+  customer?: {
+    id: string;
+    email: string;
+    firstName?: string;
+    lastName?: string;
+    phone?: string;
+    emailVerified: boolean;
+  };
+  error?: string;
+}
+
+interface VerifyEmailResult {
+  verified: boolean;
+  message?: string;
+}
+
+async function handleResponse<T>(response: Response): Promise<T> {
+  const data = await response.json();
+  if (!response.ok) {
+    throw new Error(data.message || data.error || `Request failed (${response.status})`);
+  }
+  return data as T;
+}
+
+/**
+ * Login via BFF proxy. The proxy sets the httpOnly cookie on success.
+ */
+export async function proxyLogin(email: string, password: string): Promise<LoginResult> {
+  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/login`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify({ email, password }),
+  });
+  return handleResponse<LoginResult>(response);
+}
+
+/**
+ * Register via BFF proxy. The proxy sets the httpOnly cookie on success.
+ */
+export async function proxyRegister(data: {
+  firstName: string;
+  lastName: string;
+  email: string;
+  password: string;
+}): Promise<RegisterResult> {
+  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/register`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify(data),
+  });
+  return handleResponse<RegisterResult>(response);
+}
+
+/**
+ * Check auth status. Reads httpOnly cookie server-side and validates with backend.
+ */
+export async function checkAuthStatus(): Promise<AuthStatus> {
+  const response = await fetch('/api/auth/me');
+  return response.json();
+}
+
+/**
+ * Logout. Clears httpOnly auth cookies server-side.
+ */
+export async function proxyLogout(): Promise<void> {
+  await fetch('/api/auth/logout', {
+    method: 'POST',
+    headers: { 'X-Requested-With': 'brainerce' },
+  });
+}
+
+/**
+ * Verify email via BFF proxy. The auth token is in the httpOnly cookie (set during login/register).
+ * The proxy adds the Authorization header automatically.
+ */
+export async function proxyVerifyEmail(code: string): Promise<VerifyEmailResult> {
+  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/verify-email`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify({ code }),
+  });
+  return handleResponse<VerifyEmailResult>(response);
+}
+
+/**
+ * Resend verification email via BFF proxy.
+ * Uses the auth token from the httpOnly cookie.
+ */
+export async function proxyResendVerification(): Promise<{ message: string }> {
+  const response = await fetch(`/api/store/api/vc/${CONNECTION_ID}/customers/resend-verification`, {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+  });
+  return handleResponse<{ message: string }>(response);
+}
+
+/**
+ * Reset password via BFF proxy.
+ * The reset token is in an httpOnly cookie (set by /api/auth/reset-callback when the user
+ * clicked the email link). The proxy reads it server-side — the token never reaches client JS.
+ */
+export async function proxyResetPassword(newPassword: string): Promise<{ message: string }> {
+  const response = await fetch('/api/auth/reset-password', {
+    method: 'POST',
+    headers: CSRF_HEADERS,
+    body: JSON.stringify({ newPassword }),
+  });
+  return handleResponse<{ message: string }>(response);
+}

package/templates/nextjs/base/src/lib/brainerce.ts.ejs

@@ -1,39 +1,24 @@
 import { BrainerceClient } from 'brainerce';
 
 const CONNECTION_ID = process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID || '<%= connectionId %>';
-const API_URL = process.env.NEXT_PUBLIC_BRAINERCE_API_URL || '<%= apiBaseUrl %>';
 
-// Singleton SDK client
+// Singleton SDK client — routes through same-origin BFF proxy for httpOnly cookie auth
 let clientInstance: BrainerceClient | null = null;
 
 export function getClient(): BrainerceClient {
   if (!clientInstance) {
     clientInstance = new BrainerceClient({
       connectionId: CONNECTION_ID,
-      baseUrl: API_URL,
+      baseUrl: '/api/store', // same-origin proxy handles auth via httpOnly cookie
+      proxyMode: true, // skip client-side token checks; proxy adds Authorization header
     });
   }
   return clientInstance;
 }
 
-// Auth token helpers
-const TOKEN_KEY = 'brainerce_customer_token';
+// Cart ID helpers (not a security token — safe in localStorage)
 const CART_ID_KEY = 'brainerce_cart_id';
 
-export function getStoredToken(): string | null {
-  if (typeof window === 'undefined') return null;
-  return localStorage.getItem(TOKEN_KEY);
-}
-
-export function setStoredToken(token: string | null): void {
-  if (typeof window === 'undefined') return;
-  if (token) {
-    localStorage.setItem(TOKEN_KEY, token);
-  } else {
-    localStorage.removeItem(TOKEN_KEY);
-  }
-}
-
 export function getStoredCartId(): string | null {
   if (typeof window === 'undefined') return null;
   return localStorage.getItem(CART_ID_KEY);
@@ -48,12 +33,7 @@ export function setStoredCartId(cartId: string | null): void {
   }
 }
 
-// Initialize client with stored auth
+// Initialize client (no token hydration — auth handled by httpOnly cookie)
 export function initClient(): BrainerceClient {
-  const client = getClient();
-  const token = getStoredToken();
-  if (token) {
-    client.setCustomerToken(token);
-  }
-  return client;
+  return getClient();
 }

package/templates/nextjs/base/src/middleware.ts

@@ -0,0 +1,25 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const TOKEN_COOKIE = 'brainerce_customer_token';
+
+/** Routes that require customer authentication */
+const PROTECTED_PATHS = ['/account'];
+
+export function middleware(request: NextRequest) {
+  const { pathname } = request.nextUrl;
+  const isProtected = PROTECTED_PATHS.some((p) => pathname.startsWith(p));
+
+  if (isProtected) {
+    const token = request.cookies.get(TOKEN_COOKIE);
+    if (!token?.value) {
+      const loginUrl = new URL('/login', request.url);
+      return NextResponse.redirect(loginUrl);
+    }
+  }
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: ['/account/:path*'],
+};

package/templates/nextjs/base/src/providers/store-provider.tsx.ejs

@@ -1,9 +1,10 @@
 'use client';
 
 import React, { createContext, useContext, useEffect, useState, useCallback } from 'react';
-import type { StoreInfo, Cart } from 'brainerce';
+import type { StoreInfo, Cart, CustomerProfile } from 'brainerce';
 import { getCartTotals } from 'brainerce';
-import { getClient, initClient, getStoredToken, setStoredToken, setStoredCartId } from '@/lib/brainerce';
+import { getClient, initClient, setStoredCartId } from '@/lib/brainerce';
+import { checkAuthStatus, proxyLogout } from '@/lib/auth';
 
 // ---- Store Info Context ----
 interface StoreInfoContextValue {
@@ -24,17 +25,17 @@ export function useStoreInfo() {
 interface AuthContextValue {
   isLoggedIn: boolean;
   authLoading: boolean;
-  token: string | null;
-  login: (token: string) => void;
-  logout: () => void;
+  customer: CustomerProfile | null;
+  login: () => Promise<void>;
+  logout: () => Promise<void>;
 }
 
 const AuthContext = createContext<AuthContextValue>({
   isLoggedIn: false,
   authLoading: true,
-  token: null,
-  login: () => {},
-  logout: () => {},
+  customer: null,
+  login: async () => {},
+  logout: async () => {},
 });
 
 export function useAuth() {
@@ -66,26 +67,46 @@ export function useCart() {
 export function StoreProvider({ children }: { children: React.ReactNode }) {
   const [storeInfo, setStoreInfo] = useState<StoreInfo | null>(null);
   const [storeLoading, setStoreLoading] = useState(true);
-  const [token, setToken] = useState<string | null>(null);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [customer, setCustomer] = useState<CustomerProfile | null>(null);
   const [authLoading, setAuthLoading] = useState(true);
   const [cart, setCart] = useState<Cart | null>(null);
   const [cartLoading, setCartLoading] = useState(true);
 
-  // Initialize client and auth
+  // Check auth status via httpOnly cookie (server-side validation)
+  const refreshAuth = useCallback(async () => {
+    try {
+      const status = await checkAuthStatus();
+      setIsLoggedIn(status.isLoggedIn);
+      setCustomer(status.isLoggedIn ? (status.customer as CustomerProfile) : null);
+    } catch {
+      setIsLoggedIn(false);
+      setCustomer(null);
+    } finally {
+      setAuthLoading(false);
+    }
+  }, []);
+
+  // Initialize client, check auth, and fetch store info
   useEffect(() => {
     const client = initClient();
-    const stored = getStoredToken();
-    if (stored) {
-      setToken(stored);
+
+    // Optimistic check: if brainerce_logged_in cookie exists, assume logged in
+    // while we validate the actual token server-side
+    if (typeof document !== 'undefined' && document.cookie.includes('brainerce_logged_in=1')) {
+      setIsLoggedIn(true);
     }
-    setAuthLoading(false);
 
+    // Validate auth token server-side
+    refreshAuth();
+
+    // Fetch store info (public, no auth needed)
     client
       .getStoreInfo()
       .then(setStoreInfo)
       .catch(console.error)
       .finally(() => setStoreLoading(false));
-  }, []);
+  }, [refreshAuth]);
 
   // Cart management
   const refreshCart = useCallback(async () => {
@@ -108,24 +129,26 @@ export function StoreProvider({ children }: { children: React.ReactNode }) {
 
   useEffect(() => {
     refreshCart();
-  }, [refreshCart, token]);
+  }, [refreshCart, isLoggedIn]);
 
-  const login = useCallback((newToken: string) => {
-    const client = getClient();
-    client.setCustomerToken(newToken);
-    setStoredToken(newToken);
-    setToken(newToken);
+  // Called after successful login (cookie already set by proxy)
+  const login = useCallback(async () => {
+    // Refresh auth state from server (reads httpOnly cookie)
+    await refreshAuth();
 
     // Merge guest session cart into customer cart
+    const client = getClient();
     client.syncCartOnLogin().catch(console.error);
-  }, []);
+  }, [refreshAuth]);
+
+  const logout = useCallback(async () => {
+    // Clear httpOnly cookie server-side
+    await proxyLogout();
 
-  const logout = useCallback(() => {
     const client = getClient();
-    client.clearCustomerToken();
     client.onLogout();
-    setStoredToken(null);
-    setToken(null);
+    setIsLoggedIn(false);
+    setCustomer(null);
     setCart(null);
     refreshCart();
   }, [refreshCart]);
@@ -138,7 +161,7 @@ export function StoreProvider({ children }: { children: React.ReactNode }) {
 
   return (
     <StoreInfoContext.Provider value={{ storeInfo, loading: storeLoading }}>
-      <AuthContext.Provider value={{ isLoggedIn: !!token, authLoading, token, login, logout }}>
+      <AuthContext.Provider value={{ isLoggedIn, authLoading, customer, login, logout }}>
         <CartContext.Provider
           value={{ cart, cartLoading, refreshCart, itemCount, totals }}
         >