feat: add env to enable or disable OpenPanel (#78)

.env.example

@@ -16,8 +16,8 @@ GOOGLE_CLIENT_SECRET="your-google-client-secret"
 
 # OpenPanel Integration
 # Get these from your OpenPanel dashboard
-OPENPANEL_SECRET_KEY="op_sk_123456789"
-NEXT_PUBLIC_OPENPANEL_CLIENT_ID="op_pk_123456789"
+OPENPANEL_SECRET_KEY=
+NEXT_PUBLIC_OPENPANEL_CLIENT_ID=
 
 # Environment
 # Options: development, production, test

src/env.ts

@@ -14,7 +14,7 @@ export const env = createEnv({
     GOOGLE_CLIENT_SECRET: z.string().min(1),
     NODE_ENV: z.enum(["development", "production", "test"]),
     BETTER_AUTH_SECRET: z.string().min(1),
-    OPENPANEL_SECRET_KEY: z.string().min(1),
+    OPENPANEL_SECRET_KEY: z.string().optional(),
     SMTP_HOST: z.string().optional(),
     SMTP_PORT: z.coerce.number().positive().optional(),
     SMTP_USER: z.string().optional(),
@@ -28,7 +28,7 @@ export const env = createEnv({
    * `experimental__runtimeEnv` as well.
    */
   client: {
-    NEXT_PUBLIC_OPENPANEL_CLIENT_ID: z.string().min(1),
+    NEXT_PUBLIC_OPENPANEL_CLIENT_ID: z.string().optional(),
   },
   experimental__runtimeEnv: {
     NEXT_PUBLIC_OPENPANEL_CLIENT_ID: process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID,

src/features/auth/signup/model/signup.action.ts

@@ -8,6 +8,7 @@ import { LogEvents } from "@/shared/lib/analytics/events";
 import { ActionError, actionClient } from "@/shared/api/safe-actions";
 import { signUpSchema } from "@/features/auth/signup/schema/signup.schema";
 import { auth } from "@/features/auth/lib/better-auth";
+import { env } from "@/env";
 
 export const signUpAction = actionClient.schema(signUpSchema).action(async ({ parsedInput }) => {
   const t = await getI18n();
@@ -24,16 +25,18 @@ export const signUpAction = actionClient.schema(signUpSchema).action(async ({ pa
       },
     });
 
-    const analytics = await setupAnalytics({
-      userId: user.user.id,
-      fullName: `${parsedInput.firstName} ${parsedInput.lastName}`,
-      email: parsedInput.email,
-    });
+    if (env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID) {
+      const analytics = await setupAnalytics({
+        userId: user.user.id,
+        fullName: `${parsedInput.firstName} ${parsedInput.lastName}`,
+        email: parsedInput.email,
+      });
 
-    analytics.track({
-      event: LogEvents.Registered.name,
-      channel: LogEvents.Registered.channel,
-    });
+      analytics.track({
+        event: LogEvents.Registered.name,
+        channel: LogEvents.Registered.channel,
+      });
+    }
 
     return user;
   } catch (error) {

src/shared/lib/analytics/client.tsx

@@ -1,25 +1,37 @@
 import { OpenPanelComponent, type PostEventPayload, useOpenPanel } from "@openpanel/nextjs";
 
+import { env } from "@/env";
+
 const isProd = process.env.NODE_ENV === "production";
 
-const AnalyticsProvider = () => (
-  <OpenPanelComponent
-    clientId={process.env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID!}
-    trackAttributes={true}
-    trackOutgoingLinks={isProd}
-    trackScreenViews={isProd}
-  />
-);
+const AnalyticsProvider = function () {
+  if (!env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID) {
+    return null;
+  }
+
+  return (
+    <OpenPanelComponent
+      clientId={env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID}
+      trackAttributes={true}
+      trackOutgoingLinks={isProd}
+      trackScreenViews={isProd}
+    />
+  );
+};
 
 const track = (options: { event: string } & PostEventPayload["properties"]) => {
-  // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { track: openTrack } = useOpenPanel();
+  if (!env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID) {
+    return;
+  }
 
   if (!isProd) {
     console.log("Track", options);
     return;
   }
 
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const { track: openTrack } = useOpenPanel();
+
   const { event, ...rest } = options;
 
   openTrack(event, rest);

src/shared/lib/analytics/server.ts

@@ -16,7 +16,7 @@ export const setupAnalytics = async (options?: Props) => {
   const trackingConsent = !cookiesStore.has("tracking-consent") || cookiesStore.get("tracking-consent")?.value === "1";
 
   const client = new OpenPanel({
-    clientId: env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID,
+    clientId: env.NEXT_PUBLIC_OPENPANEL_CLIENT_ID!,
     clientSecret: env.OPENPANEL_SECRET_KEY,
   });
 
@@ -35,7 +35,7 @@ export const setupAnalytics = async (options?: Props) => {
 
   return {
     track: (options: { event: string } & PostEventPayload["properties"]) => {
-      if (process.env.NODE_ENV !== "production") {
+      if (env.NODE_ENV !== "production") {
         console.log("Track", options);
         return;
       }