API authentication patterns in Svelte - Step-by-Step Execution

Concept Flow - API authentication patterns

Start: User sends request

↓

Check: Is token present?

No→Reject request: Unauthorized

Yes↓

Validate token with server

↓

Token valid?

No→Reject request: Unauthorized

Yes↓

Allow access to API resource

↓

Send response back to user

This flow shows how API authentication checks a token before allowing access to resources.

Execution Sample

Svelte

async function fetchData() {
  const token = localStorage.getItem('authToken');
  if (!token) return 'No token';
  const res = await fetch('/api/data', {
    headers: { Authorization: `Bearer ${token}` }
  });
  const data = await res.json();
  return data;
}

This code fetches data from an API using a stored token for authentication.

Execution Table

Step	Action	Token Present?	Fetch Call	Result
1	Retrieve token from localStorage	token = 'abc123'	No fetch yet	Token stored
2	Check if token exists	Yes	No fetch yet	Proceed to fetch
3	Make fetch call with Authorization header	Yes	fetch('/api/data', { headers: { Authorization: 'Bearer abc123' } })	Waiting for response
4	Receive response	Yes	Fetch completed	Response JSON data
5	Return data	Yes	No fetch	Data returned to caller

💡 If token missing or invalid, request is rejected before fetch.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	Final
token	null	'abc123'	'abc123'	'abc123'	'abc123'
res	undefined	undefined	undefined	Response object	Response object
data	undefined	undefined	undefined	undefined	JSON data

Key Moments - 2 Insights

Why do we check if the token exists before making the fetch call?

Because without a token, the API will reject the request. Checking early avoids unnecessary network calls, as shown in execution_table step 2.

What happens if the token is invalid?

The server rejects the request, so the fetch call returns an error response. This is implied in the exit_note and execution_table step 3.

Visual Quiz - 3 Questions

Look at the execution_table, what is the token value after step 1?

A 'abc123'

B null

C undefined

D '' (empty string)

💡 Hint

Check the 'Token Present?' column at step 1 in execution_table.

At which step does the fetch call actually happen?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Fetch Call' column in execution_table to find when fetch is made.

If the token was missing, what would happen according to the flow?

A Fetch call proceeds without token

B Request is rejected before fetch

C Token is generated automatically

D Response returns data anyway

💡 Hint

Refer to concept_flow where missing token leads to rejection.

Concept Snapshot

API Authentication Patterns:
- Client stores token (e.g., in localStorage).
- Before API call, check token presence.
- Send token in Authorization header.
- Server validates token.
- If valid, allow access; else reject.
- Always handle missing or invalid tokens gracefully.

Full Transcript

This visual execution shows how API authentication works in a Svelte app. First, the client tries to get a token from localStorage. If no token is found, the request is stopped early to avoid unnecessary calls. If a token exists, the app sends it in the Authorization header when fetching data from the API. The server checks the token and either allows access or rejects the request. The execution table traces each step, showing token retrieval, validation, fetch call, and response handling. Key moments clarify why token checks happen before fetch and what occurs if the token is invalid. The quiz tests understanding of token state and fetch timing. This pattern helps keep APIs secure by ensuring only authenticated users get data.

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