API authentication patterns in Svelte - Mini Project: Build & Apply

API Authentication Patterns in Svelte

📖 Scenario: You are building a simple Svelte app that needs to authenticate users by sending an API token with requests. This is common when apps talk to servers that require a secret key to allow access.

🎯 Goal: Create a Svelte component that stores an API token, sets a configuration variable for the token header name, uses the token in a fetch request, and finally adds the token to the request headers to authenticate the API call.

📋 What You'll Learn

Create a variable to hold the API token string

Create a configuration variable for the header name

Use the token in a fetch request with the correct header

Add the header to the fetch options to complete the authentication

💡 Why This Matters

🌍 Real World

Many web apps need to authenticate API requests with tokens to access protected data or services.

💼 Career

Understanding how to send authentication headers in fetch requests is essential for frontend developers working with APIs.

1

Set up the API token variable

Create a variable called apiToken and set it to the string "12345abcde" inside the <script> tag.

Svelte

  // Create the apiToken variable here

Hint

Use let apiToken = "12345abcde"; inside the script tag.

2

Add a configuration variable for the header name

Inside the <script> tag, create a variable called authHeader and set it to the string "Authorization".

Svelte

  let apiToken = "12345abcde";
  // Create the authHeader variable here

Hint

Use let authHeader = "Authorization"; to store the header name.

3

Use the token in a fetch request

Inside the <script> tag, create an async function called fetchData that calls fetch with the URL "https://api.example.com/data" and includes the Authorization header with the apiToken value.

Svelte

  let apiToken = "12345abcde";
  let authHeader = "Authorization";

  // Create async function fetchData to fetch with auth header

Hint

Use fetch with a headers object that sets [authHeader] to `Bearer ${apiToken}`.

4

Add a button to trigger the fetch with authentication

Add a <button> element with the text "Load Data" that calls the fetchData function when clicked inside the component markup.

Svelte

  let apiToken = "12345abcde";
  let authHeader = "Authorization";

  async function fetchData() {
    const response = await fetch("https://api.example.com/data", {
      headers: {
        [authHeader]: `Bearer ${apiToken}`
      }
    });
    const data = await response.json();
    return data;
  }

Hint

Use <button on:click={fetchData}>Load Data</button> to trigger the fetch.