[Feature] Auth added using clerkjs

.env.example

@@ -0,0 +1,7 @@
+NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY=<NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY>
+
+## Clerk JS Credentials
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=<NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY>
+CLERK_SECRET_KEY=<CLERK_SECRET_KEY>
+NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
+NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up

README.md

@@ -64,15 +64,18 @@ You can see a live demo of the portfolio website at [https://design-deck.vercel.
 
 # Environment Variables
 
-The project relies on environment variables stored in a `.env.local` file located at the root of the `Designdeck` directory to manage configurations. Ensure that essential variables such as database connection strings, API keys, or any other sensitive information are properly set up.
+The project relies on environment variables stored in a `.env.exapmle` file located at the root of the `Designdeck` directory to manage configurations. Ensure that essential variables such as database connection strings, API keys, or any other sensitive information are properly set up.
 
 ```bash
-NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY = "*YOUR LIVEBLOCKS API PUBLIC KEY*"
+NEXT_PUBLIC_LIVEBLOCKS_PUBLIC_KEY="<YOUR_LIVEBLOCKS_API_PUBLIC_KEY>"
+NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY="<YOUR_CLERK_PUBLISHABLE_KEY>"
+CLERK_SECRET_KEY="<YOUR_CLERK_SECRET_KEY>"
+NEXT_PUBLIC_CLERK_SIGN_IN_URL="/sign-in"
+NEXT_PUBLIC_CLERK_SIGN_UP_URL="/sign-up"
 ```
 
-Be sure to replace `*YOUR LIVEBLOCKS API PUBLIC KEY*` with your actual LiveBlocks API public key to enable proper integration.
 
-**Note**: Note: Replace `YOUR LIVEBLOCKS API PUBLIC KEY` with your actual key. Sensitive information should not be committed to version control; include the .env files in your project's `gitignore.`
+**Note**: Note: Replace `YOUR LIVEBLOCKS API PUBLIC KEY`,  `<YOUR_CLERK_PUBLISHABLE_KEY>`, and `<YOUR_CLERK_SECRET_KEY>` with your actual key. Sensitive information should not be committed to version control; include the .env files in your project's `gitignore.`
 
 ### Getting started
 

app/(auth)/layout.tsx

@@ -0,0 +1,11 @@
+import React from "react";
+
+const Authlayout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <div className="h-screen flex items-center justify-center bg-black">
+      {children}
+    </div>
+  );
+};
+
+export default Authlayout;

app/(auth)/sign-in/[[...sign-in]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignIn } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignIn forceRedirectUrl={"/workspace"} />;
+}

app/(auth)/sign-up/[[...sign-up]]/page.tsx

@@ -0,0 +1,5 @@
+import { SignUp } from "@clerk/nextjs";
+
+export default function Page() {
+  return <SignUp forceRedirectUrl={"/workspace"} />;
+}

app/front-navbar.tsx

@@ -19,6 +19,8 @@ import { ChevronDown } from "@/public/assets/ChevronDown";
 import { ImDeviantart, ImDownload, ImHammer, ImNewspaper } from "react-icons/im";
 import { useTheme } from "next-themes";
 import ThemeSwitcher from "@/components/ui/ThemeSwitcher";
+import { SignInButton, SignUpButton } from "@clerk/nextjs";
+
 
 // Define props interface
 interface NavbarComponentProps {
@@ -108,14 +110,16 @@ const NavbarComponent: React.FC<NavbarComponentProps> = ({ isLoggedIn, setIsMenu
                 <NavbarContent justify="end">
                     {!isLoggedIn && (
                         <>
-                            <NavbarItem>
-                                <Link href="#">Login</Link>
-                            </NavbarItem>
-                            <NavbarItem>
-                                <Button as={Link} href="#">
-                                    Sign Up
-                                </Button>
-                            </NavbarItem>
+                        <NavbarItem>
+                            <Button>
+                                <SignInButton></SignInButton>
+                            </Button>
+                        </NavbarItem>
+                        <NavbarItem>
+                            <Button>
+                                <SignUpButton></SignUpButton>
+                            </Button>
+                        </NavbarItem>
                         </>
                     )}
                     <NavbarItem>

app/layout.tsx

@@ -3,6 +3,7 @@ import { Work_Sans } from "next/font/google";
 import "./globals.css";
 import { Room } from "./Room";
 import ThemeProvider from "./provider";
+import { ClerkProvider } from "@clerk/nextjs";
 import ThemeSwitcher from "@/components/ui/ThemeSwitcher";
 
 const workSans = Work_Sans({
@@ -22,16 +23,18 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
+    <ClerkProvider>
     <html lang="en">
       <body className={`${workSans.className} bg-dark`}>
       <ThemeProvider
           attribute="class"
           defaultTheme="system"
           enableSystem
-        >
+          >
         <Room>{children}</Room>
         </ThemeProvider>
       </body>
     </html>
+    </ClerkProvider>
   );
 }

components/Navbar.tsx

@@ -13,6 +13,8 @@ import { Button } from "./ui/button";
 import ShapesMenu from "./ShapesMenu";
 import ThemeSwitcher from "./ui/ThemeSwitcher";
 import { useTheme } from "next-themes";
+import { useAuth } from '@clerk/nextjs'
+import { UserButton } from "@clerk/nextjs";
 
 function Navbar({
   activeElement,
@@ -28,6 +30,8 @@ function Navbar({
   const { systemTheme, theme, setTheme } = useTheme();
   const currentTheme = theme === "dark" ? systemTheme : theme;
   const [darkMode, setDarkMode] = useState(false);
+  const { userId} = useAuth()
+
 
   useEffect(() => {
     if (currentTheme === "dark") {
@@ -120,7 +124,8 @@ function Navbar({
           <ThemeSwitcher />
         </div>
 
-        <ActiveUsers />
+
+        { userId ? <UserButton/> :<ActiveUsers/> }
       </nav>
     </div>
   );

middleware.ts

@@ -0,0 +1,23 @@
+import { clerkMiddleware, createRouteMatcher } from "@clerk/nextjs/server";
+
+const isPublicRoute = createRouteMatcher([
+  "/sign-in(.*)",
+  "/sign-up(.*)",
+  "/",
+  "/workspace",
+]);
+
+export default clerkMiddleware(async (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)(.*)",
+  ],
+};