feat: Pass in JWT token to the Apollo client

* Create a hook that will replace the HTTP link of the Apollog client to use an authorization token from the Supabase client when we see one * Update the event-data-provider to call the new hook * Try to get the Supabase JWT token globally once the Supabase client loads
opensource-observer · Mar 19, 2024 · 1afcd4a · 1afcd4a
1 parent 9999dfa
commit 1afcd4a
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 18 deletions.
diff --git a/apps/frontend/components/dataprovider/apollo-wrapper.tsx b/apps/frontend/components/dataprovider/apollo-wrapper.tsx
@@ -1,20 +1,41 @@
 "use client";
 
-import { ApolloLink, HttpLink } from "@apollo/client";
+import { ApolloLink, HttpLink, useApolloClient } from "@apollo/client";
 import {
   ApolloNextAppProvider,
   NextSSRInMemoryCache,
   NextSSRApolloClient,
   SSRMultipartLink,
 } from "@apollo/experimental-nextjs-app-support/ssr";
 import { DB_GRAPHQL_URL } from "../../lib/config";
+import { userToken } from "../../lib/clients/supabase";
 
-function makeClient() {
+// Supabase credentials get populated later on
+let initialized = false;
+const useEnsureAuth = () => {
+  const client = useApolloClient();
+  if (!initialized && userToken) {
+    client.setLink(makeLink());
+    initialized = true;
+  }
+};
+
+function makeLink() {
+  //console.log(userToken);
   const httpLink = new HttpLink({
     uri: DB_GRAPHQL_URL,
+    headers: userToken
+      ? {
+          Authorization: `Bearer ${userToken}`,
+        }
+      : {},
   });
+  return httpLink;
+}
 
-  return new NextSSRApolloClient({
+function makeClient() {
+  const httpLink = makeLink();
+  const client = new NextSSRApolloClient({
     cache: new NextSSRInMemoryCache(),
     link:
       typeof window === "undefined"
@@ -26,6 +47,7 @@ function makeClient() {
           ])
         : httpLink,
   });
+  return client;
 }
 
 function ApolloWrapper({ children }: React.PropsWithChildren) {
@@ -36,4 +58,4 @@ function ApolloWrapper({ children }: React.PropsWithChildren) {
   );
 }
 
-export { ApolloWrapper };
+export { ApolloWrapper, useEnsureAuth };
diff --git a/apps/frontend/components/dataprovider/event-data-provider.tsx b/apps/frontend/components/dataprovider/event-data-provider.tsx
@@ -30,6 +30,7 @@ import {
   CommonDataProviderRegistration,
 } from "./provider-view";
 import type { CommonDataProviderProps } from "./provider-view";
+import { useEnsureAuth } from "./apollo-wrapper";
 
 // Types used in the Plasmic registration
 type BucketWidth = "day" | "week" | "month";
@@ -336,6 +337,7 @@ const formatData = (
  * @returns
  */
 function ArtifactEventDataProvider(props: EventDataProviderProps) {
+  useEnsureAuth();
   const bucketWidth = getBucketWidth(props);
   const query =
     bucketWidth === "month"
@@ -388,9 +390,7 @@ function ArtifactEventDataProvider(props: EventDataProviderProps) {
   const formattedData = formatData(props, normalizedEventData, entityData, {
     gapFill: bucketWidth === "day",
   });
-  if (!eventLoading) {
-    console.log(props, rawEventData, eventError, formattedData);
-  }
+  !eventLoading && console.log(props, rawEventData, eventError, formattedData);
   return (
     <DataProviderView
       {...props}
@@ -407,6 +407,7 @@ function ArtifactEventDataProvider(props: EventDataProviderProps) {
  * @returns
  */
 function ProjectEventDataProvider(props: EventDataProviderProps) {
+  useEnsureAuth();
   const bucketWidth = getBucketWidth(props);
   const query =
     bucketWidth === "month"
@@ -454,9 +455,7 @@ function ProjectEventDataProvider(props: EventDataProviderProps) {
   const formattedData = formatData(props, normalizedData, entityData, {
     gapFill: bucketWidth === "day",
   });
-  if (!eventLoading) {
-    console.log(props, rawEventData, eventError, formattedData);
-  }
+  !eventLoading && console.log(props, rawEventData, eventError, formattedData);
   return (
     <DataProviderView
       {...props}
@@ -473,6 +472,7 @@ function ProjectEventDataProvider(props: EventDataProviderProps) {
  * @returns
  */
 function CollectionEventDataProvider(props: EventDataProviderProps) {
+  useEnsureAuth();
   const bucketWidth = getBucketWidth(props);
   const query =
     bucketWidth === "month"
@@ -523,9 +523,7 @@ function CollectionEventDataProvider(props: EventDataProviderProps) {
   const formattedData = formatData(props, normalizedData, entityData, {
     gapFill: bucketWidth === "day",
   });
-  if (!eventLoading) {
-    console.log(props, rawEventData, eventError, formattedData);
-  }
+  !eventLoading && console.log(props, rawEventData, eventError, formattedData);
   return (
     <DataProviderView
       {...props}
@@ -542,6 +540,7 @@ function CollectionEventDataProvider(props: EventDataProviderProps) {
  * @returns
  */
 function ProjectUserDataProvider(props: EventDataProviderProps) {
+  useEnsureAuth();
   const {
     data: rawEventData,
     error: eventError,
@@ -577,9 +576,7 @@ function ProjectUserDataProvider(props: EventDataProviderProps) {
     name: ensure<string>(x.project_name, "project missing 'project_name'"),
   }));
   const formattedData = formatData(props, normalizedData, entityData);
-  if (!eventLoading) {
-    console.log(props, rawEventData, eventError, formattedData);
-  }
+  !eventLoading && console.log(props, rawEventData, eventError, formattedData);
   return (
     <DataProviderView
       {...props}

diff --git a/apps/frontend/lib/clients/supabase.ts b/apps/frontend/lib/clients/supabase.ts
@@ -7,12 +7,25 @@ import {
 } from "../config";
 import { Database } from "../types/supabase";
 
+// Supabase unprivileged client
 const supabaseClient = createClient(SUPABASE_URL, SUPABASE_ANON_KEY);
+// Supabase service account
 const supabasePrivileged = createClient<Database>(
   SUPABASE_URL,
   SUPABASE_SERVICE_KEY,
 );
 
+// Get the user JWT token
+let userToken: string | undefined;
+supabaseClient.auth
+  .getSession()
+  .then((data) => {
+    userToken = data.data.session?.access_token;
+  })
+  .catch((e) => {
+    console.warn("Failed to get Supabase session, ", e);
+  });
+
 type SupabaseQueryArgs = {
   tableName: string; // table to query
   columns?: string; // comma-delimited column names (e.g. `address,claimId`)
@@ -57,5 +70,5 @@ async function supabaseQuery(args: SupabaseQueryArgs): Promise<any[]> {
   return data;
 }
 
-export { supabaseClient, supabasePrivileged, supabaseQuery };
+export { supabaseClient, supabasePrivileged, supabaseQuery, userToken };
 export type { SupabaseQueryArgs };
diff --git a/apps/frontend/lib/config.ts b/apps/frontend/lib/config.ts
@@ -28,7 +28,7 @@ export const DB_GRAPHQL_URL = requireEnv(
   "NEXT_PUBLIC_DB_GRAPHQL_URL",
 );
 
-export const OSO_API_KEY = process.env.OSO_API_KEY ?? "MISSING";
+export const OSO_API_KEY = process.env.OSO_API_KEY;
 
 export const SUPABASE_URL = requireEnv(
   process.env.NEXT_PUBLIC_SUPABASE_URL,