API authentication patterns in Svelte

Introduction

API authentication patterns help your app check who is using it. This keeps data safe and private.

When your app talks to a server and needs to know the user is allowed.

When you want to keep user data private and secure.

When you build apps that need login or user identity.

When you want to control access to certain features or data.

When you want to track who is using your API.

Syntax

Svelte

Bearer token pattern:
fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer YOUR_TOKEN_HERE'
  }
})

Basic auth pattern:
fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Basic ' + btoa('username:password')
  }
})

The Authorization header is used to send credentials.

Bearer tokens are common for secure, token-based access.

Examples

This example sends a bearer token to prove identity.

Svelte

fetch('https://api.example.com/user', {
  headers: {
    'Authorization': 'Bearer abc123token'
  }
})

This example uses basic auth with username and password encoded.

Svelte

fetch('https://api.example.com/user', {
  headers: {
    'Authorization': 'Basic ' + btoa('user:pass')
  }
})

This Svelte example fetches data with a bearer token and shows it.

Svelte

<script>
  import { onMount } from 'svelte';
  let data = null;
  onMount(async () => {
    const res = await fetch('https://api.example.com/data', {
      headers: { 'Authorization': 'Bearer mytoken123' }
    });
    data = await res.json();
  });
</script>

{#if data}
  <pre>{JSON.stringify(data, null, 2)}</pre>
{:else}
  <p>Loading data...</p>
{/if}

Sample Program

This Svelte component fetches a user profile using a bearer token. It shows loading text, the user info, or an error message. It uses accessible roles and labels.

Svelte

<script>
  import { onMount } from 'svelte';
  let user = null;
  let error = null;

  onMount(async () => {
    try {
      const response = await fetch('https://api.example.com/profile', {
        headers: {
          'Authorization': 'Bearer exampletoken123'
        }
      });
      if (!response.ok) {
        throw new Error('Failed to fetch user');
      }
      user = await response.json();
    } catch (e) {
      error = e.message;
    }
  });
</script>

{#if error}
  <p role="alert" style="color: red;">Error: {error}</p>
{:else if user}
  <section aria-label="User Profile">
    <h2>{user.name}</h2>
    <p>Email: {user.email}</p>
  </section>
{:else}
  <p>Loading user profile...</p>
{/if}

Important Notes

Always keep tokens secret and never expose them in public code.

Use HTTPS to keep tokens safe during transfer.

Handle errors gracefully to improve user experience.

Summary

API authentication keeps your app secure by checking who is using it.

Bearer tokens and Basic auth are common ways to send credentials.

Svelte apps can use fetch with headers to authenticate API calls.