Delving into Session-Based Authentication

Introduction to Session-Based Authentication

Welcome to this lesson on Session-Based Authentication . In the previous lesson, we delved into API authentication using API keys, focusing on how these keys act as a passcode for gaining access to protected endpoints. Here, we take a step further and explore session-based authentication, a method where the server maintains user session information, providing a stateful experience. Unlike API keys, which are stateless, session-based authentication provides a user-friendly way to manage active sessions, track user interactions, and facilitate access to resources. By the end of this lesson, you will be capable of signing up, logging in, accessing protected resources, and logging out using session-based authentication.

Understanding Session-Based Authentication

Session-based authentication is a process that allows users to stay logged into a system as they interact with different endpoints in an application. Whether you are using a web browser or a client like a Dart script to interact with a RESTful API, session-based authentication involves maintaining user session information on the server, creating a stateful experience. When you log in to a RESTful API using your Dart client, the server starts a "session" for you. This session is like a temporary ID card that validates your identity during your interactions with the API. A critical part of this process involves a "cookie," which is a small piece of data sent from the server and stored by your client. In the context of a Dart-based client: Session Creation : After logging in by sending a POST request with your username and password, the server creates a unique session ID, often returned in a cookie. Ongoing Requests : Your Dart client, using the http package, can manually include this session ID in subsequent requests to the API. This allows the server to recognize the session without needing to re-enter your credentials. Session Termination : When your client logs out by sending a logout request, the server invalidates the session, stopping further requests with the old session ID from succeeding, safeguarding your session integrity. By using Dart's http package, you can manage cookies and session data manually, enabling effective interaction with RESTful API endpoints while maintaining user state securely.

Benefits of Using the http.Client for Session Management

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

When working with session-based authentication in Dart, leveraging the http.Client object is advantageous for managing multiple requests efficiently. Here's why using a Client object is beneficial:

Dart

// Create a client
final client = http.Client();

// Create a client
final client = http.Client();

Why Use http.Client?

Persistent Connections: The Client object maintains persistent connections, allowing you to reuse the same connection for multiple requests. This reduces the overhead of establishing new connections for each request, enhancing performance and efficiency.
Cookie Management: Unlike browsers that automatically handle cookies, Dart's http package requires manual cookie management. The Client object provides a consistent context where you can extract cookies from response headers and include them in subsequent request headers.
Resource Management: Using a single Client instance helps manage resources efficiently. When you're done with all requests, you can close the client with client.close() to release resources properly.

Using a Client object is particularly useful when implementing session-based authentication. It allows you to perform all authentication steps — signing up, logging in, accessing resources, and logging out — within a persistent connection context, ensuring better performance while you manually handle the session cookies across your API requests.

Before you begin the authentication process, you need to set up the base URL for the API, define the signup details, and create a client to manage the session. Here's how you can do it:

Dart

// Base URL for the API
final String baseUrl = "http://localhost:8000";

// Signup details with a username and password
final Map<String, String> authDetails = {
  "username": "testuser",
  "password": "testpass123"
};

// Create a client to manage session
final client = http.Client();

// Base URL for the API
final String baseUrl = "http://localhost:8000";

// Signup details with a username and password
final Map<String, String> authDetails = {
  "username": "testuser",
  "password": "testpass123"
};

// Create a client to manage session
final client = http.Client();

Step 2: Signing Up

In the first step of session-based authentication, you need to create a user account. This action is performed by sending a POST request to the API's signup endpoint. Below is the code example showing how this can be accomplished:

Dart

try {
  // Send a POST request to the signup endpoint with the user details
  final signupResponse = await client.post(
    Uri.parse('$baseUrl/auth/signup'),
    headers: {"Content-Type": "application/json"},
    body: jsonEncode(authDetails),
  );
  // Check if the signup request was unsuccessful
  if (signupResponse.statusCode >= 400) {
    String errorMessage = jsonDecode(signupResponse.body)['error'] ?? 'Unknown error';
    throw http.ClientException(errorMessage);
  }
  // Print a success message and the server's JSON response if signup is successful
  print("Signed up successfully!");
  print(signupResponse.body);
} catch (e) {
  print("An error occurred: $e");
}

try {
  // Send a POST request to the signup endpoint with the user details
  final signupResponse = await client.post(
    Uri.parse('$baseUrl/auth/signup'),
    headers: {"Content-Type": "application/json"},
    body: jsonEncode(authDetails),
  );
  // Check if the signup request was unsuccessful
  if (signupResponse.statusCode >= 400) {
    String errorMessage = jsonDecode(signupResponse.body)['error'] ?? 'Unknown error';
    throw http.ClientException(errorMessage);
  }
  // Print a success message and the server's JSON response if signup is successful
  print("Signed up successfully!");
  print(signupResponse.body);
} catch (e) {
  print("An error occurred: $e");
}

In this example, a user account is created by submitting a POST request to the /auth/signup endpoint, along with a username and password. If the request is successful, a confirmation message and the server's response are displayed; otherwise, error details are provided. Upon successful signup, you would see the following output, confirming that the account has been created:

text

Signed up successfully!
{"message": "Signup successful. Please log in to continue."}

Signed up successfully!
{"message": "Signup successful. Please log in to continue."}

Step 3: Logging In

After signing up, the next step is to log in and initiate a session. This involves posting login credentials to an authentication endpoint. Here's an example of how this is implemented:

Dart

try {
  // Send a POST request to the login endpoint using the client object and user credentials
  final loginResponse = await client.post(
    Uri.parse('$baseUrl/auth/login'),
    headers: {"Content-Type": "application/json"},
    body: jsonEncode(authDetails),
  );
  // Check if the login request was unsuccessful
  if (loginResponse.statusCode >= 400) {
    String errorMessage = jsonDecode(loginResponse.body)['error'] ?? 'Unknown error';
    throw http.ClientException(errorMessage);
  }
  // Print a success message and the server's JSON response if login is successful
  print("Logged in successfully!");
  print(loginResponse.body);
  // Retrieve and print the session ID from the response headers
  final sessionId = loginResponse.headers['set-cookie'];
  print("\nSession ID: $sessionId");
} catch (e) {
  print("An error occurred: $e");
}

try {
  // Send a POST request to the login endpoint using the client object and user credentials
  final loginResponse = await client.post(
    Uri.parse('$baseUrl/auth/login'),
    headers: {"Content-Type": "application/json"},
    body: jsonEncode(authDetails),
  );
  // Check if the login request was unsuccessful
  if (loginResponse.statusCode >= 400) {
    String errorMessage = jsonDecode(loginResponse.body)['error'] ?? 'Unknown error';
    throw http.ClientException(errorMessage);
  }
  // Print a success message and the server's JSON response if login is successful
  print("Logged in successfully!");
  print(loginResponse.body);
  // Retrieve and print the session ID from the response headers
  final sessionId = loginResponse.headers['set-cookie'];
  print("\nSession ID: $sessionId");
} catch (e) {
  print("An error occurred: $e");
}

In this code snippet, after signing up, you proceed to log in via a POST request to /auth/login, re-using the client object to keep the session active. Successful login messages are shown if the credentials are accepted and the session is active, and the session ID is printed; otherwise, error details are displayed. Successful login results in the following output:

text

Logged in successfully!
{"message": "Login successful"}

Session ID: session=eyJhdXRoZW50aWNhdGVkIjp0cnVlLCJ1c2VybmFtZSI6InRlc3R1c2VyMjIyIn0.Z5JFJQ.sF2NX5wOgSF5GVqEmuS2YAawIWM

Logged in successfully!
{"message": "Login successful"}

Session ID: session=eyJhdXRoZW50aWNhdGVkIjp0cnVlLCJ1c2VybmFtZSI6InRlc3R1c2VyMjIyIn0.Z5JFJQ.sF2NX5wOgSF5GVqEmuS2YAawIWM

Step 4: Accessing Protected Endpoints

With an active session established, you can use your client object to make requests to protected endpoints of the API. Here's an example of how to achieve this using the sessionId:

Dart

try {
  // Send a GET request to a protected resource using the active session
  final todosResponse = await client.get(
    Uri.parse('$baseUrl/todos'),
    headers: {"Cookie": sessionId ?? ""}, // Include the sessionId in the request headers
  );
  // Check if the GET request was unsuccessful
  if (todosResponse.statusCode >= 400) {
    String errorMessage = jsonDecode(todosResponse.body)['error'] ?? 'Unknown error';
    throw http.ClientException(errorMessage);
  }
  // Print a success message and the server's JSON response if access is successful
  print("Accessed todos successfully!");
  print(todosResponse.body);
} catch (e) {
  print("An error occurred: $e");
}

try {
  // Send a GET request to a protected resource using the active session
  final todosResponse = await client.get(
    Uri.parse('$baseUrl/todos'),
    headers: {"Cookie": sessionId ?? ""}, // Include the sessionId in the request headers
  );
  // Check if the GET request was unsuccessful
  if (todosResponse.statusCode >= 400) {
    String errorMessage = jsonDecode(todosResponse.body)['error'] ?? 'Unknown error';
    throw http.ClientException(errorMessage);
  }
  // Print a success message and the server's JSON response if access is successful
  print("Accessed todos successfully!");
  print(todosResponse.body);
} catch (e) {
  print("An error occurred: $e");
}

Here, a GET request is used to access the /todos endpoint, assuming it's protected and requires an active session. The sessionId is included in the request headers to authenticate the session. When access is granted, it indicates that your session is valid and active; otherwise, error responses are provided in case of a failure. Accessing the protected resource successfully will produce the following output:

text

Accessed todos successfully!
[{"description": "Milk, eggs, bread, and coffee", "done": false, "id": 1, "title": "Buy groceries"}, {"description": "Check in and catch up", "done": true, "id": 2, "title": "Call mom"}, {"description": "Summarize Q4 performance metrics", "done": false, "id": 3, "title": "Finish project report"}, {"description": "30 minutes of cardio", "done": true, "id": 4, "title": "Workout"}]

Accessed todos successfully!
[{"description": "Milk, eggs, bread, and coffee", "done": false, "id": 1, "title": "Buy groceries"}, {"description": "Check in and catch up", "done": true, "id": 2, "title": "Call mom"}, {"description": "Summarize Q4 performance metrics", "done": false, "id": 3, "title": "Finish project report"}, {"description": "30 minutes of cardio", "done": true, "id": 4, "title": "Workout"}]

Step 5: Ending the Session with Logging Out

To end the session and log out by targeting the /auth/logout endpoint, ensuring that the session is cleanly terminated, you can use the following with the sessionId:

Dart

try {
  // Send a POST request to the logout endpoint to end the session
  final logoutResponse = await client.post(
    Uri.parse('$baseUrl/auth/logout'),
    headers: {"Cookie": sessionId ?? ""}, // Include the sessionId in the request headers
  );
  // Check if the logout request was unsuccessful
  if (logoutResponse.statusCode >= 400) {
    String errorMessage = jsonDecode(logoutResponse.body)['error'] ?? 'Unknown error';
    throw http.ClientException(errorMessage);
  }
  // Print a success message and the server's JSON response if logout is successful
  print("Logged out successfully!");
  print(logoutResponse.body);
} catch (e) {
  // Print error details if the HTTP request fails
  print("An error occurred: $e");
} finally {
  client.close();
}

try {
  // Send a POST request to the logout endpoint to end the session
  final logoutResponse = await client.post(
    Uri.parse('$baseUrl/auth/logout'),
    headers: {"Cookie": sessionId ?? ""}, // Include the sessionId in the request headers
  );
  // Check if the logout request was unsuccessful
  if (logoutResponse.statusCode >= 400) {
    String errorMessage = jsonDecode(logoutResponse.body)['error'] ?? 'Unknown error';
    throw http.ClientException(errorMessage);
  }
  // Print a success message and the server's JSON response if logout is successful
  print("Logged out successfully!");
  print(logoutResponse.body);
} catch (e) {
  // Print error details if the HTTP request fails
  print("An error occurred: $e");
} finally {
  client.close();
}

To log out, a POST request is made to /auth/logout, notifying the server to terminate the session. The sessionId is included in the request headers to ensure the correct session is terminated. A successful logout message is displayed upon completion; otherwise, error responses are provided if the request fails. After logging out, you will see the following message as confirmation:

text

Logged out successfully!
{"message": "Logout successful"}

Logged out successfully!
{"message": "Logout successful"}

After ending the session and logging out, any attempt to access protected endpoints without logging back in will fail. This is because the session is no longer active, and the server won't recognize your session ID. Here’s the output you can expect when trying to access a protected endpoint after logging out:

text

An error occurred: Session has been invalidated

An error occurred: Session has been invalidated

In this lesson, we journeyed through the process of session-based authentication, covering signing up, logging in, accessing secure resources, and logging out. By maintaining an active session, you have learned to manage user states effectively and securely — an important aspect of API interaction. As you transition to the practice exercises, these methods will form the backbone of your hands-on experience in securing endpoints. The upcoming practices are designed to reinforce your understanding and mastery of session-based authentication, preparing you for subsequent lessons that explore even more advanced methods like JSON Web Tokens (JWT). Dive into these exercises with confidence, applying what you've learned in a practical, results-oriented way.

Introduction to Session-Based Authentication

Understanding Session-Based Authentication

Benefits of Using the http.Client for Session Management

Join the 1M+ learners on CodeSignal

Step 1: Setting Up URL, Auth Details and Client

Step 2: Signing Up

Step 3: Logging In

Step 4: Accessing Protected Endpoints

Step 5: Ending the Session with Logging Out

Attempting to Access Protected Endpoints After Logout

Summary and Preparation for Practice