How is the Jwt process on the client side using flutter? - flutter

Question

I am new using JWT, could someone explain to me how is the process step by step?
I am trying to validate a login and if the password is correct I receive a token with some information.
What do I do with that token in flutter? Do I decode it and use that information or what do I do?
When I make different requests, should I decode the token to do some http and then encode on the client side?
Your help would be greatly appreciated.
here is my code in flutter
// code
Future validateLogin(passwordLogin,emailLogin,BuildContext context) async {
try{
Map<String, String> headers = {
'Content-Type':'application/json;charset=UTF-8',
'Charset':'utf-8'
};
var Url= Uri.parse("http://");
var response = await http.post(Url,
body:{
'password' : passwordLogin,
'email' : emailLogin,
},
).timeout(const Duration(seconds: 90)) ;
var data = json.decode(response.body);
if(data['estado'] == "CORRECT"){
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.setBool("CheckEstadoLogin", true);
await prefs.setString("GuardarToken", data['token'].toString());
Navigator.push(context,
new MaterialPageRoute(builder:
(context) => new MenuP())
);
}else {
Fluttertoast.showToast(
msg: "Incorrect",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.green,
textColor: Colors.white,
fontSize: 16.0
);
}
}on TimeoutException catch(e){
print("Tardo mucho la conexion");
}on Error catch(e){
print("Error de Http");
}
}
}

Answer 1

In short, you would find that your backend(if it is indeed providing secure services and not public) will not allow you to consume any webservices unless you have a required access token. So the purpose of jwt in the authorisation flow was to obtain the same that you could have used in the subsequent API calls(mostly the access token is passed as part of the header Authorization). If the APIs you are trying to consume from the backend are public, then there is no need for the access token anyways. So it should be reverse of what you are thinking. The first part is, do you have API calls that needs to be made that will need an access token? If you do, then do the login, get the access token etc, so that it can be used when you make these API calls from your flutter app.
Flutter is the client side. The normal flow when you do a login is, to pass on your user credentials via an interface to a Identity provider in the backend which might use a LDAP or some other data source to validate the user. After which you receive a jwt token back (There can be MFA or other complex secure flows in between(refer oauth2 authorisation code? authorisation code with pkce) but the ultimate objective is to get back a access token.
Now once you have the token, the client is expected to pass this access token in all subsequent Web service calls it makes to the backend. A combination of a gateway + identity provider will ensure to validate that the access token passed for the WS is right before sending the request to the actual server which will service that web service request made by the flutter app.
Decoding jwt at client side, would also give you certain details which the client(flutter app) is already aware of, and may not be of much value.Once again there are best practices in oauth2 on how to refresh this access token on intervals by leveraging a grant etc etc.
This is a good read if you are finding the RFCs a bit complex.
https://auth0.com/docs/get-started/authentication-and-authorization-flow