Hiding Serverless apps API Keys and Secret Key by Using Netlify and Netlify Lambda

Photo by Dlanor S on Unsplash

API keys and secret keys both should not be exposed to the public as hackers may gain access to your account data or service by using those keys. Normally, back end server will be treated as a proxy to use those key for third-party service. What if I wanted to do a serverless website?

Netlify

Netlify is a platform to deploy your serverless app. It supports continuous deployment with Github integration. Most importantly it is free for personal use.

Netlify Lambda

Netlify Lambda is a service provided by Netlify which allows developers to deploy Lambda function without AWS account and tedious configuration.

Building Lambda Function

Here I use create-react-app to demonstrate the front end integration. Of course, you may use other frameworks as well. After running create react app, add the following module.

npm install netlify-lambda node-fetch npm-run-all

Netlify-lambda module is a tool to build the lambda function. Besides, the tool allows us to serve written lambda function locally for development.

Before we start writing function, we need to create a netlify.toml at project root directory for Netlify service configuration. For a simple case, we only need to set the following fields:

• Command- Script to run before deployment.
• Functions- Location of built lambda function by netlify-lambda module.
• Publish- Location of files used for production serving.

netlify configuration file

Now, we are ready to build the lambda function for our API service. Currently, Netlify lambda supports Nodejs and Go. In this article, Nodejs is chosen for demonstration.

Simple Lambda Function

Instead of writing the key in the source code, we store it in the environment to hide it from others. This lambda function returns the latest movie from MovieDb. For more information, please check MovieDbApi.

Next, set the API Key in the environment.

export movieDbApiKey=YOUR_API_KEY

Until the current stage, we are able to test our lambda function by using netlify-lambda cli.

npx netlify-lambda serve "PATH_TO_YOUR_FUNCTION_DIRECTORY"

This command serves the function locally in localhost:9000. Thus, we can check it by simply open localhost:9000/.netlify/functions/FILE_NAME in any browser.

Lambda Output

Next, Netlify needs to know the way to build our website and lambda function. Below is the example of part of package.json.

If you have ejected create-react-app, you need to supply NODE_ENV environment variable and change the react-scripts command.

"start": "npm-run-all --parallel start:app start:server",
"start:app": "react-scripts start",
"start:server": "netlify-lambda serve ./functions",
"build": "npm-run-all --parallel build:**",
"build:app": "react-scripts build",
"build:functions": "netlify-lambda build YOUR_FUNCTIONS_DIRECTORY",

It should be good for production now but not development as netlify-lambda serves the function at a different port and this leads to CORS error. In order to solve this problem, a proxy setting is needed in local development.

Local Development Proxy

For create-react-app, simply add the following configuration into package.json.

"proxy": "http://localhost:9000/"

Let's do some checking by adding fetching function in the App class.

componentDidMount() {
  fetch(".netlify/functions/lambda")
  .then(response => response.json())
  .then(data => console.log(data));
}

Start the server and lambda return value should be printed in the browser console.

Console Lambda Value

Netlify Configuration

We have done the configuration for local development server but not the production server. The only configuration is the environment variable of our secret key. It can be easily set in the Netlify Web UI.

Finally, our lambda function is live and can be accessed by the deployed application.

Conclusion

Besides Netlify Lambda, there are still other services can be used to achieve the same result such as AWS lambda with AWS secret manager. Netlify Lambda is suitable for rapid development project especially project in hackathon thanks to the ease of use of Netlify platform.