DEV Community 👩‍💻👨‍💻

Cover image for How to access API keys from environment variables in front-end application using Serverless Functions of Netlify
Rohit Gaur
Rohit Gaur

Posted on

How to access API keys from environment variables in front-end application using Serverless Functions of Netlify

Please read the previous post first if you are not aware of the terms API, environment variable, netlify.

How to access API keys from environment variables in Netlify?

In the previous post, I explained how to setup your API key as environment variable in Netlify. You can easily access them in your application by appending the keyword to process.env

process.env.SERVER_API_KEY
Enter fullscreen mode Exit fullscreen mode

But I cannot access process.env in my JavaScript application!

You will not be able to access process.env directly in your front-end application without using a package.

I don't want to use any package. Is there any other way?

Yes! This is the part where Serverless Function comes into play.

What is a Serverless Function?

Conventionally, serverless functions are single-purpose, programmatic functions that are hosted on managed infrastructure. These functions, which are invoked through the Internet, are hosted and maintained by cloud computing companies.

Read more about it here

How to create a Serverless Function in Netlify?

First, please click here to read the documentation on Netlify to understand the general syntax.

Now, this is how you would setup your serverless function:

  1. Create a path where you will keep all your serverless functions. I have created .netlify/functions/

  2. Inside that path, create a js file which will hold the code for your serverless function. I have named it api.js

  3. Finally, put your code inside the file:

exports.handler = async (event, context) => {
    return {
        statusCode: 200,
        body: JSON.stringify({
        api: process.env.SERVER_API_KEY
        }),
    }
}
Enter fullscreen mode Exit fullscreen mode

In the above code, I have attached the key process.env.SERVER_API_KEY of my environment variable to a keyword "api" which we will use at the time of extraction.

That's all! Now head back to your app.

How to access the API Key using the Serverless Function?

In your main js file where you want the API Key, write this simple fetch with the path to your api.js:

let serverURL;

fetch(".netlify/functions/api")
.then(response => response.json())
.then(json => {
    serverURL = json.api;
})
Enter fullscreen mode Exit fullscreen mode

In the above code, we parse the response to json, then we are extracting api, which was our keyword holding process.env.SERVER_API_KEY in the Serverless Function. As we know, at runtime process.env.SERVER_API_KEY is replaced with the actual value of the environment variable. Now you can use it in your program.

That's all folks! If you want to learn how to setup your API Key in Nelify, read this post.

If you have any queries, get in touch with me on Twitter

Top comments (4)

Collapse
 
brunoelo profile image
Emeka Elo-Chukwuma

Does not work
Errors
script.js:91 GET localhost:5500/.netlify/functions/api 404 (Not Found)
(anonymous) @ script.js:91
VM165515:1 Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0

Collapse
 
irohitgaur profile image
Rohit Gaur

Sorry for the late response. Are you still facing the error? Let me know and we can connect over a session and see it through

Collapse
 
_bkern profile image
Barry

I think this is a viable approach but you need to think through security. An unsecured API to expose environment variables seems like a bad idea but I have to imagine there is a way to lock down this function.

Collapse
 
irohitgaur profile image
Rohit Gaur

Hello Barry. Yes, you can setup an auth process for that purpose. Netlify also offers that service: docs.netlify.com/visitor-access/id...

18 Useful Github Repositories Every Developer Should Bookmark

>> Check out this classic DEV post <<