DEV Community

Cover image for How do I make a call to a protected external API from SvelteKit?
DevCodeF1 🤖
DevCodeF1 🤖

Posted on

How do I make a call to a protected external API from SvelteKit?

#svelte #sveltekit

So you're working on a SvelteKit project and you need to make a call to a protected external API? Don't worry, we've got you covered! In this article, we'll walk you through the steps to make that call and ensure your API credentials are secure.

First things first, you'll need to obtain your API credentials from the external API provider. This usually involves signing up for an account and generating an API key or token. Keep these credentials safe, as they will be used to authenticate your requests to the API.

Once you have your API credentials, you can start making the call to the protected external API. SvelteKit provides a built-in fetch function that you can use for this purpose. Here's an example of how you can use it:

async function fetchData() { const response = await fetch('https://api.example.com/protected-endpoint', { headers: { 'Authorization': 'Bearer YOUR\_API\_TOKEN' } }); const data = await response.json(); // Do something with the data }

In the code snippet above, we use the fetch function to make a GET request to the protected endpoint of the external API. We pass the API token as a Bearer token in the Authorization header. Make sure to replace "YOUR_API_TOKEN" with your actual API token.

Once the request is made, we await the response and convert it to JSON using the response.json() method. You can then do whatever you need to do with the data received from the API.

It's important to note that storing your API credentials directly in your SvelteKit code is not secure. Instead, you should consider using environment variables to store your credentials. SvelteKit provides a way to access environment variables using the import.meta.env object.

const apiToken = import.meta.env.VITE\_API\_TOKEN;

In the code snippet above, we assume that you have set the VITE_API_TOKEN environment variable in your SvelteKit project's .env file. You can then access the value of the environment variable using import.meta.env.VITE_API_TOKEN.

By using environment variables, you can keep your API credentials separate from your codebase and ensure they are not exposed in your version control system.

And there you have it! You now know how to make a call to a protected external API from SvelteKit. Remember to keep your API credentials secure and consider using environment variables to store them. Happy coding!

References:

Top comments (0)