setup clerk

.env.example

@@ -0,0 +1,52 @@
+# Since the ".env" file is gitignored, you can use the ".env.example" file to
+# build a new ".env" file when you clone the repo. Keep this file up-to-date
+# when you add new variables to `.env`.
+
+# This file will be committed to version control, so make sure not to have any
+# secrets in it. If you are cloning this repo, create a copy of this file named
+# ".env" and populate it with your secrets.
+
+# When adding additional environment variables, the schema in "/src/env.mjs"
+# should be updated accordingly.
+
+ORIGIN=""
+
+# Prisma DB
+# https://www.prisma.io/docs/reference/database-reference/connection-urls#env
+DATABASE_URL=""
+
+# Google API
+GOOGLE_CLIENT_ID=""
+GOOGLE_CLIENT_SECRET=""
+
+# Dall E API
+DALLE_API_KEY=""
+USE_MOCK_DALLE="true"
+
+# Stable Diffusion API
+STABLE_DIFFUSION_API_KEY=""
+STABLE_DIFFUSION_API_ENDPOINT=""
+
+# AWS/S3 API
+ACCESS_KEY_ID_AWS=""
+SECRET_ACCESS_KEY_AWS=""
+REGION_AWS="us-east-2"
+S3_BUCKET_URL_AWS=""
+S3_BUCKET_THUMBNAIL_URL_AWS=""
+S3_BUCKET_NAME_AWS=""
+
+# Stripe API
+STRIPE_PUBLISHABLE_KEY=""
+STRIPE_SECRET_KEY=""
+STRIPE_CREDITS_PRICE_ID=""
+STRIPE_WEB_HOOK_SECRET=""
+
+# Honeypot
+HONEYPOT_SECRET="SOME_SECRET_HONEYPOT"
+
+# CSRF
+SESSION_SECRET="SOME_SECRET_SESSION"
+
+# Clerk
+CLERK_PUBLISHABLE_KEY=""
+CLERK_SECRET_KEY=""

app/root.tsx

@@ -11,7 +11,11 @@ import {
   useLocation,
   useRouteError,
 } from "@remix-run/react";
-import { LoaderFunctionArgs } from "@remix-run/node";
+import {
+  LoaderFunction,
+  LoaderFunctionArgs,
+  MetaFunction,
+} from "@remix-run/node";
 import { Toaster, toast as showToast } from "sonner";
 import { prisma } from "services/prisma.server";
 import NavigationSidebar from "components/NavigationSidebar";
@@ -22,59 +26,76 @@ import { AuthenticityTokenProvider } from "remix-utils/csrf/react";
 import { HoneypotProvider } from "remix-utils/honeypot/react";
 import { honeypot } from "utils/honeypot.server";
 import { getToast, type Toast } from "utils/toast.server";
+import { rootAuthLoader } from "@clerk/remix/ssr.server";
+import { ClerkApp } from "@clerk/remix";
 
 import "./tailwind.css";
 import "./globals.css";
 
-export async function loader({ request }: LoaderFunctionArgs) {
-  const [csrfToken, csrfCookieHeader] = await csrf.commitToken(request);
-  const honeyProps = honeypot.getInputProps();
-  const users = (await prisma.user.findMany()) || [];
+export const meta: MetaFunction = () => [
+  {
+    charset: "utf-8",
+    title: "Pixel Studio AI",
+    viewport: "width=device-width,initial-scale=1",
+    property: "og:title",
+    content: "Pixel Studio AI",
+  },
+];
 
-  const { toast, headers: toastHeaders } = await getToast(request);
+// export async function loader({ request }: LoaderFunctionArgs) {
+export const loader: LoaderFunction = (args) => {
+  return rootAuthLoader(args, async ({ request }) => {
+    const [csrfToken, csrfCookieHeader] = await csrf.commitToken(request);
+    const honeyProps = honeypot.getInputProps();
+    const users = (await prisma.user.findMany()) || [];
 
-  return json(
-    {
-      // username: os.userInfo().username,
-      // theme: getTheme(request),
-      users: users.length,
-      toast,
-      ENV: getEnv(),
-      csrfToken,
-      honeyProps,
-    },
-    {
-      headers: combineHeaders(
-        csrfCookieHeader ? { "set-cookie": csrfCookieHeader } : null,
-        toastHeaders
-      ),
-    }
-  );
-}
+    const { toast, headers: toastHeaders } = await getToast(request);
+
+    return json(
+      {
+        // username: os.userInfo().username,
+        // theme: getTheme(request),
+        users: users.length,
+        toast,
+        ENV: getEnv(),
+        csrfToken,
+        honeyProps,
+      },
+      {
+        headers: combineHeaders(
+          csrfCookieHeader ? { "set-cookie": csrfCookieHeader } : null,
+          toastHeaders
+        ),
+      }
+    );
+  });
+};
 
 function Document({
   children,
-  env,
-}: {
+}: // env,
+{
   children: React.ReactNode;
-  env?: Record<string, string>;
+  // env?: Record<string, string>;
 }) {
   return (
     <html lang="en" className="dark h-full overflow-x-hidden">
       <head>
-        <meta charSet="utf-8" />
-        <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta
+          name="description"
+          content="Generate images with the power of AI"
+        />
         <Meta />
         <Links />
       </head>
       {/* <body className="dark"> */}
       <body>
         {children}
-        <script
+        {/* <script
           dangerouslySetInnerHTML={{
             __html: `window.ENV = ${JSON.stringify(env)}`,
           }}
-        />
+        /> */}
         <Toaster closeButton position="top-center" />
         <ScrollRestoration />
         <Scripts />
@@ -85,26 +106,31 @@ function Document({
 
 export function Layout({ children }: { children: React.ReactNode }) {
   const data = useLoaderData<typeof loader>();
-  console.log(data);
-  const location = useLocation();
-  const isHome = location.pathname === "/";
+  // console.log(data);
+  // const location = useLocation();
+  // const isHome = location.pathname === "/";
 
   return (
     <>
-      <Document env={data.ENV}>
-        {!isHome && <NavigationSidebar />} {children}
+      <Document
+      // env={data.ENV}
+      >
+        {children}
         {data && data.toast ? <ShowToast toast={data.toast} /> : null}
       </Document>
     </>
   );
 }
 
-export default function App() {
+function App() {
   const data = useLoaderData<typeof loader>();
+  const location = useLocation();
+  const isHome = location.pathname === "/";
   return (
     <HoneypotProvider {...data.honeyProps}>
       <AuthenticityTokenProvider token={data.csrfToken}>
-        <Outlet />;
+        {!isHome && <NavigationSidebar />}
+        <Outlet />
       </AuthenticityTokenProvider>
     </HoneypotProvider>
   );
@@ -125,3 +151,5 @@ export const ErrorBoundary = () => {
   captureRemixErrorBoundaryError(error);
   return <div>Something went wrong</div>;
 };
+
+export default ClerkApp(App);