Links

Add Biometric Login

Overview

Biometric login is supported for the following operating systems:
  • iOS 11.3 or higher
  • Android 6.0 (API 23) or higher
Authgear supports enabling biometric login in the native mobile application. You will need to
  1. 1.
    Enable biometric login in your application via the portal.
  2. 2.
    In the mobile app, use the mobile SDK to enable biometric login for your users.
A pair of cryptographic keys will be generated upon registering biometric login. The private key will be stored securely in the device (using Keystore in Android and Keychain in iOS), while the public key is stored in the Authgear server. To authenticate the user, fingerprint or face is presented to unlock the private key, and a digital signed message is sent to the server to proof the authenticity of the user.
Sounds overwhelming? Authgear's magic handle all these for you. Follow this guide to enable biometric login in your app with a few lines of code.

Enable biometric authentication for your project

Portal
authgear.yaml
  1. 1.
    In the portal, go to Authentication > Biometric.
  2. 2.
    Turn on Enable biometric authentication.
  3. 3.
    Save the settings.
authentication:
identities:
...
# Add biometric along with the other enabled identities
- biometric
identity:
biometric:
# Enable listing biometric login in user setting page, default false
list_enabled: true

Set reasonably short token lifetimes for client applications

Biometric login is usually used when you want the user to re-login after a relatively short period of time. For sensitive applications such as financial apps, it's recommended to use a short refresh token lifetime and a short idle timeout.
  1. 1.
    In the Authgear Portal, go to Applications
  2. 2.
    Select the client application that represent the integration with the mobile app
  3. 3.
    Set a short Refresh Token Lifetime to say 3,600 seconds (1 hour)
  4. 4.
    Enable Expire after idling
  5. 5.
    Set a short Idle Timeout, to say 1,800 seconds (30 minutes)
By doing so, the end-user's session will be expired 1 hour after their login, or after 30 minutes of inactivity. The end-user will need to authenticate themself again with biometric, even if the app process has not yet been killed.

Configure SDK so users must re-login after app closed

Apart from the short token lifetimes, it's also common for sensitive apps to ask the user to re-login by biometric after the app process is killed and relaunched.
The SDK should be configured to use TransientTokenStorage so the tokens are stored in memory, and will be cleared when the app is closed. So the end-users must authenticate with biometrics again.
iOS
Android
React Native
Flutter
Ionic
Xamarin
let authgear = Authgear(
clientId: "{your_clien_id}",
endpoint: "{your_app_endpoint}",
tokenStorage: TransientTokenStorage())
authgear.configure() { result in
switch result {
case .success():
// configured successfully
case let .failure(error):
// failed to configured
}
}
public class MyAwesomeApplication extends Application {
// The client ID of the oauth client.
private static final String CLIENT_ID = "a_random_generated_string"
// Deployed authgear's endpoint
private static final String AUTHGEAR_ENDPOINT = "http://<myapp>.authgear.cloud/"
private Authgear mAuthgear;
public void onCreate() {
super.onCreate();
mAuthgear = new Authgear(this, CLIENT_ID, AUTHGEAR_ENDPOINT, new TransientTokenStorage());
mAuthgear.configure(new OnConfigureListener() {
@Override
public void onConfigured() {
// Authgear can be used.
}
@Override
public void onConfigurationFailed(@NonNull Throwable throwable) {
Log.d(TAG, throwable.toString());
// Something went wrong, check the client ID or endpoint.
}
});
}
public Authgear getAuthgear() {
return mAuthgear;
}
}
import React, { useCallback } from "react";
import { View, Button } from "react-native";
import authgear, { TransientTokenStorage } from "@authgear/react-native";
function LoginScreen() {
const onPress = useCallback(() => {
// Normally you should only configure once when the app launches.
authgear
.configure({
clientID: "client_id",
endpoint: "http://<myapp>.authgear.cloud",
tokenStorage: new TransientTokenStorage()
})
.then(() => {
authgear
.authenticate({
redirectURI: "com.myapp.example://host/path",
})
.then(({ userInfo }) => {
console.log(userInfo);
});
});
}, []);
return (
<View>
<Button onPress={onPress} title="Authenticate" />
</View>
);
}
Future<void> _init() async {
_authgear = Authgear(
endpoint: "ENDPOINT",
clientID: "CLIENT_ID",
tokenStorage: TransientTokenStorage()
);
await _authgear.configure();
}
import authgearCapacitor, { TransientTokenStorage, CancelError as CapacitorCancelError } from "@authgear/capacitor";
import authgearWeb, { SessionState, UserInfo, CancelError as WebCancelError } from "@authgear/web";
import { Capacitor } from "@capacitor/core";
import { useCallback, useState } from "react";
function isPlatformWeb(): boolean {
return Capacitor.getPlatform() === "web";
}
const CLIENT_ID = "client_id";
const ENDPOINT = "http://<myapp>.authgear.cloud";
function AuthenticationScreen() {
const [isAlertOpen, setIsAlertOpen] = useState(false);
const [alertHeader, setAlertHeader] = useState("");
const [alertMessage, setAlertMessage] = useState("");
const [loading, setLoading] = useState(false);
const [initialized, setInitialized] = useState(false);
const [sessionState, setSessionState] = useState<SessionState | null>(() => {
if (isPlatformWeb()) {
return authgearWeb.sessionState;
}
return authgearCapacitor.sessionState;
});
const showError = useCallback((e: any) => {
const json = JSON.parse(JSON.stringify(e));
json["constructor.name"] = e?.constructor?.name;
json["message"] = e?.message;
let message = JSON.stringify(json);
if (e instanceof WebCancelError || e instanceof CapacitorCancelError) {
// Cancel is not an error actually.
return;
}
setIsAlertOpen(true);
setAlertHeader("Error");
setAlertMessage(message);
}, []);
const postConfigure = useCallback(async () => {
const sessionState = isPlatformWeb()
? authgearWeb.sessionState
: authgearCapacitor.sessionState;
if (sessionState !== "AUTHENTICATED") {
setInitialized(true);
return;
}
if (isPlatformWeb()) {
await authgearWeb.fetchUserInfo();
} else {
await authgearCapacitor.fetchUserInfo();
}
setInitialized(true);
}, []);
const configure = useCallback(async () => {
setLoading(true);
try {
if (isPlatformWeb()) {
await authgearWeb.configure({
clientID: CLIENT_ID,
endpoint: ENDPOINT,
sessionType: "refresh_token",
isSSOEnabled: false,
});
} else {
await authgearCapacitor.configure({
clientID: CLIENT_ID,
endpoint: ENDPOINT,
tokenStorage: new TransientTokenStorage()
});
}
await postConfigure();
} catch (e) {
showError(e);
} finally {
setLoading(false);
}
}, [
CLIENT_ID,
ENDPOINT
]);
}
using System;
using Android.App;
using Android.Content.PM;
using Android.Runtime;
using Android.OS;
using Xamarin.Forms;
using Authgear.Xamarin;
namespace MyApp.Droid
{
public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
// ...
var authgear = new AuthgearSdk(this, new AuthgearOptions
{
ClientId = CLIENT_ID,
AuthgearEndpoint = ENDPOINT,
TokenStorage = new TransientTokenStorage()
});
DependencyService.RegisterSingleton<AuthgearSdk>(authgear);
LoadApplication(new App());
// ...
}
// other methods are omitted for brevity.
}
}

Enable biometric login in mobile SDK

In the following section, we will show you how to use biometric login in the SDK. In the SDK code snippet, authgear is referring to the configured Authgear container.

Biometric options

In the SDKs, a set of biometric options is required to check the support or enable biometric on the device.

iOS

There are two options on iOS:
  • localizedReason is the message string the user will see when FaceID or TouchID is presented
  • constraint is an enum that constraint the access of key stored under different conditions:
    • biometryAny: The key is still accessible by Touch ID if fingers are added or removed, or by Face ID if the user is re-enrolled
    • BiometricCurrentSet: The key is invalidated if fingers are added or removed for Touch ID, or if the user re-enrolls for Face ID
See reference in Apple Developers Doc on biometryAny and biometryCurrentSet.

Android

There are 6 options on Android:
  • title is the Title of the biometric dialog presented to the users
  • subtitle is the subtitle of the biometric dialog presented to the users
  • description is the description of the biometric dialog presented to the users
  • negativeButtonText is what the dismiss button says in the biometric dialog
  • constraint is an array defines the requirement of security level, which can be BIOMETRIC_STRONG, BIOMETRIC_WEAK, DEVICE_CREDENTIAL. See reference in Android developers documentation on BiometricManager.Authenticators``
  • invalidatedByBiometricEnrollment is a boolean that controls if the key pair will be invalidated if a new biometric is enrolled, or when all existing biometrics are deleted. See reference in Android developers documentation on KeyGenParameterSpec.Builder.

Code examples

Check support

Always check if the current device supports biometric login before calling any biometric API, including before enabling biometric login and before using biometric to login.
iOS
Android
React Native
Flutter
Ionic
Xamarin
// check if current device supports biometric login
var supported = false
do {
try authgear.checkBiometricSupported()
supported = true
} catch {}
if supported {
// biometric login is supported
}
boolean supported = false;
try {
// biometric login is supported SDK_INT >= 23 (Marshmallow)
if (Build.VERSION.SDK_INT >= 23) {
// check if current device supports biometric login
authgear.checkBiometricSupported(
this.getApplication(),
ALLOWED
);
supported = true;
}
} catch (Exception e) {}
if (supported) {
// biometric login is supported
}
// We will need the options for the other biometric api
const biometricOptions = {
ios: {
localizedReason: 'Use biometric to authenticate',
constraint: 'biometryCurrentSet' as const,
},
android: {
title: 'Biometric Authentication',
subtitle: 'Biometric authentication',
description: 'Use biometric to authenticate',
negativeButtonText: 'Cancel',
constraint: ['BIOMETRIC_STRONG' as const],
invalidatedByBiometricEnrollment: true,
},
};
// check if current device supports biometric login
authgear
.checkBiometricSupported(biometricOptions)
.then(() => {
// biometric login is supported
})
.catch(() => {
// biometric login is not supported
});
// We will need the options for the other biometric api
final ios = BiometricOptionsIOS(
localizedReason: "Use biometric to authenticate",
constraint: BiometricAccessConstraintIOS.biometryAny,
);
final android = BiometricOptionsAndroid(
title: "Biometric Authentication",
subtitle: "Biometric authentication",
description: "Use biometric to authenticate",
negativeButtonText: "Cancel",
constraint: [BiometricAccessConstraintAndroid.biometricStrong],
invalidatedByBiometricEnrollment: false,
);
try {
// check if current device supports biometric login
await authgear.checkBiometricSupported(ios: ios, android: android);
// biometric login is supported
} catch (e) {
// biometric login is not supported
}
const biometricOptions: BiometricOptions = {
ios: {
localizedReason: "Use biometric to authenticate",
constraint: BiometricAccessConstraintIOS.BiometryCurrentSet,
policy: BiometricLAPolicy.deviceOwnerAuthenticationWithBiometrics,
},
android: {
title: "Biometric Authentication",
subtitle: "Biometric authentication",
description: "Use biometric to authenticate",
negativeButtonText: "Cancel",
constraint: [BiometricAccessConstraintAndroid.BiometricStrong],
invalidatedByBiometricEnrollment: true,
},
};
const updateBiometricState = useCallback(async () => {
if (isPlatformWeb()) {
return;
}
try {
await authgearCapacitor.checkBiometricSupported(biometricOptions);
const enabled = await authgearCapacitor.isBiometricEnabled();
setBiometricEnabled(enabled); //to be implemented in later step
} catch (e) {
console.error(e);
}
}, []);
// We will need the options for the other biometric api
var ios = new BiometricOptionsIos
{
LocalizedReason = "Use biometric to authenticate",
AccessConstraint = BiometricAccessConstraintIos.BiometricAny,
};
var android = new BiometricOptionsAndroid
{
Title = "Biometric Authentication",
Subtitle = "Biometric authentication",
Description = "Use biometric to authenticate",
NegativeButtonText = "Cancel",
AccessConstraint = BiometricAccessConstraintAndroid.BiometricOnly,
InvalidatedByBiometricEnrollment = false,
};
var biometricOptions = new BiometricOptions
{
Ios = ios,
Android = android
};
try
{
// check if current device supports biometric login
authgear.EnsureBiometricIsSupported(biometricOptions);
// biometric login is supported
}
catch
{
// biometric login is not supported
}

Enable biometric login

Enable biometric login for logged in user
iOS
Android
React Native
Flutter
Ionic
Xamarin
// provide localizedReason for requesting authentication
// which displays in the authentication dialog presented to the user
authgear.enableBiometric(
localizedReason: "REPLACE_WITH_LOCALIZED_REASON",
constraint: .biometryCurrentSet
) { result in
if case let .failure(error) = result {
// failed to enable biometric with error
} else {
// enabled biometric successfully
}
}
// We will need the options for the other biometric api
BiometricOptions biometricOptions = new BiometricOptions(
activity, // FragmentActivity
"Biometric authentication", // title
"Biometric authentication", // subtitle
"Use biometric to authenticate", // description
"Cancel", // negativeButtonText
ALLOWED, // allowedAuthenticators
true // invalidatedByBiometricEnrollment
);
authgear.enableBiometric(
biometricOptions,
new OnEnableBiometricListener() {
@Override
public void onEnabled() {
// enabled biometric login successfully
}
@Override
public void onFailed(Throwable throwable) {
// failed to enable biometric with error
}
}
);
authgear
.enableBiometric(biometricOptions)
.then(() => {
// enabled biometric login successfully
})
.catch((err) => {
// failed to enable biometric with error
});
try {
await authgear.enableBiometric(ios: ios, android: android);
// enabled biometric login successfully
} catch (e) {
// failed to enable biometric with error
}
const enableBiometric = useCallback(async () => {
setLoading(true);
try {
await authgearCapacitor.enableBiometric(biometricOptions);
} catch (e: unknown) {
showError(e);
} finally {
setLoading(false);
await updateBiometricState();
}
}, [showError, updateBiometricState]);
const onClickEnableBiometric = useCallback(
(e: MouseEvent<HTMLIonButtonElement>) => {
e.preventDefault();
e.stopPropagation();
enableBiometric();
},
[enableBiometric]
);
try
{
await authgear.EnableBiometricAsync(biometricOptions);
// enabled biometric login successfully
}
catch
{
// failed to enable biometric with error
}

Check if biometric has been enabled before

Before asking the user to log in with biometric, Check if biometric login has been enabled on the current device. I.e. Is the key pair exist on the device (Keystore in Android and Keychain in iOS).
This method will still return true even if all the fingerprint and facial data has been removed from the device. Before this method, you should use the "checkBiometricSupported" to check if biometry is supported in the device level.
iOS
Android
React Native
Flutter
Ionic
Xamarin
var enabled = (try? authgear.isBiometricEnabled()) ?? false
boolean enabled = false;
try {
enabled = authgear.isBiometricEnabled();
} catch (Exception e) {}
authgear
.isBiometricEnabled()
.then((enabled) => {
// show if biometric login is enabled
})
.catch(() => {
// failed to check the enabled status
});
try {
final enabled = await authgear.isBiometricEnabled();
// show if biometric login is enabled
} catch (e) {
// failed to check the enabled status
}
const [biometricEnabled, setBiometricEnabled] = useState<boolean>(false);
try
{
var enabled = await authgear.GetIsBiometricEnabledAsync();
// show if biometric login is enabled
}
catch
{
// failed to check the enabled status
}

Login with biometric credentials

If biometric is supported and enabled, you can use the Authenticate Biometric method to log the user in. If the key pair is invalidated due to changes in the biometry settings, e.g added fingerprint or re-enrolled face data, the biometricPrivateKeyNotFound will be thrown. You should handle the error by the Disable Biometric method, and ask the user to register biometric login again.
iOS
Android
React Native
Flutter
Ionic
Xamrin
authgear.authenticateBiometric { result in
switch result {
case let .success(userInfo):
let userInfo = userInfo
// logged in successfully
case let .failure(error):
// failed to login
}
}
authgear.authenticateBiometric(
biometricOptions,
new OnAuthenticateBiometricListener() {
@Override
public void onAuthenticated(UserInfo userInfo) {
// logged in successfully
}
@Override
public void onAuthenticationFailed(Throwable throwable) {
// failed to login
}
}
);
authgear
.authenticateBiometric(biometricOptions)
.then(({userInfo}) => {
// logged in successfully
})
.catch((e) => {
// failed to login
});
try {
final userInfo = await authgear.authenticateBiometric(ios: ios, android: android);
// logged in successfully
} catch (e) {
// failed to login
}
const showUserInfo = useCallback((userInfo: UserInfo) => {
const message = JSON.stringify(userInfo, null, 2);
setIsAlertOpen(true);
setAlertHeader("UserInfo");
setAlertMessage(message);
}, []);
const authenticateBiometric = useCallback(async () => {
setLoading(true);
try {
const { userInfo } = await authgearCapacitor.authenticateBiometric(
biometricOptions
);
showUserInfo(userInfo);
} catch (e: unknown) {
showError(e);
} finally {
setLoading(false);
await updateBiometricState();
}
}, [showError, showUserInfo, updateBiometricState]);
try
{
var userInfo = await authgear.AuthenticateBiometricAsync(biometricOptions);
// logged in successfully
}
catch
{
// failed to login
}

Disable biometric login on the current device

iOS
Android
React Native
Flutter
Ionic
Xamarin
do {
try authgear.disableBiometric()
// disabled biometric login successfully
} catch {
// failed to disable biometric login
}
try {
authgear.disableBiometric();
// disabled biometric login successfully
} catch (Exception e) {
// failed to disable biometric login
}
authgear
.disableBiometric()
.then(() => {
// disabled biometric login successfully
})
.catch((err) => {
// failed to disable biometric login
});
try {
await authgear.disableBiometric();
// disabled biometric login successfully
} catch (e) {
// failed to disable biometric login
}
const disableBiometric = useCallback(async () => {
setLoading(true);
try {
await authgearCapacitor.disableBiometric();
} catch (e: unknown) {
showError(e);
} finally {
setLoading(false);
await updateBiometricState();
}
}, [showError, updateBiometricState]);
try
{
await authgear.DisableBiometricAsync();
// disabled biometric login successfully
}
catch
{
// failed to disable biometric login
}

Error handling

In all methods related to biometric, the SDK may throw the following errors that describe the status of the biometry enrollment or the key pair stored on the device.
iOS
Android
React Native
Flutter
Ionic
Xamarin
if let authgearError = error as? AuthgearError {
switch authgearError {
case .cancel:
// user cancel
case .biometricPrivateKeyNotFound:
// biometric info has changed. e.g. Touch ID or Face ID has changed.
// user have to set up biometric authentication again
case .biometricNotSupportedOrPermissionDenied:
// user has denied the permission of using Face ID
case .biometricNoPasscode:
// device does not have passcode set up
case .biometricNoEnrollment:
// device does not have Face ID or Touch ID set up
case .biometricLockout:
// the biometric is locked out due to too many failed attempts
default:
// other error
// you may consider showing a generic error message to the user
}
}
import com.oursky.authgear.BiometricLockoutException;
import com.oursky.authgear.BiometricNoEnrollmentException;
import com.oursky.authgear.BiometricNoPasscodeException;
import com.oursky.authgear.BiometricNotSupportedOrPermissionDeniedException;
import com.oursky.authgear.BiometricPrivateKeyNotFoundException;
import com.oursky.authgear.CancelException;
if (e instanceof CancelException) {
// user cancel
} else if (e instanceof BiometricPrivateKeyNotFoundException) {
// biometric info has changed
// user have to set up biomet