Code-Alongs - Web Unit 3 Sprint 11

Understanding Login Requests

This code-along builds on the fundamental concept of login requests in web development. You'll learn how a simple action like logging into a website involves making a network request, focusing on the POST request method, headers, and payloads.

The Request-Response Cycle

When you enter credentials on a login page, you're sending a POST request to the server with:

• Headers - Key-value pairs with information about the request
• Payload - The data being sent (typically in JSON format)

The server processes this request and sends back a response with its own headers and body, which might contain a welcome message or an error code like 401 Unauthorized.

Using Authentication Tokens

In successful login attempts, the server responds with a token—a string that represents your authentication status. This token is crucial for:

• Subsequent requests to access protected resources
• Web security and session management
• Maintaining user state across the application

Implementation Example

// Login request
const login = async (credentials) => {
  const response = await fetch('https://auth-api.example.com/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(credentials)
  });
  
  if (!response.ok) {
    throw new Error('Login failed');
  }
  
  const data = await response.json();
  localStorage.setItem('token', data.token);
  return data;
};