afiqzudinhadi/ecommerce-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add clerk integration to remix-template

Browse source
This commit is contained in:
afiqzudinhadi 2025-06-23 14:36:45 +08:00
parent e70d4d34c2
commit da8aaa1db6
4 changed files with 300 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

10
apps/remix-template/app/root.tsx
View file

@ -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 (
<html lang="en">
@ -31,6 +37,8 @@ export function Layout({ children }: { children: React.ReactNode }) {
);
}
export default function App() {
export function App() {
return <Outlet />;
}
export default ClerkApp(App);

40
apps/remix-template/app/routes/clerk.tsx Normal file
View file

@ -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 bg-muted">
<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>
<Button variant="default">Sign In</Button>
</SignInButton>
</div>
</SignedOut>
</CardContent>
</Card>
</div>
);
}