nuxt3 & supabase safety

hey, i use supabase with nuxt3, when i do inserts to supabase should i make this via api? How secure is the javascript in my .vue files. I have following code in my pages/events.vue to create an event
<script setup>
const client = useSupabaseClient()
const user = useSupabaseUser()
const title = ref('')
const description = ref('')
const link = ref('')
const startDate = ref(null)
const endDate = ref(null)
const type = ref('')
const userLimit = ref(null)

const step = ref(1)

const createEvent = async () => {
const error = await client.from('events').insert({ title: title.value, description: description.value, link: link.value, start_date: startDate.value, end_date: endDate.value, type: type.value, user_limit: userLimit.value, created_by: user.value.id })
}

useHead({
title: 'Create Event · SMEA'
})
definePageMeta({
layout: 'dashboard',
middleware: 'auth'
});
</script>
<script setup>
const client = useSupabaseClient()
const user = useSupabaseUser()
const title = ref('')
const description = ref('')
const link = ref('')
const startDate = ref(null)
const endDate = ref(null)
const type = ref('')
const userLimit = ref(null)

const step = ref(1)

const createEvent = async () => {
const error = await client.from('events').insert({ title: title.value, description: description.value, link: link.value, start_date: startDate.value, end_date: endDate.value, type: type.value, user_limit: userLimit.value, created_by: user.value.id })
}

useHead({
title: 'Create Event · SMEA'
})
definePageMeta({
layout: 'dashboard',
middleware: 'auth'
});
</script>
Can this code be modified from client side to maybe change that user.value.id ? If yes i think this is more safe to do it via api where the user id gets set on server side to prevent users posting as another user if they have the id maybe i could to it with serverSupabaseClient https://supabase.nuxtjs.org/usage/services/server-supabase-client the demo uses also the client side stuff inside the vue files https://github.com/nuxt-modules/supabase/blob/main/demo/pages/tasks.vue
Nuxt Supabase
serverSupabaseClient | Nuxt Supabase
Supabase integration for Nuxt.
GitHub
supabase/tasks.vue at main · nuxt-modules/supabase
Supabase module for Nuxt. Contribute to nuxt-modules/supabase development by creating an account on GitHub.
2 Replies
garyaustin
garyaustin3y ago
You need to use RLS to enforce the userid column equals auth.uid() on insert for it to be safe. You can also set default on the database side to auth.uid() for the column, but still need RLS to keep it from being changed. Note the API can be called without your code at all so you need to have some sort of RLS protection anyway.
RAVEN
RAVENOP3y ago
Okay, thank you @garyaustin

Did you find this page helpful?