feat: add clerk to vite-template

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"

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">
+		<div>
-			<h1 className="title">
+			<header className="flex items-center justify-end py-4 px-6 bg-white shadow-sm mb-6">
-				Admin <br />
+				<div>
-				<span>Kitchen Sink</span>
+					<SignedOut>
-			</h1>
+						<SignInButton mode="modal">
-			<CounterButton />
+							<Button variant="outline">Sign In</Button>
-			<Card className="my-6">
+						</SignInButton>
-				<CardHeader>
+					</SignedOut>
-					<CardTitle>shadcn/ui Card Example</CardTitle>
+					<SignedIn>
-				</CardHeader>
+						<UserButton afterSignOutUrl="/" />
-				<CardContent>
+					</SignedIn>
-					<Button>shadcn/ui Button</Button>
+				</div>
-				</CardContent>
+			</header>
-			</Card>
+
-			<p className="description">
+			<div className="container">
-				Built With{" "}
+				<h1 className="title">
-				<Link href="https://turborepo.com" newTab>
+					Admin <br />
-					Turborepo
+					<span>Kitchen Sink</span>
-				</Link>
+				</h1>
-				{" & "}
+				<CounterButton />
-				<Link href="https://vitejs.dev/" newTab>
+				<Card className="my-6">
-					Vite
+					<CardHeader>
-				</Link>
+						<CardTitle>shadcn/ui Card Example</CardTitle>
-			</p>
+					</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>
 	);
 }

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);
+	const root = createRoot(el);
-  root.render(
+	root.render(
-    <React.StrictMode>
+		<React.StrictMode>
-      <App />
+			<ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
-    </React.StrictMode>
+				<App />
-  );
+			</ClerkProvider>
+		</React.StrictMode>
+	);
 } else {
-  throw new Error("Could not find root element");
+	throw new Error("Could not find root element");
 }

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"