Secure Data (Keystore)

API Reference: UI.SecureData

Provides encrypt and securely store data locally on the device. Some values to save:

• Login data
• Authentication token

On iOS Key Services is being used to store securely small chunks of data on behalf of the user & on Android the
Android Keystore system lets you store cryptographic keys in a container to make it more difficult to extract from the device.

note

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

TypeScript

import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import Application from "@smartface/native/application";
import Button from "@smartface/native/ui/button";
import SecureData from "@smartface/native/global/securedata";
import { styleableComponentMixin } from "@smartface/styling-context";


class StyleableButton extends styleableComponentMixin(Button) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
    mySecureData: SecureData;
    btnSave: StyleableButton;
    btnDel: StyleableButton;
    btnRead: StyleableButton;

  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // 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() {
    this.dispatch({
        type: "updateUserStyle",
        userStyle: {
            flexProps: {
              flexDirection: 'COLUMN',
              justifyContent: 'CENTER',
              alignItems: 'CENTER'
            }
        }
    })
  }

  onShow() {
    super.onShow();
    const { headerBar } = this;
    Application.statusBar.visible = false;
    headerBar.visible = false;

  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();
    
    //@ts-ignore
    this.mySecureData = new SecureData({
        ios: {
          service: "com.myapp.serviceparameter",
        },
        key: "keyparamater",
      });
    
      let isSaved = false;
      this.btnSave = new Button({
        text: "Save",
        onPress: () => {
          this.mySecureData.save({ value: "password" }).then(
            (resolvedValue) => {
              isSaved = true;
            },
            (error) => {
              console.log(error);
            }
          );
        },
      });
    
      this.btnDel = new Button({
        text: "Delete",
        onPress: () => {
          if (isSaved) {
            // for Android this must be checked
            this.mySecureData.delete({ value: "top secretpassword" }).then(
              (resolvedValue) => {
                console.log(resolvedValue);
              },
              (error) => {
                console.log(error);
              }
            );
            isSaved = false;
          } else {
            alert("There is no data to delete.");
          }
        },
      });
      this.btnRead = new Button({
        text: "Read",
        onPress: () => {
          if (isSaved) {
            // for Android this must be checked
            this.mySecureData.read().then(
              (resolvedValue) => {
                console.log(resolvedValue);
              },
              (error) => {
                console.log(error);
              }
            );
          } else {
            alert("There is no data to read.");
          }
        },
      });
      this.addChild(
        this.btnSave,
        "btnSave",
        ".sf-button",
        function (userProps) {
          userProps.width = 250;
          return userProps;
        }
      );
      this.addChild(
        this.btnDel,
        "btnDel",
        ".sf-button",
        function (userProps) {
          userProps.width = 250;
          return userProps;
        }
      );
      this.addChild(
        this.btnRead,
        "btnRead",
        ".sf-button",
        function (userProps) {
          userProps.width = 250;
          return userProps;
        }
      );
  }
}