Security Risks with Client Components 🔑

One common security risk in SaaS applications (Software as a Service), especially those interacting with APIs, is the exposure of private API keys.

Most APIs require an API key for access, and a significant security flaw in Next.js applications can occur when these keys are inadvertently exposed to clients. This exposure presents a substantial security risk.

In this section, we'll

1. Demonstrate an example of this security vulnerability.
2. Explain how to identify such security flaws in your Next.js applications.
3. Provide guidance on how to avoid this security issue.

Let's dive into a common security pitfall and fix it!

We're going to convert the page.tsx in our "Security: Exposing API Keys" app to a Server Component. Why? Because we don't want our API keys hanging out in the browser for anyone to see!

What is NEXT_PUBLIC_*?

In order for client components to access environment variables, we need to prefix them with NEXT_PUBLIC* . But if you expose them to the browser as NEXT_PUBLIC_*, they can be accessed by anyone including the client browser!

First, let's watch a quick video to understand here.

Let's get to the exercise!