Integrating Netlify with Zero for Secure Secrets Management

Use the Zero Netlify integration to easily sync your secrets to any Netlify site.

Sam Magura

July 12, 2024

Netlify is an easy-to-use hosting service for deploying web apps. If you've used Vercel before, Netlify is very similar. Netlify is best suited for frontend-heavy web apps, though it does have support for server-side rendering and background functions.

If you are running server-side code on Netlify, you're probably calling at least one third-party API which requires an API key. Netlify supports passing API keys into your app via environment variables, which can be set in the Netlify site configuration. But this approach becomes fragile if multiple pieces of your application infrastructure need access to the same secrets.

We can alleviate this problem by utilizing the Zero secrets manager and the Zero Netlify integration. The Netlify integration will automatically sync the secrets in your Zero project to environment variables in Netlify. One thing that makes this approach great is that you don't have to make any code changes to the web app code that's deployed on Netlify — it doesn't need to know where the environment variables are coming from.

We'll demonstrate this approach by deploying the Next.js app from the last post, Send Emails from Next.js using SendGrid , and configuring it to use the Netlify integration.

🔗 The full code for this example is available in the zerosecrets/examples GitHub repository.

Secure your secrets conveniently

Zero is a modern secrets manager built with usability at its core. Reliable and secure, it saves time and effort.

Simplifying the Next.js App Code

In the previous post, Send Emails from Next.js using SendGrid , we built a Next.js app with an API route handler that fetches the SendGrid API key from Zero and uses it to send an email. Since we are making use of the Netlify integration in this post, the code to fetch the secret from Zero is no longer required.

So, you can delete the initializeSendGrid function and simply initialize SendGrid from an environment variable. The new route handler should look like this:

app/api/purchase/route.ts

import sgMail from '@sendgrid/mail'

export async function POST(request: Request) {
  const {email} = await request.json()

  console.log(`Sending email to: ${email}`)

  sgMail.setApiKey(process.env.SENDGRID_API_KEY!)

  await sgMail.send({
    to: email,
    from: 'YOUR_EMAIL@example.com',
    subject: 'Purchase confirmation',
    text: 'This is a sample email.',
  })

  return Response.json(null)
}

Deploying to Netlify

Publishing a Next.js app to Netlify is a breeze — no additional configuration is required. To deploy your site, sign up at netlify.com and select your GitHub repository. Netlify will display a form where you can customize the build if necessary.

Configuring the build when deploying a Next.js app to Netlify

Upon completing the workflow, your site will automatically be built and deployed. That was easy!

Enabling the Zero Netlify Integration

If you don't already have a Zero project for the web app we just deployed, please create one now. Create a single SendGrid secret with a field called API_KEY. Since we aren't using the Zero SDK in this project, we actually do not need the project's Zero token.

In Zero, switch to the Integrations tab and click "Add Integration". You'll be prompted to authorize Zero to connect to Netlify. After that, you'll need to complete the following form:

This form is self-explanatory, except for the Netlify webhook URL field. We want our Netlify site to be rebuilt if any secrets change, so Zero needs the ability to trigger builds. It does this using a build webhook.

As described in the Netlify docs , you can create a build webhook by going to Site configuration > Build & deploy > Continuous deployment > Build hooks. After creating the build hook, copy the URL into the form where we were configuring the Zero Netlify integration.

Testing it Out

In the Netlify site configuration page, navigate to Environment Variables. You'll see a SENDGRID_API_KEY environment variable, which shows that the integration with Zero is working correctly.

If you go to the deployments page, you'll also see that Zero triggered a build and deploy, so that the published web app has access to the secrets that were synced.

Now, navigate to the published web app. Enter your email address in the form and click submit. Assuming your SendGrid account is properly configured, you'll receive the sample email.

Final Thoughts

This post showed how easy it is to connect Netlify to Zero, enabling you to securely manage your secrets in one place. It should be noted that nothing in this tutorial was specific to Next.js — you can use this same approach for any other JS framework that supports server-side code on Netlify.