fix(auth): wire login and register to real backend auth model

Backend uses merchantId+secret, not email+password.

login/page.tsx:
- Form now collects merchantId + secret (was email + password)
- Calls POST /api/auth/token (correct endpoint)
- Decodes JWT payload client-side to extract role
- Keeps wallet login path intact

register/page.tsx:
- Replace apiClient (requires JWT) with plain fetch
- Send proper id, name, ownerId to POST /api/merchants
- After success: surface the one-time secret in a modal
- User must copy secret before they can proceed to login
- 'Continue' button stays disabled until copied

lib/utils/validation.ts:
- loginSchema now validates merchantId + secret fields

Author: therealjhay

app/auth/login/page.tsx

@@ -11,13 +11,11 @@ import { useNotify } from '@/lib/hooks/useNotify';
 import dynamic from 'next/dynamic';
 
 import { loginSchema, LoginFormValues } from '@/lib/utils/validation';
-import { normalizeEmail } from '@/lib/utils/sanitize';
 import { useAuthStore } from '@/lib/store/authStore';
 import { useRateLimitStore } from '@/lib/store/rateLimitStore';
 import { Button } from '@/components/ui/button';
-import { AuthInput } from '@/components/auth/AuthInput';
-import { AuthLabel } from '@/components/auth/AuthLabel';
-import { AuthButton } from '@/components/auth/AuthButton';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
 
 import { WalletModalFallback } from '@/components/wallet/WalletModalFallback';
 
@@ -53,47 +51,45 @@ export default function LoginPage() {
 
   const onSubmit = useCallback(async (data: LoginFormValues) => {
     setIsLoading(true);
-    const sanitizedData = { ...data, email: normalizeEmail(data.email) };
-
     try {
       const apiBase = process.env.NEXT_PUBLIC_API_URL || 'https://bettapay-backend.onrender.com';
 
-      // Authenticate against the real backend — no mock tokens
-      const loginRes = await fetch(`${apiBase}/api/auth/login`, {
+      // POST /api/auth/token expects { merchantId, secret }
+      const loginRes = await fetch(`${apiBase}/api/auth/token`, {
         method: 'POST',
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
-          email: sanitizedData.email,
-          password: sanitizedData.password,
+          merchantId: data.merchantId,
+          secret: data.secret,
         }),
       });
 
       if (!loginRes.ok) {
         const errBody = await loginRes.json().catch(() => ({}));
         const message =
-          errBody?.message ||
           errBody?.error ||
-          (loginRes.status === 401 ? 'Invalid email or password.' : 'Login failed. Please try again.');
+          errBody?.message ||
+          (loginRes.status === 401 ? 'Invalid Merchant ID or secret key.' : 'Login failed. Please try again.');
         error(message);
         return;
       }
 
-      const loginData = await loginRes.json();
-
-      // Backend returns { token, user: { id, email, name, role, ... } }
-      const token: string = loginData.token ?? loginData.data?.token;
-      const backendUser = loginData.user ?? loginData.data?.user;
+      const { token } = await loginRes.json();
 
-      if (!token || !backendUser) {
+      if (!token) {
         error('Unexpected response from server. Please try again.');
         return;
       }
 
+      // Decode the JWT payload to get merchantId and role (no signature verification needed client-side)
+      const payloadBase64 = token.split('.')[1];
+      const payload = JSON.parse(atob(payloadBase64));
+
       const user = {
-        id: backendUser.id,
-        email: backendUser.email,
-        name: backendUser.name,
-        role: backendUser.role as 'admin' | 'merchant',
+        id: payload.merchantId ?? data.merchantId,
+        email: '',
+        name: 'Merchant',
+        role: (payload.role ?? 'merchant') as 'admin' | 'merchant',
       };
 
       // Set the HttpOnly auth cookie via the Next.js session route
@@ -105,14 +101,11 @@ export default function LoginPage() {
           body: JSON.stringify({ token, role: user.role }),
         });
       } catch (sessionErr) {
-        // Cookie set failure is non-fatal — in-memory auth will still work for this tab
         console.warn('Auth session cookie API unavailable.', sessionErr);
       }
 
-      // Store token in-memory for the current session
       login(token, user as import('@/lib/types').User);
       success('Login successful');
-
       router.push(user.role === 'admin' ? '/overview' : '/dashboard');
     } catch (err) {
       console.error(err);
@@ -122,18 +115,13 @@ export default function LoginPage() {
     }
   }, [login, router, success, error]);
 
-  // When WalletModal reports a connected address, perform the merchant login flow.
-  // NOTE: Full wallet-challenge authentication (sign a nonce, verify on-chain) is
-  // the intended production approach — this flow requires a backend /api/auth/wallet
-  // endpoint that issues a real JWT after verifying the signed challenge.
+  // Wallet login: wallet address becomes the merchant identifier.
+  // A proper wallet-challenge JWT flow (sign nonce, verify on backend) is
+  // the intended production path once the backend has /api/auth/wallet.
   const onWalletConnected = useCallback(async (address: string) => {
     setIsWalletLoading(true);
     try {
       const role = 'merchant';
-
-      // Placeholder: derive a session identifier from the wallet address.
-      // Replace this with a proper wallet-challenge JWT flow when the
-      // backend /api/auth/wallet endpoint is implemented.
       const walletSessionToken = `wallet_${address}`;
 
       try {
@@ -144,7 +132,7 @@ export default function LoginPage() {
           body: JSON.stringify({ token: walletSessionToken, role }),
         });
       } catch (sessionErr) {
-        console.warn('Auth session API unavailable; continuing without HttpOnly cookie.', sessionErr);
+        console.warn('Auth session API unavailable.', sessionErr);
       }
 
       login(walletSessionToken, {
@@ -163,7 +151,6 @@ export default function LoginPage() {
     }
   }, [login, router, success, error]);
 
-
   return (
     <div className="w-full animate-in fade-in slide-in-from-bottom-4 duration-500">
       <Suspense fallback={<WalletModalFallback open={walletModalOpen} onOpenChange={setWalletModalOpen} />}>
@@ -184,52 +171,58 @@ export default function LoginPage() {
 
       {/* Form */}
       <form onSubmit={handleSubmit(onSubmit)} className="space-y-5">
-        {/* Email */}
+        {/* Merchant ID */}
         <div className="space-y-1.5">
-          <AuthLabel htmlFor="email">
-            Email Address
-          </AuthLabel>
-          <AuthInput
-            id="email"
-            type="email"
-            placeholder="name@company.com"
-            {...register('email')}
-            aria-invalid={errors.email ? "true" : "false"}
-            aria-describedby={errors.email ? "email-error" : undefined}
+          <Label htmlFor="merchantId" className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+            Merchant ID
+          </Label>
+          <Input
+            id="merchantId"
+            type="text"
+            placeholder="Your Stellar merchant address"
+            {...register('merchantId')}
+            aria-invalid={errors.merchantId ? "true" : "false"}
+            aria-describedby={errors.merchantId ? "merchantId-error" : undefined}
+            className="h-12 bg-card border border-border text-foreground placeholder:text-muted-foreground rounded-xl text-sm font-mono focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring transition-all"
           />
-          {errors.email && <p id="email-error" className="text-xs text-destructive mt-1">{errors.email.message}</p>}
+          {errors.merchantId && <p id="merchantId-error" className="text-xs text-destructive mt-1">{errors.merchantId.message}</p>}
         </div>
 
-        {/* Password */}
+        {/* Secret Key */}
         <div className="space-y-1.5">
           <div className="flex items-center justify-between">
-            <AuthLabel htmlFor="password">
-              Password
-            </AuthLabel>
+            <Label htmlFor="secret" className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
+              Secret Key
+            </Label>
             <Link href="/auth/forgot-password" className="text-xs text-muted-foreground hover:text-primary transition-colors">
-              Forgot password?
+              Lost your secret?
             </Link>
           </div>
-          <AuthInput
-            id="password"
+          <Input
+            id="secret"
             type="password"
-            placeholder="••••••••"
-            {...register('password')}
-            aria-invalid={errors.password ? "true" : "false"}
-            aria-describedby={errors.password ? "password-error" : undefined}
+            placeholder="Your merchant secret key"
+            {...register('secret')}
+            aria-invalid={errors.secret ? "true" : "false"}
+            aria-describedby={errors.secret ? "secret-error" : undefined}
+            className="h-12 bg-card border border-border text-foreground placeholder:text-muted-foreground rounded-xl text-sm focus-visible:ring-1 focus-visible:ring-ring focus-visible:border-ring transition-all"
           />
-          {errors.password && <p id="password-error" className="text-xs text-destructive mt-1">{errors.password.message}</p>}
+          {errors.secret && <p id="secret-error" className="text-xs text-destructive mt-1">{errors.secret.message}</p>}
+          <p className="text-xs text-muted-foreground">
+            The secret key shown once when you created your account.
+          </p>
         </div>
 
         {/* Sign In CTA */}
         <div className="pt-1">
-          <AuthButton
+          <Button
             type="submit"
             disabled={isLoading || isWalletLoading || isRateLimited}
+            className="w-full h-12 bg-primary hover:bg-primary/90 text-white font-semibold text-sm rounded-xl border-0 transition-colors"
           >
             {isLoading ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
             {isRateLimited ? `Try again in ${secondsRemaining}s` : 'Sign In'}
-          </AuthButton>
+          </Button>
         </div>
       </form>
 

app/auth/register/page.tsx

@@ -5,7 +5,7 @@ import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { useForm } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
-import { Loader2, Check } from 'lucide-react';
+import { Loader2, Check, Copy, CheckCheck } from 'lucide-react';
 import { useNotify } from '@/lib/hooks/useNotify';
 
 import { registerSchema, RegisterFormValues, passwordRequirements } from '@/lib/utils/validation';
@@ -27,6 +27,11 @@ export default function RegisterPage() {
   const [isLoading, setIsLoading] = useState(false);
   const [isWalletLoading, setIsWalletLoading] = useState(false);
   const [walletOpen, setWalletOpen] = useState(false);
+  // After successful registration the backend returns a one-time secret.
+  // We surface it in a modal so the user can copy it before proceeding.
+  const [createdSecret, setCreatedSecret] = useState<string | null>(null);
+  const [createdMerchantId, setCreatedMerchantId] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
   const { success, error } = useNotify();
 
   const {
@@ -60,27 +65,50 @@ export default function RegisterPage() {
       email: normalizeEmail(data.email),
     };
     try {
-      try {
-        const { apiClient } = await import('@/lib/api/axios');
-        await apiClient.post('/api/merchants', {
-          id: `merch_${Math.random().toString(36).substr(2, 9)}`,
+      const apiBase = process.env.NEXT_PUBLIC_API_URL || 'https://bettapay-backend.onrender.com';
+      // Use plain fetch — /api/merchants requires a service JWT via fastify.authenticate.
+      // For merchant self-registration we call it without auth; the backend must allow
+      // this endpoint unauthenticated OR a separate /api/auth/register endpoint is needed.
+      const merchantId = `G${crypto.randomUUID().replace(/-/g, '').toUpperCase().slice(0, 54)}`;
+      const ownerId = sanitizedData.email;
+
+      const res = await fetch(`${apiBase}/api/merchants`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          id: merchantId,
           name: sanitizedData.businessName,
-        });
-      } catch {
-        console.warn('Backend unavailable, falling back to mock registration for Vercel preview.');
-        await new Promise(resolve => setTimeout(resolve, 1500));
+          ownerId,
+        }),
+      });
+
+      if (!res.ok) {
+        const errBody = await res.json().catch(() => ({}));
+        error(errBody?.message || errBody?.error || 'Failed to create account. Please try again.');
+        return;
       }
 
-      success('Account created successfully! Please log in.');
-      router.push('/auth/login');
+      const body = await res.json();
+      // Backend returns { success: true, merchant: {...}, secret: '...' }
+      // The secret is shown ONCE — the user must save it to log in.
+      setCreatedSecret(body.secret);
+      setCreatedMerchantId(body.merchant?.id ?? merchantId);
     } catch (err) {
       console.error(err);
-      error('Failed to create account');
+      error('Network error — unable to reach the server. Please try again.');
     } finally {
       setIsLoading(false);
     }
   };
 
+  const handleCopySecret = () => {
+    if (createdSecret) {
+      navigator.clipboard.writeText(createdSecret);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
   const handleFreighterLogin = async () => {
     setIsWalletLoading(true);
     try {
@@ -106,6 +134,47 @@ export default function RegisterPage() {
         <WalletModal open={walletOpen} onOpenChange={setWalletOpen} />
       </Suspense>
 
+      {/* ── Secret reveal modal — shown after successful registration ── */}
+      {createdSecret && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4">
+          <div className="w-full max-w-md bg-card border border-border rounded-2xl p-6 shadow-surface-xl space-y-4">
+            <h2 className="text-lg font-bold text-foreground">Account Created! Save Your Secret Key</h2>
+            <p className="text-sm text-muted-foreground">
+              This key is shown <span className="text-destructive font-semibold">only once</span>. Copy it now — you&apos;ll need it every time you sign in.
+            </p>
+
+            <div className="space-y-2">
+              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Merchant ID</p>
+              <p className="font-mono text-xs bg-muted px-3 py-2 rounded-lg break-all text-foreground select-all">{createdMerchantId}</p>
+            </div>
+
+            <div className="space-y-2">
+              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">Secret Key</p>
+              <div className="flex items-center gap-2">
+                <p className="font-mono text-xs bg-muted px-3 py-2 rounded-lg break-all text-foreground flex-1 select-all">{createdSecret}</p>
+                <button
+                  type="button"
+                  onClick={handleCopySecret}
+                  className="shrink-0 p-2 rounded-lg border border-border bg-card hover:bg-muted transition-colors"
+                  aria-label="Copy secret key"
+                >
+                  {copied ? <CheckCheck className="w-4 h-4 text-success" /> : <Copy className="w-4 h-4 text-muted-foreground" />}
+                </button>
+              </div>
+            </div>
+
+            <button
+              type="button"
+              disabled={!copied}
+              onClick={() => router.push('/auth/login')}
+              className="w-full h-11 rounded-xl bg-primary text-white font-semibold text-sm disabled:opacity-50 disabled:cursor-not-allowed transition-opacity"
+            >
+              {copied ? 'I\'ve saved it — Go to Login' : 'Copy the key above to continue'}
+            </button>
+          </div>
+        </div>
+      )}
+
       {/* Heading */}
       <div className="mb-10">
         <p className="text-xs font-semibold tracking-widest text-primary uppercase mb-3">Merchant Portal</p>

lib/utils/validation.ts

@@ -28,8 +28,8 @@ export const strongPasswordSchema = z.string().superRefine((password, ctx) => {
 });
 
 export const loginSchema = z.object({
-  email: z.string().email('Please enter a valid email address'),
-  password: strongPasswordSchema,
+  merchantId: z.string().min(1, 'Merchant ID is required'),
+  secret: z.string().min(1, 'Secret key is required'),
 });
 
 export type LoginFormValues = z.infer<typeof loginSchema>;