How to store google api key as secret with expo

allenwalker3

Allen Walker

Posted on October 3, 2023

How to store google api key as secret with expo

If your react native expo application needs to access google services (such as google maps) you will need to create a google api key. The problem is this api key must remain hidden from the public or you risk receiving a large unannounced bill from Google.

You also do not want the api key embedded in the client application as this can be extracted by a determined hacker.

Fortunately this is pretty easy.

Open a terminal and enter

  • eas init

This is will generate an app.json file or if you already have one, it will add extra.eas.projectId to app.json

  • Rename your app.json file to app.config.js.

Now edit app.config.js, it should something like this.

app.config.js

First notice line 1. Since this is a js file we must export the json. Add export default {...}

Now note line 40: "apiKey": process.env.GOOGLE_SERVICES_API

GOOGLE_SERVICES_API is the secret variable we must now create on expo.dev

Login to your expo.dev account, click secrets, and add the new variable GOOGLE_SERVICES_API and set the value to your google api key.

Expo.dev secrets

Go back to your terminal and type

  • eas secret:list

you should see something like:

Secrets for this account and project:
ID          30af395a-70bb-4b33-afe7-xxxxxxxxxxx
Name        GOOGLE_SERVICES_API
Scope       project
Type        STRING
Updated at  Oct 03 11:29:30
Enter fullscreen mode Exit fullscreen mode

That's it! Now you can checkin your files to a public repository with no worries of a hacker exploiting your google api key.

💖 💪 🙅 🚩
allenwalker3
Allen Walker

Posted on October 3, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related