Server Actions should be protected like public-facing APIs. Always verify that the user is authorized before performing sensitive mutations.
Example: checking user role before proceeding:
// app/lib/actions.ts
'use server'
import { verifySession } from '@/app/lib/dal'
export async function serverAction(formData: FormData) {
const session = await verifySession()
const userRole = session?.user?.role
if (userRole !== 'admin') {
return null
}
// Proceed with the action for authorized users
}Route Handlers must also verify authentication and authorization. The example below performs a two-tier check:
// app/api/route.ts
import { verifySession } from '@/app/lib/dal'
export async function GET() {
const session = await verifySession()
if (!session) {
return new Response(null, { status: 401 })
}
if (session.user.role !== 'admin') {
return new Response(null, { status: 403 })
}
// Continue for authorized users
}Auth context providers work in Client Components, but not in Server Components. Server Components render first and cannot access context values.
// app/layout.tsx
import { ContextProvider } from 'auth-lib'
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>
<ContextProvider>{children}</ContextProvider>
</body>
</html>
)
}Client-side usage:
'use client'
import { useSession } from 'auth-lib'
export default function Profile() {
const { userId } = useSession()
const { data } = useSWR(`/api/user/${userId}`, fetcher)
return (
// ...
)
}To prevent exposing sensitive session data, use React’s taintUniqueValue API when needed.
In Next.js, Server Actions and Route Handlers must be secured with proper session and role checks. By using verifySession(), enforcing permissions, and understanding context limitations, you can build a secure and scalable authentication system for your application.