Clerk Integrations Guide uses deprecated supabase.auth.setAuth

[JohnGemstone]

Improve documentation

Link

Clerk Integrations Guide

Describe the problem

Hi! Seems like the clerk integrations guide is outdated. It still uses the setAuth method which is now deprecated.

Describe the improvement

Clerk tokens could instead be set in the authorization header via a client function like so:

const supabaseClient = async (supabaseAccessToken) => {
  const supabase = createClient(
    process.env.NEXT_PUBLIC_SUPABASE_URL,
    process.env.NEXT_PUBLIC_SUPABASE_KEY,
    {
      global: { headers: { Authorization: `Bearer ${supabaseAccessToken}` } },
    }
  );
  // set Supabase JWT on the client object,
  // so it is sent up with all Supabase requests
  return supabase;
};

Referenced from Clerk's Docs + garyaustin via Discord.

[novemberkilo]

Can this issue please get some attention - at the very least please take the clerk integration guide down until it is updated. It is incorrect and needlessly causes time and effort to be wasted.

[gregnr]

Thanks for reporting this @JohnGemstone and the ping @novemberkilo. Would either of you be interested in opening a small PR for this?

supabase/apps/docs/pages/guides/integrations/clerk.mdx

Lines 122 to 155 in 5e66512

	## Step 5: Set auth token with Supabase
	In order to access the custom JWT, you can use the `getToken` function returned by the Clerk `useAuth` hook and pass it the name of your template (hopefully you remembered from earlier).
	**Note**: The `getToken({ template: <your-template-name> })` call is asynchronous and returns a Promise that needs to be resolved before accessing the token value. This token is short-lived for better security and should be called before every request to your Supabase backend. The caching and refreshing of the token is handled automatically by Clerk.
	Call `supabase.auth.setAuth(token)` to override the JWT on the current client. The JWT will then be sent to Supabase with all subsequent network requests.
	```jsx
	import { useAuth } from '@clerk/nextjs'
	import supabase from '../lib/supabaseClient'
	export default function Home() {
	const { getToken } = useAuth()
	const fetchData = async () => {
	// TODO #1: Replace with your JWT template name
	const token = await getToken({ template: 'supabase' })
	supabase.auth.setAuth(token)
	// TODO #2: Replace with your database table name
	const { data, error } = await supabase.from('your_table').select()
	// TODO #3: Handle the response
	}
	return (
	<button type="button" onClick={fetchData}>
	Fetch data
	</button>
	)
	}
	```

[novemberkilo]

@gregnr I'm just a few days into working on integrating supabase and clerk into an app so don't feel qualified to update the supabase documentation.

I think that the folks at clerk have more recent documentation here https://clerk.com/docs/nextjs/supabase and may very well be better placed to contribute a change. @perkinsjr may be able to help?

[Gingaaa]

Hey I have worked on around 7-8 company based project, but never countribute to open source, this is my first time can you assign me this task.

[gregnr]

@Gingaaa we don't have an assignment process, feel free to start a PR and link it back to this issue!

[adamchenwei]

So instead of two places. maybe the official supabase instruction should be removed and just put a link to https://clerk.com/docs/integrations/databases/supabase? Just so a single source of truth is in place.