feat: Nextauth is working

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"