Reaching a finishing point!

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 { useRouter } from 'next/navigation';
-import { Input, Label } from '@/components/ui';
+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 (
-    <>
+      <Card>
-      <form
+        <CardHeader>
-        className='flex-1 flex flex-col w-full gap-2 text-foreground
+          <CardTitle className='text-2xl font-medium'>Reset Password</CardTitle>
-        [&>input]:mb-6 min-w-64 max-w-64 mx-auto'
+          <CardDescription className='text-sm text-foreground'>
-      >
+            Don&apos;t have an account?{' '}
-        <div>
+            <Link className='font-medium underline' href='/sign-up'>
-          <h1 className='text-2xl font-medium'>Reset Password</h1>
+              Sign up
-          <p className='text-sm text-secondary-foreground'>
-            Already have an account?{' '}
-            <Link className='text-primary underline' href='/sign-in'>
-              Sign in
             </Link>
-          </p>
+          </CardDescription>
-        </div>
+        </CardHeader>
-        <div className='flex flex-col gap-2 [&>input]:mb-3 mt-8'>
+        <CardContent>
-          <Label htmlFor='email'>Email</Label>
+          <Form {...form} >
-          <Input name='email' placeholder='you@example.com' required />
+            <form
-          <SubmitButton formAction={forgotPassword}>
+              onSubmit={form.handleSubmit(handleForgotPassword)}
-            Reset Password
+              className='flex flex-col min-w-64 space-y-6'
-          </SubmitButton>
+            >
-          <FormMessage message={searchParams} />
+              <FormField
-        </div>
+                control={form.control}
-      </form>
+                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;

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>

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
+              statusMessage.includes('Error') ||
-                className={`text-sm text-center ${
+                statusMessage.includes('error') ||
-                  statusMessage.includes('Error') || statusMessage.includes('failed')
+                statusMessage.includes('failed') ||
-                    ? 'text-destructive'
+                statusMessage.includes('invalid')
-                    : 'text-green-800'
+                ? <StatusMessage message={{error: statusMessage}} />
-                }`}
+                : <StatusMessage message={{ message: statusMessage }} />
-              >
-                {statusMessage}
-              </div>
             )}
             <SubmitButton
               disabled={isLoading}

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 { StatusMessage, SubmitButton } from '@/components/default';
-import { Input, Label } from '@/components/ui';
+import { useRouter } from 'next/navigation';
-import { redirect } from 'next/navigation';
+import { useAuth } from '@/components/context/auth';
-import { getUser } from '@/lib/actions';
+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 formSchema = z
-  const searchParams = await props.searchParams;
+  .object({
-  const user = await getUser();
+    name: z.string().min(2, {
-  if (user.success) redirect('/profile');
+      message: 'Name must be at least 2 characters.',
-  if ('message' in searchParams) {
+    }),
-    return (
+    email: z.string().email({
-      <div
+      message: 'Please enter a valid email address.',
-        className='w-full flex-1 flex items-center h-screen
+    }),
-        sm:max-w-md justify-center gap-2 p-4'
+    password: z.string().min(8, {
-      >
+      message: 'Password must be at least 8 characters.',
-        <FormMessage message={searchParams} />
+    }),
-      </div>
+    confirmPassword: z.string().min(8, {
-    );
+      message: 'Password must be at least 8 characters.',
-  } else {
+    }),
-    return (
+  })
-      <form className='flex flex-col min-w-64 max-w-64 mx-auto'>
+  .refine((data) => data.password === data.confirmPassword, {
-        <h1 className='text-2xl font-medium'>Sign up</h1>
+    message: 'Passwords do not match!',
-        <p className='text-sm text text-foreground'>
+    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>
+        </CardDescription>
-        <div className='flex flex-col gap-2 [&>input]:mb-3 mt-8'>
+      </CardHeader>
-          <Label htmlFor='name'>Name</Label>
+      <CardContent>
-          <Input name='name' placeholder='Full Name' required />
+        <Form {...form}>
-          <Label htmlFor='email'>Email</Label>
+          <form onSubmit={form.handleSubmit(handleSignUp)} className='flex flex-col mx-auto space-y-4'>
-          <Input name='email' placeholder='you@example.com' required />
+            <FormField
-          <Label htmlFor='password'>Password</Label>
+              control={form.control}
-          <Input
+              name='name'
-            type='password'
+              render={({ field }) => (
-            name='password'
+                <FormItem>
-            placeholder='Your password'
+                  <FormLabel>Name</FormLabel>
-            minLength={6}
+                  <FormControl>
-            required
+                    <Input type='text' placeholder='Full Name' {...field} />
-          />
+                  </FormControl>
-          <SubmitButton formAction={signUp} pendingText='Signing up...'>
+                </FormItem>
-            Sign up
+              )}
-          </SubmitButton>
+            />
-          <FormMessage message={searchParams} />
+            <FormField
-        </div>
+              control={form.control}
-      </form>
+              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;

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>

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;

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>
-  );
-};

src/components/default/index.tsx

@@ -1,4 +1,2 @@
-import { FormMessage, type Message } from '@/components/default/form-message';
+export { StatusMessage, type Message } from '@/components/default/status-message';
-import { SubmitButton } from '@/components/default/submit-button';
+export { SubmitButton } from '@/components/default/submit-button';
-
-export { FormMessage, type Message, SubmitButton };

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}>
+            <SubmitButton
-              {isLoading ? (
+              disabled={isLoading}
-                <>
+              pendingText='Saving...'
-                  <Loader2 className='mr-2 h-4 w-4 animate-spin' />
+            >
-                  Saving...
+              Save Changes
-                </>
+            </SubmitButton>
-              ) : (
-                'Save Changes'
-              )}
-            </Button>
           </div>
         </form>
       </Form>

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 {...form}>
+          <form 
-        <form 
+            onSubmit={form.handleSubmit(handleUpdatePassword)}
-          onSubmit={form.handleSubmit(handleUpdatePassword)}
+            className='space-y-6'
-          className='space-y-6'
+          >
-        >
+            <FormField
-          <FormField
+              control={form.control}
-            control={form.control}
+              name='password'
-            name='password'
+              render={({ field }) => (
-            render={({ field }) => (
+                <FormItem>
-              <FormItem>
+                  <FormLabel>New Password</FormLabel>
-                <FormLabel>New Password</FormLabel>
+                  <FormControl>
-                <FormControl>
+                    <Input type='password' {...field} />
-                  <Input type='password' {...field} />
+                  </FormControl>
-                </FormControl>
+                  <FormDescription>
-                <FormDescription>
+                    Enter your new password. Must be at least 8 characters.
-                  Enter your new password. Must be at least 8 characters.
+                  </FormDescription>
-                </FormDescription>
+                  <FormMessage />
-                <FormMessage />
+                </FormItem>
-              </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>
             )}
-          />
+            <div className='flex justify-center'>
-          <FormField
+              <SubmitButton
-            control={form.control}
+                disabled={isLoading}
-            name='confirmPassword'
+                pendingText='Updating Password...'
-            render={({ field }) => (
+              >
-              <FormItem>
+                Update Password
-                <FormLabel>Confirm Password</FormLabel>
+              </SubmitButton>
-                <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>
-          )}
+          </form>
-          <div className='flex justify-center'>
+        </Form>
-            <SubmitButton
-              disabled={isLoading}
-              pendingText='Updating Password...'
-            >
-              Update Password
-            </SubmitButton>
-          </div>
-        </form>
-      </Form>
       </CardContent>
     </div>
   );

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>
+  );
+};

src/components/default/profile/index.tsx

@@ -1,3 +1,4 @@
 export * from './AvatarUpload';
 export * from './ProfileForm';
 export * from './ResetPasswordForm';
+export * from './SignOut';

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>
+  );
+};

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' />

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(
+    return {
-      'success',
+      success: true,
-      '/sign-up',
+      data: 'Thanks for signing up! Please check your email for a verification link.',
-      '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(
+    return { success: false, error: 'Could not reset password' };
-      'error',
-      '/forgot-password',
-      'Could not reset password',
-    );
   }
-
+  return { success: true, data: 'Check your email for a link to reset your password.' };
-  if (callbackUrl) {
-    return redirect(callbackUrl);
-  }
-
-  return encodedRedirect(
-    'success',
-    '/forgot-password',
-    'Check your email for a link to reset your password.',
-  );
 };
 
 

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(
+    return {
-      'success',
+      success: true,
-      '/sign-up',
+      data: 'Thanks for signing up! Please check your email for a verification link.',
-      '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(
+    return { success: false, error: 'Could not reset password' };
-      'error',
-      '/forgot-password',
-      'Could not reset password',
-    );
   }
-
+  return { success: true, data: 'Check your email for a link to reset your password.' };
-  if (callbackUrl) {
-    return redirect(callbackUrl);
-  }
-
-  return encodedRedirect(
-    'success',
-    '/forgot-password',
-    'Check your email for a link to reset your password.',
-  );
 };