Refreshing JWTs and Signing Out in Dart

Welcome to this lesson on refreshing JWTs and signing out from APIs. Building on our previous discussion about JWT Authentication, where we focused on obtaining and utilizing JSON Web Tokens (JWTs) for stateless API authentication, we now explore more advanced aspects. In particular, we'll focus on refresh tokens, a crucial component in maintaining session continuity and providing seamless user experiences. Refresh tokens allow clients to obtain new access tokens without requiring user reauthentication, thereby ensuring uninterrupted access to protected resources. Our objectives today include learning how to refresh JWTs and securely sign out, all to ensure a robust and secure authentication workflow. Let's get started on mastering these important concepts.

As a reminder, JWTs are integral to stateless authentication, often chosen for their scalability and flexibility. Access tokens, a key part of JWT-based systems, are short-lived to minimize the risk of unauthorized access if they are ever leaked. Before diving into refreshing tokens, let's revisit the process of logging in to obtain both access and refresh tokens.

In this example, we'll send a POST login request and extract tokens from the response. Here's how it unfolds using Dart:

// Base URL for the API
final String baseUrl = "http://localhost:8000";
// User credentials
final Map<String, String> authDetails = {"username": "testuser", "password": "testpass123"};
// Create a Client object
final client = http.Client();

try {
  // Login to receive tokens
  final loginResponse = await client.post(
      Uri.parse('$baseUrl/auth/login'),
      headers: {"Content-Type": "application/json"},
      body: jsonEncode(authDetails),
  );
  // Check status code
  if (loginResponse.statusCode >= 400) {
      String errorMessage = jsonDecode(loginResponse.body)['error'] ?? 'Unknown error';
      throw http.ClientException(errorMessage);
  }
  // Extracting tokens
  final Map<String, dynamic> tokens = jsonDecode(loginResponse.body);
  final String accessToken = tokens['access_token'];
  final String refreshToken = tokens['refresh_token'];
} catch (e) {
  print("An error occurred: $e");
}

In this snippet, we've sent a login request and successfully extracted the access and refresh tokens. These tokens are vital for interacting with protected endpoints and setting the stage for the refreshing process.

To maintain continuous access without forcing users to sign in repeatedly, we employ refresh tokens. These longer-lived tokens enable applications to request a fresh access token once the previous one expires.

With our previously obtained refresh token, we can request a new access token through the refresh process using the /auth/refresh route. It is a common practice to send the refresh token in the body of the request for security reasons, minimizing exposure in URLs or headers:

try {
  // Refresh token request
  final refreshResponse = await client.post(
    Uri.parse('$baseUrl/auth/refresh'),
    headers: {"Content-Type": "application/json"},
    body: jsonEncode({"refresh_token": refreshToken}),
  );
  // Check status code
  if (refreshResponse.statusCode >= 400) {
    String errorMessage = jsonDecode(refreshResponse.body)['error'] ?? 'Unknown error';
    throw http.ClientException(errorMessage);
  }
  // Updating tokens
  final Map<String, dynamic> refreshedTokens = jsonDecode(refreshResponse.body);
  final String newAccessToken = refreshedTokens['access_token'];
  final String newRefreshToken = refreshedTokens['refresh_token'];
  // Display new tokens
  print("Tokens refreshed successfully!");
  print("New Access Token: $newAccessToken");
  print("New Refresh Token: $newRefreshToken");
} catch (e) {
  print("An error occurred: $e");
}

Upon executing the refresh request, we receive a new access token, and in our case, the refresh token is also updated by the server for enhanced security. Upon successful token refresh, you should see an output confirming that the tokens have been updated successfully.

Tokens refreshed successfully!
New Access Token: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJ0ZXN0dXNlciIsImlhdCI6MTczNzczMTYwMCwiZXhwIjoxNzM3NzMyNTAwfQ.Jw6otd6c717EcuLQtUiO4DxNHg_cBTtKvtYyE-9BK_M
New Refresh Token: 3f283c147c54889916250fa90ed208406f8750b90fede0682f7676c9f2432acc

With the new access token obtained, we continue to interact securely with protected API endpoints. This process repeats what we discussed earlier — attaching the access token in the Authorization header of requests. This time, we're utilizing the freshly acquired token to ensure the request is authorized.

Incorporating the updated token, here's how you can access a "todos" endpoint:

try {
  // Define headers with the new JWT access token
  final Map<String, String> headers = {
    "Authorization": "Bearer $newAccessToken"
  };
  
  // Access the protected "todos" endpoint
  final todosResponse = await client.get(Uri.parse('$baseUrl/todos'), headers: headers);
  
  // Check status code and process data...
} catch (e) {
  print("An error occurred: $e");
}

The inclusion of the access token in the authorization header ensures that your requests to resources like /todos are properly authenticated, facilitating secure data transactions. This secure request highlights how refreshed access tokens uphold the integrity of session-based activities while maintaining a streamlined user experience.

Beyond refreshing tokens, signing out from an application is equally crucial as it invalidates current tokens, preventing unauthorized access if they fall into the wrong hands. Signing out serves as an integral part of maintaining security and ending a user session.

By issuing a POST request to the logout endpoint, we revoke access tokens on the server, often using the refresh token to identify the session:

try {
  // Define headers with the new JWT access token
  final Map<String, String> headers = {
    "Content-Type": "application/json",
    "Authorization": "Bearer $newAccessToken"
  };

  // Logout and invalidate tokens
  final logoutResponse = await client.post(
    Uri.parse('$baseUrl/auth/logout'),
    headers: headers,
    body: jsonEncode({"refresh_token": newRefreshToken}),
  );

  // Check status code and process data...
} catch (e) {
  print("An error occurred: $e");
}

Upon successful logout, the application invalidates the session both client-side and server-side. This prevents any further use of revoked tokens, ensuring security. Recognizing what happens server-side during logout supports a comprehensive grasp of session management and security protocols, reinforcing the importance of this step in secure authentication practices.

After executing a logout, the access token is invalidated. Consequently, any attempt to access protected endpoints using the invalid token will fail. Let's illustrate this by attempting to access the "todos" endpoint using the access token post-logout:

try {
  // Define headers with the new JWT access token
  final Map<String, String> headers = {
    "Authorization": "Bearer $newAccessToken"
  };

  // Attempt to access the protected "todos" endpoint after logout
  final todosResponsePostLogout = await client.get(Uri.parse('$baseUrl/todos'), headers: headers);

  // Check status code
  if (todosResponsePostLogout.statusCode >= 400) {
    String errorMessage = jsonDecode(todosResponsePostLogout.body)['error'] ?? 'Unknown error';
    throw http.ClientException(errorMessage);
  }
  
  // Process data...
} catch (e) {
  print("An error occurred: $e");
}

As expected, the server will reject the request since the token is no longer valid. This secures the application by ensuring that invalid tokens cannot be used to access resources. The output from this attempt will indicate an unauthorized access attempt, emphasizing the necessity of re-authentication for continued access, thereby safeguarding sensitive data and maintaining session integrity.

An error occurred: You have been logged out. Please log in again.

In a similar manner, the refresh token becomes invalid after logout, effectively blocking any request to refresh tokens. Here's how the system responds when we attempt to refresh tokens using the invalid refresh token:

try {
  // Attempt to refresh tokens after logout
  final refreshResponsePostLogout = await client.post(
    Uri.parse('$baseUrl/auth/refresh'),
    headers: {"Content-Type": "application/json"},
    body: jsonEncode({"refresh_token": refreshToken}),
  );

  // Check status code
  if (refreshResponsePostLogout.statusCode >= 400) {
    String errorMessage = jsonDecode(refreshResponsePostLogout.body)['error'] ?? 'Unknown error';
    throw http.ClientException(errorMessage);
  }
} catch (e) {
  print("An error occurred: $e");
}

The server detects the invalid token and denies the refresh request, providing an output that confirms the invalid refresh token. This output confirms that once a user logs out, subsequent token refresh attempts fail, reinforcing the logging out process's role in invalidating session credentials. By doing so, it ensures that no unauthorized sessions can regain access inadvertently, cementing application security.

An error occurred: Invalid refresh token

In this lesson, you learned about refreshing JWT tokens and effectively signing out to secure API interactions. We explored the vital role of refresh tokens in retaining session continuity and reducing frequent reauthentication burdens. From refreshing tokens and accessing secured endpoints to signing out, you have gained robust skills in managing API authentication workflows confidently.

With these lessons complete, I commend your progress through the course! The techniques covered empower you to handle API security challenges with proficiency. As you proceed to practice exercises, reinforce these concepts by experimenting with different endpoints and error scenarios. Remember, the skills honed here will serve your applications well, ensuring scalable and secure interactions within the API landscape. Best of luck!