Encrypting API Payload Data on FlutterFlow Using Custom Code

CODE INCLUDED BELOW

In today's digital landscape, securing data transmission between client and server is essential. One effective way to protect your API payloads is through encryption. This post will guide you on how to encrypt API payload data in a FlutterFlow app using custom code with AES encryption, padding, Base64 encoding, and CBC mode.

What is AES Encryption?

AES (Advanced Encryption Standard) is a widely-used symmetric encryption algorithm that ensures data security. It supports key lengths of 128, 192, and 256 bits and operates on blocks of data, making it both secure and efficient.

Steps to Implement AES Encryption in FlutterFlow

Prerequisites

1. Encryption Key: Generate a 32-character encryption key and encode it using Base64.

2. Initialization Vector (IV): Generate a 16-character IV to be used for AES encryption.

3. Server-side Decryption: Ensure your server has the capability to decrypt the data using the same encryption settings and key.

Step 1: Install Necessary Packages

To begin, you'll need to install specific Dart packages that support encryption. These packages will provide the functionality required to implement AES encryption, padding, Base64 encoding, and CBC mode in your FlutterFlow project.

Step 2: Implement the Encryption Logic

Create a custom Dart file in your FlutterFlow project to handle encryption and decryption. This file will include the following logic:

• Encryption Key: The argument provided will be a Base64 encoded encryption key.

• JSON Object: Convert the JSON object to a JSON string, then encrypt this string.

• Base64 Encoding: Encode the encrypted data in Base64 format for safe transmission.

Step 3: Integrate Encryption in Your App

With the encryption logic in place, integrate it into your FlutterFlow app by:

• Encrypting the API payload before sending it to the server.

• Ensuring the server can decrypt the payload using the same AES, padding, Base64, and CBC mode configuration.

Step 4: Secure Data Transmission

When you need to send sensitive data to your server, use the custom encryption function to encrypt the JSON payload. This ensures that any data transmitted over the network is protected against unauthorized access.

Step 5: Decrypt Data on the Server

Ensure that your server is configured to decrypt the incoming data. The server must use the same encryption settings (AES, padding, Base64, CBC mode) and the same secret key and IV to correctly decrypt the payload.

// Automatic FlutterFlow imports

import '/backend/backend.dart';

import '/backend/schema/structs/index.dart';

import '/flutter_flow/flutter_flow_theme.dart';

import '/flutter_flow/flutter_flow_util.dart';

import '/custom_code/actions/index.dart'; // Imports other custom actions

import '/flutter_flow/custom_functions.dart'; // Imports custom functions

import 'package:flutter/material.dart';

// Begin custom action code

// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

import 'dart:convert';

import 'dart:typed_data';

import 'package:encrypt/encrypt.dart' as encrypt;

Uint8List padPKCS7(Uint8List data) {

  final padding = 16 - data.length % 16;

  final paddedData = Uint8List(data.length + padding)..setAll(0, data);

  for (int i = data.length; i < paddedData.length; i++) {

    paddedData[i] = padding;

  }

  return paddedData;

}

Future<String> encryptPayloadWithAES(

  dynamic jsonObject,

  String base64Key,

) async {

  final jsonString = jsonEncode(jsonObject);

  final plainText = utf8.encode(jsonString);

  final key = encrypt.Key.fromBase64(base64Key);

  final iv = encrypt.IV.fromSecureRandom(16);

  final paddedPlainText = padPKCS7(Uint8List.fromList(plainText));

  final cipher = encrypt.Encrypter(

      encrypt.AES(key, mode: encrypt.AESMode.cbc, padding: null));

  final encrypted = cipher.encryptBytes(paddedPlainText, iv: iv);

  final ivAndEncrypted = Uint8List.fromList(iv.bytes + encrypted.bytes);

  final base64Encrypted = base64.encode(ivAndEncrypted);

  return base64Encrypted;

}