How do I remove Clerk Auth from two pages?

Question

I have an app and I'm trying to remove Clerk Auth login from two pages where I want to user to freely access.

The code I have is:

"use client";

import { useProModal } from "@/hooks/use-pro-modal";
import { useSignedInModal } from "@/hooks/use-signed-in-modal";
import { cn } from "@/lib/utils";
import { Home, Plus, Settings, Lock, FileText } from "lucide-react";
import { usePathname, useRouter } from "next/navigation";

interface SidebarProps {
  isPro: boolean;
  companionId: string | undefined;
  userId: string | undefined;
}

function Sidebar({ isPro, companionId, userId }: SidebarProps) {
  const pathname = usePathname();
  const router = useRouter();
  const proModal = useProModal();
  const signedInModal = useSignedInModal();
  const routes = [
    {
      icon: Home,
      href: "/",
      label: "Home",
      pro: false,
    },
    {
      icon: Plus,
      href: "/companion/new",
      label: "Create",
      pro: true,
    },
    {
      icon: Settings,
      href: "/settings",
      label: "Settings",
      pro: false,
    },
    {
      icon: FileText,
      href: "/privacypolicy",
      label: "Privacy Policy",
      pro: false,
    },
    {
      icon: Lock,
      href: "/termsofservice",
      label: "Terms of Service",
      pro: false,
    },
  ];

  const onNavigate = (url: string, pro: boolean, label: string) => {
    if (label === "Privacy Policy" || label === "Terms of Service") {
      return router.push(url);
    }
    if (!userId) {
      return signedInModal.onOpen();
    }
    if (
      label === "Create" &&
      companionId &&
      userId !== "user_2Uea7sTHE5XHMPMoibjEduqJP7y"
    ) {
      return router.push("/companion/" + companionId);
    }
    return router.push(url);
  };

  return (
    <div className="space-y-4 flex flex-col h-full text-primary bg-secondary">
      <div className="p-3 flex flex-1 justify-center">
        <div className="space-y-2">
          {routes.map((route) => (
            <div
              onClick={() => onNavigate(route.href, route.pro, route.label)}
              key={route.href}
              className={cn(
                "text-muted-foreground text-xs group flex p-3 w-full justify-start font-medium cursor-pointer hover:text-primary hover:bg-primary/10 rounded-lg transition",
                pathname === route.href && "bg-primary/10 text-primary"
              )}
            >
              <div className="flex flex-col gap-y-2 items-center flex-1">
                <route.icon className="h-5 w-5" />
                {route.label}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

export default Sidebar;

It seems that when I access those links it leads to the clerk login which I do not want. I want the user to access the privacypolicy and termsofservice without logging in or any authentication. How can I do this? Resolution?

Answer 1

I don't think you're showing the whole code, it should have something like <SignedIn> which you might want to relocate so that it your Public page would not be inside of <SignedIn> component

Example is having a <PublicLayout> and <AuthenticatedLayout>

Your <AuthenticatedLayout> would have the <SignedIn> and <PublicLayout> would not have any to avoid the redirection.