414/ Log in and sign up page v2

app/(auth)/layout.tsx

@@ -1,15 +1,9 @@
 import React from 'react';
-import BackButton from '@/components/buttons/BackButton';
 
 export default function AuthLayout({
   children,
 }: {
   children: React.ReactNode;
 }) {
-  return (
-    <>
-      <BackButton />
-      {children}
-    </>
-  );
+  return <>{children}</>;
 }

app/(auth)/login/page.tsx

@@ -1,6 +1,5 @@
 import { redirect } from 'next/navigation';
 import AuthForm from '../../../components/AuthForm';
-import Link from 'next/link';
 import newServerClient from '@/supabase/utils/newServerClient';
 import { getProfile } from '@/supabase/models/getProfile';
 
@@ -34,22 +33,14 @@ export default function Login({
   };
 
   return (
-    <div className='flex flex-col  items-center  px-8'>
+    <div className='flex flex-col items-center py-12 '>
+      <h2 className='text-5xl font-medium text-base-110'>Log in</h2>
       <AuthForm
         onSubmit={signIn}
-        buttonText='LOG IN'
+        buttonText='Log in'
         searchParams={searchParams}
         isSignUp={false}
       />
-      <p className='text-md mt-5'>
-        Not a member yet sign up{' '}
-        <Link href='/signup'>
-          <span className='text-primaryGreen'>here</span>
-        </Link>
-      </p>
-      <Link href='/login/forgot-password'>
-        <span className='mt-2 text-sm text-primaryGreen'>Forgot Password</span>
-      </Link>
     </div>
   );
 }

app/(auth)/signup/page.tsx

@@ -9,8 +9,10 @@ export default function SignUp({
   searchParams: { message: string; confirm: string };
 }) {
   const [email, setEmail] = useState<string>('');
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
 
   const signUp = async (formData: FormData) => {
+    setErrorMessage(null);
     try {
       const response = await fetch('api/signup', {
         method: 'POST',
@@ -25,25 +27,31 @@ export default function SignUp({
         }),
       });
 
-      if (response.redirected) {
-        window.location.href = response.url;
+      const result = await response.json();
+
+      if (!response.ok) {
+        setErrorMessage(result.error || 'Unexpected error occurred');
+        return undefined;
       }
 
-      setEmail(formData.get('email') as string);
-      const { profile } = await response.json();
-      return profile;
+      setEmail(result.profile?.email);
+      return result.profile;
     } catch (error) {
-      console.error(error);
+      console.error('Signup error:', error);
+      setErrorMessage('An error occurred during sign up. Please try again.');
+      return undefined;
     }
   };
 
   return (
-    <div className=' flex flex-col  items-center  px-8  '>
-      {email !== '' && <SignupConfirmationPopup targetEmail={email} />}
+    <div className='flex flex-col items-center py-12'>
+      <h2 className='text-5xl font-medium text-base-110'>Sign up</h2>
+      {email && <SignupConfirmationPopup targetEmail={email} />}
       <AuthForm
         onSubmit={signUp}
-        buttonText='REGISTER'
-        searchParams={searchParams}
+        buttonText='Sign up'
+        searchParams={{ ...searchParams, message: errorMessage ?? '' }}
+        externalErrorMessage={errorMessage}
         isSignUp={true}
       />
     </div>

app/api/signup/route.ts

@@ -2,7 +2,6 @@ import newServerClient from '@/supabase/utils/newServerClient';
 import { NextRequest, NextResponse } from 'next/server';
 
 export async function POST(request: NextRequest) {
-  const baseURL = request.nextUrl;
   const body = await request.json();
   const { email, password, username, isRefugee } = body;
   const supabase = newServerClient();
@@ -13,28 +12,27 @@ export async function POST(request: NextRequest) {
   });
 
   if (error) {
-    if (error.code === 'user_already_exists')
-      return NextResponse.redirect(
-        new URL(
-          '/login?message=User already registered. Please try logging in instead.',
-          baseURL
-        )
-      );
-
-    if (error.code === 'weak password')
-      return NextResponse.redirect(
-        new URL(
-          '/signup?message=Your password must include at least one uppercase character, one number and one special character.',
-          baseURL
-        )
-      );
-
-    return NextResponse.redirect(
-      new URL(`/signup?message=${error.code?.replaceAll(/_/g, ' ')}`, baseURL)
-    );
+    let message = 'Signup failed';
+
+    if (error.code === 'user_already_exists') {
+      message = 'User already registered. Please try logging in instead.';
+    } else if (error.code === 'weak_password') {
+      message =
+        'Password must include at least one uppercase character, one number, and one special character.';
+    } else {
+      message = error.message || error.code?.replaceAll(/_/g, ' ') || message;
+    }
+
+    return NextResponse.json({ error: message }, { status: 400 });
   }
 
   const userId = data && data.user?.id;
+  if (!userId) {
+    return NextResponse.json(
+      { error: 'User ID not found after signup.' },
+      { status: 500 }
+    );
+  }
   const { data: profile, error: profileError } = await supabase
     .from('profiles')
     .insert({
@@ -43,9 +41,16 @@ export async function POST(request: NextRequest) {
       username: username,
       refugee: isRefugee,
     })
-    .select('*');
-
-  if (profileError) console.error(profileError);
+    .select('*')
+    .single();
+
+  if (profileError) {
+    console.error('Profile insert error:', profileError);
+    return NextResponse.json(
+      { error: 'Failed to create user profile.' },
+      { status: 500 }
+    );
+  }
 
   return NextResponse.json({ profile });
 }