How to store google api key as secret with expo

Allen Walker — Tue, 03 Oct 2023 22:03:02 +0000

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.

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.

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

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

DEV Community: Allen Walker

How to store google api key as secret with expo