Out-of-band Authentication: JavaScript Web SDK
HYPR SDK for Android: Web Authentication
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>

Updated 5 months ago