# Safety of using API with React Native- Firebase architecture

**URL:** <https://community.openai.com/t/safety-of-using-api-with-react-native-firebase-architecture/297601>\
**Category:** API\
**Created:** [July 13, 2023, 9:49am UTC](https://community.openai.com/t/safety-of-using-api-with-react-native-firebase-architecture/297601 "2023-07-13T09:49:47Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![iggy](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/iggy/32/146851_2.png) [@iggy](https://community.openai.com/u/iggy)\
**Post date:** [July 13, 2023, 9:49am UTC](https://community.openai.com/t/safety-of-using-api-with-react-native-firebase-architecture/297601/1 "2023-07-13T09:49:47Z")

</div>

Hello! I am following one tutorial and I have noticed that in the chat screen the following code  
is placed:

```javascript
const generateText = () => {
    setIsTyping(true)
    const message = {
        _id: Math.random().toString(36).substring(7),
        text: inputMessage,
        createAt: new Date(),
        user: { _id: 1 },
    }

    setMessages((previousMessage) =>
        GiftedChat.append(previousMessage, [message])
    )

    /**
     * Always put your api key in an environment file
     */

    fetch('https://api.openai.com/v1/chat/completions', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            Authorization: 'Bearer ---------------------------------------------',
        },
        body: JSON.stringify({
            model: 'gpt-3.5-turbo',
            messages: [
                {
                    role: 'user',
                    content: inputMessage,
                },
            ],
        }),
    })
        .then((response) => response.json())
        .then((data) => {
            console.log(data.choices[0].message.content)
            setInputMessage('')
            setOutputMessage(data.choices[0].message.content.trim())

            const message = {
                _id: Math.random().toString(36).substring(7),
                text: data.choices[0].message.content.trim(),
                createAt: new Date(),
                user: { _id: 2, name: 'ChatGPT' },
            }

            setIsTyping(false)
            setMessages((previousMessage) =>
                GiftedChat.append(previousMessage, [message])
            )
        })
}

  const handleInputText = (text) => {
    setInputMessage(text);
  }

```

After seeing the documentation I don’t think that this is safe approach. Any advices? Most of the tutorials I have seen use similar approach…

---

<div class="post-metadata">

**Author:** ![Foxalabs](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/foxalabs/32/738355_2.png) [@Foxalabs](https://community.openai.com/u/Foxalabs)\
**Post date:** [July 13, 2023, 5:15pm UTC](https://community.openai.com/t/safety-of-using-api-with-react-native-firebase-architecture/297601/2 "2023-07-13T17:15:37Z")

</div>

Welcome to the forum, iggy.

What, in your opinion, is unsafe about storing the API key in a remote API relay server?

---

<div class="post-metadata">

**Author:** ![iggy](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/iggy/32/146851_2.png) [@iggy](https://community.openai.com/u/iggy)\
**Post date:** [July 13, 2023, 6:33pm UTC](https://community.openai.com/t/safety-of-using-api-with-react-native-firebase-architecture/297601/3 "2023-07-13T18:33:57Z")

</div>

The example above stores api key in the frontend

---

<div class="post-metadata">

**Author:** ![Foxalabs](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/foxalabs/32/738355_2.png) [@Foxalabs](https://community.openai.com/u/Foxalabs)\
**Post date:** [July 13, 2023, 8:13pm UTC](https://community.openai.com/t/safety-of-using-api-with-react-native-firebase-architecture/297601/4 "2023-07-13T20:13:26Z")

</div>

Agreed, and where is this code from? I can’t find that on the OpenAI documents.

---

<div class="post-metadata">

**Author:** ![iggy](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/iggy/32/146851_2.png) [@iggy](https://community.openai.com/u/iggy)\
**Post date:** [July 13, 2023, 8:15pm UTC](https://community.openai.com/t/safety-of-using-api-with-react-native-firebase-architecture/297601/5 "2023-07-13T20:15:08Z")

</div>

> [@Foxalabs](#):
>
> API relay server

Oh sorry for misunderstanding, this code is not from OpenAI documentation. I was just learning from some random resources and I was wondering about the safety…

---

<div class="post-metadata">

**Author:** ![Foxalabs](https://sea2.discourse-cdn.com/openai1/user_avatar/community.openai.com/foxalabs/32/738355_2.png) [@Foxalabs](https://community.openai.com/u/Foxalabs)\
**Post date:** [July 13, 2023, 8:24pm UTC](https://community.openai.com/t/safety-of-using-api-with-react-native-firebase-architecture/297601/6 "2023-07-13T20:24:09Z")

</div>

I see, yes it is not best practice to have API keys in client applications, typically the client application should authenticate with a system such as OAuth to a relay server that holds the API keys and makes the required connections with OpenAI’s API endpoints and then returns the responses to the client, the application itself is typically sitting behind ngix or apache as a further obfuscation layer.

Cloud providers such as Azure, AWS and Google all provide API Key services that allow calls to be made with authentication and the key details are then securely transmitted from that system.

You can find more details here:

[https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety](https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety)