Skip to main content
Version: 6.17.1-beta.3

Encryption & Cryptography

Encryption is a necessity when it comes to a mobile application that communicates with external API. Sending sensitive information like access token, public/private key or user information might be spoofed if sent via plaintext.

RSA Encryption

API Reference Crypto

Using Crypto library, it is possible to generate a keypair locally and use it to fit the needs.

Recommended Online RSA Encryption Test Tool credited by

Example Client RSA Encryption


The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics
import PageSampleDesign from "generated/pages/page3";
import { Route, Router } from "@smartface/router";
import Crypto from "@smartface/native/global/crypto";
import Data from "@smartface/native/global/data";
import System from "@smartface/native/device/system";
import Label from "@smartface/native/ui/label";
import Button from "@smartface/native/ui/button";
import TextBox from "@smartface/native/ui/textbox";
import { styleableComponentMixin, styleableContainerComponentMixin } from "@smartface/styling-context";
import FlexLayout from "@smartface/native/ui/flexlayout";

class StyleableButton extends styleableComponentMixin(Button) {}
class StyleableTextBox extends styleableComponentMixin(TextBox) {}
class StyleableLabel extends styleableComponentMixin(Label) {}
class StyleableFlexLayout extends styleableContainerComponentMixin(FlexLayout) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
myLabel: StyleableLabel;
encryptButton: StyleableButton;
decryptButton: StyleableButton;
tbEncrypt: StyleableTextBox;
keyPair: KeyPairType;
private encryptedText = "";
constructor(private router?: Router, private route?: Route) {
this.myLabel = new StyleableLabel();
this.encryptButton = new StyleableButton();
this.decryptButton = new StyleableButton();
this.tbEncrypt = new StyleableTextBox();

generateKeyPair(): KeyPairType {
let privateKey = Data.getStringVariable(PRIVATE_KEY_DEVICE_KEY);
let publicKey = Data.getStringVariable(PUBLIC_KEY_DEVICE_KEY);
if (!privateKey || !publicKey) {
const didGenerate = Crypto.RSA.generateKeyPair({
if (!didGenerate) {
throw new Error("Could not generate keypair");
privateKey = didGenerate.privateKey;
publicKey = didGenerate.publicKey;
Data.setStringVariable(PUBLIC_KEY_DEVICE_KEY, publicKey); // Public key doesn't need to be stored securely
Data.setStringVariable(PRIVATE_KEY_DEVICE_KEY, privateKey); // Consider using secure data
return {
privateKey: privateKey,
System.OS === System.OSType.IOS ? Crypto.RSA.ios.getExportedPublicKey() : publicKey,

encrypt(text: string, key: string): string {
const keyBody = {
text: "Smartface Inc.",
secretText: text,
return Crypto.RSA.encrypt({
plainText: JSON.stringify(keyBody),

decrypt(encryptedText: string, key: string): string {
return Crypto.RSA.decrypt({
encryptedText: encryptedText,

initLabel() {
this.myLabel.text = "Decrpyted text will go here";
this.addChild(this.myLabel, "myLabel", ".sf-label");

initButtons() {
this.keyPair = this.generateKeyPair();
const buttonWrapper = new StyleableFlexLayout();
this.addChild(buttonWrapper, "buttonWrapper", ".sf-flexlayout", {
heigth: 120,
this.encryptButton.text = "Encrypt";
this.encryptButton.onPress = () => {
this.encryptedText = this.encrypt(
this.tbEncrypt.text || "",
this.myLabel.text = this.encryptedText;
this.decryptButton.text = "Decrypt";
this.decryptButton.onPress = () => {
const decryptedObjectText = this.decrypt(
const decrpytedObject = JSON.parse(decryptedObjectText);
this.myLabel.text = decrpytedObject.secretText;
buttonWrapper.addChild(this.encryptButton, "encryptButton", ".sf-button");
buttonWrapper.addChild(this.decryptButton, "decryptButton", ".sf-button");

initTextBox() {
this.tbEncrypt.hint = "Enter text to encrypt";
this.addChild(this.tbEncrypt, "tbEncrypt", ".sf-textbox");

// The page design has been made from the code for better
// showcase purposes. As a best practice, remove this and
// use WYSIWYG editor to style your pages.
centerizeTheChildrenLayout() {
type: "updateUserStyle",
userStyle: {
flexProps: {
flexDirection: 'ROW',
justifyContent: 'CENTER',
alignItems: 'CENTER',
flexWrap: 'WRAP'

initMaterialTextBoxes() {
this.mtbLogin.options = {
hint: "Username",
this.mtbPassword.options = {
hint: "Password",
this.mtbPassword.materialTextBox.isPassword = true;
onShow() {

onLoad() {


This code will store your generated public and private key in the device. The private key must be securely store into application.

Native Encryption

When storing sensitive information using Data on your device like in the example code, by default it is stored in plaintext to the device storage and can be retrieved by anyone who peeks into the application files.

Please head into Secure Data (Keystore) documentation to securely encrypt and make tough the extraction of your private key from device. There is no practical need to encrypt public key, since it is... intended to be public.