Using Interceptor in Dio for Flutter to Refresh Token - http

I am trying to use Interceptor with Dio in flutter, I have to handle Token expire.
following is my code
Future<Dio> getApiClient() async {
token = await storage.read(key: USER_TOKEN);
_dio.interceptors.clear();
_dio.interceptors
.add(InterceptorsWrapper(onRequest: (RequestOptions options) {
// Do something before request is sent
options.headers["Authorization"] = "Bearer " + token;
return options;
},onResponse:(Response response) {
// Do something with response data
return response; // continue
}, onError: (DioError error) async {
// Do something with response error
if (error.response?.statusCode == 403) {
// update token and repeat
// Lock to block the incoming request until the token updated
_dio.interceptors.requestLock.lock();
_dio.interceptors.responseLock.lock();
RequestOptions options = error.response.request;
FirebaseUser user = await FirebaseAuth.instance.currentUser();
token = await user.getIdToken(refresh: true);
await writeAuthKey(token);
options.headers["Authorization"] = "Bearer " + token;
_dio.interceptors.requestLock.unlock();
_dio.interceptors.responseLock.unlock();
_dio.request(options.path, options: options);
} else {
return error;
}
}));
_dio.options.baseUrl = baseUrl;
return _dio;
}
problem is instead of repeating the network call with the new token, Dio is returning the error object to the calling method, which in turn is rendering the wrong widget, any leads on how to handle token refresh with dio?

I have found a simple solution that looks like the following:
this.api = Dio();
this.api.interceptors.add(InterceptorsWrapper(
onError: (error) async {
if (error.response?.statusCode == 403 ||
error.response?.statusCode == 401) {
await refreshToken();
return _retry(error.request);
}
return error.response;
}));
Basically what is going on is it checks to see if the error is a 401 or 403, which are common auth errors, and if so, it will refresh the token and retry the response. My implementation of refreshToken() looks like the following, but this may vary based on your api:
Future<void> refreshToken() async {
final refreshToken = await this._storage.read(key: 'refreshToken');
final response =
await this.api.post('/users/refresh', data: {'token': refreshToken});
if (response.statusCode == 200) {
this.accessToken = response.data['accessToken'];
}
}
I use Flutter Sercure Storage to store the accessToken. My retry method looks like the following:
Future<Response<dynamic>> _retry(RequestOptions requestOptions) async {
final options = new Options(
method: requestOptions.method,
headers: requestOptions.headers,
);
return this.api.request<dynamic>(requestOptions.path,
data: requestOptions.data,
queryParameters: requestOptions.queryParameters,
options: options);
}
If you want to easily allows add the access_token to the request I suggest adding the following function when you declare your dio router with the onError callback:
onRequest: (options) async {
options.headers['Authorization'] = 'Bearer: $accessToken';
return options;
},

I solved it using interceptors in following way :-
Future<Dio> getApiClient() async {
token = await storage.read(key: USER_TOKEN);
_dio.interceptors.clear();
_dio.interceptors
.add(InterceptorsWrapper(onRequest: (RequestOptions options) {
// Do something before request is sent
options.headers["Authorization"] = "Bearer " + token;
return options;
},onResponse:(Response response) {
// Do something with response data
return response; // continue
}, onError: (DioError error) async {
// Do something with response error
if (error.response?.statusCode == 403) {
_dio.interceptors.requestLock.lock();
_dio.interceptors.responseLock.lock();
RequestOptions options = error.response.request;
FirebaseUser user = await FirebaseAuth.instance.currentUser();
token = await user.getIdToken(refresh: true);
await writeAuthKey(token);
options.headers["Authorization"] = "Bearer " + token;
_dio.interceptors.requestLock.unlock();
_dio.interceptors.responseLock.unlock();
return _dio.request(options.path,options: options);
} else {
return error;
}
}));
_dio.options.baseUrl = baseUrl;
return _dio;
}
Dio 4.0.0 Support
dio.interceptors.add(
InterceptorsWrapper(
onRequest: (request, handler) {
if (token != null && token != '')
request.headers['Authorization'] = 'Bearer $token';
return handler.next(request);
},
onError: (e, handler) async {
if (e.response?.statusCode == 401) {
try {
await dio
.post(
"https://refresh.api",
data: jsonEncode(
{"refresh_token": refreshtoken}))
.then((value) async {
if (value?.statusCode == 201) {
//get new tokens ...
print("access token" + token);
print("refresh token" + refreshtoken);
//set bearer
e.requestOptions.headers["Authorization"] =
"Bearer " + token;
//create request with new access token
final opts = new Options(
method: e.requestOptions.method,
headers: e.requestOptions.headers);
final cloneReq = await dio.request(e.requestOptions.path,
options: opts,
data: e.requestOptions.data,
queryParameters: e.requestOptions.queryParameters);
return handler.resolve(cloneReq);
}
return e;
});
return dio;
} catch (e, st) {
}
}
},
),
);

I modify John Anderton's answer. I agree that it is better approach to check the token(s) before you actually make the request. we have to check if the tokens are expired or not, instead of making request and check the error 401 and 403.
I modify it to add some functionalities, so this interceptor can be used
to add access token to the header if it is still valid
to regenerate access token if it has expired
to navigate back to Login Page if refresh token has expired
to navigate back to Login Page if there is an error because of invalidated token (for example, revoked by the backend)
and it also work for multiple concurrent requests, and if you don't need to add token to the header (like in login endpoint), this interceptor can handle it as well. here is the interceptor
class AuthInterceptor extends Interceptor {
final Dio _dio;
final _localStorage = LocalStorage.instance; // helper class to access your local storage
AuthInterceptor(this._dio);
#override
void onRequest(RequestOptions options, RequestInterceptorHandler handler) async {
if (options.headers["requiresToken"] == false) {
// if the request doesn't need token, then just continue to the next interceptor
options.headers.remove("requiresToken"); //remove the auxiliary header
return handler.next(options);
}
// get tokens from local storage, you can use Hive or flutter_secure_storage
final accessToken = _localStorage.getAccessToken();
final refreshToken = _localStorage.getRefreshToken();
if (accessToken == null || refreshToken == null) {
_performLogout(_dio);
// create custom dio error
options.extra["tokenErrorType"] = TokenErrorType.tokenNotFound; // I use enum type, you can chage it to string
final error = DioError(requestOptions: options, type: DioErrorType.other);
return handler.reject(error);
}
// check if tokens have already expired or not
// I use jwt_decoder package
// Note: ensure your tokens has "exp" claim
final accessTokenHasExpired = JwtDecoder.isExpired(accessToken);
final refreshTokenHasExpired = JwtDecoder.isExpired(refreshToken);
var _refreshed = true;
if (refreshTokenHasExpired) {
_performLogout(_dio);
// create custom dio error
options.extra["tokenErrorType"] = TokenErrorType.refreshTokenHasExpired;
final error = DioError(requestOptions: options, type: DioErrorType.other);
return handler.reject(error);
} else if (accessTokenHasExpired) {
// regenerate access token
_dio.interceptors.requestLock.lock();
_refreshed = await _regenerateAccessToken();
_dio.interceptors.requestLock.unlock();
}
if (_refreshed) {
// add access token to the request header
options.headers["Authorization"] = "Bearer $accessToken";
return handler.next(options);
} else {
// create custom dio error
options.extra["tokenErrorType"] = TokenErrorType.failedToRegenerateAccessToken;
final error = DioError(requestOptions: options, type: DioErrorType.other);
return handler.reject(error);
}
}
#override
void onError(DioError err, ErrorInterceptorHandler handler) {
if (err.response?.statusCode == 403 || err.response?.statusCode == 401) {
// for some reasons the token can be invalidated before it is expired by the backend.
// then we should navigate the user back to login page
_performLogout(_dio);
// create custom dio error
err.type = DioErrorType.other;
err.requestOptions.extra["tokenErrorType"] = TokenErrorType.invalidAccessToken;
}
return handler.next(err);
}
void _performLogout(Dio dio) {
_dio.interceptors.requestLock.clear();
_dio.interceptors.requestLock.lock();
_localStorage.removeTokens(); // remove token from local storage
// back to login page without using context
// check this https://stackoverflow.com/a/53397266/9101876
navigatorKey.currentState?.pushReplacementNamed(LoginPage.routeName);
_dio.interceptors.requestLock.unlock();
}
/// return true if it is successfully regenerate the access token
Future<bool> _regenerateAccessToken() async {
try {
var dio = Dio(); // should create new dio instance because the request interceptor is being locked
// get refresh token from local storage
final refreshToken = _localStorage.getRefreshToken();
// make request to server to get the new access token from server using refresh token
final response = await dio.post(
"https://yourDomain.com/api/refresh",
options: Options(headers: {"Authorization": "Bearer $refreshToken"}),
);
if (response.statusCode == 200 || response.statusCode == 201) {
final newAccessToken = response.data["accessToken"]; // parse data based on your JSON structure
_localStorage.saveAccessToken(newAccessToken); // save to local storage
return true;
} else if (response.statusCode == 401 || response.statusCode == 403) {
// it means your refresh token no longer valid now, it may be revoked by the backend
_performLogout(_dio);
return false;
} else {
print(response.statusCode);
return false;
}
} on DioError {
return false;
} catch (e) {
return false;
}
}
}
usage
final dio = Dio();
dio.options.baseUrl = "https://yourDomain.com/api";
dio.interceptors.addAll([
AuthInterceptor(dio), // add this line before LogInterceptor
LogInterceptor(),
]);
if your request doesn't need token in the header (like in the login endpoint), then you should make request like this
await dio.post(
"/login",
data: loginData,
options: Options(headers: {"requiresToken": false}), // add this line
);
otherwise, just make a regular request without adding token to the header option, the interceptor will automatically handle it.
await dio.get("/user", data: myData);

I think that a better approach is to check the token(s) before you actually make the request. That way you have less network traffic and the response is faster.
EDIT: Another important reason to follow this approach is because it is a safer one, as X.Y. pointed out in the comment section
In my example I use:
http: ^0.13.3
dio: ^4.0.0
flutter_secure_storage: ^4.2.0
jwt_decode: ^0.3.1
flutter_easyloading: ^3.0.0
The idea is to first check the expiration of tokens (both access and refresh).
If the refresh token is expired then clear the storage and redirect to LoginPage.
If the access token is expired then (before submit the actual request) refresh it by using the refresh token, and then use the refreshed credentials to submit the original request. In that way you minimize the network traffic and you take the response way faster.
I did this:
AuthService appAuth = new AuthService();
class AuthService {
Future<void> logout() async {
token = '';
refresh = '';
await Future.delayed(Duration(milliseconds: 100));
Navigator.of(cnt).pushAndRemoveUntil(
MaterialPageRoute(builder: (context) => LoginPage()),
(_) => false,
);
}
Future<bool> login(String username, String password) async {
var headers = {'Accept': 'application/json'};
var request = http.MultipartRequest('POST', Uri.parse(baseURL + 'token/'));
request.fields.addAll({'username': username, 'password': password});
request.headers.addAll(headers);
http.StreamedResponse response = await request.send();
if (response.statusCode == 200) {
var resp = await response.stream.bytesToString();
final data = jsonDecode(resp);
token = data['access'];
refresh = data['refresh'];
secStore.secureWrite('token', token);
secStore.secureWrite('refresh', refresh);
return true;
} else {
return (false);
}
}
Future<bool> refreshToken() async {
var headers = {'Accept': 'application/json'};
var request =
http.MultipartRequest('POST', Uri.parse(baseURL + 'token/refresh/'));
request.fields.addAll({'refresh': refresh});
request.headers.addAll(headers);
http.StreamedResponse response = await request.send();
if (response.statusCode == 200) {
final data = jsonDecode(await response.stream.bytesToString());
token = data['access'];
refresh = data['refresh'];
secStore.secureWrite('token', token);
secStore.secureWrite('refresh', refresh);
return true;
} else {
print(response.reasonPhrase);
return false;
}
}
}
After that create the interceptor
import 'package:dio/dio.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import '../settings/globals.dart';
class AuthInterceptor extends Interceptor {
static bool isRetryCall = false;
#override
void onRequest(
RequestOptions options, RequestInterceptorHandler handler) async {
bool _token = isTokenExpired(token);
bool _refresh = isTokenExpired(refresh);
bool _refreshed = true;
if (_refresh) {
appAuth.logout();
EasyLoading.showInfo(
'Expired session');
DioError _err;
handler.reject(_err);
} else if (_token) {
_refreshed = await appAuth.refreshToken();
}
if (_refreshed) {
options.headers["Authorization"] = "Bearer " + token;
options.headers["Accept"] = "application/json";
handler.next(options);
}
}
#override
void onResponse(Response response, ResponseInterceptorHandler handler) async {
handler.next(response);
}
#override
void onError(DioError err, ErrorInterceptorHandler handler) async {
handler.next(err);
}
}
The secure storage functionality is from:
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
SecureStorage secStore = new SecureStorage();
class SecureStorage {
final _storage = FlutterSecureStorage();
void addNewItem(String key, String value) async {
await _storage.write(
key: key,
value: value,
iOptions: _getIOSOptions(),
);
}
IOSOptions _getIOSOptions() => IOSOptions(
accountName: _getAccountName(),
);
String _getAccountName() => 'blah_blah_blah';
Future<String> secureRead(String key) async {
String value = await _storage.read(key: key);
return value;
}
Future<void> secureDelete(String key) async {
await _storage.delete(key: key);
}
Future<void> secureWrite(String key, String value) async {
await _storage.write(key: key, value: value);
}
}
check expiration with:
bool isTokenExpired(String _token) {
DateTime expiryDate = Jwt.getExpiryDate(_token);
bool isExpired = expiryDate.compareTo(DateTime.now()) < 0;
return isExpired;
}
and then the original request
var dio = Dio();
Future<Null> getTasks() async {
EasyLoading.show(status: 'Wait ...');
Response response = await dio
.get(baseURL + 'tasks/?task={"foo":"1","bar":"30"}');
if (response.statusCode == 200) {
print('success');
} else {
print(response?.statusCode);
}}
As you can see the Login and refreshToken request use http package (they don't need the interceptor). The getTasks use dio and it's interceptor in order to get its response in one and only request

Dio 4.0.0
dio.interceptors.clear();
dio.interceptors.add(
InterceptorsWrapper(
onRequest: (request, handler) {
if (token != null && token != '')
request.headers['Authorization'] = 'Bearer $token';
return handler.next(request);
},
onError: (err, handler) async {
if (err.response?.statusCode == 401) {
try {
await dio
.post(
"https://refresh.api",
data: jsonEncode(
{"refresh_token": refreshtoken}))
.then((value) async {
if (value?.statusCode == 201) {
//get new tokens ...
print("acces token" + token);
print("refresh token" + refreshtoken);
//set bearer
err.requestOptions.headers["Authorization"] =
"Bearer " + token;
//create request with new access token
final opts = new Options(
method: err.requestOptions.method,
headers: err.requestOptions.headers);
final cloneReq = await dio.request(err.requestOptions.path,
options: opts,
data: err.requestOptions.data,
queryParameters: err.requestOptions.queryParameters);
return handler.resolve(cloneReq);
}
return err;
});
return dio;
} catch (err, st) {
}
}
},
),
);

Dio 4.0.2 deprecates Interceptor locks. QueuedInterceptor should be used instead.
From the docs:
Locks of interceptors were originally designed to synchronize interceptor execution, but locks have a problem that once it becomes unlocked all of the requests run at once, rather than executing sequentially. Now QueuedInterceptor can do it better.
QueuedInterceptor provides a mechanism for sequential access(one by one) to interceptors.
An example of AuthInterceptor implemented using QueuedInterceptor:
/// Adds Authorization header with a non-expired bearer token.
///
/// Logic:
/// 1. Check if the endpoint requires authentication
/// - If not, bypass interceptor
/// 2. Get a non-expired access token
/// - AuthRepository takes care of refreshing the token if it is expired
/// 3. Make API call (attaching token in Authorization header)
/// 4. If response if 401 (e.g. a not expired access token that was revoked by backend),
/// force refresh access token and retry call.
///
/// For non-authenticated endpoints add the following header to bypass this interceptor:
/// `Authorization: None`
///
/// For endpoints with optional authentication provide the following header:
/// `Authorization: Optional`
/// - If user is not authenticated: the Authorization header will be removed
/// and the call will be performed without it.
/// - If the user is authenticated: the authentication token will be attached in the
/// Authorization header.
class AuthInterceptor extends QueuedInterceptor {
AuthInterceptor({
required this.dio,
required this.authRepository,
this.retries = 3,
});
/// The original dio
final Dio dio;
final AuthRepository authRepository;
/// The number of retries in case of 401
final int retries;
#override
Future<void> onRequest(
final RequestOptions options,
final RequestInterceptorHandler handler,
) async {
// Non-authenticated endpoint -> bypass this interceptor
if (options._requiresNoAuthentication()) {
options._removeAuthenticationHeader();
return handler.next(options);
}
// Get auth token
final authTokenRes = await authRepository.getAuthToken();
authTokenRes.fold(
success: (final authToken) {
// Add auth token in Authorization header
options._setAuthenticationHeader(authToken.token);
handler.next(options);
},
failure: (final e) async {
// Skip authentication header if it is optional and user is not authenticated
if (e is UserNoAuthenticatedException && options._hasOptionalAuthentication()) {
options._removeAuthenticationHeader();
return handler.next(options);
}
// Handle auth token errors
await _onErrorRefreshingToken();
final error = DioError(requestOptions: options, error: e);
handler.reject(error);
},
);
}
#override
Future<void> onError(final DioError err, final ErrorInterceptorHandler handler) async {
if (err.response?.statusCode != 401) {
return super.onError(err, handler);
}
// Check retry attempt
final attempt = err.requestOptions._retryAttempt + 1;
if (attempt > retries) {
return super.onError(err, handler);
}
err.requestOptions._retryAttempt = attempt;
await Future<void>.delayed(const Duration(seconds: 1));
// Force refresh auth token
final authTokenRes = await authRepository.getAuthToken(forceRefresh: true);
authTokenRes.fold(
success: (final authToken) async {
// Add new auth token in Authorization header and retry call
try {
final options = err.requestOptions.._setAuthenticationHeader(authToken.token);
final response = await dio.fetch<void>(options);
handler.resolve(response);
} on DioError catch (e) {
if (e.response?.statusCode == 401) {
await _onErrorRefreshingToken();
}
super.onError(e, handler);
}
},
failure: (final e) async {
// Handle auth token errors
await _onErrorRefreshingToken();
final error = DioError(requestOptions: err.requestOptions, error: authTokenRes.error);
return handler.next(error);
},
);
}
Future<void> _onErrorRefreshingToken() async {
await authRepository.signOut();
}
}
extension AuthRequestOptionsX on RequestOptions {
bool _requiresNoAuthentication() => headers['Authorization'] == 'None';
bool _hasOptionalAuthentication() => headers['Authorization'] == 'Optional';
void _setAuthenticationHeader(final String token) => headers['Authorization'] = 'Bearer $token';
void _removeAuthenticationHeader() => headers.remove('Authorization');
int get _retryAttempt => (extra['auth_retry_attempt'] as int?) ?? 0;
set _retryAttempt(final int attempt) => extra['auth_retry_attempt'] = attempt;
}
Notes:
In my case AuthRepository is a wrapper of FirebaseAuth. The Firebase SDK takes care of providing a non-expired token when getAuthToken() is called.
AuthRepository.getAuthToken() returns a Future<Result<AuthToken, AuthException>>. My Result object is similar to the one provided in Result package.

You would get a response status code as 401 for token expiration. In order to request new access token, you need to use post method along with form data and required Dio's options (content-type and headers). Below is the code shows how to request new token.
After successful request, if you get the response status code as 200, then you will get new access token value along with refresh token value and save them in any storage you prefer to use. For example, Shared preferences.
Once you have new access token saved, you can use it to fetch data using get method shown in the same code below.
onError(DioError error) async {
if (error.response?.statusCode == 401) {
Response response;
var authToken = base64
.encode(utf8.encode("username_value" + ":" + "password_value"));
FormData formData = new FormData.from(
{"grant_type": "refresh_token", "refresh_token": refresh_token_value});
response = await dio.post(
url,
data: formData,
options: new Options(
contentType: ContentType.parse("application/x-www-form-urlencoded"),
headers: {HttpHeaders.authorizationHeader: 'Basic $authToken'}),
);
if (response.statusCode == 200) {
response = await dio.get(
url,
options: new Options(headers: {
HttpHeaders.authorizationHeader: 'Bearer access_token_value'
}),
);
return response;
} else {
print(response.data);
return null;
}
}
return error;
}

Below is a snippet from my interceptor
dio.interceptors
.add(InterceptorsWrapper(onRequest: (RequestOptions options) async {
/* Write your request logic setting your Authorization header from prefs*/
String token = await prefs.accessToken;
if (token != null) {
options.headers["Authorization"] = "Bearer " + token;
return options; //continue
}, onResponse: (Response response) async {
// Write your response logic
return response; // continue
}, onError: (DioError dioError) async {
// Refresh Token
if (dioError.response?.statusCode == 401) {
Response response;
var data = <String, dynamic>{
"grant_type": "refresh_token",
"refresh_token": await prefs.refreshToken,
'email': await prefs.userEmail
};
response = await dio
.post("api/url/for/refresh/token", data: data);
if (response.statusCode == 200) {
var newRefreshToken = response.data["data"]["refresh_token"]; // get new refresh token from response
var newAccessToken = response.data["data"]["access_token"]; // get new access token from response
prefs.refreshToken = newRefreshToken;
prefs.accessToken = newAccessToken; // to be used in the request section of the interceptor
return dio.request(dioError.request.baseUrl + dioError.request.path,
options: dioError.request);
}
}
return dioError;
}));
return dio;
}
}

it is working 100%
RestClient client;
static BaseOptions options = new BaseOptions(
connectTimeout: 5000,
receiveTimeout: 3000,
);
RemoteService() {
// or new Dio with a BaseOptions instance.
final dio = Dio(options);
dio.interceptors
.add(InterceptorsWrapper(onRequest: (RequestOptions options) async {
// Do something before request is sent
return options; //continue
}, onResponse: (Response response) async {
// Do something with response data
return response; // continue
}, onError: (DioError error) async {
// Do something with response error
if (error.response.statusCode == 401) {
Response response =
await dio.post("http://addrees-server/oauth/token",
options: Options(
headers: {
'Authorization': ApiUtils.BASIC_TOKEN,
'Content-Type': ApiUtils.CONTENT_TYPE,
},
),
queryParameters: {
"grant_type": ApiUtils.GRANT_TYPE,
"username": AppConstants.LOGIN,
"password": AppConstants.PASSWORD
});
Sessions.access_token = response.data['access_token'];
error.response.request.queryParameters
.update('access_token', (value) => Sessions.access_token);
RequestOptions options = error.response.request;
return dio.request(options.path, options: options); //continue
} else {
return error;
}
}));
client = RestClient(dio);
}

Related

Token Post Request With Flutter dart:io Invalid

I'm doing a post request to an ASP.Net Web API to acquire a token. I am able to do this successfully with the dart HTTP package as follow:
Uri address = Uri.parse('https://myaddress:myport/token');
var response = await http.post(
address,
body: {
'username': 'MyUsername',
'password': 'MyPassword',
'grant_type': 'password'
},
).timeout(Duration(seconds: 20));
return response.body;
No problem with Postman either:
Now I want to do the same with the base dart:io class, as the testing server has a self signed certificate which I found the HTTP package has no bypass for (might be wrong), but for the life of me I cannot figure out where I am going wrong as when I debug the server the requests never get hit with the following code:
Uri address = Uri.parse('https://myaddress:myport/token');
HttpClient httpClient = HttpClient();
httpClient.connectionTimeout = Duration(seconds: 20);
httpClient.badCertificateCallback = ((X509Certificate cert, String host, int port) => true); // Allow self signed certificates
HttpClientRequest request = await httpClient.postUrl(address);
final Map<String, String> payLoad = {
'username': 'MyUsername',
'password': 'MyPassword',
'grant_type': 'password'
};
request.headers.contentType = new ContentType("application", "x-www-form-urlencoded", charset: "utf-8");
request.add(utf8.encode(json.encode(payLoad)));
// request.write(payLoad);
HttpClientResponse response = await request.close();
String responseBody = await response.transform(utf8.decoder).join();
httpClient.close();
responseBody is always:
"{"error":"unsupported_grant_type"}"
So I assume my encoding or structure is wrong, but with all possibilities I have tried, nothing works, any help would be appreciated.
i did the same but in my case i am requesting a soap web service, the bellow code do the job for me i hope it will for you
Future<XmlDocument> sendSoapRequest(String dataRequest) async {
final startTime = Stopwatch()..start();
_attemptsRequest = 0;
bool successful = false;
String dataResponse;
try {
Uri uri = Uri.parse('https://address:port/ADService');
var httpClient = HttpClient();
httpClient.connectionTimeout = Duration(milliseconds: 5000);
httpClient.idleTimeout = Duration(milliseconds: 5000);
httpClient.badCertificateCallback = ((X509Certificate cert, String host, int port) => true); // Allow self signed certificates
await httpClient
.openUrl('POST', uri)
.then((HttpClientRequest request) async {
request.headers.contentType =
new ContentType('application', 'text/xml', charset: 'UTF-8');
_attemptsRequest++;
request.write(dataRequest);
await request.close().then((HttpClientResponse response) async {
// var data = await response.transform(utf8.decoder).join();
// i didn't use this method cause it disorganize the response when there is high level of data, -i get binary data from the server-
var data = await utf8.decoder.bind(response).toList();
dataResponse = data.join();
successful = true;
httpClient.close();
});
_timeRequest = startTime.elapsed.inMilliseconds;
});
} catch (e) {
if (_attemptsRequest >= getAttempts) {
_timeRequest = startTime.elapsed.inMilliseconds;
if (e is SocketException)
throw Exception('Timeout exception, operation has expired: $e');
throw Exception('Error sending request: $e');
} else {
sleep(const Duration(milliseconds: 500));
}
}
try {
if (successful) {
XmlDocument doc;
doc = parse(dataResponse);
return doc;
} else {
return null;
}
} catch (e) {
throw Exception('Error converting response to Document: $e');
}
}

post calling api using dio gives 404 flutter

I am calling api from flutter which is post type, but it gives me error 404, can figure out what is the issue
class OtpVerifyApi {
Future otpVerifyAPI(OtpVerifyRequest otpVerifyRequest, String token) async {
return NetworkCommon.getClient(Constants.apiEndPoint)
.post("otp",
data: otpVerifyRequest.toMap(),
options: new Options(headers: {"Authorization": token}))
.then((response) {
return response.data;
}).catchError((onError) {
print("onError " + onError.toString());
});
}
}
class OtpVerifyRequest {
String otp;
toMap() {
return {"otp": this.otp};
}
}
verfiyUser(OtpVerifyRequest otpVerifyRequest, String token) async {
_memoizer.runOnce(() =>
OtpVerifyApi().otpVerifyAPI(otpVerifyRequest, token).then((reponse) {
OtpVerifyResponse otpVerifyResponse =
OtpVerifyResponse.fromJson(reponse);
print("otpVerifyResponse $otpVerifyResponse");
}).catchError((error) {
hideLoader();
print("otp error: $error");
}));
}
These are my three source files, 1st one is my client , 2nd one is my requestbody and 3rd one is where i am getting its response.
Help me to figure this out.
Thanks in advance.
Future<OtpVerifyResponse> verifyUser(
OtpVerifyRequest otpVerifyRequest, String token) async {
Map<String, String> requestHeaders = {
"Accept": "application/json",
"Authorization": "Bearer $token",
};
return http
.post(Constants.apiEndPoint + "registration/_verify",
body: otpVerifyRequest.toMap(), headers: requestHeaders)
.then((http.Response response) {
hideLoader();
final int statusCode = response.statusCode;
print("statusCode" + statusCode.toString());
print("response ${json.decode(response.body)}");
if (statusCode < 200 || statusCode > 400 || json == null) {
hideLoader();
throw new Exception("Error while fetching data");
}
return OtpVerifyResponse.fromJson(json.decode(response.body));
});
}
I also tried this http method but it also doesnt work not sure what i am doing wrong
class OtpVerifyApi {
Future otpVerifyAPI(OtpVerifyRequest otpVerifyRequest, String token) async {
return NetworkCommon.getClient(Constants.apiEndPoint)
.post("otp",
data: otpVerifyRequest.toMap(),
options: new Options(headers: {"Authorization": "Bearer $token"}))
.then((response) {
return response.data;
}).catchError((onError) {
print("onError " + onError.toString());
});
}
}
I was passing the authorization token wrong way..took a while to figure it out :)

How to set Timeout for MultiPart Request in Dart?

Here is my MultiPartRequest code
var request =
http.MultipartRequest("POST", Uri.parse(EMPLOYEE_PUNCH_IN_URL));
request.fields['uid'] = userId;
request.fields['location'] = location;
request.fields['punchin_time'] = punchInTime;
request.fields['punchin_location_name'] = address;
var multiPartFile = await http.MultipartFile.fromPath(
"photo", imageFile.path,
contentType: MediaType("image", "$extension"));
request.files.add(multiPartFile);
http.StreamedResponse response = await request.send();
var responseByteArray = await response.stream.toBytes();
employeePunchInModel = standardSerializers.deserializeWith(
EmployeePunchInModel.serializer,
json.decode(utf8.decode(responseByteArray)));
......
I know how to set timeout to a normal http request. I have followed this link
Set timeout for HTTPClient get() request
I have tried adding timeout function in following ways but it won't work and my request gets completed
1.
var multiPartFile = await http.MultipartFile.fromPath(
"photo", imageFile.path,
contentType: MediaType("image", "$extension")).timeout(const Duration(seconds: 1));
2.
http.StreamedResponse response = await request.send().timeout(const Duration(seconds: 1));
3.
var responseByteArray = await response.stream.toBytes().timeout(const Duration(seconds: 15));
But none of the above timeout works.
Using http package, this is my approach :
Create a Streamed Response that we're going to use for onTimeOut callback
StreamedResponse timeOutResponse({
#required String httpMethod,
#required dynamic error,
#required String url,
}) {
Map<String, dynamic> body = {
'any': 'value',
'you': 'want for $error',
};
int statusCode = 404;
Uri destination = Uri.parse(url);
String json = jsonEncode(body);
return StreamedResponse(
Stream.value(json.codeUnits),
statusCode,
request: Request(httpMethod, destination),
);
}
Use the modified http multipart function from Mahesh Jamdade answer
Future<http.Response> makeAnyHttpRequest(String url,
Map<String, dynamic> body,
{Function onTimeout,
Duration duration = const Duration(seconds: 10)}) async {
final request = http.MultipartRequest(
'POST',
Uri.parse('$url'),
);
final res = await request.send().timeout(
duration,
onTimeout: () {
return timeOutResponse(
httpMethod: 'MULTIPART POST',
error: 'Request Time Out',
url: url,
);
},
);
return await http.Response.fromStream(res);
}
this way, instead of timeout exception, you can return the onTimeOut Http Response.
Use Dio package with following code:
try {
final response = await Dio().post(requestFinal.item1, data:formData, options: option,
onSendProgress: (sent, total) {
print("uploadFile ${sent / total}");
});
print("Response Status code:: ${response.statusCode}");
if (response.statusCode >= 200 && response.statusCode < 299) {
dynamic jsonResponse = response.data;
print("response body :: $jsonResponse");
final message = jsonResponse["msg"] ?? '';
final status = jsonResponse["status"] ?? 400;
final data = jsonResponse["data"];
return HttpResponse(status: status, errMessage: message, json: data);
}
else {
dynamic jsonResponse = response.data;
print('*********************************************************');
print("response body :: $jsonResponse");
print('*********************************************************');
var errMessage = jsonResponse["msg"];
return HttpResponse(status: response.statusCode, errMessage: errMessage, json: jsonResponse);
}
}
on DioError catch(error) {
print('*********************************************************');
print('Error Details :: ${error.message}');
print('*********************************************************');
dynamic jsonResponse = error.response.data;
print('*********************************************************');
print("response body :: $jsonResponse");
print('*********************************************************');
var errMessage = jsonResponse["message"] ?? "Something went wrong";
return HttpResponse(status: jsonResponse["status"] , errMessage: errMessage, json: null);
}
Hope this helps!
I suggest that
var request = http.MultipartRequest("POST", Uri.parse(EMPLOYEE_PUNCH_IN_URL));
request.fields['uid'] = userId;
request.fields['location'] = location;
request.fields['punchin_time'] = punchInTime;
request.fields['punchin_location_name'] = address;
var multiPartFile = await http.MultipartFile.fromPath(
"photo", imageFile.path,
contentType: MediaType("image", "$extension"));
request.files.add(multiPartFile);
await request.send().timeout(Duration(seconds: 1), onTimeout: () {
throw "TimeOut";
}).then((onValue) {
var responseByteArray = await onValue.stream.toBytes();
employeePunchInModel = standardSerializers.deserializeWith(
EmployeePunchInModel.serializer,
json.decode(utf8.decode(responseByteArray)));
}).catchError((){ throw "TimeOut";});
hey you can also use dio 3.0.4
A powerful Http client for Dart, which supports Interceptors, Global configuration, FormData, Request Cancellation, File downloading, Timeout etc.
Here is the link :Http client for Dart
You can try this which uses http package
declare your multipart function like this with your desired arguments
Future<http.Response> makeAnyHttpRequest(String url,
Map<String, dynamic> body,
{Function onTimeout,
Duration duration = const Duration(seconds: 10)}) async {
final request = http.MultipartRequest(
'POST',
Uri.parse('$url'),
);
final res = await request.send().timeout(duration, onTimeout: onTimeout);
return await http.Response.fromStream(res);
}
and then call it within a try catch block and you can catch the timeout exception by throwing the desired value on Timeout.
try{
final res = makeAnyHttpRequest("<url>",{"body":"here"},onTimeout:(){
throw 'TIME_OUT'; // Throw anything
});
}catch(_){
if (_.toString() == 'TIME_OUT') { // catch the thrown value to detect TIMEOUT
/// DO SOMETHING ON TIMEOUT
debugPrint('The request Timeout');
}
}
}
The above approach would work for any http request as long as you have a onTimeout call back

Flutter : Edit profile returns 401 'Unauthenticated' but works in POSTMAN

i was trying to edit my user's profile with flutter and laravel based on this tutorial . My register and login works fine. However, when i try to edit it always return this error.
Here are some of my codes;
api.dart
class CallApi {
final String _url = 'http://10.0.2.2:8000/api/';
var token ;
postData(data, apiUrl) async {
var fullUrl = _url + apiUrl + await _getToken();
print(fullUrl);
return await http.post(
fullUrl,
body: jsonEncode(data),
headers: _setHeaders());
}
editData(data, apiUrl) async {
var fullUrl = _url + apiUrl + await _getToken();
return await http.post(
fullUrl,
body: jsonEncode(data),
headers: _setTokenHeaders())
.then((response) {
print('Response status : ${response.statusCode}');
print('Response body : ${response.body}');
});
}
getData(apiUrl) async {
var fullUrl = _url + apiUrl + await _getToken();
return await http.get(fullUrl, headers: _setHeaders());
}
_setHeaders() => {
'Content-type': 'application/json',
'Accept': 'application/json',
};
_getToken() async {
SharedPreferences localStorage = await SharedPreferences.getInstance();
var token = localStorage.getString('token');
return '?token=$token';
}
_setTokenHeaders() =>
{
'Content-type': 'application/json',
'Accept': 'application/json',
'Authorization': 'Bearer $_getToken()',
};
}
Handle update function
void _handleUpdate() async {
setState(() {
_isLoading = true;
});
var data = {
'residency': locationController.text,
'spouse': spouseController.text,
'occupation': occupationController.text,
};
var res = await CallApi().postData(data, 'profile');
// i've tried both postData and editData which returns the same error
var body = json.decode(res.body);
print(body);
/*if (body['status'] == true) {
SharedPreferences localStorage = await SharedPreferences.getInstance();
localStorage.setString('user_details', json.encode(body['token']));
Navigator.of(context).pushNamed(Profile.tag);
}*/
}
Logcat
I/flutter ( 2390): {message: Unauthenticated.}
The api works properly through postman and i have checked the url and parameters which i am entering in the post request and they are the same as that of postman but still i keep getting the error.
Whats working on POSTMAN
Register
Login
Logout
Update
On flutter App
Register
Login
You should only return the token only. No need to return string query.
_getToken() async {
...
return token;
};
Also, remove the _getToken() from your fullUrl variable. You need to send the token by headers, not by query parameters.
EDITED
Your postData() function should be using _setTokenHeaders() in the headers instead.

RXJS map operator returns empty response

First, package.json :
"#angular/cli": "^6.0.8",
"rxjs": "6.2.1",
I am following a asp.net core 2 with angular tutorial. I had to adapt some code because it was thought for an older version.
The chapter is about creating JWT authentication.
I get the bearer token but when the api controller returns the response the auth.service gets an empty response and the line let token = res && res.token; goes false for the if so it never gets identified.
I suspect there is something wrong with the cast for TokenResponse but I cannot figure out what.
token.response.ts
interface TokenResponse {
token: string,
expiration: number
}
auth.service.ts
import { EventEmitter, Inject, Injectable, PLATFORM_ID } from "#angular/core";
import { isPlatformBrowser } from '#angular/common';
import { HttpClient, HttpHeaders } from "#angular/common/http";
import { Observable } from "rxjs";
import { map, catchError } from 'rxjs/operators';
import 'rxjs/Rx';
#Injectable()
export class AuthService {
authKey: string = "auth";
clientId: string = "NetCoreAngularWeb";
constructor(private http: HttpClient,
#Inject(PLATFORM_ID) private platformId: any) {
}
// performs the login
login(username: string, password: string): Observable<boolean> {
var url = "api/token/auth";
var data = {
username: username,
password: password,
client_id: this.clientId,
// required when signing up with username/password
grant_type: "password",
// space-separated list of scopes for which the token is
// issued
scope: "offline_access profile email"
};
return this.http.post<TokenResponse>(url, data)
.pipe(
map(res => {
let token = res && res.token;
// if the token is there, login has been successful
if (token) {
// store username and jwt token
this.setAuth(res);
// successful login
return true;
}
// failed login
return Observable.throw('Unauthorized');
}),
catchError(error => {
return new Observable<any>(error);
})
);
}
// performs the logout
logout(): boolean {
this.setAuth(null);
return true;
}
// Persist auth into localStorage or removes it if a NULL argument is given
setAuth(auth: TokenResponse | null): boolean {
if (isPlatformBrowser(this.platformId)) {
if (auth) {
localStorage.setItem(
this.authKey,
JSON.stringify(auth));
}
else {
localStorage.removeItem(this.authKey);
}
}
return true;
}
// Retrieves the auth JSON object (or NULL if none)
getAuth(): TokenResponse | null {
if (isPlatformBrowser(this.platformId)) {
var i = localStorage.getItem(this.authKey);
if (i) {
return JSON.parse(i);
}
}
return null;
}
// Returns TRUE if the user is logged in, FALSE otherwise.
isLoggedIn(): boolean {
if (isPlatformBrowser(this.platformId)) {
return localStorage.getItem(this.authKey) != null;
}
return false;
}
}
TokenController
[HttpPost("Auth")]
public async Task<IActionResult> Auth([FromBody]TokenRequestViewModel model)
{
// return a generic HTTP Status 500 (server Error)
// if the client payload is invalid.
if (model == null) return new StatusCodeResult(500);
switch (model.grant_type)
{
case "password":
return await GetToken(model);
default:
// not supported - return a HTTP 401 (Unauthorized)
return new UnauthorizedResult();
}
}
private async Task<IActionResult> GetToken(TokenRequestViewModel model)
{
try
{
// check if there's an user with the given username
var user = await UserManager.FindByNameAsync(model.username);
// fallback to support e-mail address instead of username
if (user == null && model.username.Contains("#"))
user = await UserManager.FindByEmailAsync(model.username);
if (user == null || !await UserManager.CheckPasswordAsync(user, model.password))
{
// user does not exists or password mismatch
return new UnauthorizedResult();
}
// username & password matches: create and return the Jwt token
DateTime now = DateTime.UtcNow;
// add the registered claims for JWT (RFC7519)
// For more info, see...
var claims = new[]
{
new Claim(JwtRegisteredClaimNames.Sub, user.Id),
new Claim(JwtRegisteredClaimNames.Jti, Guid.NewGuid().ToString()),
new Claim(JwtRegisteredClaimNames.Iat, new DateTimeOffset(now).ToUnixTimeSeconds().ToString())
// TODO add additional claims here
};
var tokenExpirationMins = Configuration.GetValue<int>("Auth:Jwt:TokenExpirationInMinutes");
var issuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["Auth:Jwt:Key"]));
var token = new JwtSecurityToken(
issuer: Configuration["Auth:Jwt:Issuer"],
audience: Configuration["Auth:Jwt:Audicnete"],
claims: claims,
notBefore: now,
expires:
now.Add(TimeSpan.FromMinutes(tokenExpirationMins)),
signingCredentials: new SigningCredentials(issuerSigningKey, SecurityAlgorithms.HmacSha256)
);
var encodedToken = new JwtSecurityTokenHandler().WriteToken(token);
// build & return the response
var response = new TokenResponseViewModel()
{
token = encodedToken,
expiration = tokenExpirationMins
};
return Json(response);
}
catch (Exception ex)
{
return new UnauthorizedResult();
}
}
EDIT - response, inspected with POSTMAN
{
"token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJlODBiNzRkMi0xOGIwLTQ5NzUtOWUyYS0wOGJiOGJlOTUzMDEiLCJqdGkiOiIzNTkzNjVhYS02M2UyLTQ3ZGMtYjY1NC1mMDk3YWQxNjNmMzQiLCJpYXQiOiIxNTMwNzEzMzU2IiwibmJmIjoxNTMwNzEzMzU2LCJleHAiOjE1MzU4OTczNTYsImlzcyI6Imh0dHA6Ly9sb2NhbGhvc3Q6MzE3NzkvIn0.6QlGCK_4ybzYEz8qaRDDotOja6x0FI0fZTxmky94S5Y",
"expiration": 86400
}
Status 200 OK
Time:11281 ms
Size:671 B
Content-Type →application/json; charset=utf-8
Date →Wed, 04 Jul 2018 14:09:21 GMT
Server →Kestrel
Transfer-Encoding →chunked
X-Powered-By →ASP.NET
Well, there were a couple of issues here.
First, my version of Chrome was breaking the VS Studio Debugger. I had to update it to a 63+ Version (65 in my case)
https://social.msdn.microsoft.com/Forums/vstudio/en-US/5cd1aa58-d986-4d03-a10e-bf1fd62080a7/simultaneous-debugging-in-chrome?forum=vsdebug#5cd1aa58-d986-4d03-a10e-bf1fd62080a7
After this, I could debug better and I found the errors.
1- auth.service.ts . throwError function in Observable
https://www.academind.com/learn/javascript/rxjs-6-what-changed/
return this.http.post<TokenResponse>(url, data)
.pipe(
map(res => {
let token = res && res.token;
if (token) {
this.setAuth(res);
return true;
}
else {
//failed login
return Observable.throwError('Unauthorized');
}
}),
catchError(error => {
//console.log(error);
return new Observable<any>(error);
})
);
2- Typo error in TokenController Audiecnete instead of Audience
var token = new JwtSecurityToken(
issuer: Configuration["Auth:Jwt:Issuer"],
audience: Configuration["Auth:Jwt:Audience"],
claims: claims,
notBefore: now,
expires:
now.Add(TimeSpan.FromMinutes(tokenExpirationMins)),
signingCredentials: new SigningCredentials(issuerSigningKey, SecurityAlgorithms.HmacSha256)
);

Resources