Server action security considerations in NextJS - Mini Project: Build & Apply

Server Action Security Considerations in Next.js

📋 What You'll Learn

💡 Why This Matters

🌍 Real World

Handling user input securely in web apps is critical to protect data and prevent unauthorized actions.

💼 Career

Understanding server action security is important for building safe Next.js applications and working with backend logic.

1

Set up initial form data

Create a constant called formData as an object with these exact properties: name set to an empty string, email set to an empty string, and message set to an empty string.

NextJS

# Your code here

Need a hint?

Use an object with keys name, email, and message all set to empty strings.

2

Add a security token variable

Create a constant called securityToken and set it to the string "secure123" to simulate a token for validating server actions.

NextJS

const formData = {
  name: "",
  email: "",
  message: ""
};

# Your code here

Need a hint?

Define a constant named securityToken with the exact string value "secure123".

3

Implement the secure server action

Write an async function called submitFeedback that takes a parameter data. Inside, check if data.token equals securityToken. If not, throw an error with message "Unauthorized". Otherwise, simulate saving feedback by returning { success: true }.

NextJS

const formData = {
  name: "",
  email: "",
  message: ""
};

const securityToken = "secure123";

# Your code here

Need a hint?

Check the token inside the function and throw an error if it does not match. Return success if valid.

4

Complete the form component with server action

Create a React functional component called FeedbackForm that returns a <form> element with action={submitFeedback}. Inside the form, add hidden input with name="token" and value={securityToken}. Also add accessible labels and inputs for name, email, and message. Add aria-label="Feedback form" to the form.

NextJS

const formData = {
  name: "",
  email: "",
  message: ""
};

const securityToken = "secure123";

export async function submitFeedback(data) {
  if (data.token !== securityToken) {
    throw new Error("Unauthorized");
  }
  // Simulate saving feedback
  return { success: true };
}

# Your code here

Need a hint?

Use a form with action set to the server action, include a hidden token input, and add accessible labels and inputs.