How to securely access environment variables from React js app

Support
,
1

Dear support,

I’m pretty new to React applications, JavaScript and to using Netlify. I hope you can guide me to a solution. All feedback is much appreciated.

Question:
How to securely access environment variables (API key and URL) via a Netlify function in a React js application?

Scenario:
We’re running a website that has a page ‘Buy Crypto’, when this page is loaded an API call needs to be made immediately to a widget from the company Transak.
The most secure way I could read up on online was by using Netlify functions. However, the function I created (transak) does not seem to do anything nor would I know how to get a value from that function into the page ‘Buy Crypto’ if it did.

Site:
The Netlify site we’re running is MetaBot Platform

If we check the site now, it seems to work with an environment variable defined via the Netlify UI. (Deploy settings > Build and Deploy > Environment variables)
However, when looking at the Network logs (F12) the API key (sandbox) is exposed, hence why I believe the function isn’t doing anything.

I hope you can help me with this question. Thank you.

2

You’re not really calling your Function. :slight_smile:

Your Function should have some code like:

import axios from 'axios'
export async function handler() {
  // access your API in here and send a response back to the client, something like:
  return axios({
    params: {
      apiKey: process.env.VAR_NAME
    },
    url: '/your API endpoint/'
  }).then(endpointData => {
    return {
      body: JSON.stringify(endpointData.data),
      statusCode: 200
    }
  }).catch(error => {
    console.log(error)
    return {
      body: JSON.stringify({
        message: 'error'
      }),
      statusCode: 500
    }
  })
}

In your frontend, you can call this function when you click on “Buy now”.

3

Thank you for the reply hrishikesh. I figured the function itself needed some code like that, however I’m now a bit stuck at another level.
After the ‘Buy Crypto’ navigation menu item is a page ‘BuyCrypto.js’ page. Here I use the code to import the function import transakFunction from '../../.netlify/functions/transak'
Next I have the < iframe /> in which I specify a src, which looks like src={<transakFunction />}.
I’ve also tried src={transakFunction()}, but this doesn’t work either.
I’m probably calling the function incorrectly. Can you guide me on how to properly do this please?

Thank you.

5

I still haven’t figured out how to read from this return object. It seems that the function returns a Promise object.
I tried with the following code

let transakData = transakFunction();
  console.log('transak data is: ' + transakData);

or because it’s an async functon:

let transakData = await transakFunction();
  console.log('transak data is: ' + transakData);

But I never get a value in ‘transakData’.

Another question is: Can

url: ‘/your API endpoint/’

be an environment variable as well? Like url: process.env.REACT_APP_TRANSAKAPIURL

6

Hi @MetaBotz,

I suggest taking a look at various online resources and examples that would probably explain this better. Here’s one example of an using Netlify Functions: GitHub - Hrishikesh-K/netlify-file-browser: Preview or download files from your Netlify Deploys. It’s in Vue, but concept remains the same.