Aprende Secure Storage | Local Storage

When you handle sensitive information in your Flutter app such as authentication tokens, user credentials, or API keys standard local storage options like SharedPreferences are not secure enough. Secure storage provides a way to store this data safely, using encryption and platform-specific protections. This is essential to protect your users from data leaks or attacks.

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
            
import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final storage = FlutterSecureStorage();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Secure Storage Example')),
        body: SecureStorageDemo(storage: storage),
      ),
    );
  }
}

class SecureStorageDemo extends StatefulWidget {
  final FlutterSecureStorage storage;

  SecureStorageDemo({required this.storage});

  @override
  _SecureStorageDemoState createState() => _SecureStorageDemoState();
}

class _SecureStorageDemoState extends State<SecureStorageDemo> {
  String _storedToken = '';

  Future<void> _saveToken() async {
    await widget.storage.write(key: 'auth_token', value: 'my_secure_token_123');
    setState(() {
      _storedToken = 'Token saved!';
    });
  }

  Future<void> _readToken() async {
    String? token = await widget.storage.read(key: 'auth_token');
    setState(() {
      _storedToken = token ?? 'No token found.';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(24.0),
      child: Column(
        children: [
          ElevatedButton(
            onPressed: _saveToken,
            child: Text('Save Token'),
          ),
          SizedBox(height: 12),
          ElevatedButton(
            onPressed: _readToken,
            child: Text('Read Token'),
          ),
          SizedBox(height: 24),
          Text(_storedToken),
        ],
      ),
    );
  }
}

Secure storage solutions like flutter_secure_storage use encryption to protect your data. On Android, it stores data in the encrypted SharedPreferences using the Android Keystore. On iOS, it uses the Keychain, which is encrypted and managed by the system. This means your sensitive data—such as the token in the previous example—is much safer than if it were stored in plain text. However, always remember that no solution is entirely foolproof, and you should avoid storing highly sensitive secrets on the client if possible.

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
            
import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final storage = FlutterSecureStorage();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Delete Secure Value Example')),
        body: SecureDeleteDemo(storage: storage),
      ),
    );
  }
}

class SecureDeleteDemo extends StatefulWidget {
  final FlutterSecureStorage storage;

  SecureDeleteDemo({required this.storage});

  @override
  _SecureDeleteDemoState createState() => _SecureDeleteDemoState();
}

class _SecureDeleteDemoState extends State<SecureDeleteDemo> {
  String _status = '';

  Future<void> _deleteToken() async {
    await widget.storage.delete(key: 'auth_token');
    setState(() {
      _status = 'Token deleted.';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: _deleteToken,
            child: Text('Delete Token'),
          ),
          SizedBox(height: 24),
          Text(_status),
        ],
      ),
    );
  }
}

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 3. Capítulo 2

Pregunte a AI

Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla

Desliza para mostrar el menú

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
            
import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final storage = FlutterSecureStorage();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Secure Storage Example')),
        body: SecureStorageDemo(storage: storage),
      ),
    );
  }
}

class SecureStorageDemo extends StatefulWidget {
  final FlutterSecureStorage storage;

  SecureStorageDemo({required this.storage});

  @override
  _SecureStorageDemoState createState() => _SecureStorageDemoState();
}

class _SecureStorageDemoState extends State<SecureStorageDemo> {
  String _storedToken = '';

  Future<void> _saveToken() async {
    await widget.storage.write(key: 'auth_token', value: 'my_secure_token_123');
    setState(() {
      _storedToken = 'Token saved!';
    });
  }

  Future<void> _readToken() async {
    String? token = await widget.storage.read(key: 'auth_token');
    setState(() {
      _storedToken = token ?? 'No token found.';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(24.0),
      child: Column(
        children: [
          ElevatedButton(
            onPressed: _saveToken,
            child: Text('Save Token'),
          ),
          SizedBox(height: 12),
          ElevatedButton(
            onPressed: _readToken,
            child: Text('Read Token'),
          ),
          SizedBox(height: 24),
          Text(_storedToken),
        ],
      ),
    );
  }
}

main.dart


              123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
            
import 'package:flutter/material.dart';
import 'package:flutter_secure_storage/flutter_secure_storage.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  final storage = FlutterSecureStorage();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Delete Secure Value Example')),
        body: SecureDeleteDemo(storage: storage),
      ),
    );
  }
}

class SecureDeleteDemo extends StatefulWidget {
  final FlutterSecureStorage storage;

  SecureDeleteDemo({required this.storage});

  @override
  _SecureDeleteDemoState createState() => _SecureDeleteDemoState();
}

class _SecureDeleteDemoState extends State<SecureDeleteDemo> {
  String _status = '';

  Future<void> _deleteToken() async {
    await widget.storage.delete(key: 'auth_token');
    setState(() {
      _status = 'Token deleted.';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: _deleteToken,
            child: Text('Delete Token'),
          ),
          SizedBox(height: 24),
          Text(_status),
        ],
      ),
    );
  }
}

¿Todo estuvo claro?

¡Gracias por tus comentarios!

Sección 3. Capítulo 2