Safety of using API with React Native- Firebase architecture

API
1

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

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…

2

Welcome to the forum, iggy.

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

1 Like
3

The example above stores api key in the frontend

4

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

5

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…

1 Like
6

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

1 Like