Securing Third-Party Integrations
Many modern applications rely on external services to provide specialized functionality. Payment processing, email delivery, artificial intelligence features, analytics, and authentication services are commonly handled by third-party providers. Platforms such as Stripe for payments, OpenAI for AI capabilities, and Resend for email delivery are powerful tools that can greatly expand what your application can do.
However, connecting your application to these services requires the use of API keys or secret tokens. These credentials act like passwords that authorize your app to access the service. Because they provide direct access to external systems, they must be handled carefully.
If API keys are exposed publicly, anyone could potentially misuse them. This could lead to unauthorized charges, data leaks, or abuse of your service quotas. For this reason, CloudXLR provides a secure way to store and manage these credentials so that they are never exposed inside your public application code.
Understanding how to properly store and use these keys is an essential part of building secure applications.
Never Hardcode Secrets
One of the most common security mistakes in application development is placing secret keys directly inside frontend code. Frontend code runs in the user’s browser, which means anyone can inspect it using developer tools.
If a secret key is included in frontend JavaScript or HTML files, it can easily be extracted by anyone who loads the page. Once exposed, that key can be used by malicious actors to send requests to the external service as if they were your application.
For example, if a payment API key is exposed, attackers could potentially create unauthorized transactions. If an AI API key is leaked, someone might run large numbers of requests using your account, leading to unexpected charges.
Because of this risk, secret keys should never be embedded directly in frontend code. Instead, they should always be stored securely on the server side where users cannot access them.
Using the API Keys Manager
CloudXLR includes a built-in API Keys Manager designed to store sensitive credentials safely. This system ensures that your keys remain protected while still allowing your application to use them when needed.
To add and manage your API keys, open the API Keys modal from the top navigation bar in the CloudXLR interface. This section acts as a secure vault where you can store credentials for external services.
Once inside the manager, click the option to add a new key. You will be prompted to provide a name and the key value. The name should be descriptive and easy to recognize later. For example, you might label a payment key as STRIPE_SECRET_KEY or an AI integration key as OPENAI_API_KEY.
After the key is stored, it becomes available to your backend logic without ever being exposed to the client browser.
When you want to use the key, instruct the AI to access it through a Cloud Function. Cloud Functions run on the server side, which means they can safely retrieve stored secrets and communicate with external services.
For example, if your app needs to create a payment session with Stripe or generate text using an AI model, the Cloud Function will securely access the stored key, send the request to the external service, and return the result to your application.
This architecture keeps your credentials protected while still allowing your application to fully integrate with powerful third-party services.
By consistently storing secrets in the API Keys Manager and accessing them through Cloud Functions, you ensure that your application follows modern security best practices and remains safe as it grows.