Tabris.js 3.7 allows to build more secure apps with biometric authentication, native hashing and private certificates in WebViews

[UPDATE] Tabris.js 3.7.1 has been released addressing a few bugs discovered in 3.7.0.

With the release of Tabris.js 3.7 we are increasing the security level of Tabris.js apps. Strong authentication mechanisms like a fingerprint, face recognition, and others can now be directly used in Tabris.js apps. Tabris.js 3.7 also supports private certificates in WebViews and increases app performance by allowing to generate hash digests with native implementations. Let’s continue with some more details below.

Biometric authentication

Providing a secure way to authenticate a user is crucial on modern mobile devices. While pin and password authentication is still a valid fallback, the usage of strong biometric authentication has proven more secure. With Tabris.js 3.7 we introduce a new service called authentication.

The authentication service allows querying whether a user is able to authenticate himself inside the app. He may use any of the registered device-wide authentication mechanisms like pin/password or modern counterparts like fingerprint or face detection. The snippet below shows how to consume this new API.

if (authentication.canAuthenticate()) {
  const result = await authentication.authenticate();
  console.log(`Authentication result: ${result.status}`);
}

if (authentication.canAuthenticate()) {

const result = await authentication.authenticate();

console.log(`Authentication result: ${result.status}`);

}

Note that we first check if any authentication mechanism is enrolled on the device. Next, we ask the user to authenticate using his default method. The authenticate() call shows the native authentication UI familiar to the user. Once successfully authenticated, the returning result will have a status of 'success'. The authenticate() call also allows customizing the request with several options. See the docs for details on "title", "allowFallback",and more.

Private certificates in WebViews

While Tabris.js had support for private trusted certificates for a while, we have now expanded that support to apply to the WebView. Certificates configured via the tabris.app.trustedCertificates are also honored in the WebView.

Native hash digest support

The digest() method of the W3C standard SubtleCrypto interface generates a digest of the given data. A digest is a short fixed-length value derived from some variable-length input. Cryptographic digests should exhibit collision-resistance, meaning that it’s hard to come up with two different inputs that have the same digest value. The snippet below demonstrates how to generate a digest.

const digest = await crypto.subtle.digest('SHA-256', arrayBuffer);
console.log(toHex(digest));

1 2	const digest = await crypto.subtle.digest('SHA-256', arrayBuffer); console.log(toHex(digest));

Observable and RxJS Interoperability

Tabris now provides an implementation of the Observable API. It has been integrated in to the event system and is also RxJS compatible via their from method:

rxjs.from(button.onSelect)
  .pipe(debounceTime(100))
  .subscribe(ev => ...);

rxjs.from(button.onSelect)

.pipe(debounceTime(100))

.subscribe(ev => ...);

TextInput gains “beforeTextChange” event

The callback beforeTextChanged on TextInput is fired when the text value is about to change due to a user action. This allows us to observe and potentially intercept text input. To block the inserted text you can use the common e.preventDefault() method. The following snippet demonstrates how to only allow integer number input into a TextInput.

textInput.onBeforeTextChange(ev) {
  if (!/^[0-9]*$/.test(ev.newValue)) {
    ev.preventDefault();
  }
}

textInput.onBeforeTextChange(ev) {

if (!/^[0-9]*$/.test(ev.newValue)) {

ev.preventDefault();

}

CollectionView gains “offset” option for reveal() method

The offset property on the CollectionView.reveal() method allows to shift the revealed position to a desired location. The offset shifts the targeted scroll position by a device independent pixel value. When offset is used, the targeted reveal scroll position will start from the top of the CollectionView. Applying offset will perform the reveal() operation without an animation, ignoring the animate property.

“Set” renamed to “Setter” to avoid confusion

Set has been introduced in Tabris.js 3.6 but shadowed the existing Set class in JavaScript. To litigate this problem, Set has been renamed to Setter. An alias for Set still exists for backward compatibility.

New “apply” attribute and JSX element

Like to the existing apply method on Composite the apply instruction can now also be invoked during creation via declarative UI. This allows to create a CSS like syntax where all children of a Composite are effected accordingly. The snippet below demonstrates the feature.

contentView.append(
  Composite({
    padding: 8,
    apply: Setter(TextView, {
      textColor: 'red',
    }),
    children: [
      TextView({text: 'Hello'}),
      TextView({text: 'World'})
    ]
  })
);

contentView.append(

Composite({

padding: 8,

apply: Setter(TextView, {

textColor: 'red',

}),

children: [

TextView({text: 'Hello'}),

TextView({text: 'World'})

]

})

);

Set values with JSX element “Setter”

The Setter function can also be used as a JSX element to set any attribute its parent. This includes listeners and callbacks, so for example the CollectionView JSX element could now contain it’s own cell factory:

<CollectionView stretch itemCount={people.length} cellHeight={256} updateCell={updateCell}>
  <Setter target={CollectionView} attribute='createCell'>{() =>
    <Composite onTap={handleTap}>
      <ImageView top={16} centerX={0} width={200} height={200}/>
      <TextView left={30} top='prev() 16' right={30} alignment='centerX'/>
    </Composite>}
  </Setter>
</CollectionView>

</Composite>}

</Setter>

</CollectionView>

Better MVVM Support

We updated our Reddit-Viewer demo app to use the Model-View-ViewModel pattern. The @bindAll and @inject decorators have been tweaked in 3.7 to allow more consistent and flexible code. A typical MVVM binding can now look like this:/a>

  @inject
  @bindAll({
    lastVisibleIndex: '<< ListView.lastVisibleIndex',
    posts: '>> ListView.items',
    columns: '>> ListView.columnCount',
    loading: '>> ListView.refreshIndicator',
    title: '>> :host.title'
  })
  readonly viewModel: SubredditViewModel;

@inject

@bindAll({

lastVisibleIndex: '<< ListView.lastVisibleIndex',

posts: '>> ListView.items',

columns: '>> ListView.columnCount',

loading: '>> ListView.refreshIndicator',

title: '>> :host.title'

})

readonly viewModel: SubredditViewModel;

Get Started with Tabris.js 3.7

Get the app

Install the Tabris.js developer app on your device. Links below.

Try out the bundled snippets in the app, or edit and run them via Tabris.js Playground.
Install the 3.7 Tabris CLI on your machine: npm install -g tabris-cli@3.7.0
Type tabris init in an empty directory to create a simple example app.
Type npm start and load it in the developer app.
Check out the Tabris.js 3.7 documentation.

Feedback is welcome!

Want to join the discussion?
Feel free to contribute!

SLACK

GITHUB