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.