How can I access supabase bearer tokens in nuxt3 in a type save way?

Question

I am using supabase with nuxt3. I also have an API backend which would use that bearer token to authenticate its API calls.

This is the code:

<script setup lang="ts">
  const { auth } = useSupabaseAuthClient();


  const { data:tenants, pending, error, refresh } = await useFetch('http://localhost:3000/tenants', {
    headers: {
      'Authorization': auth.headers.Authorization
    }
  })
ort { EllipsisHorizontalIcon } from '@heroicons/vue/20/solid'
</script>

It actually works (also receiving contents via API) but does not validate in type script:

Property `headers` is protected and only accessible within class 'GoTrueClient' and its subclasses.

What would be the correct way to make this work?

I tried looking through all the various objects of supabase and did not come to a better / solid conclusion besides the above. Removing the lang="ts" option seems to break other parts and might not yield expected results either.

Answer 1

You can obtain the access token from the session object of Supabase

const {
  data: { session },
} = await supabase.auth.getSession()
final accessToken = session?.access_token // you can also add check to see if there is a non-null session

const { data:tenants, pending, error, refresh } = await useFetch('http://localhost:3000/tenants', {
    headers: {
      'Authorization': `Bearer ${accessToken}`
    }
  })