Fix auth

Author: fforres

Diff for: src/components/Navbar/MainNav.tsx

@@ -1,12 +1,48 @@
 import { NavBarProps } from "./types";
 import { NavbarItem } from "./NavbarItem";
+import {
+  SignInButton,
+  SignOutButton,
+  SignedIn,
+  SignedOut,
+} from "@clerk/clerk-react";
+import { Button } from "../ui/button";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export function MainNav({ items }: NavBarProps) {
+  const pathname = usePathname();
+  const [redirectUrl, setRedirectUrl] = useState("");
+  useEffect(() => {
+    setRedirectUrl(window.location.host);
+  }, []);
   return (
     <nav className={"items-center space-x-4 lg:space-x-6"}>
       {items.map((item) => (
         <NavbarItem key={`navbarItem-${item.content}`} item={item} />
       ))}
+      <SignedOut>
+        {process.env.NEXT_PUBLIC_SIGN_IN_URL ? (
+          <Button asChild variant="secondary">
+            <a
+              href={`${process.env.NEXT_PUBLIC_SIGN_IN_URL}?redirect_url=https://${redirectUrl}`}
+            >
+              Ingresar
+            </a>
+          </Button>
+        ) : (
+          <SignInButton mode="modal" redirectUrl={pathname}>
+            <Button variant="secondary">Ingresar</Button>
+          </SignInButton>
+        )}
+      </SignedOut>
+      <SignedIn>
+        <SignOutButton>
+          <Button variant={"link"} className="cursor-pointer">
+            Salir
+          </Button>
+        </SignOutButton>
+      </SignedIn>
     </nav>
   );
 }

Diff for: src/components/Navbar/MobileNav.tsx

@@ -9,9 +9,22 @@ import { NavBarProps } from "./types";
 import { MobileNavbarItem } from "./MobileNavbarItem";
 import { MobileLink } from "./MobileLink";
 import { Menu, PackageOpen } from "lucide-react";
+import {
+  SignInButton,
+  SignOutButton,
+  SignedIn,
+  SignedOut,
+} from "@clerk/clerk-react";
+import { usePathname } from "next/navigation";
+import { useEffect, useState } from "react";
 
 export function MobileNav({ items }: NavBarProps) {
-  const [open, setOpen] = React.useState(false);
+  const [open, setOpen] = useState(false);
+  const pathname = usePathname();
+  const [redirectUrl, setRedirectUrl] = useState("");
+  useEffect(() => {
+    setRedirectUrl(window.location.host);
+  }, []);
 
   return (
     <Sheet open={open} onOpenChange={setOpen}>
@@ -32,7 +45,7 @@ export function MobileNav({ items }: NavBarProps) {
         >
           <PackageOpen className="h-5 w-5" />
         </MobileLink>
-        <ScrollArea className="my-4 h-[calc(100vh-8rem)] pb-10 pl-6">
+        <ScrollArea className="my-4 h-[calc(100vh-8rem)] px-6 pb-10">
           <div className="flex flex-col space-y-2">
             <div className="flex flex-col space-y-3 pt-6">
               {items.map((item) => (
@@ -42,6 +55,37 @@ export function MobileNav({ items }: NavBarProps) {
                   setOpen={setOpen}
                 />
               ))}
+              <SignedOut>
+                {process.env.NEXT_PUBLIC_SIGN_IN_URL ? (
+                  <Button asChild variant="link">
+                    <a
+                      href={`${process.env.NEXT_PUBLIC_SIGN_IN_URL}?redirect_url=https://${redirectUrl}`}
+                    >
+                      Ingresar
+                    </a>
+                  </Button>
+                ) : (
+                  <SignInButton mode="modal" redirectUrl={pathname}>
+                    <Button variant="link" onClick={() => setOpen(false)}>
+                      Ingresar
+                    </Button>
+                  </SignInButton>
+                )}
+              </SignedOut>
+              <SignedIn>
+                <SignOutButton>
+                  <div
+                    className="cursor-pointer text-muted-foreground"
+                    onClick={() => {
+                      setOpen(false);
+                    }}
+                    // item={{ link: "#", content: "Salir" }}
+                    // setOpen={setOpen}
+                  >
+                    Salir
+                  </div>
+                </SignOutButton>
+              </SignedIn>
             </div>
           </div>
         </ScrollArea>

Diff for: src/components/nav.tsx

@@ -25,14 +25,6 @@ export const Nav = () => {
           content: "Comunidades",
           link: "/",
         },
-        {
-          content: "Login",
-          link: "/sign-in",
-        },
-        {
-          content: "Regístrate",
-          link: "/sign-up",
-        },
       ] satisfies NavbarMenuItem[],
     [],
   );