Out-of-band Authentication: JavaScript Web SDK

🚧
FIREBASE FIRST
Before proceeding with this document, please ensure that you've followed the steps in Configuring Push Notifications via Firebase and Enable Push Notification for Android.

Out-of-band authentication provides the means to login to a web account on a browser via your mobile device.

By pairing your mobile device with your web account via out-of-band device setup, you can now login via out-of-band authentication with the following steps:

Provide the web account username.
Invoke the out-of-band authentication API; this will send a push notification to the mobile device prompting the mobile to authenticate.
Upon successful authentication the web account will be unlocked.

Out-of-band Device Setup Flow

Pairs your web account to your mobile device.

Android Out-of-band Device Setup PIN Entry Screen:

Out-of-band Authentication Flow

This is the flow for the mechanism that unlocks the web account:

UI Customization

We can customize the OOB device setup screens via XML overrides. Each screen has a corresponding layout file which is written in XML. By creating a layout file with the same name as the one you want to override, the SDK will present that layout file instead.

🚧
Android IDs
If you are overriding the layout files, please make sure to keep all the android:ids with their respective view from the layout that you want to override as the SDK uses those IDs.

Overriding the Out-of-band Device Setup Screen

Using the example below, create a file called hypr_common_view_single_pin.xml. This file will allow you to alter/add views and change the properties of those views.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:id="@+id/layout_movable_parent"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:id="@+id/hypr_pin_layout_pin_one"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/layout_pin_instructions_text"
            android:layout_gravity="center_horizontal"
            android:gravity="center_horizontal"
            android:orientation="horizontal">

            <com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
                android:id="@+id/hypr_pin_editview_pin_one_first"
                style="@style/PinEditTextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/hyprColorPinFocusedLine" />

            <com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
                android:id="@+id/hypr_pin_editview_pin_one_second"
                style="@style/PinEditTextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/hyprColorPinFocusedLine" />

            <com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
                android:id="@+id/hypr_pin_editview_pin_one_third"
                style="@style/PinEditTextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/hyprColorPinFocusedLine" />

            <com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
                android:id="@+id/hypr_pin_editview_pin_one_fourth"
                style="@style/PinEditTextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/hyprColorPinFocusedLine" />

            <com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
                android:id="@+id/hypr_pin_editview_pin_one_fifth"
                style="@style/PinEditTextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/hyprColorPinFocusedLine" />

            <com.hypr.hyprandroidcommon.uiadapter.ui.views.HyprStatefullEditText
                android:id="@+id/hypr_pin_editview_pin_one_sixth"
                style="@style/PinEditTextStyle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@color/hyprColorPinFocusedLine" />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/layout_pin_instructions_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/hypr_common_view_cancel_button"
            android:layout_marginTop="@dimen/hypr_common_pin_instructions_text_margin_top"
            android:layout_marginBottom="@dimen/hypr_common_pin_instructions_text_margin_bottom"
            android:gravity="center_horizontal"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/sharetech_regular"
                android:gravity="center_horizontal"
                android:text="@string/hypr_pin_instructions_title"
                android:textColor="@color/hyprColorTextPrimary"
                android:textSize="@dimen/hypr_common_license_entry_title_size" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/sharetech_regular"
                android:gravity="center_horizontal"
                android:text="@string/hypr_pin_instructions_text"
                android:textColor="@color/hyprColorTextPrimary"
                android:textSize="@dimen/hypr_common_license_entry_desc_size" />

            <com.hypr.hyprandroidcommon.uiadapter.ui.icons.SetupWorkstationAndDevice
                android:layout_width="@dimen/hypr_common_license_entry_img_width"
                android:layout_height="@dimen/hypr_common_license_entry_img_height"
                android:layout_marginTop="@dimen/hypr_common_license_entry_img_margin_top"
                android:contentDescription="@string/hypr_todo_content_description"
                android:gravity="center_horizontal" />

        </LinearLayout>

        <include
            android:id="@+id/hypr_common_view_cancel_button"
            layout="@layout/hypr_common_view_cancel_button"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_above="@+id/view_pin_entry_text_buffer"
            android:layout_marginBottom="@dimen/hypr_common_pin_cancel_margin_bottom" />

        <View
            android:id="@+id/view_pin_entry_text_buffer"
            android:layout_width="match_parent"
            android:layout_height="@dimen/hypr_common_pin_buffer_view_height"
            android:layout_above="@+id/view_bottom_anchor"
            android:visibility="visible" />

        <View
            android:id="@+id/view_bottom_anchor"
            android:layout_width="match_parent"
            android:layout_height="@dimen/hypr_common_keyboard_divider_bar_height"
            android:layout_alignParentBottom="true"
            android:background="@color/hyprColorKeyboardAnchorView"
            android:visibility="invisible" />

    </RelativeLayout>

    <include layout="@layout/hypr_common_view_keyboard_layout" />
</RelativeLayout>