diff --git a/apps/remix-template/app/root.tsx b/apps/remix-template/app/root.tsx
index 5fc8e46..b6d7be6 100644
--- a/apps/remix-template/app/root.tsx
+++ b/apps/remix-template/app/root.tsx
@@ -6,9 +6,15 @@ import {
ScrollRestoration,
} from "@remix-run/react";
import { Analytics } from "@vercel/analytics/react";
+
import "@repo/ui/styles/styles.css";
import "@repo/ui/styles/global.css";
+import type { LoaderFunction } from "@remix-run/node";
+import { rootAuthLoader } from "@clerk/remix/ssr.server";
+import { ClerkApp } from "@clerk/remix";
+export const loader: LoaderFunction = (args) => rootAuthLoader(args);
+
export function Layout({ children }: { children: React.ReactNode }) {
return (
@@ -31,6 +37,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
);
}
-export default function App() {
+export function App() {
return ;
}
+
+export default ClerkApp(App);
diff --git a/apps/remix-template/app/routes/clerk.tsx b/apps/remix-template/app/routes/clerk.tsx
new file mode 100644
index 0000000..8c1c646
--- /dev/null
+++ b/apps/remix-template/app/routes/clerk.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 (
+
+
+
+ Welcome
+
+
+
+
+
+ You are signed in!
+
+
+
+
+ You are signed out
+
+
+
+
+
+