How to Use Google Translate API
Tags: googletranslate, api, cookies, react
Published: 2019-06-26 17:37:39

---
title: How to Use Google Translate API
published: true
tags: googletranslate,api,cookies,react
canonical_url: https://medium.com/@robghchen/how-to-use-google-translate-api-e42e5eb380fb
---
An easy follow-along tutorial

Prerequisites: Knowledge of [React.js](http://reactjs.org/) will be required for this tutorial.

[![](https://cdn-images-1.medium.com/max/1200/1*HNcgEq7WxsYi6qBL207scw.png)](https://medium.com/@robghchen/how-to-use-google-translate-api-e42e5eb380fb?source=rss-1a2b6738cba4------2)

We’re going to use [google-translate](https://www.npmjs.com/package/google-translate) library to help connect your app with Google Translate API, the library also provides methods to initiate the translating. We’ll also use [react-cookies](https://www.npmjs.com/package/react-cookies) library to store a user’s chosen language in the browser for the user’s convenience and we’ll store some translated text in a cookie so that the same sentence doesn’t have to be re-translated every time the user loads the app (you have to pay per translation, try to avoid redundant translating).

1) Let’s get started, in terminal:

```
create-react-app google-translate-demo
cd google-translate-demo
npm i google-translate
npm i react-cookies
```

2) Get ready to create your API key and hide the key so that it doesn’t get pushed onto the internet. In terminal:

```
touch .env
open .env
```

3) Sign into [Google API Console](https://accounts.google.com/signin/v2/identifier?service=cloudconsole&passive=1209600&osid=1&continue=https%3A%2F%2Fconsole.developers.google.com%2Fapis%2Fdashboard%3Fauthuser%3D3%26project%3Dtranslation-api-243302&followup=https%3A%2F%2Fconsole.developers.google.com%2Fapis%2Fdashboard%3Fauthuser%3D3%26project%3Dtranslation-api-243302&flowName=GlifWebSignIn&flowEntry=ServiceLogin) with your Gmail then create your API key:

![1](https://cdn-images-1.medium.com/max/1200/1*dN_aI4p-2Fl9VUNONBI3bg.png)

![2](https://cdn-images-1.medium.com/max/800/1*nLLOQP6sI6TZFaw8fhqnhw.png)

![3](https://cdn-images-1.medium.com/max/1200/1*Oe_rhdEZmLURn5jIug7TMQ.png)

![4](https://cdn-images-1.medium.com/max/1200/1*z7uYiI-P00RkjIrgvj1pqw.png)

![5](https://cdn-images-1.medium.com/max/1200/1*C156oWwlWy9eXba4FRZaiQ.png)

![6](https://cdn-images-1.medium.com/max/1200/1*nRPB2gbG03Zrt5OJE5nbpg.png)

4) After creating the key, **DO NOT** share it with anyone and **ABSOLUTELY DO NOT** push that key to GitHub or anywhere online. Any fees accrued using that key will be charged to your account. I know someone who knows someone who owes Amazon $50,000+ because he unknowingly pushed his key to GitHub for only 3 days and someone went on a shopping spree with his key. With that said, now I’ll show you how to safely use and protect your key. 

5) In terminal:

```
open .gitignore
```

6) Add `.env` to line 25, this tells GitHub to ignore pushing your `.env` file online.

{% gist https://gist.github.com/robghchen/61fb6f088060e4b431fab4b094de66cf %}

7) Create `.env` on the top level of the app, Copy your key from Google Console and replace the string “PASTE YOUR KEY HERE”:

{% gist https://gist.github.com/robghchen/460f71da55b22683064516dbf792bf12 %}

8) In terminal:

```
mkdir src/utils
touch src/utils/googleTranslate.js
open src/utils/googleTranslate.js
```

9) We use your API key through the variable that we created in `.env` so that your actual key is safe from the public’s eye. In `googleTranslate.js`:

{% gist https://gist.github.com/robghchen/afa3c6e09b9f8d56a4ff68a4829e2a89 %}

- If you already have a server running, restart it so that `process.env.BLAH_BLAH_BLAH` captures the most recent change.

10) Preparation is done, we can now build the app. In terminal:

```
open App.js
```

11) We’re going to create a simple select field and translate some text with the google-translate library that’s now connected to your Google Translate API key. In `App.js`:

{% gist https://gist.github.com/robghchen/6758d437dcd9d3501ebc8640fc8f45c5 %}

12) Run the app. In terminal:

```
npm start
```

![demo](https://cdn-images-1.medium.com/max/800/1*KcYKdKc_0VGPpl92cFzovg.gif)

- Change the language, refresh the page and verify that it loads with the language you last selected.

Congrats! Now that you’ve seen how to set up Google Translate API and use the [google-translate](https://www.npmjs.com/package/google-translate) + [react-cookies](https://www.npmjs.com/package/react-cookies) libraries, let’s clean up. Go back to Google Console and delete your API key, that’ll guarantee no one else can use your key without your knowledge.

---

Bring your friends and come learn JavaScript in a fun never before seen way! [waddlegame.com](https://waddlegame.com)