How to securely access environment variables from React js app

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.

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

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.

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.

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(,
      statusCode: 200
  }).catch(error => {
    return {
      body: JSON.stringify({
        message: 'error'
      statusCode: 500

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

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.

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

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.