title: I am trying to store the Authorization Token fetched from the Rest API and then use it in the headers of other API calls in Flutter
body: <p>As the title of the problem explains most of it but will still elaborate more.
  So I am calling an API using the POST method and registering a user which gives me response data containing only the Authorization token which needs to be used while calling other APIs.</p>
  <p>Now I want to store the token and use it in the headers while making other API calls.
  I am herewith attaching a few code snippets that might demonstrate what I have done actually and what needs to be done in order to get the particular outcome.
  I am getting the API response for fetching the key but I am unable to understand why it is not getting stored and why cannot I use it in the headers.</p>
  <p><strong>API call that returns just the token in the response</strong></p>
  <pre><code>   final storage = SecureStorage();
  Future&lt;UserRegistration&gt; registration(dynamic param) async {
      var client = http.Client();
      try {
        var response = await client
            .post(Uri.https(&quot;baseURL&quot;, &quot;endpoint&quot;),
                body: param)
            .timeout(Duration(seconds: TIME_CONST))
            .catchError(handleError);
  
        if (response.statusCode == 201) {
          print('Response Body: ${response.body}');
          final data = jsonDecode(response.body);
  
      ///////Using the flutter secure storage here to save the token
  
           var token = storage.writeSecureToken('key', data['key']);
            print(&quot;Token Here $token&quot;);
          return UserRegistration(
            key: data['key'],
            status: true,
          );
        } else {
          print(&quot;Something went wrong&quot;);
          return param;
        }
      } on SocketException {
        throw FetchDataException('message', 'url');
      } on TimeoutException {
        throw ApiNotRespondingException(&quot;message&quot;, &quot;url&quot;);
      }
    }
  </code></pre>
  <p><strong>API response that I am getting</strong></p>
  <pre><code>Response Body: {&quot;key&quot;:&quot;8fb303212871a80899f0b883f3554b189fddf24b&quot;}
  </code></pre>
  <p><strong>API call that I am making which requires the Authorization Header as the key received in the previous response.</strong></p>
  <pre><code>Future&lt;PhoneOTPValidate&gt; phoneOTPvalidate(dynamic param) async {
      var client = http.Client();
      var token = storage.readSecureToken('key');
      try {
        var response = await client
            .post(
                Uri.https(&quot;baseURL&quot;, &quot;endpoint&quot;),
                headers: &lt;String, String&gt;{
                  'Authorization': 'Token $token',
                },
                body: param)
            .timeout(Duration(seconds: TIME_CONST))
            .catchError(handleError);
  
        if (response.statusCode == 200) {
          print('Response Body: ${response.body}');
          final data = jsonDecode(response.body);
          return PhoneOTPValidate(
            status: data['success'],
            validate: true,
          );
        } else {
          print(&quot;The OTP is not valid&quot;);
          return param;
        }
      } on SocketException {
        throw FetchDataException('message', 'url');
      } on TimeoutException {
        throw ApiNotRespondingException(&quot;message&quot;, &quot;url&quot;);
      }
    }
  </code></pre>
  <p><strong>My Classes for the above API calls are here:</strong></p>
  <pre><code>class PhoneOTPValidate {
    PhoneOTPValidate({this.status, this.validate});
    final String? status;
    final bool? validate;
  }
  
  class UserRegistration {
    UserRegistration({this.key, this.status});
    final String? key;
    final bool? status;
  }
  </code></pre>
  <p><strong>Flutter Secure Storage Class</strong></p>
  <pre><code>class SecureStorage {
    final storage = FlutterSecureStorage();
    Future writeSecureToken(String key, String value) async {
      var writeData = await storage.write(key: key, value: value);
      print('Token Here');
      return writeData;
    }
  
    Future readSecureToken(String key) async {
      var readData = await storage.read(key: key);
      return readData;
    }
  
    Future deleteSecureToken(String key) async {
      var deleteData = await storage.delete(key: key);
      return deleteData;
    }
  }
  </code></pre>
  <p><strong>Here's the output for what I have written:</strong></p>
  <pre><code>Response Body: {&quot;key&quot;:&quot;de18d1239ed0b6be13f4c9a9d96eebeb1c401922&quot;}
  I/flutter (23010): Token Here Instance of 'Future&lt;dynamic&gt;'
  I/flutter (23010): Token Here
  </code></pre>
  <p>How do I solve this problem of saving the key and using it in the headers of the other API calls?
  Have almost tried all the solutions from StackOverflow but nothing gave a solid answer to how it is being done.
  Am stuck at this problem for quite a few days
  Would appreciate it if anyone can solve my problem considering my code.</p>