outdated router recommendation in the doc https://supabase.com/partners/integrations/clerk about supabase

[Xavier-IV]

Hi, I would like to add on this.

In "Step 5: Set auth token with Supabase", it is mentioned to use supabase.auth.setAuth(token).

Unfortunately this method is not available anymore, and I'm not sure what's the next step.

The error I'm seeing in my editor:

I've used both Supabase and Clerk's documentation on this integration, none are working at the moment.

Edit: The docs stated this setAuth is now deprecated. Would appreciate on updating this, as I still haven't found a way yet to set this up.

Edit 2:
The official docs in Clerk is the solution:
https://clerk.com/docs/integrations/databases/supabase#fetch-supabase-data-in-your-code

Only caveat is you need to import useRef and useState from react, otherwise the token would be undefined as it wasn't hydrated yet.

[Xavier-IV]

Hi, I would like to add on this.

In "Step 5: Set auth token with Supabase", it is mentioned to use supabase.auth.setAuth(token).

Following up to this, I just found a solution, but it feels hacky. Each time we need to call supabase, I made it to accept token as a param.

export const supabase = (clerkToken: string) =>
  createClient<Database>(
    process.env.NEXT_PUBLIC_SUPABASE_URL ?? "",
    process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY ?? "",
    {
      global: {
        fetch: async (url, options = {}) => {
          const headers = new Headers(options?.headers);
          headers.set("Authorization", `Bearer ${clerkToken}`);

          return fetch(url, {
            ...options,
            headers,
          });
        },
      },
    },
  );

"use client";

export default function Component() {
  const { getToken } = useAuth();
  const [token, setToken] = useState('');

  // Where the magic happen, and leveraging useState
  const myQuery = supabase(token).from('my_table').select();

  useEffect(() => {
    const token = await getToken();
    if (!token) return;

    setToken(token);
    const data = await myQuery;

   // continue with your data
  }, []}
}

The problem with official docs using window.Clerk?.session.getToken() is that the token was null at first. Only once its fully loaded, we can leverage the token (thus the above solution).