create-brainerce-store 1.6.1 → 1.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-brainerce-store",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "description": "Scaffold a production-ready e-commerce storefront connected to Brainerce",
   "bin": {
     "create-brainerce-store": "dist/index.js"

package/templates/nextjs/base/.env.local.ejs

@@ -1,3 +1,5 @@
 # Brainerce Connection
 NEXT_PUBLIC_BRAINERCE_CONNECTION_ID=<%= connectionId %>
-NEXT_PUBLIC_BRAINERCE_API_URL=<%= apiBaseUrl %>
+
+# Backend API URL (server-side only — used by BFF proxy, never exposed to browser)
+BRAINERCE_API_URL=<%= apiBaseUrl %>

package/templates/nextjs/base/src/app/api/auth/logout/route.ts

@@ -0,0 +1,14 @@
+import { NextResponse } from 'next/server';
+
+const TOKEN_COOKIE = 'brainerce_customer_token';
+const LOGGED_IN_COOKIE = 'brainerce_logged_in';
+
+/**
+ * Logout endpoint. Clears auth cookies.
+ */
+export async function POST() {
+  const response = NextResponse.json({ success: true });
+  response.cookies.delete(TOKEN_COOKIE);
+  response.cookies.delete(LOGGED_IN_COOKIE);
+  return response;
+}

package/templates/nextjs/base/src/app/api/auth/me/route.ts

@@ -0,0 +1,49 @@
+import { NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+
+const BACKEND_URL = (process.env.BRAINERCE_API_URL || 'https://api.brainerce.com').replace(
+  /\/$/,
+  ''
+);
+
+const CONNECTION_ID = process.env.NEXT_PUBLIC_BRAINERCE_CONNECTION_ID || '';
+
+const TOKEN_COOKIE = 'brainerce_customer_token';
+const LOGGED_IN_COOKIE = 'brainerce_logged_in';
+
+/**
+ * Auth status check endpoint.
+ * Reads the httpOnly cookie, validates against backend, returns auth state.
+ */
+export async function GET() {
+  const cookieStore = await cookies();
+  const tokenCookie = cookieStore.get(TOKEN_COOKIE);
+
+  if (!tokenCookie?.value) {
+    return NextResponse.json({ isLoggedIn: false });
+  }
+
+  try {
+    // Validate token by calling backend profile endpoint
+    const response = await fetch(`${BACKEND_URL}/api/vc/${CONNECTION_ID}/customers/me`, {
+      headers: {
+        Authorization: `Bearer ${tokenCookie.value}`,
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!response.ok) {
+      // Token is invalid or expired — clear cookies
+      const res = NextResponse.json({ isLoggedIn: false });
+      res.cookies.delete(TOKEN_COOKIE);
+      res.cookies.delete(LOGGED_IN_COOKIE);
+      return res;
+    }
+
+    const customer = await response.json();
+    return NextResponse.json({ isLoggedIn: true, customer });
+  } catch {
+    // Backend unreachable — don't clear cookies, might be temporary
+    return NextResponse.json({ isLoggedIn: false, error: 'Service unavailable' }, { status: 503 });
+  }
+}

package/templates/nextjs/base/src/app/api/auth/oauth-callback/route.ts

@@ -0,0 +1,59 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const TOKEN_COOKIE = 'brainerce_customer_token';
+const LOGGED_IN_COOKIE = 'brainerce_logged_in';
+const COOKIE_MAX_AGE = 7 * 24 * 60 * 60; // 7 days
+
+function isSecure(): boolean {
+  return process.env.NODE_ENV === 'production';
+}
+
+/**
+ * OAuth callback handler.
+ * The backend redirects here with ?token=jwt&oauth_success=true after OAuth code exchange.
+ * We set the httpOnly cookie and redirect to the client-side callback page (without the token).
+ */
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl;
+  const token = searchParams.get('token');
+  const oauthSuccess = searchParams.get('oauth_success');
+  const oauthError = searchParams.get('oauth_error');
+
+  // Build redirect URL to client-side callback page
+  const redirectUrl = new URL('/auth/callback', request.url);
+
+  if (oauthError) {
+    redirectUrl.searchParams.set('oauth_error', oauthError);
+    return NextResponse.redirect(redirectUrl);
+  }
+
+  if (oauthSuccess === 'true' && token) {
+    redirectUrl.searchParams.set('oauth_success', 'true');
+
+    const response = NextResponse.redirect(redirectUrl);
+
+    // Set httpOnly cookie with the token
+    response.cookies.set(TOKEN_COOKIE, token, {
+      httpOnly: true,
+      secure: isSecure(),
+      sameSite: 'lax',
+      path: '/',
+      maxAge: COOKIE_MAX_AGE,
+    });
+
+    // Set indicator cookie (readable by client JS)
+    response.cookies.set(LOGGED_IN_COOKIE, '1', {
+      httpOnly: false,
+      secure: isSecure(),
+      sameSite: 'lax',
+      path: '/',
+      maxAge: COOKIE_MAX_AGE,
+    });
+
+    return response;
+  }
+
+  // Fallback: no token or success flag
+  redirectUrl.searchParams.set('oauth_error', 'Authentication failed');
+  return NextResponse.redirect(redirectUrl);
+}

package/templates/nextjs/base/src/app/api/auth/reset-callback/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from 'next/server';
+
+const RESET_TOKEN_COOKIE = 'brainerce_reset_token';
+const RESET_TOKEN_MAX_AGE = 10 * 60; // 10 minutes
+
+function isSecure(): boolean {
+  return process.env.NODE_ENV === 'production';
+}
+
+/**
+ * Password-reset callback handler.
+ * The email link redirects here with ?token=... from the backend.
+ * We store the token in an httpOnly cookie and redirect to /reset-password (clean URL).
+ * This mirrors the OAuth callback pattern — the token never reaches client JS.
+ */
+export async function GET(request: NextRequest) {
+  const { searchParams } = request.nextUrl;
+  const token = searchParams.get('token');
+
+  if (!token) {
+    const redirectUrl = new URL('/forgot-password', request.url);
+    return NextResponse.redirect(redirectUrl);
+  }
+
+  const redirectUrl = new URL('/reset-password', request.url);
+  const response = NextResponse.redirect(redirectUrl);
+
+  // Set httpOnly cookie with the reset token (short-lived)
+  response.cookies.set(RESET_TOKEN_COOKIE, token, {
+    httpOnly: true,
+    secure: isSecure(),
+    sameSite: 'lax',
+    path: '/',
+    maxAge: RESET_TOKEN_MAX_AGE,
+  });
+
+  // Prevent token leaking via Referer header
+  response.headers.set('Referrer-Policy', 'no-referrer');
+
+  return response;
+}

package/templates/nextjs/base/src/app/api/auth/reset-password/route.ts

@@ -0,0 +1,68 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+
+const BACKEND_URL = (process.env.BRAINERCE_API_URL || 'https://api.brainerce.com').replace(
+  /\/$/,
+  ''
+);
+
+const CONNECTION_ID = process.env.BRAINERCE_CONNECTION_ID || '';
+
+const RESET_TOKEN_COOKIE = 'brainerce_reset_token';
+const CSRF_HEADER = 'x-requested-with';
+const CSRF_VALUE = 'brainerce';
+
+/**
+ * BFF endpoint for password reset.
+ * Reads the reset token from the httpOnly cookie (set by /api/auth/reset-callback)
+ * and proxies the request to the backend. The token never touches client JS.
+ */
+export async function POST(request: NextRequest) {
+  // CSRF check
+  const csrfHeader = request.headers.get(CSRF_HEADER);
+  if (csrfHeader !== CSRF_VALUE) {
+    return NextResponse.json({ error: 'CSRF validation failed' }, { status: 403 });
+  }
+
+  // Read reset token from httpOnly cookie
+  const cookieStore = await cookies();
+  const resetTokenCookie = cookieStore.get(RESET_TOKEN_COOKIE);
+
+  if (!resetTokenCookie?.value) {
+    return NextResponse.json(
+      { error: 'No reset token found. Please request a new password reset link.' },
+      { status: 400 }
+    );
+  }
+
+  // Parse request body
+  const body = await request.json();
+  const { newPassword } = body;
+
+  if (!newPassword) {
+    return NextResponse.json({ error: 'New password is required' }, { status: 400 });
+  }
+
+  // Proxy to backend
+  const backendUrl = `${BACKEND_URL}/api/vc/${CONNECTION_ID}/customers/reset-password`;
+
+  const backendResponse = await fetch(backendUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({
+      token: resetTokenCookie.value,
+      newPassword,
+    }),
+  });
+
+  const data = await backendResponse.json();
+
+  const response = NextResponse.json(data, {
+    status: backendResponse.status,
+  });
+
+  // Always clear the reset token cookie after use (success or failure)
+  response.cookies.delete(RESET_TOKEN_COOKIE);
+
+  return response;
+}

package/templates/nextjs/base/src/app/api/store/[...path]/route.ts

@@ -0,0 +1,190 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { cookies } from 'next/headers';
+
+const BACKEND_URL = (process.env.BRAINERCE_API_URL || 'https://api.brainerce.com').replace(
+  /\/$/,
+  ''
+);
+
+const TOKEN_COOKIE = 'brainerce_customer_token';
+const LOGGED_IN_COOKIE = 'brainerce_logged_in';
+const CSRF_HEADER = 'x-requested-with';
+const CSRF_VALUE = 'brainerce';
+
+const COOKIE_MAX_AGE = 7 * 24 * 60 * 60; // 7 days
+
+/** Auth endpoints whose responses contain tokens to intercept */
+const AUTH_ENDPOINTS = ['customers/login', 'customers/register', 'customers/verify-email'];
+
+function isAuthEndpoint(path: string): boolean {
+  return AUTH_ENDPOINTS.some((ep) => path.endsWith(ep));
+}
+
+function isSecure(): boolean {
+  return process.env.NODE_ENV === 'production';
+}
+
+function setAuthCookies(response: NextResponse, token: string): void {
+  response.cookies.set(TOKEN_COOKIE, token, {
+    httpOnly: true,
+    secure: isSecure(),
+    sameSite: 'lax',
+    path: '/',
+    maxAge: COOKIE_MAX_AGE,
+  });
+  response.cookies.set(LOGGED_IN_COOKIE, '1', {
+    httpOnly: false,
+    secure: isSecure(),
+    sameSite: 'lax',
+    path: '/',
+    maxAge: COOKIE_MAX_AGE,
+  });
+}
+
+function clearAuthCookies(response: NextResponse): void {
+  response.cookies.delete(TOKEN_COOKIE);
+  response.cookies.delete(LOGGED_IN_COOKIE);
+}
+
+async function proxyRequest(
+  request: NextRequest,
+  params: { path: string[] }
+): Promise<NextResponse> {
+  const method = request.method;
+
+  // CSRF protection for mutating requests
+  if (['POST', 'PUT', 'PATCH', 'DELETE'].includes(method)) {
+    const csrfHeader = request.headers.get(CSRF_HEADER);
+    if (csrfHeader !== CSRF_VALUE) {
+      return NextResponse.json({ error: 'CSRF validation failed' }, { status: 403 });
+    }
+  }
+
+  // Build backend URL from path segments
+  const pathSegments = params.path.join('/');
+  const backendUrl = new URL(`${BACKEND_URL}/${pathSegments}`);
+
+  // Forward query parameters
+  request.nextUrl.searchParams.forEach((value, key) => {
+    backendUrl.searchParams.set(key, value);
+  });
+
+  // Build headers for backend request
+  const headers: Record<string, string> = {
+    'Content-Type': 'application/json',
+  };
+
+  // Forward SDK version header if present
+  const sdkVersion = request.headers.get('x-sdk-version');
+  if (sdkVersion) {
+    headers['X-SDK-Version'] = sdkVersion;
+  }
+
+  // Add auth token from httpOnly cookie
+  const cookieStore = await cookies();
+  const tokenCookie = cookieStore.get(TOKEN_COOKIE);
+  if (tokenCookie?.value) {
+    headers['Authorization'] = `Bearer ${tokenCookie.value}`;
+  }
+
+  // Forward request body for non-GET requests
+  let body: string | undefined;
+  if (method !== 'GET' && method !== 'HEAD') {
+    try {
+      body = await request.text();
+    } catch {
+      // No body
+    }
+  }
+
+  // Proxy the request to backend
+  let backendResponse: Response;
+  try {
+    backendResponse = await fetch(backendUrl.toString(), {
+      method,
+      headers,
+      body,
+    });
+  } catch (error) {
+    return NextResponse.json({ error: 'Backend service unavailable' }, { status: 502 });
+  }
+
+  // Read response body
+  const responseText = await backendResponse.text();
+
+  // For auth endpoints: intercept token, set cookie, strip token from response
+  if (backendResponse.ok && method === 'POST' && isAuthEndpoint(pathSegments)) {
+    try {
+      const data = JSON.parse(responseText);
+      if (data.token) {
+        const token = data.token;
+
+        // Strip token from client response
+        const { token: _stripped, ...safeData } = data;
+
+        const response = NextResponse.json(safeData, {
+          status: backendResponse.status,
+        });
+        setAuthCookies(response, token);
+        return response;
+      }
+    } catch {
+      // Not JSON or no token field — pass through
+    }
+  }
+
+  // Handle 401 responses: clear auth cookies
+  if (backendResponse.status === 401 && tokenCookie?.value) {
+    const response = new NextResponse(responseText, {
+      status: backendResponse.status,
+      headers: {
+        'Content-Type': backendResponse.headers.get('Content-Type') || 'application/json',
+      },
+    });
+    clearAuthCookies(response);
+    return response;
+  }
+
+  // Pass through response as-is
+  return new NextResponse(responseText, {
+    status: backendResponse.status,
+    headers: {
+      'Content-Type': backendResponse.headers.get('Content-Type') || 'application/json',
+    },
+  });
+}
+
+export async function GET(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  return proxyRequest(request, await params);
+}
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  return proxyRequest(request, await params);
+}
+
+export async function PUT(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  return proxyRequest(request, await params);
+}
+
+export async function PATCH(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  return proxyRequest(request, await params);
+}
+
+export async function DELETE(
+  request: NextRequest,
+  { params }: { params: Promise<{ path: string[] }> }
+) {
+  return proxyRequest(request, await params);
+}

package/templates/nextjs/base/src/app/auth/callback/page.tsx

@@ -1,90 +1,92 @@
-'use client';
-
-import { Suspense, useEffect, useState, useRef } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
-import { useAuth } from '@/providers/store-provider';
-import { LoadingSpinner } from '@/components/shared/loading-spinner';
-import { useTranslations } from '@/lib/translations';
-
-function OAuthCallbackContent() {
-  const router = useRouter();
-  const searchParams = useSearchParams();
-  const auth = useAuth();
-  const [error, setError] = useState<string | null>(null);
-  const processedRef = useRef(false);
-  const t = useTranslations('auth');
-
-  const oauthSuccess = searchParams.get('oauth_success');
-  const token = searchParams.get('token');
-  const oauthError = searchParams.get('oauth_error');
-
-  useEffect(() => {
-    // Prevent double-processing in React StrictMode
-    if (processedRef.current) return;
-    processedRef.current = true;
-
-    if (oauthError) {
-      setError(oauthError);
-      return;
-    }
-
-    if (oauthSuccess === 'true' && token) {
-      auth.login(token);
-      router.push('/');
-    } else {
-      setError(t('authFailedDesc'));
-    }
-  }, [oauthSuccess, token, oauthError, auth, router]);
-
-  if (error) {
-    return (
-      <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
-        <div className="w-full max-w-md space-y-4 text-center">
-          <svg
-            className="text-destructive mx-auto h-12 w-12"
-            fill="none"
-            viewBox="0 0 24 24"
-            stroke="currentColor"
-          >
-            <path
-              strokeLinecap="round"
-              strokeLinejoin="round"
-              strokeWidth={1.5}
-              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.834-2.694-.834-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
-            />
-          </svg>
-          <h1 className="text-foreground text-2xl font-bold">{t('authFailed')}</h1>
-          <p className="text-muted-foreground text-sm">{error}</p>
-          <button
-            type="button"
-            onClick={() => router.push('/login')}
-            className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-          >
-            {t('backToLogin')}
-          </button>
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 py-12">
-      <LoadingSpinner size="lg" />
-      <p className="text-muted-foreground mt-4">{t('completingSignIn')}</p>
-    </div>
-  );
-}
-
-export default function OAuthCallbackPage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-[60vh] items-center justify-center">
-          <LoadingSpinner size="lg" />
-        </div>
-      }
-    >
-      <OAuthCallbackContent />
-    </Suspense>
-  );
-}
+'use client';
+
+import { Suspense, useEffect, useState, useRef } from 'react';
+import { useRouter, useSearchParams } from 'next/navigation';
+import { useAuth } from '@/providers/store-provider';
+import { LoadingSpinner } from '@/components/shared/loading-spinner';
+import { useTranslations } from '@/lib/translations';
+
+function OAuthCallbackContent() {
+  const router = useRouter();
+  const searchParams = useSearchParams();
+  const auth = useAuth();
+  const [error, setError] = useState<string | null>(null);
+  const processedRef = useRef(false);
+  const t = useTranslations('auth');
+
+  const oauthSuccess = searchParams.get('oauth_success');
+  const oauthError = searchParams.get('oauth_error');
+  // Token is no longer in URL — it was set as httpOnly cookie by /api/auth/oauth-callback
+
+  useEffect(() => {
+    // Prevent double-processing in React StrictMode
+    if (processedRef.current) return;
+    processedRef.current = true;
+
+    if (oauthError) {
+      setError(oauthError);
+      return;
+    }
+
+    if (oauthSuccess === 'true') {
+      // Cookie was already set by the API route; refresh auth state
+      auth.login().then(() => {
+        router.push('/');
+      });
+    } else {
+      setError(t('authFailedDesc'));
+    }
+  }, [oauthSuccess, oauthError, auth, router, t]);
+
+  if (error) {
+    return (
+      <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+        <div className="w-full max-w-md space-y-4 text-center">
+          <svg
+            className="text-destructive mx-auto h-12 w-12"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.834-2.694-.834-3.464 0L3.34 16.5c-.77.833.192 2.5 1.732 2.5z"
+            />
+          </svg>
+          <h1 className="text-foreground text-2xl font-bold">{t('authFailed')}</h1>
+          <p className="text-muted-foreground text-sm">{error}</p>
+          <button
+            type="button"
+            onClick={() => router.push('/login')}
+            className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
+          >
+            {t('backToLogin')}
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4 py-12">
+      <LoadingSpinner size="lg" />
+      <p className="text-muted-foreground mt-4">{t('completingSignIn')}</p>
+    </div>
+  );
+}
+
+export default function OAuthCallbackPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-[60vh] items-center justify-center">
+          <LoadingSpinner size="lg" />
+        </div>
+      }
+    >
+      <OAuthCallbackContent />
+    </Suspense>
+  );
+}