apps/remix-template/app/routes/clerk._index.tsx

@@ -0,0 +1,40 @@
+import { SignInButton, UserButton, SignedIn, SignedOut } from "@clerk/remix";
+import {
+	Card,
+	CardContent,
+	CardHeader,
+	CardTitle,
+} from "@repo/ui/components/card";
+import { Button } from "@repo/ui/components/button";
+
+export default function Index() {
+	return (
+		<div className="flex min-h-screen items-center justify-center">
+			<Card className="w-full max-w-md shadow-lg">
+				<CardHeader>
+					<CardTitle className="text-center">Welcome</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<SignedIn>
+						<div className="flex flex-col items-center gap-4">
+							<p className="text-green-700 font-medium">
+								You are signed in!
+							</p>
+							<UserButton />
+						</div>
+					</SignedIn>
+					<SignedOut>
+						<div className="flex flex-col items-center gap-4">
+							<p className="text-red-700 font-medium">
+								You are signed out
+							</p>
+							<SignInButton mode="modal">
+								<Button variant="default">Sign In</Button>
+							</SignInButton>
+						</div>
+					</SignedOut>
+				</CardContent>
+			</Card>
+		</div>
+	);
+}

apps/remix-template/app/routes/clerk.tsx

@@ -1,40 +1,24 @@
 import { SignInButton, UserButton, SignedIn, SignedOut } from "@clerk/remix";
-import {
-	Card,
-	CardContent,
-	CardHeader,
-	CardTitle,
-} from "@repo/ui/components/card";
 import { Button } from "@repo/ui/components/button";
+import { Outlet } from "@remix-run/react";
 
 export default function Index() {
 	return (
-		<div className="flex min-h-screen items-center justify-center bg-muted">
+		<div>
-			<Card className="w-full max-w-md shadow-lg">
+			<header className="flex items-center justify-end py-4 px-6 bg-white shadow-sm mb-6">
-				<CardHeader>
+				<div>
-					<CardTitle className="text-center">Welcome</CardTitle>
-				</CardHeader>
-				<CardContent>
-					<SignedIn>
-						<div className="flex flex-col items-center gap-4">
-							<p className="text-green-700 font-medium">
-								You are signed in!
-							</p>
-							<UserButton />
-						</div>
-					</SignedIn>
 					<SignedOut>
-						<div className="flex flex-col items-center gap-4">
+						<SignInButton mode="modal">
-							<p className="text-red-700 font-medium">
+							<Button variant="outline">Sign In</Button>
-								You are signed out
+						</SignInButton>
-							</p>
-							<SignInButton>
-								<Button variant="default">Sign In</Button>
-							</SignInButton>
-						</div>
 					</SignedOut>
-				</CardContent>
+					<SignedIn>
-			</Card>
+						<UserButton />
+					</SignedIn>
+				</div>
+			</header>
+
+			<Outlet />
 		</div>
 	);
 }

apps/vite-template/src/app/index.tsx

@@ -28,7 +28,7 @@ function App() {
 						</SignInButton>
 					</SignedOut>
 					<SignedIn>
-						<UserButton afterSignOutUrl="/" />
+						<UserButton />
 					</SignedIn>
 				</div>
 			</header>
@@ -39,6 +39,7 @@ function App() {
 					<span>Kitchen Sink</span>
 				</h1>
 				<CounterButton />
+
 				<Card className="my-6">
 					<CardHeader>
 						<CardTitle>shadcn/ui Card Example</CardTitle>
@@ -47,6 +48,17 @@ function App() {
 						<Button>shadcn/ui Button</Button>
 					</CardContent>
 				</Card>
+
+				<Card className="my-6">
+					<CardHeader>
+						<CardTitle>Clerk Authentication Example</CardTitle>
+					</CardHeader>
+					<CardContent>
+						<SignedOut>You are signed out!</SignedOut>
+						<SignedIn>You are signed in!</SignedIn>
+					</CardContent>
+				</Card>
+
 				<p className="description">
 					Built With{" "}
 					<Link href="https://turborepo.com" newTab>