blah blah

package.json

@@ -51,7 +51,7 @@
     "@sentry/nextjs": "^9.34.0",
     "@supabase-cache-helpers/postgrest-react-query": "^1.13.4",
     "@supabase/ssr": "^0.6.1",
-    "@supabase/supabase-js": "^2.50.2",
+    "@supabase/supabase-js": "^2.50.3",
     "@t3-oss/env-nextjs": "^0.12.0",
     "@tanstack/react-query": "^5.81.5",
     "@tanstack/react-table": "^8.21.3",
@@ -75,10 +75,10 @@
     "react-icons": "^5.5.0",
     "react-resizable-panels": "^3.0.3",
     "recharts": "^3.0.2",
-    "sonner": "^2.0.5",
+    "sonner": "^2.0.6",
     "tailwind-merge": "^3.3.1",
     "vaul": "^1.1.2",
-    "zod": "^3.25.67"
+    "zod": "^3.25.71"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
@@ -98,7 +98,7 @@
     "prettier": "^3.6.2",
     "prettier-plugin-tailwindcss": "^0.6.13",
     "tailwindcss": "^4.1.11",
-    "tw-animate-css": "^1.3.4",
+    "tw-animate-css": "^1.3.5",
     "typescript": "^5.8.3",
     "typescript-eslint": "^8.35.1"
   },

src/app/page.tsx

@@ -1,4 +1,5 @@
 import { SignInCard } from '@/components/default/auth/cards/client/sign-in';
+import { ForgotPasswordCard } from '@/components/default/auth/cards/client/forgot-password';
 import { ThemeToggle } from '@/lib/hooks/context';
 
 export default function HomePage() {
@@ -9,6 +10,7 @@ export default function HomePage() {
           Create <span className='text-[hsl(280,100%,70%)]'>T3</span> App
         </h1>
         <ThemeToggle />
+        <ForgotPasswordCard />
         <SignInCard/>
       </div>
     </main>

src/components/default/auth/buttons/client/sign-out.tsx

@@ -0,0 +1,48 @@
+'use client';
+import { SubmitButton, type SubmitButtonProps } from '@/components/default/forms';
+import { useRouter } from 'next/navigation';
+import { useAuth } from '@/lib/hooks/context';
+import { signOut } from '@/lib/queries';
+import { useSupabaseClient } from '@/utils/supabase';
+import { cn } from '@/lib/utils';
+
+type SignOutProps = Omit<SubmitButtonProps, 'disabled' | 'onClick'>
+
+export const SignOut = ({
+  className,
+  pendingText = 'Signing out...',
+  ...props
+}: SignOutProps) => {
+
+  const supabase = useSupabaseClient();
+  const { loading, refreshUser } = useAuth();
+  const router = useRouter();
+
+  const handleSignOut = async () => {
+    try {
+      if (!supabase) throw new Error('Supabase client not found');
+      const result = await signOut(supabase);
+      if (result.error) throw new Error(result.error.message);
+      await refreshUser();
+      router.push('/sign-in');
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  return (
+    <SubmitButton
+      disabled={loading}
+      onClick={handleSignOut}
+      pendingText={pendingText}
+      className={cn(
+        'text-[1.0rem] font-semibold \
+        hover:bg-red-700/60 dark:hover:bg-red-300/80',
+        className
+      )}
+      {...props}
+    >
+      Sign Out
+    </SubmitButton>
+  );
+};

src/components/default/auth/cards/client/forgot-password.tsx

@@ -0,0 +1,177 @@
+'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/queries';
+import { useAuth } from '@/lib/hooks/context';
+import { useEffect, useState, type ComponentProps } from 'react';
+import { useRouter } from 'next/navigation';
+import { useSupabaseClient } from '@/utils/supabase';
+import { StatusMessage, SubmitButton } from '@/components/default/forms';
+import { cn } from '@/lib/utils';
+
+const forgotPasswordFormSchema = z.object({
+  email: z.string().email({
+    message: 'Please enter a valid email address.'
+  }),
+});
+
+type ForgotPasswordCardProps = {
+  cardClassName?: ComponentProps<typeof Card>['className'];
+  cardProps?: Omit<ComponentProps<typeof Card>, 'className'>;
+  cardTitleClassName?: ComponentProps<typeof CardTitle>['className'];
+  cardTitleProps?: Omit<ComponentProps<typeof CardTitle>, 'className'>;
+  cardDescriptionClassName?: ComponentProps<typeof CardDescription>['className'];
+  cardDescriptionProps?: Omit<ComponentProps<typeof CardDescription>, 'className'>;
+  signUpLinkClassName?: ComponentProps<typeof Link>['className'];
+  signUpLinkProps?: Omit<ComponentProps<typeof Link>, 'className' | 'href'>;
+  formClassName?: ComponentProps<'form'>['className'];
+  formProps?: Omit<ComponentProps<'form'>, 'className' | 'onSubmit'>;
+  formLabelClassName?: ComponentProps<typeof FormLabel>['className'];
+  formLabelProps?: Omit<ComponentProps<typeof FormLabel>, 'className'>;
+  buttonProps?: ComponentProps<typeof SubmitButton>;
+};
+
+export const ForgotPasswordCard = ({
+  cardClassName,
+  cardProps,
+  cardTitleClassName,
+  cardTitleProps,
+  cardDescriptionClassName,
+  cardDescriptionProps,
+  signUpLinkClassName,
+  signUpLinkProps,
+  formClassName,
+  formProps,
+  formLabelClassName,
+  formLabelProps,
+  buttonProps = {
+    pendingText: 'Sending Reset Link...',
+  },
+}: ForgotPasswordCardProps) => {
+  const router = useRouter();
+  const { isAuthenticated, loading, refreshUser } = useAuth();
+  const [statusMessage, setStatusMessage] = useState('');
+  const supabase = useSupabaseClient();
+
+  const form = useForm<z.infer<typeof forgotPasswordFormSchema>>({
+    resolver: zodResolver(forgotPasswordFormSchema),
+    defaultValues: {
+      email: '',
+    },
+  });
+
+  useEffect(() => {
+    if (isAuthenticated) router.push('/')
+  }, [isAuthenticated, router]);
+
+  const handleForgotPassword = async (values: z.infer<typeof forgotPasswordFormSchema>) => {
+    try {
+      setStatusMessage('');
+      const formData = new FormData();
+      formData.append('email', values.email);
+      if (!supabase) throw new Error('Supabase client not found');
+      const result = await forgotPassword(supabase, formData);
+      if (result.error) throw new Error(result.error.message);
+      await refreshUser();
+      setStatusMessage('Check your email for a link to reset your password.');
+      form.reset();
+      router.push('');
+    } catch (error) {
+      setStatusMessage(
+        `Error: ${error instanceof Error ? error.message : 'Could not sign in!'}`,
+      );
+    }
+  };
+
+  return (
+    <Card
+      className={cn('min-w-xs sm:min-w-sm bg-card/50', cardClassName)}
+      {...cardProps}
+    >
+      <CardHeader>
+        <CardTitle
+          className={cn('text-2xl font-medium', cardTitleClassName)}
+          {...cardTitleProps}
+        >
+          Forgot Password
+        </CardTitle>
+        <CardDescription
+          className={cn('text-sm text-foreground', cardDescriptionClassName)}
+          {...cardDescriptionProps}
+        >
+          Don&apos;t have an account?{' '}
+          <Link
+            className={cn('font-medium underline', signUpLinkClassName)}
+            href='/sign-up'
+            {...signUpLinkProps}
+          >
+            Sign up!
+          </Link>
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <Form {...form}>
+          <form
+            onSubmit={form.handleSubmit(handleForgotPassword)}
+            className={cn('flex flex-col min-w-64 space-y-6', formClassName)}
+            {...formProps}
+          >
+            <FormField
+              control={form.control}
+              name='email'
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel
+                    className={cn('text-xl', formLabelClassName)}
+                    {...formLabelProps}
+                  >
+                    Email
+                  </FormLabel>
+                  <FormControl>
+                    <Input
+                      type='email'
+                      placeholder='you@example.com'
+                      {...field}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+            <SubmitButton
+              disabled={loading}
+              {...buttonProps}
+            >
+              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>
+  );
+};

src/components/default/auth/cards/client/profile.tsx

@@ -0,0 +1,4 @@
+'use client';
+import { useAuth } from '@/lib/hooks/context';
+import { useEffect } from 'react';
+import { useRouter } from 'next/navigation';

src/components/default/auth/cards/client/sign-in.tsx

@@ -1,5 +1,4 @@
 'use client';
-
 import { z } from 'zod';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useForm } from 'react-hook-form';

src/components/default/forms/submit-button.tsx

@@ -7,9 +7,8 @@ import { cn } from '@/lib/utils';
 
 export type SubmitButtonProps = Omit<
   ComponentProps<typeof Button>,
-  'type' | 'aria-disabled' | 'className',
+  'type' | 'aria-disabled'
 > & {
-  className?: ComponentProps<typeof Button>['className'];
   pendingText?: string;
   pendingTextClassName?: ComponentProps<'p'>['className'];
   pendingTextProps?: Omit<ComponentProps<'p'>, 'className'>;