Server Actions
Clerk provides helpers to allow you to protect your Server Actions, fetch the current user, and interact with the Clerk API.
The following guide provides examples for using Server Actions in Server Components and in Client Components.
With Server Components
Protect your Server Actions
You can use the auth() helper to protect your server actions. This helper will return the current user's ID if they are signed in, or null if they are not.
import { auth } from '@clerk/nextjs/server';
export default function AddToCart() {
async function addItem(formData: FormData) {
'use server';
const { userId } = auth();
if (!userId) {
throw new Error('You must be signed in to add an item to your cart');
}
console.log('add item server action', formData);
}
return (
<form action={addItem}>
<input
value={'test'}
type='text'
name='name'
/>
<button type='submit'>Add to Cart</button>
</form>
);
}Accessing the current user
Current user data is important for data enrichment. You can use the currentUser() helper to fetch the current user's data in your server actions.
import { currentUser } from '@clerk/nextjs/server';
export default function AddHobby() {
async function addHobby(formData: FormData) {
'use server';
const user = await currentUser();
if (!user) {
throw new Error('You must be signed in to use this feature');
}
const serverData = {
usersHobby: formData.get("hobby"),
userId: user.id,
profileImage: user.imageUrl
};
console.log('add item server action completed with user details ', serverData);
}
return (
<form action={addHobby}>
<input
value={'soccer'}
type='text'
name='hobby'
/>
<button type='submit'>Submit your hobby</button>
</form>
);
}With Client Components
When using Server Actions in Client Components, you need to make sure you use prop drilling to ensure that headers are available.
Protect your Server Actions
Use the following tabs to see an example of how to protect a Server Action that is used in a Client Component.
'use server'
import { auth } from '@clerk/nextjs/server';
export async function addItem(formData: FormData) {
const { userId } = auth();
if (!userId) {
throw new Error('You must be signed in to add an item to your cart');
}
console.log('add item server action', formData);
}'use client'
export default function AddItem({ addItem }) {
return (
<form action={addItem}>
<input
value={'test'}
type='text'
name='name'
/>
<button type='submit'>Add to Cart</button>
</form>
)
}import AddItem from "./components/AddItem";
import { addItem } from "./actions"
export default function Hobby() {
return (
<AddItem addItem={addItem} />
);
}Accessing the current user
Use the following tabs to see an example of how to access the current user in a Server Action that is used in a Client Component.
'use server'
import { currentUser } from "@clerk/nextjs/server";
export async function addHobby(formData: FormData) {
const user = await currentUser();
if (!user) {
throw new Error('You must be signed in to use this feature');
}
const serverData = {
usersHobby: formData.get("hobby"),
userId: user.id,
profileImage: user.imageUrl
};
console.log('add Hobby completed with user details ', serverData);
}"use client"
export default function UI({ addHobby }) {
return (
<form action={addHobby}>
<input
value={'soccer'}
type='text'
name='hobby'
/>
<button type='submit'>Submit your hobby</button>
</form>
)
}import AddHobby from "./components/AddHobby";
import { addHobby } from "./actions"
export default function Hobby() {
return (
<AddHobby addHobby={addHobby} />
);
}