N
Nuxt•5d ago
McKayB

Submit securely

OK, the tutorial I'm following at https://supabase.com/docs/guides/getting-started/tutorials/with-nuxt-3 says that I don't need to keep my db .env variables on the server, that putting them on the client is fine because of RLS. But I don't have enough confidence in my RLS skills to feel like that's a good idea. So I'm trying to adapt the tutorial to keep the logic server-side. That's necessary for proper form validation and stuff anyway, right? But without adding a third-party module for Form Actions, does Nuxt need to call an API route to send form data to the server for processing? That seems very strange to me after working with NextJS and SvelteKit and Remix, where form actions are a basic part of the framework.
Build a User Management App with Nuxt 3 | Supabase Docs
Learn how to use Supabase in your Nuxt 3 App.
4 Replies
kapa.ai
kapa.ai•5d ago
Hi @McKayB. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can address parts of your question related to Nuxt, but I don't have specific information about Supabase or the tutorial you're following. Let me focus on the Nuxt-related aspects of your question: 1. Server-side processing: You're correct that keeping sensitive logic and data processing on the server side is generally a good practice for security reasons. Nuxt supports server-side API routes, which you can use to handle form submissions and data processing securely. 2. Form validation: While client-side validation is possible and useful for immediate user feedback, server-side validation is indeed necessary for proper security and data integrity. Nuxt allows you to implement both client-side and server-side validation. 3. Form submissions in Nuxt: Nuxt doesn't have built-in form actions like NextJS, SvelteKit, or Remix. Instead, it typically uses client-side JavaScript to handle form submissions and make API calls to the server. This is done using either the $fetch API or the useFetch composable. Here's how you can handle form submissions in Nuxt 3: 1. Create a server API route to handle the form submission: 
// server/api/submit.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  // Process the form data, validate, and interact with your database
  return { success: true, message: 'Form submitted successfully' }
})
// server/api/submit.post.ts
export default defineEventHandler(async (event) => {
  const body = await readBody(event)
  // Process the form data, validate, and interact with your database
  return { success: true, message: 'Form submitted successfully' }
})
2. In your client-side component, use $fetch to submit the form data to your API route: 
<script setup lang="ts">
const form = reactive({
  email: '',
  password: ''
})

async function onSubmit() {
  try {
    const response = await $fetch('/api/submit', {
      method: 'POST',
      body: form
    })
    // Handle successful submission
  } catch (error) {
    // Handle errors
  }
}
</script>
<template>
  <form @submit.prevent="onSubmit">
    <input v-model="form.email" type="email" required>
    <input v-model="form.password" type="password" required>
    <button type="submit">Submit</button>
  </form>
</template>
<script setup lang="ts">
const form = reactive({
  email: '',
  password: ''
})

async function onSubmit() {
  try {
    const response = await $fetch('/api/submit', {
      method: 'POST',
      body: form
    })
    // Handle successful submission
  } catch (error) {
    // Handle errors
  }
}
</script>
<template>
  <form @submit.prevent="onSubmit">
    <input v-model="form.email" type="email" required>
    <input v-model="form.password" type="password" required>
    <button type="submit">Submit</button>
  </form>
</template>
This approach allows you to keep your sensitive logic and database interactions on the server while still providing a responsive user experience. For more information on handling API routes in Nuxt, you can refer to the Nuxt documentation on server routes. While this method differs from the built-in form actions in other frameworks, it achieves the same goal of server-side processing and validation. If you prefer a more traditional form submission approach, you might need to explore third-party modules or custom solutions within the Nuxt ecosystem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•5d ago
<@327859552198459405> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
McKayB
McKayBOP•5d ago
OK that pretty well answers the question -- follow-up question is for opinions: should I just embrace the Nuxt native way, or should I use the third-party Form Actions extension? Considering I know I've liked Actions better than API endpoints in other frameworks, but also that I'm trying to keep the project sleek and elegant.
psyCOSMO
psyCOSMO•5d ago
Nuxt's $fetch function provides you with autocomplete to the URIs and type safety for what you return from the API, I think its pretty good and does not need another lib for actions.

Did you find this page helpful?