Using Doppler In a React-Firebase Application

Handling secrets/environment variables on a team/personal codebase can be very stressful. Doppler helps you scale through this problem by providing an environment to store your secrets that you and your team can use. You will like to keep most of these environment variables within the team; hence, its not best to push it to a GitHub repository to avoid vulnerability. In this article, we will look through how to implement Doppler with a React-firebase app.

Introduction

Doppler is a universal secret manager; this means that you can use doppler to manage secrets across applications within groups with less risk of vulnerability and ease of work. Doppler makes it easy for you to share environment secrets for application and development with your team. It also eases integration with most of your cloud platforms.

Why use Doppler ?

• Scalability: It makes it easy to scale and make changes to environment variables in your application
• Ease of Work: Doppler allows you to focus on the core functionality of your application, removing the complications of sharing environment secrets across team members.
• Doppler supports integration with multiple cloud/hosting platforms for your application.

Setting up Doppler

For this tutorial, we will be setting up doppler for a simple react-firebase application; we will look at how to fetch and read the secrets in our application. Before we get started, we need to set up the doppler CLI; I will be walking you through how to do this on a mac.
Run the command below in your terminal to install doppler

brew install dopplerhq/cli/doppler

Once we have the doppler CLI installed you can run the doppler command with the --help flag to see a list of commands that are supported.
To verify the doppler CLI version we run

doppler --version

I am currently working with v3.32.0. Next, I will need to login from my terminal; to do this you run the doppler login command below and select y

doppler login? Open the authorization page in your browser? (Y/n) y

The command will open a browser window and prompt you to enter an auth code that will be made available on the terminal.

? Open the authorization page in your browser? YesYour auth code is:kansas_loganberry_jewelry_lime_walnutWaiting...

Once you enter the auth command, click next to navigate to the next screen and enter the token name.

Click on finish login, and voila! CLI authentication to your Doppler account completed.
Note: You will need to log in to your doppler account if you have not previously done this.

Setting Up React-Firebase Application

It's time to set up our application; we will have a simple React application that writes messages and reads all messages written to the firestore. We will also build a rest api with the firebase cloud functions, this will be hosted on firebase. While setting up a firebase application on the console, enable hosting. Once we have everything set up, it's now time to handle integrating the secrets to doppler. I will be setting up the API key for an ip details API on Doppler, thus

I will be using this API key later in the application. Next, we need to create the firebase functions;

firebase init

Then select functions, the language you want to write your functions in(I will be choosing JavaScript) and the project to use. Select yes for the rest of the option to successfully create your cloud functions. Once you are done this will create a folder functions. Next up is to cd into the folder and install express.

cd functions && npm install express

Using Doppler in your application

In the root of the folder, create a file called environment.js, this will hold all the env configuration for firebase. In the environment.js file copy and paste in this code;

const functions = require("firebase-functions");let config = process.env;// use firebase config when deployed to firebaseconst deployedToFirebase = process.env.NODE_ENV === "production";if (deployedToFirebase) {  config = functions.config().env;}module.exports = config;

The code block above will check if the app is in production and set the value of config to functions.config().env. Go into the package.json and update the scripts to use the doppler environments on deploy.

..."serve": "doppler run -- firebase emulators:start --only functions","shell": "doppler run -- firebase functions:shell","start": "npm run shell","deploy": "npm run update_config && firebase deploy --only functions","update_config": "firebase functions:config:unset env && firebase functions:config:set env=\"$(doppler secrets download --config prd --no-file --silent)\"","logs": "firebase functions:log"...

This will set up our firebase api to use doppler environments locally and in production.

Using secrets in firebase application

To use the environment variable, we will need to bring in the config created in the environment.js file, and just like accessing key values pairs in object literals, we will access the API_KEY variable stored on doppler.

const environments = require("./environment");...app.get("/", async function(req, res) {  try {    const {data} = await axios("https://ipgeolocation.abstractapi.com/v1/?api_key=" + environments.API_KEY);    res.status(200).json(data);  } catch (error) {    res.status(500).send(error);  }});...

In the code block above, we import the environment file and use it to access the API_KEY variable, environments.API_KEY.

Once done with building the API we can deploy it on firebase by running the deploy script;

npm run deploy

In our react application we will be consuming the api deployed to firebase to write new messages and read all messages written to firestore.

Conclusion

In this article, we looked at how to integrate doppler in managing secrets in our firebase application. We also looked at consuming the firebase API in our react application.To review full firebase functions and doppler configuration, you can find the source code in this GitHub repository. You can also find the complete frontend source code here. For additional information on integrating Doppler with other applications/platforms, you can refer to the official documentation.