DEV Community

Ahmad Darwish
Ahmad Darwish

Posted on

Handling HTTP Requests with DIO and Refresh Tokens in Flutter

In this article, we'll demonstrate how to use the DIO package to make GET and POST requests in a Flutter application, while leveraging refresh tokens to maintain a persistent user session. We'll cover the following topics:

  1. Setting up DIO
  2. Creating a DIO instance with interceptors
  3. Making GET and POST requests
  4. Implementing automatic token refresh with DIO interceptors

1. Setting up DIO
First, add the DIO package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  dio: ^4.0.0
Enter fullscreen mode Exit fullscreen mode

Then, run flutter packages get to install the package.

2. Creating a DIO instance with interceptors
To create a DIO instance with interceptors, first import the DIO package:
import 'package:dio/dio.dart';

Then, create a DIO instance with a default configuration:

Dio dio = Dio(
  BaseOptions(
    baseUrl: 'https://your-api-url.com',
    connectTimeout: 5000,
    receiveTimeout: 3000,
  ),
);
Enter fullscreen mode Exit fullscreen mode

3. Making GET and POST requests
Now that we have a DIO instance, we can use it to make GET and POST requests. Here's an example of making a GET request:

Future<void> fetchData() async {
  try {
    Response response = await dio.get('/path/to/your/endpoint');
    print(response.data);
  } on DioError catch (e) {
    print(e.message);
  }
}
Enter fullscreen mode Exit fullscreen mode

To make a POST request, we can use the post method as shown below:

Future<void> postData() async {
  try {
    Response response = await dio.post(
      '/path/to/your/endpoint',
      data: {'key': 'value'},
    );
    print(response.data);
  } on DioError catch (e) {
    print(e.message);
  }
}
Enter fullscreen mode Exit fullscreen mode

4. Implementing automatic token refresh with DIO interceptors
To implement automatic token refresh, we'll add an interceptor to the DIO instance. This interceptor will handle token refresh logic whenever it detects a 401 (Unauthorized) response from the server.

First, create a function to refresh the access token:

Future<String> refreshToken() async {
  // Perform a request to the refresh token endpoint and return the new access token.
  // You can replace this with your own implementation.
  return 'your_new_access_token';
}
Enter fullscreen mode Exit fullscreen mode

Next, add an interceptor to the DIO instance:

dio.interceptors.add(
  InterceptorsWrapper(
    onRequest: (options, handler) {
      // Add the access token to the request header
      options.headers['Authorization'] = 'Bearer your_access_token';
      return handler.next(options);
    },
    onError: (DioError e, handler) async {
      if (e.response?.statusCode == 401) {
        // If a 401 response is received, refresh the access token
        String newAccessToken = await refreshToken();

        // Update the request header with the new access token
        e.requestOptions.headers['Authorization'] = 'Bearer $newAccessToken';

        // Repeat the request with the updated header
        return handler.resolve(await dio.fetch(e.requestOptions));
      }
      return handler.next(e);
    },
  ),
);
Enter fullscreen mode Exit fullscreen mode

With this interceptor in place, your application will automatically refresh the access token and retry requests whenever a 401 response is received.

That's it! You've now implemented a DIO instance with interceptors for handling GET and POST requests, as well as automatic token refresh. This will help you maintain a persistent user session and improve the user experience in your Flutter application.

Top comments (1)

Collapse
 
ysimonx profile image
ysimonx

be careful when doing this. I had an error when uploading a file on a server.

If you are using a MultipartFile.fromFile when doing a post request, that is retried because of an expired token, the MultipartFile.fromFile should fails when retrying ...

cf this link