Reaching a finishing point!

2025-06-04 14:33:39 -05:00
parent bfb6e9e648
commit 04dceb93bd
16 changed files with 462 additions and 240 deletions
--- a/src/app/(auth-pages)/forgot-password/page.tsx
+++ b/src/app/(auth-pages)/forgot-password/page.tsx
@ -1,35 +1,123 @@
+'use client';
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@/components/ui';
 import Link from 'next/link';
 import { forgotPassword } from '@/lib/actions';
-import { FormMessage, type Message, SubmitButton } from '@/components/default';
-import { Input, Label } from '@/components/ui';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/components/context/auth';
+import { useEffect, useState } from 'react';
+import { StatusMessage, SubmitButton } from '@/components/default';
+
+const formSchema = z.object({
+  email: z.string().email({
+    message: 'Please enter a valid email address.',
+  }),
+})
+
+const ForgotPassword = () => {
+  const router = useRouter();
+  const { isAuthenticated, isLoading, refreshUserData } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: '',
+    },
+  });
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push('/');
+    }
+  }, [isAuthenticated, router]);
+
+
+  const handleForgotPassword = async (values: z.infer<typeof formSchema>) => {
+    try {
+      setStatusMessage('');
+      const formData  = new FormData();
+      formData.append('email', values.email);
+      const result = await forgotPassword(formData);
+      if (result?.success) {
+        await refreshUserData();
+        setStatusMessage(result?.data ?? 'Check your email for a link to reset your password.')
+        form.reset();
+        router.push('');
+      } else {
+        setStatusMessage(`Error: ${result.error}`)
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
+      );
+    }
+  };

-const ForgotPassword = async (props: { searchParams: Promise<Message> }) => {
-  const searchParams = await props.searchParams;
  return (
-    <>
-      <form
-        className='flex-1 flex flex-col w-full gap-2 text-foreground
-        [&>input]:mb-6 min-w-64 max-w-64 mx-auto'
-      >
-        <div>
-          <h1 className='text-2xl font-medium'>Reset Password</h1>
-          <p className='text-sm text-secondary-foreground'>
-            Already have an account?{' '}
-            <Link className='text-primary underline' href='/sign-in'>
-              Sign in
+      <Card>
+        <CardHeader>
+          <CardTitle className='text-2xl font-medium'>Reset Password</CardTitle>
+          <CardDescription className='text-sm text-foreground'>
+            Don&apos;t have an account?{' '}
+            <Link className='font-medium underline' href='/sign-up'>
+              Sign up
            </Link>
-          </p>
-        </div>
-        <div className='flex flex-col gap-2 [&>input]:mb-3 mt-8'>
-          <Label htmlFor='email'>Email</Label>
-          <Input name='email' placeholder='you@example.com' required />
-          <SubmitButton formAction={forgotPassword}>
-            Reset Password
-          </SubmitButton>
-          <FormMessage message={searchParams} />
-        </div>
-      </form>
-    </>
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Form {...form} >
+            <form
+              onSubmit={form.handleSubmit(handleForgotPassword)}
+              className='flex flex-col min-w-64 space-y-6'
+            >
+              <FormField
+                control={form.control}
+                name='email'
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel>Email</FormLabel>
+                    <FormControl>
+                      <Input type='email' placeholder='you@example.com' {...field} />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                )}
+              />
+              <SubmitButton
+                disabled={isLoading}
+                pendingText='Resetting Password...'
+              >
+                Reset Password
+              </SubmitButton>
+              {statusMessage && (
+                statusMessage.includes('Error') ||
+                  statusMessage.includes('error') ||
+                  statusMessage.includes('failed') ||
+                  statusMessage.includes('invalid')
+                  ? <StatusMessage message={{error: statusMessage}} />
+                  : <StatusMessage message={{ success: statusMessage }} />
+              )}
+            </form>
+          </Form>
+        </CardContent>
+      </Card>
  );
 };
 export default ForgotPassword;
--- a/src/app/(auth-pages)/profile/page.tsx
+++ b/src/app/(auth-pages)/profile/page.tsx
@ -2,7 +2,7 @@
 import { useAuth } from '@/components/context/auth';
 import { useRouter } from 'next/navigation';
 import { useEffect } from 'react';
-import { AvatarUpload, ProfileForm, ResetPasswordForm } from '@/components/default/profile';
+import { AvatarUpload, ProfileForm, ResetPasswordForm, SignOut } from '@/components/default/profile';
 import {
  Card,
  CardHeader,
@ -100,6 +100,8 @@ const ProfilePage = () => {
              <ProfileForm onSubmit={handleProfileSubmit} />
              <Separator />
              <ResetPasswordForm onSubmit={handleResetPasswordSubmit} />
+              <Separator />
+              <SignOut />
            </div>
          )}
      </Card>
--- a/src/app/(auth-pages)/sign-in/page.tsx
+++ b/src/app/(auth-pages)/sign-in/page.tsx
@ -4,7 +4,6 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
-  Button,
  Card,
  CardContent,
  CardDescription,
@ -12,20 +11,18 @@ import {
  CardTitle,
  Form,
  FormControl,
-  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
  Input,
-  Label,
 } from '@/components/ui';
 import Link from 'next/link';
 import { signIn } from '@/lib/actions';
-import { SubmitButton } from '@/components/default';
 import { useRouter } from 'next/navigation';
 import { useAuth } from '@/components/context/auth';
 import { useEffect, useState } from 'react';
+import { StatusMessage, SubmitButton } from '@/components/default';

 const formSchema = z.object({
  email: z.string().email({
@ -58,6 +55,7 @@ const Login = () => {

  const handleSignIn = async (values: z.infer<typeof formSchema>) => {
    try {
+      setStatusMessage('');
      const formData  = new FormData();
      formData.append('email', values.email);
      formData.append('password', values.password);
@ -77,7 +75,7 @@ const Login = () => {
  };

  return (
-    <Card>
+    <Card className='min-w-xs md:min-w-sm'>
      <CardHeader>
        <CardTitle className='text-2xl font-medium'>
          Sign In
@ -131,15 +129,12 @@ const Login = () => {
              )}
            />
            {statusMessage && (
-              <div
-                className={`text-sm text-center ${
-                  statusMessage.includes('Error') || statusMessage.includes('failed')
-                    ? 'text-destructive'
-                    : 'text-green-800'
-                }`}
-              >
-                {statusMessage}
-              </div>
+              statusMessage.includes('Error') ||
+                statusMessage.includes('error') ||
+                statusMessage.includes('failed') ||
+                statusMessage.includes('invalid')
+                ? <StatusMessage message={{error: statusMessage}} />
+                : <StatusMessage message={{ message: statusMessage }} />
            )}
            <SubmitButton
              disabled={isLoading}
--- a/src/app/(auth-pages)/sign-up/page.tsx
+++ b/src/app/(auth-pages)/sign-up/page.tsx
@ -1,53 +1,184 @@
+'use client';
+
+import { z } from 'zod';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { useForm } from 'react-hook-form';
 import Link from 'next/link';
 import { signUp } from '@/lib/actions';
-import { FormMessage, type Message, SubmitButton } from '@/components/default';
-import { Input, Label } from '@/components/ui';
-import { redirect } from 'next/navigation';
-import { getUser } from '@/lib/actions';
+import { StatusMessage, SubmitButton } from '@/components/default';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/components/context/auth';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+} from '@/components/ui';
+import { useEffect, useState } from 'react';

-const SignUp = async (props: { searchParams: Promise<Message> }) => {
-  const searchParams = await props.searchParams;
-  const user = await getUser();
-  if (user.success) redirect('/profile');
-  if ('message' in searchParams) {
-    return (
-      <div
-        className='w-full flex-1 flex items-center h-screen
-        sm:max-w-md justify-center gap-2 p-4'
-      >
-        <FormMessage message={searchParams} />
-      </div>
-    );
-  } else {
-    return (
-      <form className='flex flex-col min-w-64 max-w-64 mx-auto'>
-        <h1 className='text-2xl font-medium'>Sign up</h1>
-        <p className='text-sm text text-foreground'>
+const formSchema = z
+  .object({
+    name: z.string().min(2, {
+      message: 'Name must be at least 2 characters.',
+    }),
+    email: z.string().email({
+      message: 'Please enter a valid email address.',
+    }),
+    password: z.string().min(8, {
+      message: 'Password must be at least 8 characters.',
+    }),
+    confirmPassword: z.string().min(8, {
+      message: 'Password must be at least 8 characters.',
+    }),
+  })
+  .refine((data) => data.password === data.confirmPassword, {
+    message: 'Passwords do not match!',
+    path: ['confirmPassword'],
+  });
+
+const SignUp = () => {
+
+  const router = useRouter();
+  const { isAuthenticated, isLoading, refreshUserData } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      name: '',
+      email: '',
+      password: '',
+      confirmPassword: '',
+    },
+    mode: 'onChange',
+  });
+
+  // Redirect if already authenticated
+  useEffect(() => {
+    if (isAuthenticated) {
+      router.push('/');
+    }
+  }, [isAuthenticated, router]);
+
+  const handleSignUp = async (values: z.infer<typeof formSchema>) => {
+    try {
+      setStatusMessage('');
+      const formData  = new FormData();
+      formData.append('name', values.name);
+      formData.append('email', values.email);
+      formData.append('password', values.password);
+      const result = await signUp(formData);
+      if (result?.success) {
+        await refreshUserData();
+        setStatusMessage(
+          result.data ??
+          'Thanks for signing up! Please check your email for a verification link.'
+        );
+        form.reset();
+        router.push('');
+      } else {
+        setStatusMessage(`Error: ${result.error}`)
+      }
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`
+      );
+    }
+  };
+
+  return (
+    <Card className='min-w-xs md:min-w-sm'>
+      <CardHeader>
+        <CardTitle className='text-2xl font-medium'>
+          Sign Up
+        </CardTitle>
+        <CardDescription className='text text-foreground'>
          Already have an account?{' '}
          <Link className='text-primary font-medium underline' href='/sign-in'>
            Sign in
          </Link>
-        </p>
-        <div className='flex flex-col gap-2 [&>input]:mb-3 mt-8'>
-          <Label htmlFor='name'>Name</Label>
-          <Input name='name' placeholder='Full Name' required />
-          <Label htmlFor='email'>Email</Label>
-          <Input name='email' placeholder='you@example.com' required />
-          <Label htmlFor='password'>Password</Label>
-          <Input
-            type='password'
-            name='password'
-            placeholder='Your password'
-            minLength={6}
-            required
-          />
-          <SubmitButton formAction={signUp} pendingText='Signing up...'>
-            Sign up
-          </SubmitButton>
-          <FormMessage message={searchParams} />
-        </div>
-      </form>
-    );
-  }
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form onSubmit={form.handleSubmit(handleSignUp)} className='flex flex-col mx-auto space-y-4'>
+            <FormField
+              control={form.control}
+              name='name'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Name</FormLabel>
+                  <FormControl>
+                    <Input type='text' placeholder='Full Name' {...field} />
+                  </FormControl>
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Email</FormLabel>
+                  <FormControl>
+                    <Input type='email' placeholder='you@example.com' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )} 
+            />
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' placeholder='Your password' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='confirmPassword'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Confirm Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' placeholder='Confirm password' {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {statusMessage && (
+              statusMessage.includes('Error') ||
+                statusMessage.includes('error') ||
+                statusMessage.includes('failed') ||
+                statusMessage.includes('invalid')
+                ? <StatusMessage message={{error: statusMessage}} />
+                : <StatusMessage message={{ success: statusMessage }} />
+            )}
+            <SubmitButton
+              disabled={isLoading}
+              pendingText='Signing Up...'
+            >
+              Sign up
+            </SubmitButton>
+          </form>
+        </Form>
+      </CardContent>
+    </Card>
+  );
 };
 export default SignUp;
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -195,7 +195,10 @@ const RootLayout = ({ children }: Readonly<{ children: React.ReactNode }>) => {
            <main className='min-h-screen flex flex-col items-center'>
              <div className='flex-1 w-full flex flex-col gap-20 items-center'>
                <Navigation />
-                <div className='flex flex-col gap-20 max-w-5xl p-5 w-full'>
+                <div
+                  className='flex flex-col gap-20 max-w-5xl
+                    p-5 w-full items-center'
+                >
                  {children}
                </div>
              </div>
--- a/src/components/default/footer/index.tsx
+++ b/src/components/default/footer/index.tsx
@ -1,6 +1,6 @@
 'use server';

-const FooterTest = () => {
+const Footer = () => {
  return (
    <footer className='w-full flex items-center justify-center border-t mx-auto text-center text-xs gap-8 py-16'>
      <p>
@ -17,4 +17,4 @@ const FooterTest = () => {
    </footer>
  );
 };
-export default FooterTest;
+export default Footer;
--- a/src/components/default/form-message.tsx
+++ b/src/components/default/form-message.tsx
@ -1,24 +0,0 @@
-export type Message =
-  | { success: string }
-  | { error: string }
-  | { message: string };
-
-export const FormMessage = ({ message }: { message: Message }) => {
-  return (
-    <div className='flex flex-col gap-2 w-full max-w-md text-sm'>
-      {'success' in message && (
-        <div className='text-foreground border-l-2 border-foreground px-4'>
-          {message.success}
-        </div>
-      )}
-      {'error' in message && (
-        <div className='text-destructive-foreground border-l-2 border-destructive-foreground px-4'>
-          {message.error}
-        </div>
-      )}
-      {'message' in message && (
-        <div className='text-foreground border-l-2 px-4'>{message.message}</div>
-      )}
-    </div>
-  );
-};
--- a/src/components/default/index.tsx
+++ b/src/components/default/index.tsx
@ -1,4 +1,2 @@
-import { FormMessage, type Message } from '@/components/default/form-message';
-import { SubmitButton } from '@/components/default/submit-button';
-
-export { FormMessage, type Message, SubmitButton };
+export { StatusMessage, type Message } from '@/components/default/status-message';
+export { SubmitButton } from '@/components/default/submit-button';
--- a/src/components/default/profile/ProfileForm.tsx
+++ b/src/components/default/profile/ProfileForm.tsx
@ -2,7 +2,6 @@ import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';
 import {
-  Button,
  CardContent,
  Form,
  FormControl,
@ -13,9 +12,9 @@ import {
  FormMessage,
  Input,
 } from '@/components/ui';
-import { Loader2 } from 'lucide-react';
 import { useEffect } from 'react';
 import { useAuth } from '@/components/context/auth';
+import { SubmitButton } from '@/components/default';

 const formSchema = z.object({
  full_name: z.string().min(5, {
@ -90,16 +89,12 @@ export const ProfileForm = ({onSubmit}: ProfileFormProps) => {
          />

          <div className='flex justify-center'>
-            <Button type='submit' disabled={isLoading}>
-              {isLoading ? (
-                <>
-                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
-                  Saving...
-                </>
-              ) : (
-                'Save Changes'
-              )}
-            </Button>
+            <SubmitButton
+              disabled={isLoading}
+              pendingText='Saving...'
+            >
+              Save Changes
+            </SubmitButton>
          </div>
        </form>
      </Form>
--- a/src/components/default/profile/ResetPasswordForm.tsx
+++ b/src/components/default/profile/ResetPasswordForm.tsx
@ -18,7 +18,7 @@ import {
 import { SubmitButton } from '@/components/default';
 import { useState } from 'react';
 import { type Result } from '@/lib/actions';
-import { FormMessage as Pw } from '@/components/default';
+import { StatusMessage } from '@/components/default';

 const formSchema = z
  .object({
@ -85,65 +85,64 @@ export const ResetPasswordForm = ({
        </CardDescription>
      </CardHeader>
      <CardContent>
-
-      <Form {...form}>
-        <form 
-          onSubmit={form.handleSubmit(handleUpdatePassword)}
-          className='space-y-6'
-        >
-          <FormField
-            control={form.control}
-            name='password'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>New Password</FormLabel>
-                <FormControl>
-                  <Input type='password' {...field} />
-                </FormControl>
-                <FormDescription>
-                  Enter your new password. Must be at least 8 characters.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
+        <Form {...form}>
+          <form 
+            onSubmit={form.handleSubmit(handleUpdatePassword)}
+            className='space-y-6'
+          >
+            <FormField
+              control={form.control}
+              name='password'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>New Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Enter your new password. Must be at least 8 characters.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <FormField
+              control={form.control}
+              name='confirmPassword'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Confirm Password</FormLabel>
+                  <FormControl>
+                    <Input type='password' {...field} />
+                  </FormControl>
+                  <FormDescription>
+                    Please re-enter your new password to confirm.
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            {statusMessage && (
+              <div 
+                className={`text-sm text-center ${
+                  statusMessage.includes('Error') || statusMessage.includes('failed') 
+                    ? 'text-destructive' 
+                    : 'text-green-600'
+                }`}
+              >
+                {statusMessage}
+              </div>
            )}
-          />
-          <FormField
-            control={form.control}
-            name='confirmPassword'
-            render={({ field }) => (
-              <FormItem>
-                <FormLabel>Confirm Password</FormLabel>
-                <FormControl>
-                  <Input type='password' {...field} />
-                </FormControl>
-                <FormDescription>
-                  Please re-enter your new password to confirm.
-                </FormDescription>
-                <FormMessage />
-              </FormItem>
-            )}
-          />
-          {statusMessage && (
-            <div 
-              className={`text-sm text-center ${
-                statusMessage.includes('Error') || statusMessage.includes('failed') 
-                  ? 'text-destructive' 
-                  : 'text-green-600'
-              }`}
-            >
-              {statusMessage}
+            <div className='flex justify-center'>
+              <SubmitButton
+                disabled={isLoading}
+                pendingText='Updating Password...'
+              >
+                Update Password
+              </SubmitButton>
            </div>
-          )}
-          <div className='flex justify-center'>
-            <SubmitButton
-              disabled={isLoading}
-              pendingText='Updating Password...'
-            >
-              Update Password
-            </SubmitButton>
-          </div>
-        </form>
-      </Form>
+          </form>
+        </Form>
      </CardContent>
    </div>
  );
--- a/src/components/default/profile/SignOut.tsx
+++ b/src/components/default/profile/SignOut.tsx
@ -0,0 +1,32 @@
+'use client';
+
+import { CardContent, CardHeader, CardTitle } from '@/components/ui';
+import { SubmitButton } from '@/components/default';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/components/context/auth';
+import { signOut } from '@/lib/actions';
+
+export const SignOut = () => {
+  const { isLoading, refreshUserData } = useAuth();
+  const router = useRouter();
+
+  const handleSignOut = async () => {
+    const result = await signOut();
+    if (result?.success) {
+      await refreshUserData();
+      router.push('/sign-in');
+    }
+  };
+  return (
+    <div className='flex justify-center'>
+      <CardHeader className='md:w-5/6 w-full'>
+        <SubmitButton
+          disabled={isLoading}
+          onClick={handleSignOut}
+        >
+          Sign Out
+        </SubmitButton>
+      </CardHeader>
+    </div>
+  );
+};
--- a/src/components/default/profile/index.tsx
+++ b/src/components/default/profile/index.tsx
@ -1,3 +1,4 @@
 export * from './AvatarUpload';
 export * from './ProfileForm';
 export * from './ResetPasswordForm';
+export * from './SignOut';
--- a/src/components/default/status-message.tsx
+++ b/src/components/default/status-message.tsx
@ -0,0 +1,27 @@
+export type Message =
+  | { success: string }
+  | { error: string }
+  | { message: string };
+
+export const StatusMessage = ({ message }: { message: Message }) => {
+  return (
+    <div
+      className='flex flex-col gap-2 w-full max-w-md
+        text-sm bg-accent rounded-md p-2 px-4'
+    >
+      {'success' in message && (
+        <div className='dark:text-green-500 text-green-700'>
+          {message.success}
+        </div>
+      )}
+      {'error' in message && (
+        <div className='text-destructive'>
+          {message.error}
+        </div>
+      )}
+      {'message' in message && (
+        <div className='text-foreground'>{message.message}</div>
+      )}
+    </div>
+  );
+};
--- a/src/components/default/submit-button.tsx
+++ b/src/components/default/submit-button.tsx
@ -19,7 +19,13 @@ export const SubmitButton = ({
  const { pending } = useFormStatus();

  return (
-    <Button type='submit' aria-disabled={pending} disabled={disabled} {...props}>
+    <Button
+      className='cursor-pointer'
+      type='submit'
+      aria-disabled={pending}
+      disabled={disabled}
+      {...props}
+    >
      {pending || disabled ? (
        <>
          <Loader2 className='mr-2 h-4 w-4 animate-spin' />
--- a/src/lib/actions/auth.ts
+++ b/src/lib/actions/auth.ts
@ -4,11 +4,10 @@ import 'server-only';
 import { encodedRedirect } from '@/utils/utils';
 import { createServerClient } from '@/utils/supabase';
 import { headers } from 'next/headers';
-import { redirect } from 'next/navigation';
 import type { User } from '@/utils/supabase';
 import type { Result } from './index';

-export const signUp = async (formData: FormData) => {
+export const signUp = async (formData: FormData): Promise<Result<string | null>> => {
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const password = formData.get('password') as string;
@ -36,13 +35,12 @@ export const signUp = async (formData: FormData) => {
    },
  });
  if (error) {
-    return encodedRedirect('error', '/sign-up', error.message);
+    return { success: false, error: error.message };
  } else {
-    return encodedRedirect(
-      'success',
-      '/sign-up',
-      'Thanks for signing up! Please check your email for a verification link.',
-    );
+    return {
+      success: true,
+      data: 'Thanks for signing up! Please check your email for a verification link.',
+    };
  }
 };

@ -64,14 +62,13 @@ export const signIn = async (
  }
 };

-export const forgotPassword = async (formData: FormData) => {
+export const forgotPassword = async (formData: FormData): Promise<Result<string | null>> => {
  const email = formData.get('email') as string;
  const supabase = await createServerClient();
  const origin = (await headers()).get('origin');
-  const callbackUrl = formData.get('callbackUrl') as string;

  if (!email) {
-    return encodedRedirect('error', '/forgot-password', 'Email is required');
+    return { success: false, error: 'Email is required' };
  }

  const { error } = await supabase.auth.resetPasswordForEmail(email, {
@ -79,22 +76,9 @@ export const forgotPassword = async (formData: FormData) => {
  });

  if (error) {
-    return encodedRedirect(
-      'error',
-      '/forgot-password',
-      'Could not reset password',
-    );
+    return { success: false, error: 'Could not reset password' };
  }
-
-  if (callbackUrl) {
-    return redirect(callbackUrl);
-  }
-
-  return encodedRedirect(
-    'success',
-    '/forgot-password',
-    'Check your email for a link to reset your password.',
-  );
+  return { success: true, data: 'Check your email for a link to reset your password.' };
 };


--- a/src/lib/hooks/auth.ts
+++ b/src/lib/hooks/auth.ts
@ -1,11 +1,11 @@
 'use client'
 import { encodedRedirect } from '@/utils/utils';
 import { createClient } from '@/utils/supabase';
-import { redirect } from 'next/navigation';
 import type { User } from '@/utils/supabase';
 import type { Result } from './index';

-export const signUp = async (formData: FormData) => {
+
+export const signUp = async (formData: FormData): Promise<Result<string | null>> => {
  const name = formData.get('name') as string;
  const email = formData.get('email') as string;
  const password = formData.get('password') as string;
@ -33,13 +33,12 @@ export const signUp = async (formData: FormData) => {
    },
  });
  if (error) {
-    return encodedRedirect('error', '/sign-up', error.message);
+    return { success: false, error: error.message };
  } else {
-    return encodedRedirect(
-      'success',
-      '/sign-up',
-      'Thanks for signing up! Please check your email for a verification link.',
-    );
+    return {
+      success: true,
+      data: 'Thanks for signing up! Please check your email for a verification link.',
+    };
  }
 };

@ -61,14 +60,13 @@ export const signIn = async (
  }
 };

-export const forgotPassword = async (formData: FormData) => {
+export const forgotPassword = async (formData: FormData): Promise<Result<string | null>> => {
  const email = formData.get('email') as string;
  const supabase = createClient();
  const origin = process.env.NEXT_PUBLIC_SITE_URL!;
-  const callbackUrl = formData.get('callbackUrl') as string;

  if (!email) {
-    return encodedRedirect('error', '/forgot-password', 'Email is required');
+    return { success: false, error: 'Email is required' };
  }

  const { error } = await supabase.auth.resetPasswordForEmail(email, {
@ -76,22 +74,9 @@ export const forgotPassword = async (formData: FormData) => {
  });

  if (error) {
-    return encodedRedirect(
-      'error',
-      '/forgot-password',
-      'Could not reset password',
-    );
+    return { success: false, error: 'Could not reset password' };
  }
-
-  if (callbackUrl) {
-    return redirect(callbackUrl);
-  }
-
-  return encodedRedirect(
-    'success',
-    '/forgot-password',
-    'Check your email for a link to reset your password.',
-  );
+  return { success: true, data: 'Check your email for a link to reset your password.' };
 };