How can I send secure API requests from SvelteKit app, without showing API keys on the client side?

When building applications with SvelteKit, it is crucial to ensure that API keys are not exposed on the client to enhance application security. Here is a method to send API requests from a SvelteKit application without exposing API keys on the client:

1. Use Environment Variables to Store API Keys

First, never hardcode API keys in frontend code. Store this sensitive information using environment variables. In SvelteKit, you can manage these environment variables using a .env file and configure them in your project's svelte.config.js file:

javascript
import dotenv from 'dotenv';
dotenv.config();

import adapter from '@sveltejs/adapter-node';
import preprocess from 'svelte-preprocess';

export default {
    kit: {
        adapter: adapter(),
        vite: {
            define: {
                'process.env.API_KEY': JSON.stringify(process.env.API_KEY)
            }
        }
    },
    preprocess: preprocess()
};

2. Handle API Requests on the Server-Side

To protect your API keys, process all API requests on the server-side within SvelteKit's server-side routes. Create an endpoint, such as api/external-data.js, in the src/routes directory and handle API requests within this file:

javascript
export async function get(request) {
    const response = await fetch('https://api.example.com/data', {
        headers: {
            'Authorization': `Bearer ${process.env.API_KEY}`
        }
    });
    
    const data = await response.json();
    
    if (response.ok) {
        return { status: 200, body: data };
    } else {
        return { status: response.status, body: data.message };
    }
}

3. Request Server-Side Routes from the Client

On the client side, request the server-side route you've set up instead of directly requesting the external API:

svelte
<script>
    import { onMount } from 'svelte';

    let data;

    onMount(async () => {
        const response = await fetch('/api/external-data');
        data = await response.json();
    });
</script>

{#if data}
    <div>{data.someField}</div>
{/if}

4. Secure Configuration and Deployment

Ensure your deployment configuration is secure and that environment variables are not exposed. If you're using platforms like Vercel or Netlify, securely add your environment variables in their environment configuration sections.

Conclusion

By storing API keys on the server-side and using server-side routes as intermediaries for sending requests, you can effectively safeguard your keys from exposure. This approach not only enhances application security but also improves maintainability and scalability.