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,9 +10,29 @@ import {
 	CardHeader,
 	CardTitle,
 } from "@repo/ui/components/card";
+import {
+	SignedIn,
+	SignedOut,
+	SignInButton,
+	UserButton,
+} from "@clerk/clerk-react";
 
 function App() {
 	return (
+		<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 />
@@ -38,6 +58,7 @@ function App() {
 					</Link>
 				</p>
 			</div>
+		</div>
 	);
 }
 

apps/vite-template/src/main.tsx

@@ -2,13 +2,24 @@ 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>
+			<ClerkProvider publishableKey={PUBLISHABLE_KEY} afterSignOutUrl="/">
 				<App />
+			</ClerkProvider>
 		</React.StrictMode>
 	);
 } else {

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"