create-brainerce-store 1.6.0 → 1.7.0

package/templates/nextjs/base/src/app/login/page.tsx

@@ -1,58 +1,59 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import { getClient } from '@/lib/brainerce';
-import { useAuth } from '@/providers/store-provider';
-import { LoginForm } from '@/components/auth/login-form';
-import { OAuthButtons } from '@/components/auth/oauth-buttons';
-import { useTranslations } from '@/lib/translations';
-
-export default function LoginPage() {
-  const router = useRouter();
-  const auth = useAuth();
-  const t = useTranslations('auth');
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleLogin(email: string, password: string) {
-    try {
-      setError(null);
-      const client = getClient();
-      const result = await client.loginCustomer(email, password);
-
-      if (result.requiresVerification) {
-        router.push(`/verify-email?token=${encodeURIComponent(result.token)}`);
-        return;
-      }
-
-      auth.login(result.token);
-      router.push('/');
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Login failed. Please try again.';
-      setError(message);
-    }
-  }
-
-  return (
-    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
-      <div className="w-full max-w-md space-y-6">
-        <div className="text-center">
-          <h1 className="text-foreground text-2xl font-bold">{t('welcomeBack')}</h1>
-          <p className="text-muted-foreground mt-1 text-sm">{t('signInSubtitle')}</p>
-        </div>
-
-        <LoginForm onSubmit={handleLogin} error={error} />
-
-        <OAuthButtons />
-
-        <p className="text-muted-foreground text-center text-sm">
-          {t('noAccount')}{' '}
-          <Link href="/register" className="text-primary font-medium hover:underline">
-            {t('createOne')}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useAuth } from '@/providers/store-provider';
+import { proxyLogin } from '@/lib/auth';
+import { LoginForm } from '@/components/auth/login-form';
+import { OAuthButtons } from '@/components/auth/oauth-buttons';
+import { useTranslations } from '@/lib/translations';
+
+export default function LoginPage() {
+  const router = useRouter();
+  const auth = useAuth();
+  const t = useTranslations('auth');
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleLogin(email: string, password: string) {
+    try {
+      setError(null);
+      const result = await proxyLogin(email, password);
+
+      if (result.requiresVerification) {
+        // Verification token is NOT the auth JWT — safe to pass in URL
+        router.push('/verify-email');
+        return;
+      }
+
+      // Cookie was set by the proxy; refresh auth state
+      await auth.login();
+      router.push('/');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Login failed. Please try again.';
+      setError(message);
+    }
+  }
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-foreground text-2xl font-bold">{t('welcomeBack')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('signInSubtitle')}</p>
+        </div>
+
+        <LoginForm onSubmit={handleLogin} error={error} />
+
+        <OAuthButtons />
+
+        <p className="text-muted-foreground text-center text-sm">
+          {t('noAccount')}{' '}
+          <Link href="/register" className="text-primary font-medium hover:underline">
+            {t('createOne')}
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/register/page.tsx

@@ -1,68 +1,64 @@
-'use client';
-
-import { useState } from 'react';
-import { useRouter } from 'next/navigation';
-import Link from 'next/link';
-import { getClient } from '@/lib/brainerce';
-import { useAuth } from '@/providers/store-provider';
-import { RegisterForm } from '@/components/auth/register-form';
-import { OAuthButtons } from '@/components/auth/oauth-buttons';
-import { useTranslations } from '@/lib/translations';
-
-export default function RegisterPage() {
-  const router = useRouter();
-  const auth = useAuth();
-  const t = useTranslations('auth');
-  const [error, setError] = useState<string | null>(null);
-
-  async function handleRegister(data: {
-    firstName: string;
-    lastName: string;
-    email: string;
-    password: string;
-  }) {
-    try {
-      setError(null);
-      const client = getClient();
-      const result = await client.registerCustomer({
-        firstName: data.firstName,
-        lastName: data.lastName,
-        email: data.email,
-        password: data.password,
-      });
-
-      if (result.requiresVerification) {
-        router.push(`/verify-email?token=${encodeURIComponent(result.token)}`);
-        return;
-      }
-
-      auth.login(result.token);
-      router.push('/');
-    } catch (err) {
-      const message = err instanceof Error ? err.message : 'Registration failed. Please try again.';
-      setError(message);
-    }
-  }
-
-  return (
-    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
-      <div className="w-full max-w-md space-y-6">
-        <div className="text-center">
-          <h1 className="text-foreground text-2xl font-bold">{t('createAccountTitle')}</h1>
-          <p className="text-muted-foreground mt-1 text-sm">{t('joinSubtitle')}</p>
-        </div>
-
-        <RegisterForm onSubmit={handleRegister} error={error} />
-
-        <OAuthButtons />
-
-        <p className="text-muted-foreground text-center text-sm">
-          {t('alreadyHaveAccount')}{' '}
-          <Link href="/login" className="text-primary font-medium hover:underline">
-            {t('signIn')}
-          </Link>
-        </p>
-      </div>
-    </div>
-  );
-}
+'use client';
+
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { useAuth } from '@/providers/store-provider';
+import { proxyRegister } from '@/lib/auth';
+import { RegisterForm } from '@/components/auth/register-form';
+import { OAuthButtons } from '@/components/auth/oauth-buttons';
+import { useTranslations } from '@/lib/translations';
+
+export default function RegisterPage() {
+  const router = useRouter();
+  const auth = useAuth();
+  const t = useTranslations('auth');
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleRegister(data: {
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+  }) {
+    try {
+      setError(null);
+      const result = await proxyRegister(data);
+
+      if (result.requiresVerification) {
+        // Cookie already set by proxy; verify-email uses it for auth
+        router.push('/verify-email');
+        return;
+      }
+
+      // Cookie was set by the proxy; refresh auth state
+      await auth.login();
+      router.push('/');
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Registration failed. Please try again.';
+      setError(message);
+    }
+  }
+
+  return (
+    <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
+      <div className="w-full max-w-md space-y-6">
+        <div className="text-center">
+          <h1 className="text-foreground text-2xl font-bold">{t('createAccountTitle')}</h1>
+          <p className="text-muted-foreground mt-1 text-sm">{t('joinSubtitle')}</p>
+        </div>
+
+        <RegisterForm onSubmit={handleRegister} error={error} />
+
+        <OAuthButtons />
+
+        <p className="text-muted-foreground text-center text-sm">
+          {t('alreadyHaveAccount')}{' '}
+          <Link href="/login" className="text-primary font-medium hover:underline">
+            {t('signIn')}
+          </Link>
+        </p>
+      </div>
+    </div>
+  );
+}

package/templates/nextjs/base/src/app/reset-password/page.tsx

@@ -1,19 +1,16 @@
 'use client';
 
-import { Suspense, useState } from 'react';
-import { useRouter, useSearchParams } from 'next/navigation';
+import { useState } from 'react';
+import { useRouter } from 'next/navigation';
 import Link from 'next/link';
-import { getClient } from '@/lib/brainerce';
+import { proxyResetPassword } from '@/lib/auth';
 import { LoadingSpinner } from '@/components/shared/loading-spinner';
 import { useTranslations } from '@/lib/translations';
 
-function ResetPasswordContent() {
+export default function ResetPasswordPage() {
   const router = useRouter();
-  const searchParams = useSearchParams();
   const t = useTranslations('auth');
 
-  const token = searchParams.get('token');
-
   const [newPassword, setNewPassword] = useState('');
   const [confirmPassword, setConfirmPassword] = useState('');
   const [loading, setLoading] = useState(false);
@@ -22,7 +19,7 @@ function ResetPasswordContent() {
 
   async function handleSubmit(e: React.FormEvent) {
     e.preventDefault();
-    if (loading || !token) return;
+    if (loading) return;
 
     if (newPassword !== confirmPassword) {
       setError(t('passwordsMustMatch'));
@@ -32,8 +29,7 @@ function ResetPasswordContent() {
     try {
       setLoading(true);
       setError(null);
-      const client = getClient();
-      await client.resetPassword(token, newPassword);
+      await proxyResetPassword(newPassword);
       setSuccess(true);
       setTimeout(() => router.push('/login'), 2000);
     } catch (err) {
@@ -45,23 +41,6 @@ function ResetPasswordContent() {
     }
   }
 
-  if (!token) {
-    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">
-          <h1 className="text-foreground text-2xl font-bold">{t('invalidResetLink')}</h1>
-          <p className="text-muted-foreground text-sm">{t('invalidResetLinkDesc')}</p>
-          <Link
-            href="/forgot-password"
-            className="bg-primary text-primary-foreground inline-flex items-center rounded px-6 py-3 font-medium transition-opacity hover:opacity-90"
-          >
-            {t('sendResetLink')}
-          </Link>
-        </div>
-      </div>
-    );
-  }
-
   return (
     <div className="flex min-h-[60vh] items-center justify-center px-4 py-12">
       <div className="w-full max-w-md space-y-6">
@@ -71,8 +50,14 @@ function ResetPasswordContent() {
         </div>
 
         {error && (
-          <div className="bg-destructive/10 border-destructive/20 text-destructive rounded-lg border px-4 py-3 text-sm">
-            {error}
+          <div className="bg-destructive/10 border-destructive/20 text-destructive space-y-2 rounded-lg border px-4 py-3 text-sm">
+            <p>{error}</p>
+            <Link
+              href="/forgot-password"
+              className="text-primary block font-medium hover:underline"
+            >
+              {t('sendResetLink')}
+            </Link>
           </div>
         )}
 
@@ -145,17 +130,3 @@ function ResetPasswordContent() {
     </div>
   );
 }
-
-export default function ResetPasswordPage() {
-  return (
-    <Suspense
-      fallback={
-        <div className="flex min-h-[60vh] items-center justify-center">
-          <LoadingSpinner size="lg" />
-        </div>
-      }
-    >
-      <ResetPasswordContent />
-    </Suspense>
-  );
-}