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

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

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.

Nuxt•4y ago•

10 replies

"𝑹𝑨𝑽𝑬𝑵‧₊

nuxt3 & supabase safety

<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

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

serverSupabaseClient

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.

nuxt3 & supabase safety

nuxt3 & supabase safety

Similar Threads

Similar Threads

Similar Threads