Server action security considerations in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a server action that securely handles a form submission.

NextJS

'use [1]';

export const submitForm = async (formData) => {
  // process formData securely
}

Drag options to blanks, or click blank then click option'

Ause

Bclient

Cstrict

Dserver

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'use client' instead of 'use server' causes the function to run on the client.

Omitting the directive makes the function run on the client by default.

The 'use server' directive marks the function as a server action in Next.js, ensuring it runs only on the server.

2fill in blank

medium

Complete the code to prevent Cross-Site Request Forgery (CSRF) in a server action.

NextJS

import { verifyCsrfToken } from 'csrf-lib';

export const submitData = async (data, [1]) => {
  verifyCsrfToken(csrfToken);
  // handle data
}

Drag options to blanks, or click blank then click option'

AcsrfToken

Bsession

Crequest

Dresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Not verifying CSRF tokens allows attackers to forge requests.

Using unrelated parameters like 'session' instead of the CSRF token.

CSRF tokens must be passed to the server action to verify the request's authenticity.

3fill in blank

hard

Fix the error in the server action to avoid exposing sensitive data to the client.

NextJS

export const getUserData = async () => {
  const user = await fetchUserFromDb();
  return [1];
}

Drag options to blanks, or click blank then click option'

A{ password: user.password }

Buser.password

C{ ...user, password: undefined }

D{ ...user }

Attempts:

3 left

💡 Hint

Common Mistakes

Returning the full user object exposes sensitive data.

Returning only the password leaks secrets.

Removing or masking sensitive fields like password before returning data prevents exposing secrets to the client.

4fill in blank

hard

Fill both blanks to correctly validate user input and handle errors in a server action.

NextJS

export const createUser = async (input) => {
  if (!input.email.[1](/\S+@\S+\.\S+/)) {
    throw new Error([2]);
  }
  // create user logic
}

Drag options to blanks, or click blank then click option'

Amatch

B'Invalid email'

CstartsWith

DendsWith

Attempts:

3 left

💡 Hint

Common Mistakes

Using string methods like includes instead of regex match for validation.

Throwing errors without messages confuses debugging.

Using match with a regex checks if the email format is valid. Throwing an error with a message like 'Invalid email' informs about the issue.

5fill in blank

hard

Fill all three blanks to securely fetch user data, check authentication, and return safe data in a server action.

NextJS

export const fetchProfile = async ([1]) => {
  const user = await getUserFromSession([2]);
  if (!user) throw new Error('Unauthorized');
  return { id: user.id, name: user.name, [3]: user.[3] };
}

Drag options to blanks, or click blank then click option'

AsessionToken

Cpassword

Demail

Attempts:

3 left

💡 Hint

Common Mistakes

Returning sensitive fields like password.

Not checking if the user is authenticated before returning data.

The server action accepts a sessionToken to identify the user. It fetches the user securely and returns only safe fields like id, name, and email, excluding sensitive data like password.