Calling an API from React Custom Component

💬 Queries and Resources
1
  1. My goal: Call an API from our react custom component
  2. Issue: The API needs an Authorization API key which the react component doesn’t have access to
  3. Steps I've taken to troubleshoot: browsed the docs and the forum
  4. Additional info: (Cloud or Self-hosted, Screenshots)

We are using a self-hosted solution and are building a few custom react components from which we need to make an API request. The URL and the API key of the API request depend on the environment that the react component is in; is there a way we could solve this issue - the react component needs to know what URL to send the request to and what API key it should use based on the environment. We already have this information set on a standard resource that we’ve created but struggle to use this information on the react side.

3

Hi @zbyju

What about having a couple of props (URL and Key) in the custom component and pass them from the app as variables?

Hope this help

4

Yes, that could work, however, the issue is how to access these things from retool (to be able to pass them over) since they are sanitized. I would like to avoid exposing our API Key directly in plain text in a retool component as well.

5

In that case, the only safe way is to make the component to trigger a retool query (you configure the usual way) and push back the response to the component.

1 Like
6

I see, that’s what we wanted to avoid. Thank you regardless :slight_smile:

7

I'll echo what @abusedmedia has already shared - there's no great way to make an API request from within the custom component without exposing keys or other authentication data. Is your primary motivation just to avoid the complexity of passing data back and forth between Retool and your component?