Learn how to use the Supabase module in your Nuxt 3 application.
This section assumes you're familiar with Nitro, the server engine powered by Nuxt.
In order to provide utilities similar to vue
composables in server routes, this module exposes services providing the same functionnalities.
serverSupabaseClient
This function is working similary as the useSupabaseClient composable but is designed to be used in server routes.
Define your server route and just import the serverSupabaseClient
from #supabase/server
.
import { serverSupabaseClient } from '#supabase/server'export default eventHandler(async (event) => { const client = serverSupabaseClient(event) const { data } = await client.from('librairies').select() return { librairies: data }})
Then call your API route from any vue file:
const fetchLibrairy = async () => { const { librairies } = await $fetch('/api/librairies')}
Be careful, if you want to call this route on SSR, please read this section, you must send your browser cookies including your supabase token.
const { data: { librairies }} = await useFetch('/api/librairies', { headers: useRequestHeaders(['cookie'])})
serverSupabaseServiceRole
This function is designed to work only on server side.
It works similary as the serverSupabaseClient but it provides a client with super admin rights that can bypass your Row Level Security.
The client is initialized with the
SUPABASE_SERVICE_KEY
you must have in your.env
file. Checkout the doc if you want to know more about Supabase keys.
Define your server route and just import the serverSupabaseServiceRole
from #supabase/server
.
import { serverSupabaseServiceRole } from '#supabase/server'export default eventHandler(async (event) => { const client = serverSupabaseServiceRole(event) const { data } = await client.from('rls-protected-table').select() return { sensitiveData: data }})
Then call your API route from any vue file:
const fetchSensitiveData = async () => { const { sensitiveData } = await useFetch('/api/bypass-rls')}
serverSupabaseUser
This function is working similary as the useSupabaseUser composable but is designed to be used in server routes.
Define your server route and import the serverSupabaseUser
from #supabase/server
.
import { serverSupabaseUser } from '#supabase/server'export default defineEventHandler(async (event) => { return await serverSupabaseUser(event)})
Then call your api route from any vue file:
const user = ref(null)const fetchMe = async () => { user.value = await $fetch('/api/me')}
Be careful, if you want to call this route on SSR, please read this section, you must send your browser cookies including your supabase token.
const user = ref(null)const { data } = await useFetch('/api/me', { headers: useRequestHeaders(['cookie'])})user.value = data