simple clerk setup for hackathon voting app

Author: andrelandgraf

hackathon-app/.env.example

@@ -0,0 +1,6 @@
+# Origin
+ORIGIN="http://localhost:5173"
+
+# Clerk
+CLERK_PUBLISHABLE_KEY=
+CLERK_SECRET_KEY=

hackathon-app/app/app.css

@@ -1,8 +1,9 @@
 @import "tailwindcss";
 
 @theme {
-  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif,
-    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+  --font-sans:
+    "Inter", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
 
 html,

hackathon-app/app/modules/config/env.client.ts

@@ -0,0 +1,22 @@
+import { z } from "zod";
+
+const ClientConfigSchema = z.object({
+  origin: z.string().url(),
+  clerk: z.object({
+    publishableKey: z.string(),
+  }),
+});
+
+export function getConfig() {
+  const configMeta: HTMLMetaElement | null = document.querySelector(
+    "meta[name='config']",
+  );
+  if (!configMeta) {
+    throw new Error("Config meta not found");
+  }
+
+  const config = ClientConfigSchema.parse(JSON.parse(configMeta.content));
+  return config;
+}
+
+export type ClientConfig = ReturnType<typeof getConfig>;

hackathon-app/app/modules/config/env.server.ts

@@ -0,0 +1,59 @@
+import { z } from "zod";
+import type { Schema, ZodTypeDef } from "zod";
+
+type PreValidate<ConfigData> = {
+  [K in keyof ConfigData]: ConfigData[K] extends object
+    ? PreValidate<ConfigData[K]> | undefined
+    : ConfigData[K] extends string
+      ? string | undefined // use string instead of enum values
+      : ConfigData[K] | undefined;
+};
+
+// Validation
+const validateConfigOrExit = <T, I>(
+  schema: Schema<T, ZodTypeDef, I>,
+  data: PreValidate<I>,
+): T => {
+  try {
+    return schema.parse(data);
+  } catch (exception: any) {
+    if (exception instanceof z.ZodError) {
+      console.error("Configuration validation failed. Exit is forced.");
+      exception.issues.forEach((issue) => {
+        console.error(`\t- issue: ${issue.path.join(".")}: ${issue.message}`);
+      });
+    } else {
+      console.error(exception);
+    }
+    process.exit(1);
+  }
+};
+
+// Definitions
+const InstanceSchema = z.object({
+  environment: z.enum(["development", "production", "test"]),
+  origin: z.string().url(),
+});
+
+const ClerkSchema = z.object({
+  publishableKey: z.string(),
+  secretKey: z.string(),
+});
+
+const MainConfigSchema = z
+  .object({
+    clerk: ClerkSchema,
+  })
+  .merge(InstanceSchema);
+
+export type MainConfig = z.infer<typeof MainConfigSchema>;
+
+const port = process.env.PORT ? Number.parseInt(process.env.PORT, 10) : 5173;
+export const mainConfig: MainConfig = validateConfigOrExit(MainConfigSchema, {
+  environment: process.env.NODE_ENV || "development",
+  origin: process.env.ORIGIN || `http://localhost:${port}`,
+  clerk: {
+    publishableKey: process.env.CLERK_PUBLISHABLE_KEY,
+    secretKey: process.env.CLERK_SECRET_KEY,
+  },
+});

hackathon-app/app/modules/nav/header.tsx

@@ -0,0 +1,14 @@
+import { SignedIn, SignedOut, SignInButton, UserButton } from "@clerk/clerk-react";
+
+export default function Header() {
+  return (
+    <header className="flex items-center justify-center py-8 px-4">
+      <SignedOut>
+        <SignInButton />
+      </SignedOut>
+      <SignedIn>
+        <UserButton />
+      </SignedIn>
+    </header>
+  );
+}

hackathon-app/app/root.tsx

@@ -6,6 +6,11 @@ import {
   Scripts,
   ScrollRestoration,
 } from "react-router";
+import { mainConfig } from "./modules/config/env.server";
+import type { ClientConfig } from "./modules/config/env.client";
+import { rootAuthLoader } from '@clerk/react-router/ssr.server'
+import { ClerkProvider } from "@clerk/react-router";
+import Header from "./modules/nav/header";
 
 import type { Route } from "./+types/root";
 import "./app.css";
@@ -23,6 +28,33 @@ export const links: Route.LinksFunction = () => [
   },
 ];
 
+export async function loader(args: Route.LoaderArgs) {
+  return rootAuthLoader(args, () => {
+    const clientConfig: ClientConfig = {
+      origin: mainConfig.origin,
+      clerk: {
+        publishableKey: mainConfig.clerk.publishableKey,
+      },
+    };
+    return {
+      clientConfig,
+    };
+  }, {
+    signUpFallbackRedirectUrl: "/", 
+    signInFallbackRedirectUrl: "/",
+  });
+}
+
+export function meta({ data }: Route.MetaArgs): ReturnType<Route.MetaFunction> {
+  const { clientConfig } = data;
+  return [
+    {
+      name: "config",
+      content: JSON.stringify(clientConfig),
+    },
+  ];
+}
+
 export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="en">
@@ -41,8 +73,18 @@ export function Layout({ children }: { children: React.ReactNode }) {
   );
 }
 
-export default function App() {
-  return <Outlet />;
+export default function App({ loaderData }: Route.ComponentProps) {
+  return (
+    <ClerkProvider
+      publishableKey={loaderData.clientConfig.clerk.publishableKey}
+      loaderData={loaderData}
+      signUpFallbackRedirectUrl="/"
+      signInFallbackRedirectUrl="/"
+    >
+      <Header />
+      <Outlet />
+    </ClerkProvider>
+  );
 }
 
 export function ErrorBoundary({ error }: Route.ErrorBoundaryProps) {