API authentication patterns in Svelte - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the Svelte component tries to fetch data with expired token?

Consider a Svelte component that fetches user data from an API using a stored JWT token. The token is expired. What will be the component's behavior?

Svelte

import { onMount } from 'svelte';
let userData = null;
let error = null;
const token = 'expired.jwt.token';

onMount(async () => {
  try {
    const res = await fetch('https://api.example.com/user', {
      headers: { 'Authorization': `Bearer ${token}` }
    });
    if (!res.ok) throw new Error('Unauthorized');
    userData = await res.json();
  } catch (e) {
    error = e.message;
  }
});

A The component retries fetching automatically until token is valid.

B The component successfully fetches user data despite expired token.

C The component throws a runtime error and crashes.

D The component sets error to 'Unauthorized' and userData remains null.

💡 Hint

Think about what happens when the API rejects the request due to expired token.

The API returns a 401 Unauthorized status for expired tokens. The fetch call detects this and throws an error, which is caught and sets the error message. The userData remains null because no data is returned.

📝 Syntax

intermediate

Which Svelte code correctly adds a Bearer token to fetch headers?

Choose the correct way to add a Bearer token to the fetch request headers in a Svelte component.

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

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

C fetch(url, { headers: { Authorization: `Bearer ${token}` } })

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

💡 Hint

Remember how to use template literals to insert variables inside strings.

Option C uses backticks and ${token} to correctly insert the token variable inside the string 'Bearer ...'. Option C concatenates strings but is less modern. Options B and D have syntax errors or wrong order.

❓ state_output

advanced

What is the value of 'isAuthenticated' after token refresh in this Svelte component?

Given a Svelte component that refreshes an expired token and updates authentication state, what is the final value of isAuthenticated?

Svelte

import { onMount } from 'svelte';
import { writable } from 'svelte/store';

const isAuthenticated = writable(false);
let token = 'expired.jwt.token';

async function refreshToken() {
  const res = await fetch('https://api.example.com/refresh', {
    method: 'POST',
    headers: { 'Authorization': `Bearer ${token}` }
  });
  if (res.ok) {
    const data = await res.json();
    token = data.token;
    isAuthenticated.set(true);
  } else {
    isAuthenticated.set(false);
  }
}

onMount(async () => {
  await refreshToken();
});

A undefined

B true

C false

D null

💡 Hint

If the refresh API call succeeds, what does the code do to isAuthenticated?

The refreshToken function sets isAuthenticated to true if the refresh API call succeeds (res.ok). Since the token is replaced and state updated, the final value is true.

🔧 Debug

advanced

Why does this Svelte component fail to send Authorization header?

Identify the reason why the Authorization header is missing in the fetch request below.

Svelte

let token = 'abc123';

async function getData() {
  const response = await fetch('https://api.example.com/data', {
    headers: { Authorization: `Bearer ${token}` }
  });
  return await response.json();
}

getData();

A The string 'Bearer token' is literal; it should use the variable token instead.

B The fetch call is missing the method property.

C Headers object keys must be lowercase 'authorization'.

D The token variable is not declared with const.

💡 Hint

Check how the token variable is used inside the string.

The code uses the literal string 'Bearer token' instead of inserting the token variable's value. It should be `Bearer ${token}` or 'Bearer ' + token to include the actual token.

🧠 Conceptual

expert

Which authentication pattern best fits a Svelte app needing secure API access with token refresh?

Choose the best API authentication pattern for a Svelte app that must securely access APIs and handle token expiration by refreshing tokens automatically.

A Store JWT in localStorage and refresh token on 401 responses using a fetch wrapper.

B Send username and password with every API request to avoid token management.

C Store JWT in memory only and reload the app to get a new token when expired.

D Store JWT in a cookie without HttpOnly flag and refresh token manually via user action.

💡 Hint

Consider security and user experience for token storage and refresh.

Option A is best because storing JWT in localStorage allows easy access for fetch calls, and refreshing tokens automatically on 401 errors improves user experience. Option A is insecure without HttpOnly. Option A loses token on reload. Option A is insecure and inefficient.

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