Securely Storing API Keys in Flutter

Protecting API keys is crucial to ensure the security of your Flutter applications. In this article, we will explore a practical approach for securely storing API keys by utilizing environment variables, obfuscation, and automation. By following these best practices, you can safeguard sensitive information and minimize the risk of unauthorized access or data breaches.

Step 1: Create a .env File and Add it to .gitignore

To begin, create a .env file in the root directory of your Flutter project. This file will store your API keys in plaintext format. It's important to add the .env file to your project's .gitignore file. This prevents the file from being accidentally committed to version control and exposed to others.

You can add your key in secret.env file

MY_KEY=a1b2c33d4e5f6g7h8i9jakblc

Step 2: Add the following packages in your pubspec.yaml

1. ENVied Package in dependancies.
2. envied_generator Package in dev_dependancies.
3. build_runner Package in dev_dependancies.

Step 3: Create an env.dart File

Create an env.dart file in your project, preferably in a dedicated config or utils directory. This file will define a class called Env, which will hold the API keys as properties. For example:

import 'package:envied/envied.dart';
part 'env.g.dart';

@Envied(path: '../note_keeper_flutter_app/secret.env')  //Path of your secret.env file
abstract class Env{
  @EnviedField(varName: 'MY_KEY',obfuscate: true)
  static const myApiKey=_Env.myApiKey;
}

Step 4: Generate the Code

Run the code generator by executing the command.

flutter pub run build_runner build --delete-conflicting-outputs

This generates a env.g.dart file that contains abfuscated value of your keys.

// GENERATED CODE - DO NOT MODIFY BY HAND

part of 'env.dart';

// **************************************************************************
// EnviedGenerator
// **************************************************************************

class _Env {
  static const List<int> _enviedkeymyApiKey = [
    1381461286,
    2322593563,
    1978670197,
    2411908773,
    2066599044,
    2426385646,
    3978051006,
...];
 static const List<int> _envieddatamyApiKey = [
    1381461319,
    2322593578,
   ...];

  static final String myApiKey = String.fromCharCodes(
    List.generate(_envieddatamyApiKey.length, (i) => i, growable: false)
        .map((i) => _envieddatamyApiKey[i] ^ _enviedkeymyApiKey[i])
        .toList(growable: false),
  );

Step 5: Import env.dart and Access API Keys

In the relevant files of your Flutter project where you need to access the API keys, import env.dart as follows:

You can then access the API keys using the Env class, like this:

String apiKey = Env.myApiKey;

Now your keys will be more protected inside your project.

Comments

[Obada Alhalabi]

how to use the key in native file

[DroidBus]

Very helpful article. Thanks!