Handling Supabase admin requests in Nuxt

Handling operations that has the most rights and permissions (commonly referred to as Admin) was always a difficult task. In the end, this role allows to do anything (or almost anything) which can lead to destructive actions in your system.

Usually companies prefer to keep only limited amount of people to have this kind of rights or implement multiple sets of roles that have different permissions to mitigate a problem of too many admin accounts. Because, if there is 100 admins and one credentials will be leaked, it could lead to a disaster.

Supabase also has a flow for admin functionality that will act on the database like removing rows, changing values structures, adding new records, etc. This is delivered by concept called Row Level Security that you can check out here. There is also a great tutorial video about this concept below:

In this article, I will guide you through the process of handling these admin requests in Supabase from your Nuxt application.

Enjoy!

🤔 Handling Supabase admin requests in Nuxt

To work with Supabase in Nuxt, the best way is to use the official module that you can check out here.

I have published few articles about it already so if you are still a beginner with it, check out the linked series.

Supabase module for Nuxt comes with a server utility service called serverSupabaseServiceRole that allows you to make requests with super admin rights directly to the Supabase API. It works relatively similar to serverSupabaseClient server util but instead of acting as a regular user, it allows to use the admin rights that will allow to bypass the Row Level Security.

Remember that this service is aimed to work in server routes only and does not come with Vue composable as in the case of other module utils

To handle Supabase admin requests in Nuxt, we need to do few things:

First, we need to have a SUPABASE_SERVICE_KEY in .env file. You can read more about Supabase keys here

Next, we need to create a new server route like following:

// server/api/admin.ts

import { serverSupabaseServiceRole } from '#supabase/server'

export default eventHandler(async (event) => {
  const client = serverSupabaseServiceRole(event)

  const { data } = await client.from('admin-table').select()

  return { sensitiveData: data }
})

Let's stop for a second here to explain each steps:

• import the serverSupabaseServiceRole from #supabase/server
• define a new event handler
• register a new admin client
• query data from certain table
• return some sensitive data

Finally, we need to call this route from our Frontend application like following

<script setup lang="ts>
 const fetchSensitiveData = async () => {
   const { sensitiveData } = await useFetch('/api/admin')
 }
</script>

And that's it! We can now send admin requests to Supabase directly from our Nuxt app.

📖 Learn more

If you would like to learn more about Vue, Nuxt, JavaScript or other useful technologies, checkout VueSchool by clicking this link or by clicking the image below:

It covers most important concepts while building modern Vue or Nuxt applications that can help you in your daily work or side projects 😉

✅ Summary

Well done! You have just learned how to handle Supabase admin requests in your Nuxt app.

Take care and see you next time!

And happy coding as always 🖥️