DEV Community: Rohit Gaur

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

Rohit Gaur — Wed, 09 Dec 2020 09:17:12 +0000

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

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.

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:

Create a path where you will keep all your serverless functions. I have created .netlify/functions/
Inside that path, create a js file which will hold the code for your serverless function. I have named it api.js
Finally, put your code inside the file:

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

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;
})

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

How to secure API key by storing it as an environment variable in Netlify?

Rohit Gaur — Wed, 09 Dec 2020 09:16:50 +0000

What is an API key?

It is a unique identifier used to authenticate the API requests of a project.

Why to keep an API key private?

Let's say you are consuming an API in your application which uses an API key. You would want to keep that key away from the reach of other people. If someone with a malicious intent gets hold of your API key, they could use it for their own personal chores and you might end up getting billed for something you did not consume. Even if it is not a paid API, you could face privacy and/or personal data leak. There are many security threats attached with unsecure API keys, make sure to read more about it.

What is an environment variable?

It is a set of key-value pair, stored outside the program; in the server.

Why to use an environment variable?

There are multiple use-cases for an environment variable, I will address them in context of a front-end application.

As they are stored outside the program, they are safe from prying eyes and an attacker won't be able to just browse through your source code and get your API key.

What is Netlify?

Netlify is a San Francisco-based cloud computing company that offers hosting and serverless backend services for web applications and static websites.

How to store API key in environment variables?

To continue, you will have to host a website on Netlify first. You can do that for free as well. Click here to open Netlify.

If you already have a website hosted with Netlify, you can follow these steps:

Go to Site overview and select Site settings
On the left panel, under Build & deploy, select "Environment", then select "Edit variables"
You can now enter a keyword in the Key field (eg: SERVER_API_KEY) and the API key (eg: abcdefghijklmnopqrstuvwxyz) in the Value field and Save

You have successfully saved an API key as environment variable in Netlify.

Click here if you are interested to know how to access the API key (stored as environment variable in Netlify) in your front-end application using Serverless Functions.

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

How to use Firebase Realtime Database in a Node.js app

Rohit Gaur — Tue, 24 Nov 2020 11:33:17 +0000

What is Firebase Realtime Database?

It is a NoSQL database by Google that lets you store and access data in realtime.
Note:

All Firebase Realtime Database data is stored as JSON objects.

What is REPL, CLI and Node.js?

Click here to check out the blog post where I have explained them in detail.

Steps to perform on Firebase

Sign in to your Google account, go to Firebase console and click on Add Project
Give a name to your project, uncheck "Enable Google Analytics for this project" if you do not wish to enable analytics for the project and click on continue to create the project.
Select Web on the Project dashboard:
Give a name to your app, then click on "Register app"
That will generate your app's Firebase configuration which we will need in our project. Copy it for later use.
Proceed to the console, select "Realtime Database" and click "Create Database"
Select "Start in test mode" and click "Enable".
Read the security rules of realtime database and secure your app accordingly. For the purpose of this tutorial, we will just go ahead with test mode.

Steps to implement Firebase in your app

Include firebase package in your Node.js app

var firebase = require('firebase')

Paste the Firebase configuration that you copied earlier. I have shown an empty config for your reference here:

var firebaseConfig = {
  apiKey: "",
  authDomain: "",
  databaseURL: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: ""
}

Initialize your Firebase app:

firebase.initializeApp(firebaseConfig)

Get a reference to the database service:

let database = firebase.database()

Firebase is now configured with our app.

How to write data to firebase?

Create a reference to your custom path at which you want to write your JSON object (mentioned as "obj" in the snippet below).
Then you set that object on the path:

database.ref("customPath").set(obj, function(error) {
    if (error) {
      // The write failed...
      console.log("Failed with error: " + error)
    } else {
      // The write was successful...
      console.log("success")
    }
})

How to read data from firebase?

Create a reference to your custom path at which the data was written. Then you read the value at that path:

database.ref('customPath').once('value')
.then(function(snapshot) {
    console.log( snapshot.val() )
})

You can either read the data once or continously read the data at a path and listen for changes. For more details, check out their documentation

You can check out this CLI app I made which tests your knowledge on Harry Potter series and keeps track of your highscore:

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

Making a CLI app in REPL with persistent data using node.js

Rohit Gaur — Thu, 19 Nov 2020 06:49:09 +0000

What is a CLI app?

CLI stands for Command Line Interface. A CLI app is also known as a console application. It uses a text interface for input and ouput.

What is node.js?

Node.js is a javascript runtime environment for developing server-side and networking applications. It is open source and cross-platform.

What is REPL?

REPL is an online IDE. It allows users to write code, and build apps and websites using a browser. Good thing about it is that you can share your projects easily and it can be linked with your GitHub account. REPL stands for read–evaluate–print loop. It also provides a free plan.

How to make a node.js app using REPL?

Make an account on REPL.
Click on New repl on the top-left corner of your homepage.
Select the programming language (Node.js in this case) and give it a name (or REPL will give it for you), then click on Create repl.
You will see 3 sections. The left-most is the Navigator area, the middle area is the Editor (where you write your code) and the right-most is the Console (where your app will execute when you click on Run). You're now ready to code in Node.js.

Packages used for the project

readlineSync

Get user's input synchronously.

Chalk

Beautify the CLI with colors.

jsonbase

Provides persistent data storage.

Taking input from the user with 'readline-sync'

First, we have to include the package:

var rs = require("readline-sync")

REPL will automatically add this package once you run the app. If you still face an error, you can add it manually from the navigation panel on the left by searching in Packages
Take input:

var name = rs.question("What is your name? ")

Process input: (use backtick when using a variable inside the string)

var message = `Hello ${name}!`

else you could also do

var message = "Hello " + name + "!"

Print Output:

console.log(message)

All together, this is how you take input from the user, process it and print the output.

var rs = require("readline-sync")
var name = rs.question("What is your name? ")
var message = `Hello ${name}!`
console.log(message)

Coloring the console with 'chalk'

Chalk is a great package when it comes down to beautifying the console.

Include the package:

let chalk = require('chalk')

You can use it in the code as easily as:

var name = rs.question(chalk.green("What is your name? "))

Data persistence with 'jsonbase'

jsonbase.com is great when it comes down to persisting small data, especially when you're dealing with json data.

Include the package:

let jsonbase = require('jsonbase.com')

Create your Token:

// Replace this with your token (any random string)
let TOKEN = 'pJdQYebgaFSSBUXxQhtgYKVxnUzvUCkXFHXBXadg'

Create your Store:

let store = jsonbase(TOKEN)

To write data: (I have used the custom key 'user' to save user data, you can choose your own)

var name = rs.question(chalk.green("What is your name? "))
var age = rs.question(chalk.green("What is your age? "))

let user = {
  "name": name,
  "age": age
}

store.write('user',user).then( () => {
  console.log("Data saved successfully!")
})

To read data: (use the same key that you used while writing data)

store.read('user').then( resp => {
  console.log(resp.data)
})

Yes, it's that simple to use!

DEV Community: Rohit Gaur

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

How to access API keys from environment variables in Netlify?

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

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

What is a Serverless Function?

How to create a Serverless Function in Netlify?

How to access the API Key using the Serverless Function?

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

How to secure API key by storing it as an environment variable in Netlify?

What is an API key?

Why to keep an API key private?

What is an environment variable?

Why to use an environment variable?

What is Netlify?

How to store API key in environment variables?

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

How to use Firebase Realtime Database in a Node.js app

What is Firebase Realtime Database?

What is REPL, CLI and Node.js?

Steps to perform on Firebase

Steps to implement Firebase in your app

How to write data to firebase?

How to read data from firebase?

You can check out this CLI app I made which tests your knowledge on Harry Potter series and keeps track of your highscore:

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

Making a CLI app in REPL with persistent data using node.js

What is a CLI app?

What is node.js?

What is REPL?

How to make a node.js app using REPL?

Packages used for the project

Taking input from the user with 'readline-sync'

Coloring the console with 'chalk'

Data persistence with 'jsonbase'

You can check out this CLI app I made which tests your knowledge on India and keeps track of your highscore as well:

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

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