Effortless Token Refresh Handling with Dio in Flutter

Verified

This TokenInterceptor ensures seamless authentication in Flutter by automatically refreshing expired tokens, queuing pending requests, and preventing duplicate refresh calls.

main.dart

Version 197 lines

class TokenInterceptor extends QueuedInterceptor {
  // when accessToken is expired & having multiple requests call
  // this variable to lock others request to make sure only trigger call refresh token 01 times
  // to prevent duplicate refresh call
  bool _isRefreshing = false;

// when having multiple requests call at the same time, you need to store them in a list
  // then loop this list to retry every request later, after call refresh token success
  final _requestsNeedRetry =
      <({RequestOptions options, ErrorInterceptorHandler handler})>[];

Future<String?> getToken() async {
    return SecureStorageApi.read("token");
  }

Future<String> getRefreshedToken() async {
    
    // call refesh token api and save locally
    return "refreshed token";
  }

@override
  void onRequest(
      RequestOptions options, RequestInterceptorHandler handler) async {
    var accessToken = await getToken();
    options.headers["Authorization"] = "Bearer $accessToken";
    return handler.next(options);
  }

@override
  void onError(DioException err, ErrorInterceptorHandler handler) async {
    if (err.response?.statusCode == 403 || err.response?.statusCode == 401) {
      var options = err.response!.requestOptions;

if (!_isRefreshing) {
        _isRefreshing = true;

// add request (requestOptions and handler) to queue and wait to retry later
        log("Adding ${options.uri} to queue");
        _requestsNeedRetry.add((options: options, handler: handler));

// call api refresh token
        try {
          // throw Exception("Failed refreshing token redirec to login");
          var accessToken = await getRefreshedToken();
          log("new refreshed : $accessToken", name: "TokenInterceptor");
          // refresh success, loop requests need retry
          for (var requestNeedRetry in _requestsNeedRetry) {
            log("Processing ${requestNeedRetry.options.uri} in queue");
            // don't need set new accessToken to header here, because these retry
            // will go through onRequest callback above (where new accessToken will be set to header)

// won't use await because this loop will take longer -> maybe throw: Unhandled Exception: Concurrent modification during iteration
            // because method _requestsNeedRetry.add() is called at the same time
            // final response = await dio.fetch(requestNeedRetry.options);
            // requestNeedRetry.handler.resolve(response);

requestNeedRetry.options.headers["Authorization"] =
                "Bearer $accessToken";
            // call api again with new accessToken
            // use fetch and then to unblock the loop
            (Dio()
                  ..interceptors.addAll([
                    LoggingInterceptor(),
                  ]))
                .fetch(requestNeedRetry.options)
                .then((response) {
              requestNeedRetry.handler.resolve(response);
            }).catchError((e) {
              print(e);
              requestNeedRetry.handler.next(e);
            });
          }
          _requestsNeedRetry.clear();
          _isRefreshing = false;
        } catch (e) {
          _isRefreshing = false;
          _requestsNeedRetry.clear();
          // if refresh fail, force logout user here
          log("error while refreshing the  token: $e",
              name: "TokenInterceptor");
          return handler.next(err);
        }
      } else {
        // if refresh flow is processing, add this request to queue and wait to retry later
        _requestsNeedRetry.add((options: options, handler: handler));
        log("Adding ${options.uri} to queue");
        log(
          "refresh flow is processing, add this request to queue and wait to retry later: ${_requestsNeedRetry.length}",
          name: "TokenInterceptor",
        );
      }
    } else {
      return handler.next(err);
    }
  }
}

Version history

Version 1

Feb 19, 2025

2 months ago

Author

@loicgeek

Published Feb 19, 2025