Server route services

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.

server/api/librairies.ts
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:

pages/index.vue
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.

pages/index.vue
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.

server/api/bypass-rls.ts
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:

pages/index.vue
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.

server/api/me.ts
import { serverSupabaseUser } from '#supabase/server'export default defineEventHandler(async (event) => {  return await serverSupabaseUser(event)})

Then call your api route from any vue file:

pages/index.vue
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.

pages/index.vue
const user = ref(null)const { data } = await useFetch('/api/me', {  headers: useRequestHeaders(['cookie'])})user.value = data