Merge pull request #4 from clerk/brk.chore/supabase-integration-2

chord: Update template based on new guide

Author: kylemac

README.md

@@ -34,10 +34,11 @@
 Integrating Supabase with Clerk gives you the benefits of using a Supabase database while leveraging Clerk's authentication, prebuilt components, and webhooks. To get the most out of Supabase with Clerk, you must implement custom [Row Level Security](https://supabase.com/docs/guides/auth/row-level-security) (RLS) policies.
 
 After following [the Clerk + Supabase integration guide](https://clerk.com/docs/integrations/databases/supabase), you will have learned how to:
-  - Create RLS policies that restrict access to data based on the user's Clerk ID. This way, users can only access data that belongs to them.
-  - Configure Supabase to accept JWTs from Clerk
-  - Create a JWT template in Clerk to generate Supabase JWTs
-  - Use the Supabase JWTs to authenticate Supabase queries in your Next.js app
+
+- Enable the Supabase integration on your Clerk instance
+- Create RLS policies that restrict access to data based on the user's Clerk ID. This way, users can only access data that belongs to them.
+- Configure Clerk as a Supabase third-party auth provider
+- Use Clerk JWTs to authenticate Supabase queries in your Next.js app
 
 ## Deploy
 
@@ -83,4 +84,3 @@ Feel free to create a support thread on our [Discord](https://clerk.com/discord)
 You can discuss ideas, ask questions, and meet others from the community in our [Discord](https://discord.com/invite/b5rXHjAg7A).
 
 If you prefer, you can also find support through our [Twitter](https://twitter.com/ClerkDev), or you can [email](mailto:[email protected]) us!
-

app/page.tsx

@@ -1,12 +1,12 @@
-'use client';
-import { useEffect, useState } from 'react';
-import { useSession, useUser } from '@clerk/nextjs';
-import { createClient } from '@supabase/supabase-js';
+"use client";
+import { useEffect, useState } from "react";
+import { useSession, useUser } from "@clerk/nextjs";
+import { createClient } from "@supabase/supabase-js";
 
 export default function Home() {
   const [tasks, setTasks] = useState<any[]>([]);
   const [loading, setLoading] = useState(true);
-  const [name, setName] = useState('');
+  const [name, setName] = useState("");
   // The `useUser()` hook will be used to ensure that Clerk has loaded data about the logged in user
   const { user } = useUser();
   // The `useSession()` hook will be used to get the Clerk session object
@@ -18,23 +18,8 @@ export default function Home() {
       process.env.NEXT_PUBLIC_SUPABASE_URL!,
       process.env.NEXT_PUBLIC_SUPABASE_KEY!,
       {
-        global: {
-          // Get the custom Supabase token from Clerk
-          fetch: async (url, options = {}) => {
-            const clerkToken = await session?.getToken({
-              template: 'supabase',
-            });
-
-            // Insert the Clerk Supabase token into the headers
-            const headers = new Headers(options?.headers);
-            headers.set('Authorization', `Bearer ${clerkToken}`);
-
-            // Now call the default fetch
-            return fetch(url, {
-              ...options,
-              headers,
-            });
-          },
+        async accessToken() {
+          return session?.getToken() ?? null;
         },
       }
     );
@@ -50,7 +35,7 @@ export default function Home() {
 
     async function loadTasks() {
       setLoading(true);
-      const { data, error } = await client.from('tasks').select();
+      const { data, error } = await client.from("tasks").select();
       if (!error) setTasks(data);
       setLoading(false);
     }
@@ -61,7 +46,7 @@ export default function Home() {
   async function createTask(e: React.FormEvent<HTMLFormElement>) {
     e.preventDefault();
     // Insert task into the "tasks" database
-    await client.from('tasks').insert({
+    await client.from("tasks").insert({
       name,
     });
     window.location.reload();
@@ -75,7 +60,7 @@ export default function Home() {
 
       {!loading &&
         tasks.length > 0 &&
-        tasks.map((task: any) => <p>{task.name}</p>)}
+        tasks.map((task: any) => <p key={task.id}>{task.name}</p>)}
 
       {!loading && tasks.length === 0 && <p>No tasks found</p>}
 

app/ssr/actions.ts

@@ -1,18 +1,18 @@
-'use server';
+"use server";
 
-import { createClerkSupabaseClientSsr } from './client';
+import { createServerSupabaseClient } from "./client";
 
-const client = createClerkSupabaseClientSsr();
+const client = createServerSupabaseClient();
 
 export async function addTask(name: string) {
   try {
-    const response = await client.from('tasks').insert({
+    const response = await client.from("tasks").insert({
       name,
     });
 
-    console.log('Task successfully added!', response);
+    console.log("Task successfully added!", response);
   } catch (error: any) {
-    console.error('Error adding task:', error.message);
-    throw new Error('Failed to add task');
+    console.error("Error adding task:", error.message);
+    throw new Error("Failed to add task");
   }
 }

app/ssr/client.tsx

@@ -1,31 +1,13 @@
-import { auth } from '@clerk/nextjs/server';
-import { createClient } from '@supabase/supabase-js';
-
-export function createClerkSupabaseClientSsr() {
-  // The `useAuth()` hook is used to access the `getToken()` method
-  const { getToken } = auth();
+import { auth } from "@clerk/nextjs/server";
+import { createClient } from "@supabase/supabase-js";
 
+export function createServerSupabaseClient() {
   return createClient(
     process.env.NEXT_PUBLIC_SUPABASE_URL!,
     process.env.NEXT_PUBLIC_SUPABASE_KEY!,
     {
-      global: {
-        // Get the custom Supabase token from Clerk
-        fetch: async (url, options = {}) => {
-          const clerkToken = await getToken({
-            template: 'supabase',
-          });
-
-          // Insert the Clerk Supabase token into the headers
-          const headers = new Headers(options?.headers);
-          headers.set('Authorization', `Bearer ${clerkToken}`);
-
-          // Now call the default fetch
-          return fetch(url, {
-            ...options,
-            headers,
-          });
-        },
+      async accessToken() {
+        return (await auth()).getToken();
       },
     }
   );

app/ssr/page.tsx

@@ -1,12 +1,12 @@
-import { createClerkSupabaseClientSsr } from './client';
-import AddTaskForm from './AddTaskForm';
+import { createServerSupabaseClient } from "./client";
+import AddTaskForm from "./AddTaskForm";
 
 export default async function Home() {
   // Use the custom Supabase client you created
-  const client = createClerkSupabaseClientSsr();
+  const client = createServerSupabaseClient();
 
   // Query the 'tasks' table to render the list of tasks
-  const { data, error } = await client.from('tasks').select();
+  const { data, error } = await client.from("tasks").select();
   if (error) {
     throw error;
   }
@@ -18,7 +18,7 @@ export default async function Home() {
 
       <div>
         {tasks?.map((task: any) => (
-          <p>{task.name}</p>
+          <p key={task.id}>{task.name}</p>
         ))}
       </div>