rakesh0x · rakesh0x · Sep 17, 2025 · Sep 17, 2025 · Sep 18, 2025
diff --git a/app/dashboard/layout.tsx b/app/dashboard/layout.tsx
@@ -4,6 +4,8 @@ import { useState } from "react";
 import { Sidebar, SidebarBody, SidebarLink } from "@/components/ui/sidebar";
 import { IconArrowLeft, IconBrandTabler, IconSettings, IconUserBolt } from "@tabler/icons-react";
 import { cn } from "@/lib/utils";
+import { useUser } from "@clerk/nextjs";
+import { User } from "@clerk/nextjs/server";
 
 const links = [
   {
@@ -42,11 +44,12 @@ export default function DashboardLayout({
   children: React.ReactNode;
 }>) {
   const [open, setOpen] = useState(true);
+  const { user } = useUser();
 
   return (
     <div className="flex h-screen">
       <Sidebar open={open} setOpen={setOpen}>
-        <SidebarBody className="justify-between gap-10 bg-[#18191a]">
+        <SidebarBody className="justify-between gap-10 bg-[#0a0a0a]">
           <div className="flex flex-1 flex-col overflow-x-hidden overflow-y-auto">
             {open ? <Logo /> : <LogoIcon />}
             <div className="mt-8 flex flex-col gap-2">
@@ -58,7 +61,7 @@ export default function DashboardLayout({
           <div>
             <SidebarLink
               link={{
-                label: "User Name",
+                label: user?.fullName || user?.firstName || "User",
                 href: "#",
                 icon: (
                   <img

diff --git a/app/globals.css b/app/globals.css
@@ -94,7 +94,13 @@
   0% {
     background-position: 0%;}
   100% {
-    background-position: 200%;}}}
+    background-position: 200%;}}
+  --animate-pulse: pulse var(--duration) ease-out infinite;
+  @keyframes pulse {
+  0%, 100% {
+    boxShadow: 0 0 0 0 var(--pulse-color);}
+  50% {
+    boxShadow: 0 0 0 8px var(--pulse-color);}}}
 
 :root {
   --radius: 0.625rem;

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -4,6 +4,14 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { Analytics } from "@vercel/analytics/next";
+import {
+  ClerkProvider,
+  SignInButton,
+  SignUpButton,
+  SignedIn,
+  SignedOut,
+  UserButton,
+} from '@clerk/nextjs'
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -22,14 +30,17 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <head>
-        <link rel="icon" href="/magnified.png" />
-      </head>
-      <body className={` bg-[#0a0a0a] ${geistSans.variable} ${geistMono.variable} antialiased`}>
-        <Analytics/>
-        {children}
-      </body>
-    </html>
+    <ClerkProvider afterSignInUrl="/dashboard" afterSignUpUrl="/dashboard">
+      <html lang="en">
+        <head>
+          <link rel="icon" href="/magnified.png" />
+        </head>
+        <body className={` bg-[#0a0a0a] ${geistSans.variable} ${geistMono.variable} antialiased`}>
+          <Analytics/>
+          {children}
+        </body>
+      </html>
+    </ClerkProvider>
+
   );
 }
diff --git a/app/page.tsx b/app/page.tsx
@@ -4,6 +4,8 @@ import { AuroraTextDemo } from "@/components/magicui/aurora";
 import { InputDemo } from "@/components/ui/waitlist";
 import { AnimatedGradientTextDemo } from "@/components/magicui/Animatedintro";
 import { Poppins } from "next/font/google";
+import { Auth } from "@/components/ui/onboarding";
+import { SignedOut } from '@clerk/nextjs';
 
 const poppins = Poppins({ 
   subsets: ["latin"],
@@ -40,10 +42,12 @@ export default function Home() {
           </span>.
         </p>
 
-        {/* Waitlist / Input */}
-        <div className="w-full max-w-md">
-          <InputDemo />
-        </div>
+          <br/>
+        <div>
+          <SignedOut>
+            <Auth/>
+          </SignedOut>
+        </div>      
       </div>
     </SpotlightNewDemo>
   );

diff --git a/components.json b/components.json
@@ -17,5 +17,8 @@
     "ui": "@/components/ui",
     "lib": "@/lib",
     "hooks": "@/hooks"
+  },
+  "registries": {
+    "@magicui": "https://magicui.design/r/{name}.json"
   }
 }
diff --git a/components/ui/onboarding.tsx b/components/ui/onboarding.tsx
@@ -0,0 +1,11 @@
+"use client" 
+import { Button, buttonVariants } from "./button"
+import { SignInButton } from '@clerk/nextjs'
+
+export  function Auth() {
+    return (
+            <SignInButton mode="modal">
+              <Button>Get Started</Button>
+            </SignInButton>
+    )
+}
diff --git a/components/ui/sidebar.tsx b/components/ui/sidebar.tsx
@@ -3,6 +3,7 @@ import { cn } from "@/lib/utils";
 import React, { useState, createContext, useContext } from "react";
 import { AnimatePresence, motion } from "motion/react";
 import { IconMenu2, IconX } from "@tabler/icons-react";
+import { useUser } from "@clerk/nextjs";
 
 interface Links {
   label: string;
@@ -56,6 +57,7 @@ export const Sidebar = ({
   open,
   setOpen,
   animate,
+
 }: {
   children: React.ReactNode;
   open?: boolean;
@@ -84,6 +86,7 @@ export const DesktopSidebar = ({
   ...props
 }: React.ComponentProps<typeof motion.div>) => {
   const { open, setOpen, animate } = useSidebar();
+  const { user } = useUser();
   return (
     <>
       <motion.div
@@ -110,6 +113,7 @@ export const MobileSidebar = ({
   ...props
 }: React.ComponentProps<"div">) => {
   const { open, setOpen } = useSidebar();
+  const { user } = useUser();
   return (
     <>
       <div

diff --git a/middleware.ts b/middleware.ts
@@ -0,0 +1,16 @@
+import { clerkMiddleware, createRouteMatcher } from '@clerk/nextjs/server';
+
+const isPublicRoute = createRouteMatcher(['/', '/dashboard']);
+
+export default clerkMiddleware((auth, request) => {
+  if (!isPublicRoute(request)) auth.protect();
+});
+
+export const config = {
+  matcher: [
+    // Skip Next.js internals and all static files, unless found in search params
+    '/((?!_next|[^?]*\\.(?:html?|css|js(?!on)|jpe?g|webp|png|gif|svg|ttf|woff2?|ico|csv|docx?|xlsx?|zip|webmanifest)).*)',
+    // Always run for API routes
+    '/(api|trpc)(.*)',
+  ],
+};