Secure storage for credentials in Flutter

Introduction

We use secure storage to keep passwords and sensitive info safe on your phone. It stops others from easily reading your private data.

Saving a user's login password so they don't have to type it every time.

Storing an API token securely after a user logs in.

Keeping secret keys safe for apps that connect to online services.

Remembering user preferences that should not be visible to other apps.

Syntax

Flutter

final storage = FlutterSecureStorage();

// Write data
await storage.write(key: 'username', value: 'user123');

// Read data
String? username = await storage.read(key: 'username');

// Delete data
await storage.delete(key: 'username');

Use FlutterSecureStorage from the flutter_secure_storage package.

All methods are asynchronous, so use await to wait for them.

Examples

This saves a token securely with the key 'token'.

Flutter

final storage = FlutterSecureStorage();
await storage.write(key: 'token', value: 'abc123');

This reads the saved token. It returns null if no value is found.

Flutter

String? token = await storage.read(key: 'token');

This deletes the saved token from secure storage.

Flutter

await storage.delete(key: 'token');

Sample App

This app shows how to save, read, and delete a username securely. Press 'Save Username' to store it, and 'Delete Username' to remove it. The saved username is shown on screen.

Flutter

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: const Text('Secure Storage Example')),
        body: Center(
          child: FutureBuilder<String?>(
            future: storage.read(key: 'username'),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const CircularProgressIndicator();
              }
              final username = snapshot.data ?? 'No username saved';
              return Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text('Saved username: $username'),
                  const SizedBox(height: 20),
                  ElevatedButton(
                    onPressed: () async {
                      await storage.write(key: 'username', value: 'flutterUser');
                      (context as Element).markNeedsBuild();
                    },
                    child: const Text('Save Username'),
                  ),
                  ElevatedButton(
                    onPressed: () async {
                      await storage.delete(key: 'username');
                      (context as Element).markNeedsBuild();
                    },
                    child: const Text('Delete Username'),
                  ),
                ],
              );
            },
          ),
        ),
      ),
    );
  }
}

Important Notes

Always keep sensitive data like passwords in secure storage, not plain text storage.

Secure storage uses platform-specific encryption to protect your data.

Remember to add flutter_secure_storage to your pubspec.yaml and run flutter pub get.

Summary

Secure storage keeps sensitive info safe on the device.

Use FlutterSecureStorage to write, read, and delete data securely.

All operations are asynchronous and should be awaited.

Practice

1. What is the main purpose of using FlutterSecureStorage in a Flutter app?

easy

A. To improve app performance by caching data

B. To securely store sensitive data like passwords on the device

C. To create UI animations

D. To manage app navigation between screens

Solution

1. Step 1: Understand the role of secure storage

   Secure storage is designed to keep sensitive information safe on the device, such as passwords or tokens.

2. Step 2: Identify what FlutterSecureStorage does

   This package provides a way to write, read, and delete data securely, protecting it from unauthorized access.

3. Final Answer:

   To securely store sensitive data like passwords on the device -> Option B

4. Quick Check:

   Secure storage = safe data storage [OK]

Hint: Secure storage is for sensitive info, not UI or navigation [OK]

Common Mistakes:

• Confusing secure storage with caching
• Thinking it manages UI or navigation
• Assuming it speeds up app performance

2. Which of the following is the correct way to write a value using FlutterSecureStorage?

easy

A. storage.writeValue('token', 'abc123');

B. storage.write('token', 'abc123');

C. await storage.write(key: 'token', value: 'abc123');

D. await storage.save(key: 'token', value: 'abc123');

Solution

1. Step 1: Recall the method signature for writing data

   The correct method is write with named parameters key and value, and it returns a Future, so it should be awaited.

2. Step 2: Check each option for syntax correctness

   await storage.write(key: 'token', value: 'abc123'); uses await storage.write(key: 'token', value: 'abc123'); which is correct. Others either miss await, use wrong method names, or wrong parameter style.

3. Final Answer:

   await storage.write(key: 'token', value: 'abc123'); -> Option C

4. Quick Check:

   Write method with await and named params = await storage.write(key: 'token', value: 'abc123'); [OK]

Hint: Use await and named parameters key and value [OK]

Common Mistakes:

• Omitting await for async calls
• Using wrong method names like save or writeValue
• Passing parameters without names

3. Given this code snippet, what will be printed?

final storage = FlutterSecureStorage();
await storage.write(key: 'user', value: 'Alice');
String? name = await storage.read(key: 'user');
print(name);

medium

A. Alice

B. Error: key not found

C. FlutterSecureStorage instance

D. null

Solution

1. Step 1: Analyze the write operation

   The code writes the value 'Alice' with the key 'user' into secure storage.

2. Step 2: Analyze the read operation and print

   Reading the key 'user' returns the stored value 'Alice', which is then printed.

3. Final Answer:

   Alice -> Option A

4. Quick Check:

   Write then read same key returns stored value [OK]

Hint: Read returns stored value if key exists [OK]

Common Mistakes:

• Assuming read returns null without checking
• Confusing instance print with value print
• Expecting error if key was just written

4. What is wrong with this code snippet?

final storage = FlutterSecureStorage();
storage.write(key: 'pass', value: '1234');
String pass = storage.read(key: 'pass');
print(pass);

medium

A. Wrong method name for writing

B. Cannot print a String variable

C. Key 'pass' is invalid

D. Missing await for async calls

Solution

1. Step 1: Identify async methods usage

   Both write and read are asynchronous and return Futures, so they must be awaited.

2. Step 2: Check variable assignment and print

   Assigning String pass = storage.read(...) without await causes a type mismatch and print will show Future instance, not the value.

3. Final Answer:

   Missing await for async calls -> Option D

4. Quick Check:

   Async methods need await to get actual values [OK]

Hint: Always await async storage methods [OK]

Common Mistakes:

• Not awaiting async calls
• Assigning Future to String directly
• Ignoring async nature of storage methods

5. You want to securely store a user's credentials and then delete them when they log out. Which sequence of FlutterSecureStorage calls is correct?

hard

A. await storage.write(key: 'user', value: 'Bob'); await storage.delete(key: 'user');

B. storage.write(key: 'user', value: 'Bob'); storage.remove(key: 'user');

C. await storage.save(key: 'user', value: 'Bob'); await storage.deleteValue(key: 'user');

D. storage.set(key: 'user', value: 'Bob'); storage.delete(key: 'user');

Solution

1. Step 1: Identify correct method names and async usage

   The correct methods are write to store and delete to remove data. Both return Futures and must be awaited.

2. Step 2: Check each option for correctness

   await storage.write(key: 'user', value: 'Bob'); await storage.delete(key: 'user'); uses correct method names and awaits both calls. Other options use wrong method names or omit await.

3. Final Answer:

   await storage.write(key: 'user', value: 'Bob'); await storage.delete(key: 'user'); -> Option A

4. Quick Check:

   Use write and delete with await for secure storage [OK]

Hint: Use write and delete methods with await [OK]

Common Mistakes:

• Using wrong method names like save or remove
• Not awaiting async calls
• Mixing synchronous and async calls