API authentication patterns in Svelte - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a Bearer token to the fetch request headers.

Svelte

const response = await fetch('/api/data', {
  headers: {
    'Authorization': '[1]'
  }
});

Drag options to blanks, or click blank then click option'

A'Bearer myToken123'

B'Token myToken123'

C'Basic myToken123'

D'ApiKey myToken123'

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Basic' instead of 'Bearer' for token authentication.

The standard way to send a token in HTTP headers is using the 'Bearer' scheme.

2fill in blank

medium

Complete the code to store the JWT token in localStorage after login.

Svelte

function handleLogin(token) {
  [1].setItem('jwt', token);
}

Drag options to blanks, or click blank then click option'

AsessionStorage

BlocalStorage

Cstorage

DcookieStorage

Attempts:

3 left

💡 Hint

Common Mistakes

Using sessionStorage which clears on tab close.

localStorage is commonly used to store tokens persistently in the browser.

3fill in blank

hard

Fix the error in the Svelte fetch call to include the token from a reactive variable.

Svelte

let token = '';

async function fetchData() {
  const res = await fetch('/api/secure', {
    headers: {
      'Authorization': '[1]'
    }
  });
  return await res.json();
}

Drag options to blanks, or click blank then click option'

A'Bearer ${token}'

B'Bearer token'

C`Bearer ${token}`

DBearer + token

Attempts:

3 left

💡 Hint

Common Mistakes

Using single quotes which do not interpolate variables.

Use template literals with backticks and ${} to insert the token variable value.

4fill in blank

hard

Fill both blanks to create a Svelte store that holds the auth token and a function to clear it.

Svelte

import { writable } from 'svelte/store';

export const authToken = writable([1]);

export function clearToken() {
  authToken.[2]('');
}

Drag options to blanks, or click blank then click option'

A''

Bset

Cupdate

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using update instead of set to replace the token value.

The writable store is initialized with an empty string. The set method updates the store value.

5fill in blank

hard

Fill all three blanks to create an authenticated fetch function that adds an Authorization header with the token to fetch calls.

Svelte

import { get } from 'svelte/store';
import { authToken } from './stores';

export async function authFetch(url, options = {}) {
  const token = get([1]);
  options.headers = {
    ...options.headers,
    'Authorization': [2]
  };
  return fetch(url, options);
}

// Usage: authFetch('/api/data', { method: [3] })

Drag options to blanks, or click blank then click option'

AauthToken

B`Bearer ${token}`

C'GET'

D'POST'

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting to spread existing headers in options.headers.

Get the token from the authToken store, add it as a Bearer token in headers, and use 'GET' as the default method.

Practice

1. What is the main purpose of API authentication in a Svelte app?

easy

A. To verify the identity of the user or app making the request

B. To speed up the API response time

C. To change the API data format

D. To style the API response

Solution

1. Step 1: Understand API authentication role

   API authentication checks who is making the request to keep the app secure.

2. Step 2: Identify the correct purpose

   Speed, data format, and styling are unrelated to authentication.

3. Final Answer:

   To verify the identity of the user or app making the request -> Option A

4. Quick Check:

   Authentication = Verify identity [OK]

Hint: Authentication means checking who you are [OK]

Common Mistakes:

• Confusing authentication with performance optimization
• Thinking authentication changes data format
• Assuming authentication styles the response

2. Which of the following is the correct way to add a Bearer token in a fetch request header in Svelte?

easy

A. fetch(url, { headers: { 'Bearer': token } })

B. fetch(url, { headers: { 'Auth': 'Bearer ' + token } })

C. fetch(url, { headers: { 'Authorization': 'Bearer ' + token } })

D. fetch(url, { headers: { 'Authorization': token } })

Solution

1. Step 1: Recall Bearer token header format

   The standard header key is 'Authorization' with value 'Bearer ' plus the token.

2. Step 2: Match correct syntax

   fetch(url, { headers: { 'Authorization': 'Bearer ' + token } }) correctly uses 'Authorization' and concatenates 'Bearer ' with the token.

3. Final Answer:

   fetch(url, { headers: { 'Authorization': 'Bearer ' + token } }) -> Option C

4. Quick Check:

   Bearer token header = Authorization: Bearer token [OK]

Hint: Use 'Authorization' header with 'Bearer ' prefix [OK]

Common Mistakes:

• Using wrong header key like 'Auth' or 'Bearer'
• Omitting 'Bearer ' prefix before token
• Passing token without header key

3. What will be the output of this Svelte code snippet when fetching an API with Basic Auth?

const response = await fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Basic ' + btoa('user:pass')
  }
});
const data = await response.json();
console.log(data.message);

Assuming the API returns {"message": "Success"} on correct auth.

medium

A. SyntaxError

B. Success

C. Authorization error

D. undefined

Solution

1. Step 1: Understand Basic Auth header

   The code correctly encodes 'user:pass' with btoa and sets 'Authorization' header.

2. Step 2: Predict API response

   With correct credentials, API returns JSON with message 'Success', logged to console.

3. Final Answer:

   Success -> Option B

4. Quick Check:

   Correct Basic Auth returns API success message [OK]

Hint: Basic Auth uses base64 encoded 'user:pass' in Authorization [OK]

Common Mistakes:

• Not encoding credentials with btoa
• Using wrong header key
• Expecting error without wrong credentials

4. Identify the error in this Svelte fetch call for API authentication:

fetch('https://api.example.com/data', {
  headers: {
    'Authorization': 'Bearer token123'
  }
})
.then(response => response.json())
.then(data => console.log(data));

medium

A. Missing await keyword for async fetch

B. Bearer token should be in lowercase

C. Headers object should be outside fetch options

D. No error, code is correct

Solution

1. Step 1: Check fetch usage with promises

   Using .then() is valid without await; async/await is optional here.

2. Step 2: Verify header format and placement

   'Authorization' header with 'Bearer token123' is correct and inside headers object.

3. Final Answer:

   No error, code is correct -> Option D

4. Quick Check:

   fetch with .then and correct headers = valid code [OK]

Hint: Using .then() is valid without await [OK]

Common Mistakes:

• Thinking await is mandatory with fetch
• Assuming 'Bearer' must be lowercase
• Misplacing headers outside fetch options

5. You want to securely store and use an API token in a Svelte app to authenticate requests. Which approach is best practice?

hard

A. Store the token in a Svelte writable store and include it in fetch headers

B. Hardcode the token directly in the fetch call inside the component

C. Save the token in localStorage and read it on every fetch request

D. Send the token as a URL query parameter in fetch requests

Solution

1. Step 1: Evaluate token storage options

   Writable stores in Svelte keep token in memory, safer than localStorage or hardcoding.

2. Step 2: Assess token usage in fetch

   Including token in headers from store is secure and flexible; URL query parameters expose token publicly.

3. Final Answer:

   Store the token in a Svelte writable store and include it in fetch headers -> Option A

4. Quick Check:

   Use writable store for secure token handling [OK]

Hint: Use Svelte stores, avoid hardcoding or URL tokens [OK]

Common Mistakes:

• Hardcoding tokens exposes secrets in code
• Using localStorage risks token theft via XSS
• Sending tokens in URL leaks them in logs