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.