feat: Nextauth is working

components/auth/AuthButton.tsx

@@ -6,10 +6,11 @@ import { useFormStatus } from "react-dom";
 
 export const AuthButton = ({ type }: { type: string }) => {
   const { pending } = useFormStatus();
+
   return (
     <Button color="primary" type="submit" aria-disabled={pending}>
       {pending ? (
-        <CircularProgress aria-label="Loading..." />
+        <CircularProgress aria-label="Loading..." size="sm" />
       ) : type === "sign-in" ? (
         "Log In"
       ) : (

components/auth/AuthForm.tsx

@@ -3,7 +3,8 @@
 import { zodResolver } from "@hookform/resolvers/zod";
 import { Icon } from "@iconify/react";
 import { Button, Checkbox, Divider, Link } from "@nextui-org/react";
-import { useState } from "react";
+import { useRouter } from "next/navigation";
+import { useEffect } from "react";
 import { useFormState } from "react-dom";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
@@ -17,17 +18,14 @@ import {
 } from "@/components/ui/form";
 import { authFormSchema } from "@/types";
 
-import { ProwlerExtended } from "../icons";
+import { NotificationIcon, ProwlerExtended } from "../icons";
 import { ThemeSwitch } from "../ThemeSwitch";
 import { CustomInput } from "../ui/custom";
 import { AuthButton } from "./AuthButton";
 
 export const AuthForm = ({ type }: { type: string }) => {
-  const [user, setUser] = useState(null);
-
   const formSchema = authFormSchema(type);
-  // const [state, dispath] = useFormState(authenticate, undefined);
-
+  const router = useRouter();
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
     defaultValues: {
@@ -36,10 +34,33 @@ export const AuthForm = ({ type }: { type: string }) => {
     },
   });
 
-  const onSubmit = (values: z.infer<typeof formSchema>) => {
+  const [state, dispatch] = useFormState(authenticate, undefined);
+
+  useEffect(() => {
+    if (state?.message === "Success") {
+      router.push("/");
+    }
+  }, [state]);
+
+  console.log(state, "el state desde el AuthForm");
+
+  const onSubmit = async (data: z.infer<typeof formSchema>) => {
     // Do something with the form values
     // this will be type-safe and validated
-    console.log(values);
+    try {
+      // Sign-up logic will be here.
+      if (type === "sign-in") {
+        dispatch({
+          email: data.email.toLowerCase(),
+          password: data.password,
+        });
+      }
+      // if (type === "sign-up") {
+      //   const newUser = await signUpNew(data);
+      // }
+    } catch (error) {
+      console.log(error);
+    }
   };
 
   return (
@@ -106,6 +127,7 @@ export const AuthForm = ({ type }: { type: string }) => {
             />
 
             <CustomInput control={form.control} password />
+
             {type === "sign-in" && (
               <div className="flex items-center justify-between px-1 py-2">
                 <Checkbox name="remember" size="sm">
@@ -150,7 +172,10 @@ export const AuthForm = ({ type }: { type: string }) => {
                         isRequired
                         className="py-4"
                         size="sm"
-                        {...field}
+                        checked={field.value === "true"}
+                        onChange={(e) =>
+                          field.onChange(e.target.checked ? "true" : "false")
+                        }
                       >
                         I agree with the&nbsp;
                         <Link href="#" size="sm">
@@ -162,15 +187,23 @@ export const AuthForm = ({ type }: { type: string }) => {
                         </Link>
                       </Checkbox>
                     </FormControl>
-                    <FormMessage />
+                    <FormMessage className="text-system-error dark:text-system-error" />
                   </>
                 )}
               />
             )}
 
+            {state?.message === "Credentials error" && (
+              <div className="flex flex-row items-center gap-2 text-system-error">
+                <NotificationIcon size={16} />
+                <p className="text-s">Incorrect email or password</p>
+              </div>
+            )}
+
             <AuthButton type={type} />
           </form>
         </Form>
+
         {type === "sign-in" && (
           <>
             <div className="flex items-center gap-4 py-2">

components/ui/custom/CustomInput.tsx

@@ -11,25 +11,25 @@ import { authFormSchema } from "@/types";
 
 const formSchema = authFormSchema("sign-up");
 
-type CustomInputProps =
+type CustomInputProps = {
+  control: Control<z.infer<typeof formSchema>>;
+  isRequired?: boolean;
+} & (
   | {
-      control: Control<z.infer<typeof formSchema>>;
+      password?: false;
       name: FieldPath<z.infer<typeof formSchema>>;
       label: string;
       type: "text" | "email";
       placeholder: string;
-      isRequired?: boolean;
-      password?: false;
     }
   | {
-      control: Control<z.infer<typeof formSchema>>;
       password: true;
       name?: never;
       label?: never;
       type?: never;
       placeholder?: never;
-      isRequired?: never;
-    };
+    }
+);
 
 export const CustomInput = ({
   control,
@@ -50,6 +50,15 @@ export const CustomInput = ({
   const inputPlaceholder = password ? "Enter your password" : placeholder;
   const inputIsRequired = password ? true : isRequired;
 
+  const endContent = password && (
+    <button type="button" onClick={toggleVisibility}>
+      <Icon
+        className="pointer-events-none text-2xl text-default-400"
+        icon={isVisible ? "solar:eye-closed-linear" : "solar:eye-bold"}
+      />
+    </button>
+  );
+
   return (
     <FormField
       control={control}
@@ -63,22 +72,11 @@ export const CustomInput = ({
               placeholder={inputPlaceholder}
               type={inputType}
               variant="bordered"
+              endContent={endContent}
               {...field}
-              endContent={
-                password ? (
-                  <button type="button" onClick={toggleVisibility}>
-                    <Icon
-                      className="pointer-events-none text-2xl text-default-400"
-                      icon={
-                        isVisible ? "solar:eye-closed-linear" : "solar:eye-bold"
-                      }
-                    />
-                  </button>
-                ) : null
-              }
             />
           </FormControl>
-          <FormMessage />
+          <FormMessage className="text-system-error dark:text-system-error" />
         </>
       )}
     />

components/ui/form/Form.tsx

@@ -14,7 +14,7 @@ import {
 
 import { cn } from "@/lib/utils";
 
-import { Label } from "./label";
+import { Label } from "./Label";
 
 const Form = FormProvider;
 

components/ui/sidebar/SidebarWrap.tsx

@@ -3,7 +3,9 @@
 import { Icon } from "@iconify/react";
 import { Button, ScrollShadow, Spacer, Tooltip } from "@nextui-org/react";
 import clsx from "clsx";
+import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { useSession } from "next-auth/react";
 import React, { useCallback } from "react";
 import { useMediaQuery } from "usehooks-ts";
 
@@ -21,6 +23,8 @@ import { UserAvatar } from "./UserAvatar";
 
 export const SidebarWrap = () => {
   const pathname = usePathname();
+  const { data: session } = useSession();
+
   const [isCollapsed, setIsCollapsed] = useLocalStorage("isCollapsed", false);
 
   const isMobile = useMediaQuery("(max-width: 768px)");
@@ -65,11 +69,13 @@ export const SidebarWrap = () => {
       </div>
       <Spacer y={8} />
 
-      <UserAvatar
-        userName={"User name"}
-        position={"Software Engineer"}
-        isCompact={isCompact}
-      />
+      <Link href={"/profile"}>
+        <UserAvatar
+          userName={session?.user?.name ?? "Guest"}
+          position={session?.user?.companyName ?? "Company Name"}
+          isCompact={isCompact}
+        />{" "}
+      </Link>
 
       <ScrollShadow className="-mr-6 h-full max-h-full py-6 pr-6">
         <Sidebar
@@ -124,6 +130,7 @@ export const SidebarWrap = () => {
             )}
           </Button>
         </Tooltip>
+
         <Tooltip content="Log Out" isDisabled={!isCompact} placement="right">
           <Button
             aria-label="Log Out"