feat(api): track api calls for analytics

Author: IcaroG

apps/frontend/components/dataprovider/auth-router.tsx

@@ -5,11 +5,11 @@ import {
   CommonDataProviderRegistration,
   DataProviderView,
 } from "./provider-view";
-import { spawn } from "@opensource-observer/utils";
 import { RegistrationProps } from "../../lib/types/plasmic";
 import { logger } from "../../lib/logger";
-import { analytics } from "../../lib/clients/segment";
+import { clientAnalytics } from "../../lib/clients/segment";
 import { supabaseClient } from "../../lib/clients/supabase";
+import { spawn } from "@opensource-observer/utils";
 
 const DEFAULT_PLASMIC_VARIABLE = "auth";
 
@@ -70,9 +70,12 @@ function AuthRouter(props: AuthRouterProps) {
     // Identify the user via Segment
     if (user) {
       spawn(
-        analytics.identify(user.id, {
-          name: user.user_metadata?.name,
-          email: user.email,
+        clientAnalytics!.identify({
+          userId: user.id,
+          traits: {
+            name: user.user_metadata?.name,
+            email: user.email,
+          },
         }),
       );
     }

apps/frontend/components/widgets/analytics.tsx

@@ -2,15 +2,15 @@
 
 import { useEffect } from "react";
 import { usePathname, useSearchParams } from "next/navigation";
+import { clientAnalytics } from "../../lib/clients/segment";
 import { spawn } from "@opensource-observer/utils";
-import { analytics } from "../../lib/clients/segment";
 
 function Analytics() {
   const pathname = usePathname();
   const searchParams = useSearchParams();
 
   useEffect(() => {
-    spawn(analytics.page());
+    spawn(clientAnalytics!.page());
   }, [pathname, searchParams]);
 
   return null;

apps/frontend/lib/auth/auth.ts

@@ -0,0 +1,110 @@
+import "server-only";
+
+import { type NextRequest } from "next/server";
+import { supabasePrivileged } from "../clients/supabase";
+import { User as SupabaseUser } from "@supabase/supabase-js";
+import { serverAnalytics } from "../clients/segment";
+
+type AnonUser = {
+  role: "anonymous";
+};
+
+type User = {
+  role: "user";
+  userId: string;
+  email?: string;
+  name: string;
+};
+
+export type Session = AnonUser | User;
+
+// HTTP headers
+const AUTH_PREFIX = "bearer";
+
+// Supabase schema
+const API_KEY_TABLE = "api_keys";
+const USER_ID_COLUMN = "user_id";
+const API_KEY_COLUMN = "api_key";
+const DELETED_COLUMN = "deleted_at";
+const ALL_COLUMNS = `${USER_ID_COLUMN},${API_KEY_COLUMN},${DELETED_COLUMN}`;
+
+const makeAnonUser = (): AnonUser => ({
+  role: "anonymous",
+});
+const makeUser = (user: SupabaseUser): User => ({
+  role: "user",
+  userId: user.id,
+  email: user.email,
+  name: user.user_metadata.name,
+});
+
+async function getSession(request: NextRequest): Promise<Session> {
+  const headers = request.headers;
+  const auth = headers.get("authorization");
+
+  // If no token provided, then return anonymous role
+  if (!auth) {
+    console.log(`auth: No token => anon`);
+    return makeAnonUser();
+  }
+
+  // Get the token
+  const trimmedAuth = auth.trim();
+  const token = trimmedAuth.toLowerCase().startsWith(AUTH_PREFIX)
+    ? trimmedAuth.slice(AUTH_PREFIX.length).trim()
+    : trimmedAuth;
+
+  // Get the user by API token
+  const { data: keyData, error: keyError } = await supabasePrivileged
+    .from(API_KEY_TABLE)
+    .select(ALL_COLUMNS)
+    .eq(API_KEY_COLUMN, token);
+
+  if (keyError || !keyData) {
+    console.warn(`auth: Error retrieving API keys => anon`, keyError);
+    return makeAnonUser();
+  }
+
+  // Filter out inactive/deleted keys
+  const activeKeys = keyData.filter((x) => !x.deleted_at);
+  if (activeKeys.length < 1) {
+    console.log(`auth: API key not valid => anon`);
+    return makeAnonUser();
+  }
+
+  const userId = activeKeys[0].user_id;
+  const { data: userData, error: userError } =
+    await supabasePrivileged.auth.admin.getUserById(userId);
+  if (userError || !userData) {
+    console.warn(`auth: Error retrieving user data => anon`, userError);
+    return makeAnonUser();
+  }
+
+  console.log(`/api/auth: API key and user valid valid => user`);
+  return makeUser(userData.user);
+}
+
+export async function verifySession(request: NextRequest) {
+  const session = await getSession(request);
+
+  const trackParams = {
+    event: "api_call",
+    properties: {
+      path: request.nextUrl.pathname,
+    },
+  };
+
+  if (session.role === "user") {
+    serverAnalytics!.track({
+      userId: session.userId,
+      ...trackParams,
+    });
+  } else {
+    serverAnalytics!.track({
+      anonymousId: crypto.randomUUID(),
+      ...trackParams,
+    });
+  }
+
+  return session;
+}

apps/frontend/lib/clients/segment.ts

@@ -1,4 +1,12 @@
+import { Analytics } from "@segment/analytics-node";
 import { AnalyticsBrowser } from "@segment/analytics-next";
 import { SEGMENT_KEY } from "../config";
 
-export const analytics = AnalyticsBrowser.load({ writeKey: SEGMENT_KEY });
+export const serverAnalytics =
+  typeof window === "undefined"
+    ? new Analytics({ writeKey: SEGMENT_KEY })
+    : undefined;
+export const clientAnalytics =
+  typeof window !== "undefined"
+    ? AnalyticsBrowser.load({ writeKey: SEGMENT_KEY })
+    : undefined;

apps/frontend/middleware.ts

@@ -0,0 +1,13 @@
+import { NextResponse } from "next/server";
+import type { NextRequest } from "next/server";
+import { verifySession } from "./lib/auth/auth";
+
+export default async function middleware(request: NextRequest) {
+  await verifySession(request);
+
+  return NextResponse.next();
+}
+
+export const config = {
+  matcher: "/api/:path*",
+};

apps/frontend/package.json

@@ -39,7 +39,8 @@
     "@mui/x-date-pickers": "^6.20.2",
     "@opensource-observer/utils": "workspace:*",
     "@plasmicapp/loader-nextjs": "^1.0.398",
-    "@segment/analytics-next": "^1.70.0",
+    "@segment/analytics-next": "^1.77.0",
+    "@segment/analytics-node": "^2.2.1",
     "@supabase/auth-helpers-nextjs": "^0.8.7",
     "@supabase/auth-ui-react": "^0.4.7",
     "@supabase/auth-ui-shared": "^0.1.8",