From 14ef2719c799524014d4bd3a0c8bc9e43c00a7ac Mon Sep 17 00:00:00 2001
From: afiqzudinhadi <afiqzudinhadi@gmail.com>
Date: Mon, 23 Jun 2025 14:50:04 +0800
Subject: [PATCH] feat: add clerk to vite-template

---
 apps/vite-template/package.json      |  1 +
 apps/vite-template/src/app/index.tsx | 69 ++++++++++++++++++----------
 apps/vite-template/src/main.tsx      | 25 +++++++---
 package-lock.json                    |  1 +
 4 files changed, 65 insertions(+), 31 deletions(-)

diff --git a/apps/vite-template/package.json b/apps/vite-template/package.json
index c039e03..cdc9fe0 100644
--- a/apps/vite-template/package.json
+++ b/apps/vite-template/package.json
@@ -10,6 +10,7 @@
 		"lint": "eslint src/ --max-warnings 0"
 	},
 	"dependencies": {
+		"@clerk/clerk-react": "^5.32.0",
 		"@repo/ui": "*",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1"
diff --git a/apps/vite-template/src/app/index.tsx b/apps/vite-template/src/app/index.tsx
index 70d0076..5217819 100644
--- a/apps/vite-template/src/app/index.tsx
+++ b/apps/vite-template/src/app/index.tsx
@@ -10,33 +10,54 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@repo/ui/components/card";
+import {
+	SignedIn,
+	SignedOut,
+	SignInButton,
+	UserButton,
+} from "@clerk/clerk-react";
 
 function App() {
 	return (
-		<div className="container">
-			<h1 className="title">
-				Admin <br />
-				<span>Kitchen Sink</span>
-			</h1>
-			<CounterButton />
-			<Card className="my-6">
-				<CardHeader>
-					<CardTitle>shadcn/ui Card Example</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<Button>shadcn/ui Button</Button>
-				</CardContent>
-			</Card>
-			<p className="description">
-				Built With{" "}
-				<Link href="https://turborepo.com" newTab>
-					Turborepo
-				</Link>
-				{" & "}
-				<Link href="https://vitejs.dev/" newTab>
-					Vite
-				</Link>
-			</p>
+		<div>
+			<header className="flex items-center justify-end py-4 px-6 bg-white shadow-sm mb-6">
+				<div>
+					<SignedOut>
+						<SignInButton mode="modal">
+							<Button variant="outline">Sign In</Button>
+						</SignInButton>
+					</SignedOut>
+					<SignedIn>
+						<UserButton afterSignOutUrl="/" />
+					</SignedIn>
+				</div>
+			</header>
+
+			<div className="container">
+				<h1 className="title">
+					Admin <br />
+					<span>Kitchen Sink</span>
+				</h1>
+				<CounterButton />
+				<Card className="my-6">
+					<CardHeader>
+						<CardTitle>shadcn/ui Card Example</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<Button>shadcn/ui Button</Button>
+					</CardContent>
+				</Card>
+				<p className="description">
+					Built With{" "}
+					<Link href="https://turborepo.com" newTab>
+						Turborepo
+					</Link>
+					{" & "}
+					<Link href="https://vitejs.dev/" newTab>
+						Vite
+					</Link>
+				</p>
+			</div>
 		</div>
 	);
 }
diff --git a/apps/vite-template/src/main.tsx b/apps/vite-template/src/main.tsx
index 4582464..04b9577 100644
--- a/apps/vite-template/src/main.tsx
+++ b/apps/vite-template/src/main.tsx
@@ -2,15 +2,26 @@ import React from "react";
 import { createRoot } from "react-dom/client";
 import App from "./app";
 import "./index.css";
+import { ClerkProvider } from "@clerk/clerk-react";
+
+const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY;
+
+if (!PUBLISHABLE_KEY) {
+	throw new Error(
+		"VITE_PUBLISHABLE_KEY is not defined. Please set it in your environment variables."
+	);
+}
 
 const el = document.getElementById("root");
 if (el) {
-  const root = createRoot(el);
-  root.render(
-    <React.StrictMode>
-      <App />
-    </React.StrictMode>
-  );
+	const root = createRoot(el);
+	root.render(
+		<React.StrictMode>
+			<ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
+				<App />
+			</ClerkProvider>
+		</React.StrictMode>
+	);
 } else {
-  throw new Error("Could not find root element");
+	throw new Error("Could not find root element");
 }
diff --git a/package-lock.json b/package-lock.json
index 783852b..8225977 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -276,6 +276,7 @@
 		"apps/vite-template": {
 			"version": "0.0.0",
 			"dependencies": {
+				"@clerk/clerk-react": "^5.32.0",
 				"@repo/ui": "*",
 				"react": "^18.3.1",
 				"react-dom": "^18.3.1"