Version: 5.0

Using Custom Passcode Vaults

Overview

Identity Vault allows you to create a Custom Passcode vault. With a custom passcode vault, your application needs to provide the mechanism used to collect the passcode from the user. The passcode is then used to generate a key that is used to lock and unlock the vault. The passcode is only used to generate a key, it is never stored anywhere by Identity Vault. Since the passcode is not stored, it cannot be stolen.

You can think of it working like this:

When the vault is created, the user supplies a passcode.
The passcode is used to generate a key and the passcode is discarded.
This key becomes part of the current vault configuration so the vault can later be locked.
When the vault is locked the key is destroyed, resulting in a new key being required to unlock the vault.
When the user wants to unlock the vault, they supply a passcode.
The passcode is used to generate a key and the passcode is discarded.
If the new passcode was the same as the original passcode, the new key matches the old key and unlocks the vault, otherwise it does not.

The important items are: the passcode does not live beyond generating a key and the key does not live beyond locking the vault.

Let's Code

This tutorial builds upon the application created when doing the startup strategies tutorial. If you have the code from when you performed that tutorial, then you are ready to go. If you need the code you can make a copy from our GitHub repository.

Update the Vault Type

src/composables/session-vault.ts

src/views/Tab1Page.vue


_96import { useVaultFactory } from '@/composables/vault-factory';
_96import { Session } from '@/models/session';
_96import {
_96  BrowserVault,
_96  DeviceSecurityType,
_96  IdentityVaultConfig,
_96  Vault,
_96  VaultType,
_96} from '@ionic-enterprise/identity-vault';
_96import { ref } from 'vue';
_96
_96export type UnlockMode = 'BiometricsWithPasscode' | 'CustomPasscode' | 'InMemory' | 'SecureStorage';
_96
_96const { createVault } = useVaultFactory();
_96const vault: Vault | BrowserVault = createVault();
_96const session = ref<Session | null>(null);
_96
_96const initializeVault = async (): Promise<void> => {
_96  try {
_96    await vault.initialize({
_96      key: 'io.ionic.gettingstartediv',
_96      type: VaultType.SecureStorage,
_96      deviceSecurityType: DeviceSecurityType.None,
_96      lockAfterBackgrounded: 2000,
_96    });
_96  } catch (e: unknown) {
_96    await vault.clear();
_96    await updateUnlockMode('SecureStorage');
_96  }
_96
_96  vault.onLock(() => (session.value = null));
_96};
_96
_96const storeSession = async (s: Session): Promise<void> => {
_96  vault.setValue('session', s);
_96  session.value = s;
_96};
_96
_96const getSession = async (): Promise<void> => {
_96  if (await vault.isEmpty()) {
_96    session.value = null;
_96  } else {
_96    session.value = await vault.getValue<Session>('session');
_96  }
_96};
_96
_96const clearSession = async (): Promise<void> => {
_96  await vault.clear();
_96  session.value = null;
_96};
_96
_96const lockSession = async (): Promise<void> => {
_96  await vault.lock();
_96  session.value = null;
_96};
_96
_96const unlockSession = async (): Promise<void> => {
_96  await vault.unlock();
_96  session.value = await vault.getValue<Session>('session');
_96};
_96
_96const sessionIsLocked = async (): Promise<boolean> => {
_96  return (
_96    vault.config?.type !== VaultType.SecureStorage &&
_96    vault.config?.type !== VaultType.InMemory &&
_96    !(await vault.isEmpty()) &&
_96    (await vault.isLocked())
_96  );
_96};
_96
_96const updateUnlockMode = async (mode: UnlockMode): Promise<void> => {
_96  const type =
_96    mode === 'BiometricsWithPasscode'
_96      ? VaultType.DeviceSecurity
_96      : mode === 'InMemory'
_96        ? VaultType.InMemory
_96        : VaultType.SecureStorage;
_96  const deviceSecurityType = type === VaultType.DeviceSecurity ? DeviceSecurityType.Both : DeviceSecurityType.None;
_96  await vault.updateConfig({
_96    ...(vault.config as IdentityVaultConfig),
_96    type,
_96    deviceSecurityType,
_96  });
_96};
_96
_96export const useSessionVault = (): any => ({
_96  clearSession,
_96  getSession,
_96  initializeVault,
_96  lockSession,
_96  session,
_96  sessionIsLocked,
_96  storeSession,
_96  unlockSession,
_96  updateUnlockMode,
_96});

Add CustomPasscode to the UnlockMode.

src/composables/session-vault.ts

src/views/Tab1Page.vue


_98import { useVaultFactory } from '@/composables/vault-factory';
_98import { Session } from '@/models/session';
_98import {
_98  BrowserVault,
_98  DeviceSecurityType,
_98  IdentityVaultConfig,
_98  Vault,
_98  VaultType,
_98} from '@ionic-enterprise/identity-vault';
_98import { ref } from 'vue';
_98
_98export type UnlockMode = 'BiometricsWithPasscode' | 'CustomPasscode' | 'InMemory' | 'SecureStorage';
_98
_98const { createVault } = useVaultFactory();
_98const vault: Vault | BrowserVault = createVault();
_98const session = ref<Session | null>(null);
_98
_98const initializeVault = async (): Promise<void> => {
_98  try {
_98    await vault.initialize({
_98      key: 'io.ionic.gettingstartediv',
_98      type: VaultType.SecureStorage,
_98      deviceSecurityType: DeviceSecurityType.None,
_98      lockAfterBackgrounded: 2000,
_98    });
_98  } catch (e: unknown) {
_98    await vault.clear();
_98    await updateUnlockMode('SecureStorage');
_98  }
_98
_98  vault.onLock(() => (session.value = null));
_98};
_98
_98const storeSession = async (s: Session): Promise<void> => {
_98  vault.setValue('session', s);
_98  session.value = s;
_98};
_98
_98const getSession = async (): Promise<void> => {
_98  if (await vault.isEmpty()) {
_98    session.value = null;
_98  } else {
_98    session.value = await vault.getValue<Session>('session');
_98  }
_98};
_98
_98const clearSession = async (): Promise<void> => {
_98  await vault.clear();
_98  session.value = null;
_98};
_98
_98const lockSession = async (): Promise<void> => {
_98  await vault.lock();
_98  session.value = null;
_98};
_98
_98const unlockSession = async (): Promise<void> => {
_98  await vault.unlock();
_98  session.value = await vault.getValue<Session>('session');
_98};
_98
_98const sessionIsLocked = async (): Promise<boolean> => {
_98  return (
_98    vault.config?.type !== VaultType.SecureStorage &&
_98    vault.config?.type !== VaultType.InMemory &&
_98    !(await vault.isEmpty()) &&
_98    (await vault.isLocked())
_98  );
_98};
_98
_98const updateUnlockMode = async (mode: UnlockMode): Promise<void> => {
_98  const type =
_98    mode === 'BiometricsWithPasscode'
_98      ? VaultType.DeviceSecurity
_98      : mode === 'CustomPasscode'
_98        ? VaultType.CustomPasscode
_98        : mode === 'InMemory'
_98          ? VaultType.InMemory
_98          : VaultType.SecureStorage;
_98  const deviceSecurityType = type === VaultType.DeviceSecurity ? DeviceSecurityType.Both : DeviceSecurityType.None;
_98  await vault.updateConfig({
_98    ...(vault.config as IdentityVaultConfig),
_98    type,
_98    deviceSecurityType,
_98  });
_98};
_98
_98export const useSessionVault = (): any => ({
_98  clearSession,
_98  getSession,
_98  initializeVault,
_98  lockSession,
_98  session,
_98  sessionIsLocked,
_98  storeSession,
_98  unlockSession,
_98  updateUnlockMode,
_98});

Update the calculation that determines the type for the vault.

src/composables/session-vault.ts

src/views/Tab1Page.vue


_102import { useVaultFactory } from '@/composables/vault-factory';
_102import { Session } from '@/models/session';
_102import {
_102  BrowserVault,
_102  DeviceSecurityType,
_102  IdentityVaultConfig,
_102  Vault,
_102  VaultType,
_102} from '@ionic-enterprise/identity-vault';
_102import { ref } from 'vue';
_102
_102export type UnlockMode = 'BiometricsWithPasscode' | 'CustomPasscode' | 'InMemory' | 'SecureStorage';
_102
_102const { createVault } = useVaultFactory();
_102const vault: Vault | BrowserVault = createVault();
_102const session = ref<Session | null>(null);
_102
_102const initializeVault = async (): Promise<void> => {
_102  try {
_102    await vault.initialize({
_102      key: 'io.ionic.gettingstartediv',
_102      type: VaultType.SecureStorage,
_102      deviceSecurityType: DeviceSecurityType.None,
_102      lockAfterBackgrounded: 2000,
_102    });
_102  } catch (e: unknown) {
_102    await vault.clear();
_102    await updateUnlockMode('SecureStorage');
_102  }
_102
_102  vault.onLock(() => (session.value = null));
_102
_102  vault.onPasscodeRequested(async (isPasscodeSetRequest: boolean) => {
_102    await vault.setCustomPasscode('1234');
_102  });
_102};
_102
_102const storeSession = async (s: Session): Promise<void> => {
_102  vault.setValue('session', s);
_102  session.value = s;
_102};
_102
_102const getSession = async (): Promise<void> => {
_102  if (await vault.isEmpty()) {
_102    session.value = null;
_102  } else {
_102    session.value = await vault.getValue<Session>('session');
_102  }
_102};
_102
_102const clearSession = async (): Promise<void> => {
_102  await vault.clear();
_102  session.value = null;
_102};
_102
_102const lockSession = async (): Promise<void> => {
_102  await vault.lock();
_102  session.value = null;
_102};
_102
_102const unlockSession = async (): Promise<void> => {
_102  await vault.unlock();
_102  session.value = await vault.getValue<Session>('session');
_102};
_102
_102const sessionIsLocked = async (): Promise<boolean> => {
_102  return (
_102    vault.config?.type !== VaultType.SecureStorage &&
_102    vault.config?.type !== VaultType.InMemory &&
_102    !(await vault.isEmpty()) &&
_102    (await vault.isLocked())
_102  );
_102};
_102
_102const updateUnlockMode = async (mode: UnlockMode): Promise<void> => {
_102  const type =
_102    mode === 'BiometricsWithPasscode'
_102      ? VaultType.DeviceSecurity
_102      : mode === 'CustomPasscode'
_102        ? VaultType.CustomPasscode
_102        : mode === 'InMemory'
_102          ? VaultType.InMemory
_102          : VaultType.SecureStorage;
_102  const deviceSecurityType = type === VaultType.DeviceSecurity ? DeviceSecurityType.Both : DeviceSecurityType.None;
_102  await vault.updateConfig({
_102    ...(vault.config as IdentityVaultConfig),
_102    type,
_102    deviceSecurityType,
_102  });
_102};
_102
_102export const useSessionVault = (): any => ({
_102  clearSession,
_102  getSession,
_102  initializeVault,
_102  lockSession,
_102  session,
_102  sessionIsLocked,
_102  storeSession,
_102  unlockSession,
_102  updateUnlockMode,
_102});

We need to handle the workflow when the vault needs to request a custom passcode. Return a hard-coded value for now.

src/composables/session-vault.ts

src/views/Tab1Page.vue


_84<template>
_84  <ion-page>
_84    <ion-header>
_84      <ion-toolbar>
_84        <ion-title>Tab 1</ion-title>
_84      </ion-toolbar>
_84    </ion-header>
_84    <ion-content :fullscreen="true">
_84      <ion-header collapse="condense">
_84        <ion-toolbar>
_84          <ion-title size="large">Tab 1</ion-title>
_84        </ion-toolbar>
_84      </ion-header>
_84
_84      <ion-list>
_84        <ion-item>
_84          <ion-label>
_84            <ion-button expand="block" color="danger" @click="logoutClicked" data-testid="logout">Logout</ion-button>
_84          </ion-label>
_84        </ion-item>
_84        <ion-item>
_84          <ion-label>
_84            <ion-button expand="block" color="secondary" @click="updateUnlockMode('BiometricsWithPasscode')"
_84              data-testid="use-biometrics">Use
_84              Biometrics</ion-button>
_84          </ion-label>
_84        </ion-item>
_84        <ion-item>
_84          <ion-label>
_84            <ion-button expand="block" color="secondary" @click="updateUnlockMode('CustomPasscode')"
_84              data-testid="use-in-memory">Use Custom Passcode</ion-button>
_84          </ion-label>
_84        </ion-item>
_84        <ion-item>
_84          <ion-label>
_84            <ion-button expand="block" color="secondary" @click="updateUnlockMode('InMemory')"
_84              data-testid="use-in-memory">Use In Memory</ion-button>
_84          </ion-label>
_84        </ion-item>
_84        <ion-item>
_84          <ion-label>
_84            <ion-button expand="block" color="secondary" @click="updateUnlockMode('SecureStorage')"
_84              data-testid="use-secure-storage">Use Secure
_84              Storage</ion-button>
_84          </ion-label>
_84        </ion-item>
_84        <ion-item>
_84          <div data-testid="session">
_84            <div>{{ session?.email }}</div>
_84            <div>{{ session?.firstName }} {{ session?.lastName }}</div>
_84            <div>{{ session?.accessToken }}</div>
_84            <div>{{ session?.refreshToken }}</div>
_84          </div>
_84        </ion-item>
_84      </ion-list>
_84    </ion-content>
_84  </ion-page>
_84</template>
_84
_84<script setup lang="ts">
_84import { useAuthentication } from '@/composables/authentication';
_84import { useSessionVault } from '@/composables/session-vault';
_84import {
_84  IonButton,
_84  IonContent,
_84  IonHeader,
_84  IonItem,
_84  IonLabel,
_84  IonList,
_84  IonPage,
_84  IonTitle,
_84  IonToolbar,
_84} from '@ionic/vue';
_84import { useRouter } from 'vue-router';
_84
_84const { logout } = useAuthentication();
_84const { session, updateUnlockMode } = useSessionVault();
_84const router = useRouter();
_84
_84const logoutClicked = async (): Promise<void> => {
_84  await logout();
_84  router.replace('/');
_84}
_84</script>

Create a button on Tab1Page to use the custom passcode.

Add CustomPasscode to the UnlockMode.

Update the calculation that determines the type for the vault.

We need to handle the workflow when the vault needs to request a custom passcode. Return a hard-coded value for now.

Create a button on Tab1Page to use the custom passcode.

src/composables/session-vault.ts

src/views/Tab1Page.vue


_96import { useVaultFactory } from '@/composables/vault-factory';
_96import { Session } from '@/models/session';
_96import {
_96  BrowserVault,
_96  DeviceSecurityType,
_96  IdentityVaultConfig,
_96  Vault,
_96  VaultType,
_96} from '@ionic-enterprise/identity-vault';
_96import { ref } from 'vue';
_96
_96export type UnlockMode = 'BiometricsWithPasscode' | 'CustomPasscode' | 'InMemory' | 'SecureStorage';
_96
_96const { createVault } = useVaultFactory();
_96const vault: Vault | BrowserVault = createVault();
_96const session = ref<Session | null>(null);
_96
_96const initializeVault = async (): Promise<void> => {
_96  try {
_96    await vault.initialize({
_96      key: 'io.ionic.gettingstartediv',
_96      type: VaultType.SecureStorage,
_96      deviceSecurityType: DeviceSecurityType.None,
_96      lockAfterBackgrounded: 2000,
_96    });
_96  } catch (e: unknown) {
_96    await vault.clear();
_96    await updateUnlockMode('SecureStorage');
_96  }
_96
_96  vault.onLock(() => (session.value = null));
_96};
_96
_96const storeSession = async (s: Session): Promise<void> => {
_96  vault.setValue('session', s);
_96  session.value = s;
_96};
_96
_96const getSession = async (): Promise<void> => {
_96  if (await vault.isEmpty()) {
_96    session.value = null;
_96  } else {
_96    session.value = await vault.getValue<Session>('session');
_96  }
_96};
_96
_96const clearSession = async (): Promise<void> => {
_96  await vault.clear();
_96  session.value = null;
_96};
_96
_96const lockSession = async (): Promise<void> => {
_96  await vault.lock();
_96  session.value = null;
_96};
_96
_96const unlockSession = async (): Promise<void> => {
_96  await vault.unlock();
_96  session.value = await vault.getValue<Session>('session');
_96};
_96
_96const sessionIsLocked = async (): Promise<boolean> => {
_96  return (
_96    vault.config?.type !== VaultType.SecureStorage &&
_96    vault.config?.type !== VaultType.InMemory &&
_96    !(await vault.isEmpty()) &&
_96    (await vault.isLocked())
_96  );
_96};
_96
_96const updateUnlockMode = async (mode: UnlockMode): Promise<void> => {
_96  const type =
_96    mode === 'BiometricsWithPasscode'
_96      ? VaultType.DeviceSecurity
_96      : mode === 'InMemory'
_96        ? VaultType.InMemory
_96        : VaultType.SecureStorage;
_96  const deviceSecurityType = type === VaultType.DeviceSecurity ? DeviceSecurityType.Both : DeviceSecurityType.None;
_96  await vault.updateConfig({
_96    ...(vault.config as IdentityVaultConfig),
_96    type,
_96    deviceSecurityType,
_96  });
_96};
_96
_96export const useSessionVault = (): any => ({
_96  clearSession,
_96  getSession,
_96  initializeVault,
_96  lockSession,
_96  session,
_96  sessionIsLocked,
_96  storeSession,
_96  unlockSession,
_96  updateUnlockMode,
_96});

Create Passcode workflow

When you are using a Custom Passcode, the type of passcode along with the strategies used to gather it are up to you.

Workflows are used to accomplish two distinct tasks:

Create the passcode that is used to lock the vault.
Obtain the passcode that is used to attempt to unlock the vault.

The basic elements for all workflows is:

Respond to the onPasscodeRequested event.
Gather the passcode.
Either use the onComplete callback from the onPasscodeRequested event or call setCustomPasscode.

In the next section we will look at one example of a workflow we can use to gather a PIN style passcode from the user.

A PIN Entry Workflow

One type of workflow we can use is a PIN entry workflow. With this workflow, the user will use a Personal Identification Number consisting of four to nine digits to lock and unlock the vault.

When creating a new PIN:

The user enters a PIN and taps the "Enter" button.
The user is asked to enter the PIN again to verify.
The user enters a PIN and taps the "Enter" button.
If the PINs do not match an error is displayed.
If the PINs match the modal is closed, passing back the PIN that was entered.
The calling code passes the PIN to the vault so it can be used to generate a key to lock the vault.

The user cannot cancel the creation of a PIN, they must complete the operation.

When unlocking the vault:

The user enters a PIN and taps the "Enter" button.
The modal is closed, passing back the PIN that was entered.
The calling code passes the PIN to the vault so it can be used to generate a key to unlock the vault.

The user can cancel the PIN entry. If the user cancels, the modal is closed without any data being passed back.

To accomplish this, we will create a PIN Entry Component that encapsulates the user interaction required to enter a PIN. This dialog is displayed in a modal when the vault requests a passcode.

Create a PIN Entry Component

The PIN entry component is a numeric keypad that handles the PIN entry flows for both PIN creation and for unlocking the vault. The full code can be found in our GitHub demo repository. We walk through the key points below.

src/components/AppPinDialog.vue


_187<template>
_187  <ion-header>
_187    <ion-toolbar>
_187      <ion-title>{{ title }}</ion-title>
_187      <ion-buttons v-if="!setPasscodeMode" slot="start">
_187        <ion-button @click="cancel" data-testid="cancel-button">
_187          Cancel
_187        </ion-button>
_187      </ion-buttons>
_187      <ion-buttons slot="end">
_187        <ion-button :strong="true" data-testid="submit-button" @click="submit" :disabled="disableEnter">Enter
_187        </ion-button>
_187      </ion-buttons>
_187    </ion-toolbar>
_187  </ion-header>
_187
_187  <ion-content class="ion-padding ion-text-center">
_187    <ion-label data-testid="prompt">
_187      <div class="prompt">{{ prompt }}</div>
_187    </ion-label>
_187    <ion-label data-testid="display-pin">
_187      <div class="pin">{{ displayPin }}</div>
_187    </ion-label>
_187    <ion-label color="danger" data-testid="error-message">
_187      <div class="error">{{ errorMessage }}</div>
_187    </ion-label>
_187  </ion-content>
_187
_187  <ion-footer>
_187    <ion-grid>
_187      <ion-row>
_187        <ion-col v-for="n of [1, 2, 3]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [4, 5, 6]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [7, 8, 9]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button expand="block" fill="outline" @click="append(0)" :disabled="disableInput"
_187            data-testclass="number-button">0</ion-button>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button icon-only color="tertiary" expand="block" @click="remove()" :disabled="disableDelete"
_187            data-testid="delete-button">
_187            <ion-icon :icon="backspace"></ion-icon>
_187          </ion-button>
_187        </ion-col>
_187      </ion-row>
_187    </ion-grid>
_187  </ion-footer>
_187</template>
_187
_187<script setup lang="ts">
_187import {
_187  IonButton,
_187  IonButtons,
_187  IonCol,
_187  IonContent,
_187  IonFooter,
_187  IonGrid,
_187  IonHeader,
_187  IonLabel,
_187  IonRow,
_187  IonTitle,
_187  IonToolbar,
_187  modalController,
_187} from '@ionic/vue';
_187import { computed, ref } from 'vue';
_187import { backspace } from 'ionicons/icons';
_187
_187// eslint-disable-next-line no-undef
_187const props = defineProps({
_187  setPasscodeMode: Boolean,
_187});
_187
_187let verifyPin = '';
_187
_187const disableDelete = computed(() => !pin.value.length);
_187const disableEnter = computed(() => !(pin.value.length > 3));
_187const disableInput = computed(() => pin.value.length > 8);
_187
_187const errorMessage = ref('');
_187const pin = ref('');
_187const prompt = ref('');
_187const title = ref('');
_187
_187const displayPin = computed(() => '*********'.slice(0, pin.value.length));
_187
_187const append = (n: number) => {
_187  errorMessage.value = '';
_187  pin.value = pin.value.concat(n.toString());
_187};
_187
_187const remove = () => {
_187  if (pin.value) {
_187    pin.value = pin.value.slice(0, pin.value.length - 1);
_187  }
_187};
_187
_187const handleGetPasscodeFlow = () => {
_187  modalController.dismiss(pin.value);
_187}
_187
_187const handleSetPasscodeFlow = () => {
_187  if (!verifyPin) {
_187    initVerifyMode();
_187  } else if (verifyPin === pin.value) {
_187    modalController.dismiss(pin.value);
_187  } else {
_187    errorMessage.value = 'PINs do not match';
_187    initSetPasscodeMode();
_187  }
_187}
_187 
_187const initSetPasscodeMode = () => {
_187  title.value = 'Create PIN';
_187  prompt.value = 'Create Session PIN';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initUnlockMode = () => {
_187  title.value = 'Unlock';
_187  prompt.value = 'Enter PIN to Unlock';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initVerifyMode = () => {
_187  prompt.value = 'Verify PIN';
_187  verifyPin = pin.value;
_187  pin.value = '';
_187};
_187
_187const cancel = () => {
_187  modalController.dismiss(undefined, 'cancel');
_187};
_187
_187const submit = () => {
_187  if (props.setPasscodeMode) {
_187    handleSetPasscodeFlow();
_187  } else {
_187    handleGetPasscodeFlow();
_187  }
_187};
_187
_187if (props.setPasscodeMode) {
_187  initSetPasscodeMode();
_187} else {
_187  initUnlockMode();
_187}
_187</script>
_187
_187<style scoped>
_187.prompt {
_187  font-size: 2rem;
_187  font-weight: bold;
_187}
_187
_187.pin {
_187  font-size: 3rem;
_187  font-weight: bold;
_187}
_187
_187.error {
_187  font-size: 1.5rem;
_187  font-weight: bold;
_187}
_187
_187ion-grid {
_187  padding-bottom: 32px;
_187}
_187</style>

Cancel and Submit buttons.

Do not allow the user to cancel if they are creating a passcode.

src/components/AppPinDialog.vue


_187<template>
_187  <ion-header>
_187    <ion-toolbar>
_187      <ion-title>{{ title }}</ion-title>
_187      <ion-buttons v-if="!setPasscodeMode" slot="start">
_187        <ion-button @click="cancel" data-testid="cancel-button">
_187          Cancel
_187        </ion-button>
_187      </ion-buttons>
_187      <ion-buttons slot="end">
_187        <ion-button :strong="true" data-testid="submit-button" @click="submit" :disabled="disableEnter">Enter
_187        </ion-button>
_187      </ion-buttons>
_187    </ion-toolbar>
_187  </ion-header>
_187
_187  <ion-content class="ion-padding ion-text-center">
_187    <ion-label data-testid="prompt">
_187      <div class="prompt">{{ prompt }}</div>
_187    </ion-label>
_187    <ion-label data-testid="display-pin">
_187      <div class="pin">{{ displayPin }}</div>
_187    </ion-label>
_187    <ion-label color="danger" data-testid="error-message">
_187      <div class="error">{{ errorMessage }}</div>
_187    </ion-label>
_187  </ion-content>
_187
_187  <ion-footer>
_187    <ion-grid>
_187      <ion-row>
_187        <ion-col v-for="n of [1, 2, 3]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [4, 5, 6]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [7, 8, 9]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button expand="block" fill="outline" @click="append(0)" :disabled="disableInput"
_187            data-testclass="number-button">0</ion-button>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button icon-only color="tertiary" expand="block" @click="remove()" :disabled="disableDelete"
_187            data-testid="delete-button">
_187            <ion-icon :icon="backspace"></ion-icon>
_187          </ion-button>
_187        </ion-col>
_187      </ion-row>
_187    </ion-grid>
_187  </ion-footer>
_187</template>
_187
_187<script setup lang="ts">
_187import {
_187  IonButton,
_187  IonButtons,
_187  IonCol,
_187  IonContent,
_187  IonFooter,
_187  IonGrid,
_187  IonHeader,
_187  IonLabel,
_187  IonRow,
_187  IonTitle,
_187  IonToolbar,
_187  modalController,
_187} from '@ionic/vue';
_187import { computed, ref } from 'vue';
_187import { backspace } from 'ionicons/icons';
_187
_187// eslint-disable-next-line no-undef
_187const props = defineProps({
_187  setPasscodeMode: Boolean,
_187});
_187
_187let verifyPin = '';
_187
_187const disableDelete = computed(() => !pin.value.length);
_187const disableEnter = computed(() => !(pin.value.length > 3));
_187const disableInput = computed(() => pin.value.length > 8);
_187
_187const errorMessage = ref('');
_187const pin = ref('');
_187const prompt = ref('');
_187const title = ref('');
_187
_187const displayPin = computed(() => '*********'.slice(0, pin.value.length));
_187
_187const append = (n: number) => {
_187  errorMessage.value = '';
_187  pin.value = pin.value.concat(n.toString());
_187};
_187
_187const remove = () => {
_187  if (pin.value) {
_187    pin.value = pin.value.slice(0, pin.value.length - 1);
_187  }
_187};
_187
_187const handleGetPasscodeFlow = () => {
_187  modalController.dismiss(pin.value);
_187}
_187
_187const handleSetPasscodeFlow = () => {
_187  if (!verifyPin) {
_187    initVerifyMode();
_187  } else if (verifyPin === pin.value) {
_187    modalController.dismiss(pin.value);
_187  } else {
_187    errorMessage.value = 'PINs do not match';
_187    initSetPasscodeMode();
_187  }
_187}
_187
_187const initSetPasscodeMode = () => {
_187  title.value = 'Create PIN';
_187  prompt.value = 'Create Session PIN';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initUnlockMode = () => {
_187  title.value = 'Unlock';
_187  prompt.value = 'Enter PIN to Unlock';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initVerifyMode = () => {
_187  prompt.value = 'Verify PIN';
_187  verifyPin = pin.value;
_187  pin.value = '';
_187};
_187
_187const cancel = () => {
_187  modalController.dismiss(undefined, 'cancel');
_187};
_187
_187const submit = () => {
_187  if (props.setPasscodeMode) {
_187    handleSetPasscodeFlow();
_187  } else {
_187    handleGetPasscodeFlow();
_187  }
_187};
_187
_187if (props.setPasscodeMode) {
_187  initSetPasscodeMode();
_187} else {
_187  initUnlockMode();
_187}
_187</script>
_187
_187<style scoped>
_187.prompt {
_187  font-size: 2rem;
_187  font-weight: bold;
_187}
_187
_187.pin {
_187  font-size: 3rem;
_187  font-weight: bold;
_187}
_187
_187.error {
_187  font-size: 1.5rem;
_187  font-weight: bold;
_187}
_187
_187ion-grid {
_187  padding-bottom: 32px;
_187}
_187</style>

A user feedback area so they know what is going on.

src/components/AppPinDialog.vue


_187<template>
_187  <ion-header>
_187    <ion-toolbar>
_187      <ion-title>{{ title }}</ion-title>
_187      <ion-buttons v-if="!setPasscodeMode" slot="start">
_187        <ion-button @click="cancel" data-testid="cancel-button">
_187          Cancel
_187        </ion-button>
_187      </ion-buttons>
_187      <ion-buttons slot="end">
_187        <ion-button :strong="true" data-testid="submit-button" @click="submit" :disabled="disableEnter">Enter
_187        </ion-button>
_187      </ion-buttons>
_187    </ion-toolbar>
_187  </ion-header>
_187
_187  <ion-content class="ion-padding ion-text-center">
_187    <ion-label data-testid="prompt">
_187      <div class="prompt">{{ prompt }}</div>
_187    </ion-label>
_187    <ion-label data-testid="display-pin">
_187      <div class="pin">{{ displayPin }}</div>
_187    </ion-label>
_187    <ion-label color="danger" data-testid="error-message">
_187      <div class="error">{{ errorMessage }}</div>
_187    </ion-label>
_187  </ion-content>
_187
_187  <ion-footer>
_187    <ion-grid>
_187      <ion-row>
_187        <ion-col v-for="n of [1, 2, 3]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [4, 5, 6]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [7, 8, 9]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button expand="block" fill="outline" @click="append(0)" :disabled="disableInput"
_187            data-testclass="number-button">0</ion-button>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button icon-only color="tertiary" expand="block" @click="remove()" :disabled="disableDelete"
_187            data-testid="delete-button">
_187            <ion-icon :icon="backspace"></ion-icon>
_187          </ion-button>
_187        </ion-col>
_187      </ion-row>
_187    </ion-grid>
_187  </ion-footer>
_187</template>
_187
_187<script setup lang="ts">
_187import {
_187  IonButton,
_187  IonButtons,
_187  IonCol,
_187  IonContent,
_187  IonFooter,
_187  IonGrid,
_187  IonHeader,
_187  IonLabel,
_187  IonRow,
_187  IonTitle,
_187  IonToolbar,
_187  modalController,
_187} from '@ionic/vue';
_187import { computed, ref } from 'vue';
_187import { backspace } from 'ionicons/icons';
_187
_187// eslint-disable-next-line no-undef
_187const props = defineProps({
_187  setPasscodeMode: Boolean,
_187});
_187
_187let verifyPin = '';
_187
_187const disableDelete = computed(() => !pin.value.length);
_187const disableEnter = computed(() => !(pin.value.length > 3));
_187const disableInput = computed(() => pin.value.length > 8);
_187
_187const errorMessage = ref('');
_187const pin = ref('');
_187const prompt = ref('');
_187const title = ref('');
_187
_187const displayPin = computed(() => '*********'.slice(0, pin.value.length));
_187
_187const append = (n: number) => {
_187  errorMessage.value = '';
_187  pin.value = pin.value.concat(n.toString());
_187};
_187
_187const remove = () => {
_187  if (pin.value) {
_187    pin.value = pin.value.slice(0, pin.value.length - 1);
_187  }
_187};
_187
_187const handleGetPasscodeFlow = () => {
_187  modalController.dismiss(pin.value);
_187}
_187
_187const handleSetPasscodeFlow = () => {
_187  if (!verifyPin) {
_187    initVerifyMode();
_187  } else if (verifyPin === pin.value) {
_187    modalController.dismiss(pin.value);
_187  } else {
_187    errorMessage.value = 'PINs do not match';
_187    initSetPasscodeMode();
_187  }
_187}
_187
_187const initSetPasscodeMode = () => {
_187  title.value = 'Create PIN';
_187  prompt.value = 'Create Session PIN';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initUnlockMode = () => {
_187  title.value = 'Unlock';
_187  prompt.value = 'Enter PIN to Unlock';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initVerifyMode = () => {
_187  prompt.value = 'Verify PIN';
_187  verifyPin = pin.value;
_187  pin.value = '';
_187};
_187
_187const cancel = () => {
_187  modalController.dismiss(undefined, 'cancel');
_187};
_187
_187const submit = () => {
_187  if (props.setPasscodeMode) {
_187    handleSetPasscodeFlow();
_187  } else {
_187    handleGetPasscodeFlow();
_187  }
_187};
_187
_187if (props.setPasscodeMode) {
_187  initSetPasscodeMode();
_187} else {
_187  initUnlockMode();
_187}
_187</script>
_187
_187<style scoped>
_187.prompt {
_187  font-size: 2rem;
_187  font-weight: bold;
_187}
_187
_187.pin {
_187  font-size: 3rem;
_187  font-weight: bold;
_187}
_187
_187.error {
_187  font-size: 1.5rem;
_187  font-weight: bold;
_187}
_187
_187ion-grid {
_187  padding-bottom: 32px;
_187}
_187</style>

The keypad.

src/components/AppPinDialog.vue


_187<template>
_187  <ion-header>
_187    <ion-toolbar>
_187      <ion-title>{{ title }}</ion-title>
_187      <ion-buttons v-if="!setPasscodeMode" slot="start">
_187        <ion-button @click="cancel" data-testid="cancel-button">
_187          Cancel
_187        </ion-button>
_187      </ion-buttons>
_187      <ion-buttons slot="end">
_187        <ion-button :strong="true" data-testid="submit-button" @click="submit" :disabled="disableEnter">Enter
_187        </ion-button>
_187      </ion-buttons>
_187    </ion-toolbar>
_187  </ion-header>
_187
_187  <ion-content class="ion-padding ion-text-center">
_187    <ion-label data-testid="prompt">
_187      <div class="prompt">{{ prompt }}</div>
_187    </ion-label>
_187    <ion-label data-testid="display-pin">
_187      <div class="pin">{{ displayPin }}</div>
_187    </ion-label>
_187    <ion-label color="danger" data-testid="error-message">
_187      <div class="error">{{ errorMessage }}</div>
_187    </ion-label>
_187  </ion-content>
_187
_187  <ion-footer>
_187    <ion-grid>
_187      <ion-row>
_187        <ion-col v-for="n of [1, 2, 3]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [4, 5, 6]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [7, 8, 9]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button expand="block" fill="outline" @click="append(0)" :disabled="disableInput"
_187            data-testclass="number-button">0</ion-button>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button icon-only color="tertiary" expand="block" @click="remove()" :disabled="disableDelete"
_187            data-testid="delete-button">
_187            <ion-icon :icon="backspace"></ion-icon>
_187          </ion-button>
_187        </ion-col>
_187      </ion-row>
_187    </ion-grid>
_187  </ion-footer>
_187</template>
_187
_187<script setup lang="ts">
_187import {
_187  IonButton,
_187  IonButtons,
_187  IonCol,
_187  IonContent,
_187  IonFooter,
_187  IonGrid,
_187  IonHeader,
_187  IonLabel,
_187  IonRow,
_187  IonTitle,
_187  IonToolbar,
_187  modalController,
_187} from '@ionic/vue';
_187import { computed, ref } from 'vue';
_187import { backspace } from 'ionicons/icons';
_187
_187// eslint-disable-next-line no-undef
_187const props = defineProps({
_187  setPasscodeMode: Boolean,
_187});
_187
_187let verifyPin = '';
_187
_187const disableDelete = computed(() => !pin.value.length);
_187const disableEnter = computed(() => !(pin.value.length > 3));
_187const disableInput = computed(() => pin.value.length > 8);
_187
_187const errorMessage = ref('');
_187const pin = ref('');
_187const prompt = ref('');
_187const title = ref('');
_187
_187const displayPin = computed(() => '*********'.slice(0, pin.value.length));
_187
_187const append = (n: number) => {
_187  errorMessage.value = '';
_187  pin.value = pin.value.concat(n.toString());
_187};
_187
_187const remove = () => {
_187  if (pin.value) {
_187    pin.value = pin.value.slice(0, pin.value.length - 1);
_187  }
_187};
_187
_187const handleGetPasscodeFlow = () => {
_187  modalController.dismiss(pin.value);
_187}
_187
_187const handleSetPasscodeFlow = () => {
_187  if (!verifyPin) {
_187    initVerifyMode();
_187  } else if (verifyPin === pin.value) {
_187    modalController.dismiss(pin.value);
_187  } else {
_187    errorMessage.value = 'PINs do not match';
_187    initSetPasscodeMode();
_187  }
_187}
_187
_187const initSetPasscodeMode = () => {
_187  title.value = 'Create PIN';
_187  prompt.value = 'Create Session PIN';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initUnlockMode = () => {
_187  title.value = 'Unlock';
_187  prompt.value = 'Enter PIN to Unlock';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initVerifyMode = () => {
_187  prompt.value = 'Verify PIN';
_187  verifyPin = pin.value;
_187  pin.value = '';
_187};
_187
_187const cancel = () => {
_187  modalController.dismiss(undefined, 'cancel');
_187};
_187
_187const submit = () => {
_187  if (props.setPasscodeMode) {
_187    handleSetPasscodeFlow();
_187  } else {
_187    handleGetPasscodeFlow();
_187  }
_187};
_187
_187if (props.setPasscodeMode) {
_187  initSetPasscodeMode();
_187} else {
_187  initUnlockMode();
_187}
_187</script>
_187
_187<style scoped>
_187.prompt {
_187  font-size: 2rem;
_187  font-weight: bold;
_187}
_187
_187.pin {
_187  font-size: 3rem;
_187  font-weight: bold;
_187}
_187
_187.error {
_187  font-size: 1.5rem;
_187  font-weight: bold;
_187}
_187
_187ion-grid {
_187  padding-bottom: 32px;
_187}
_187</style>

We do not want to display the PIN, so we calculate a string of asterisks instead.

src/components/AppPinDialog.vue


_187<template>
_187  <ion-header>
_187    <ion-toolbar>
_187      <ion-title>{{ title }}</ion-title>
_187      <ion-buttons v-if="!setPasscodeMode" slot="start">
_187        <ion-button @click="cancel" data-testid="cancel-button">
_187          Cancel
_187        </ion-button>
_187      </ion-buttons>
_187      <ion-buttons slot="end">
_187        <ion-button :strong="true" data-testid="submit-button" @click="submit" :disabled="disableEnter">Enter
_187        </ion-button>
_187      </ion-buttons>
_187    </ion-toolbar>
_187  </ion-header>
_187
_187  <ion-content class="ion-padding ion-text-center">
_187    <ion-label data-testid="prompt">
_187      <div class="prompt">{{ prompt }}</div>
_187    </ion-label>
_187    <ion-label data-testid="display-pin">
_187      <div class="pin">{{ displayPin }}</div>
_187    </ion-label>
_187    <ion-label color="danger" data-testid="error-message">
_187      <div class="error">{{ errorMessage }}</div>
_187    </ion-label>
_187  </ion-content>
_187
_187  <ion-footer>
_187    <ion-grid>
_187      <ion-row>
_187        <ion-col v-for="n of [1, 2, 3]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [4, 5, 6]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [7, 8, 9]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button expand="block" fill="outline" @click="append(0)" :disabled="disableInput"
_187            data-testclass="number-button">0</ion-button>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button icon-only color="tertiary" expand="block" @click="remove()" :disabled="disableDelete"
_187            data-testid="delete-button">
_187            <ion-icon :icon="backspace"></ion-icon>
_187          </ion-button>
_187        </ion-col>
_187      </ion-row>
_187    </ion-grid>
_187  </ion-footer>
_187</template>
_187
_187<script setup lang="ts">
_187import {
_187  IonButton,
_187  IonButtons,
_187  IonCol,
_187  IonContent,
_187  IonFooter,
_187  IonGrid,
_187  IonHeader,
_187  IonLabel,
_187  IonRow,
_187  IonTitle,
_187  IonToolbar,
_187  modalController,
_187} from '@ionic/vue';
_187import { computed, ref } from 'vue';
_187import { backspace } from 'ionicons/icons';
_187
_187// eslint-disable-next-line no-undef
_187const props = defineProps({
_187  setPasscodeMode: Boolean,
_187});
_187
_187let verifyPin = '';
_187
_187const disableDelete = computed(() => !pin.value.length);
_187const disableEnter = computed(() => !(pin.value.length > 3));
_187const disableInput = computed(() => pin.value.length > 8);
_187
_187const errorMessage = ref('');
_187const pin = ref('');
_187const prompt = ref('');
_187const title = ref('');
_187
_187const displayPin = computed(() => '*********'.slice(0, pin.value.length));
_187
_187const append = (n: number) => {
_187  errorMessage.value = '';
_187  pin.value = pin.value.concat(n.toString());
_187};
_187
_187const remove = () => {
_187  if (pin.value) {
_187    pin.value = pin.value.slice(0, pin.value.length - 1);
_187  }
_187};
_187
_187const handleGetPasscodeFlow = () => {
_187  modalController.dismiss(pin.value);
_187}
_187
_187const handleSetPasscodeFlow = () => {
_187  if (!verifyPin) {
_187    initVerifyMode();
_187  } else if (verifyPin === pin.value) {
_187    modalController.dismiss(pin.value);
_187  } else {
_187    errorMessage.value = 'PINs do not match';
_187    initSetPasscodeMode();
_187  }
_187}
_187
_187const initSetPasscodeMode = () => {
_187  title.value = 'Create PIN';
_187  prompt.value = 'Create Session PIN';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initUnlockMode = () => {
_187  title.value = 'Unlock';
_187  prompt.value = 'Enter PIN to Unlock';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initVerifyMode = () => {
_187  prompt.value = 'Verify PIN';
_187  verifyPin = pin.value;
_187  pin.value = '';
_187};
_187
_187const cancel = () => {
_187  modalController.dismiss(undefined, 'cancel');
_187};
_187
_187const submit = () => {
_187  if (props.setPasscodeMode) {
_187    handleSetPasscodeFlow();
_187  } else {
_187    handleGetPasscodeFlow();
_187  }
_187};
_187
_187if (props.setPasscodeMode) {
_187  initSetPasscodeMode();
_187} else {
_187  initUnlockMode();
_187}
_187</script>
_187
_187<style scoped>
_187.prompt {
_187  font-size: 2rem;
_187  font-weight: bold;
_187}
_187
_187.pin {
_187  font-size: 3rem;
_187  font-weight: bold;
_187}
_187
_187.error {
_187  font-size: 1.5rem;
_187  font-weight: bold;
_187}
_187
_187ion-grid {
_187  padding-bottom: 32px;
_187}
_187</style>

We need to update the PIN value when the user presses a number button or the delete button on the keypad.

src/components/AppPinDialog.vue


_187<template>
_187  <ion-header>
_187    <ion-toolbar>
_187      <ion-title>{{ title }}</ion-title>
_187      <ion-buttons v-if="!setPasscodeMode" slot="start">
_187        <ion-button @click="cancel" data-testid="cancel-button">
_187          Cancel
_187        </ion-button>
_187      </ion-buttons>
_187      <ion-buttons slot="end">
_187        <ion-button :strong="true" data-testid="submit-button" @click="submit" :disabled="disableEnter">Enter
_187        </ion-button>
_187      </ion-buttons>
_187    </ion-toolbar>
_187  </ion-header>
_187
_187  <ion-content class="ion-padding ion-text-center">
_187    <ion-label data-testid="prompt">
_187      <div class="prompt">{{ prompt }}</div>
_187    </ion-label>
_187    <ion-label data-testid="display-pin">
_187      <div class="pin">{{ displayPin }}</div>
_187    </ion-label>
_187    <ion-label color="danger" data-testid="error-message">
_187      <div class="error">{{ errorMessage }}</div>
_187    </ion-label>
_187  </ion-content>
_187
_187  <ion-footer>
_187    <ion-grid>
_187      <ion-row>
_187        <ion-col v-for="n of [1, 2, 3]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [4, 5, 6]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [7, 8, 9]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button expand="block" fill="outline" @click="append(0)" :disabled="disableInput"
_187            data-testclass="number-button">0</ion-button>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button icon-only color="tertiary" expand="block" @click="remove()" :disabled="disableDelete"
_187            data-testid="delete-button">
_187            <ion-icon :icon="backspace"></ion-icon>
_187          </ion-button>
_187        </ion-col>
_187      </ion-row>
_187    </ion-grid>
_187  </ion-footer>
_187</template>
_187
_187<script setup lang="ts">
_187import {
_187  IonButton,
_187  IonButtons,
_187  IonCol,
_187  IonContent,
_187  IonFooter,
_187  IonGrid,
_187  IonHeader,
_187  IonLabel,
_187  IonRow,
_187  IonTitle,
_187  IonToolbar,
_187  modalController,
_187} from '@ionic/vue';
_187import { computed, ref } from 'vue';
_187import { backspace } from 'ionicons/icons';
_187
_187// eslint-disable-next-line no-undef
_187const props = defineProps({
_187  setPasscodeMode: Boolean,
_187});
_187
_187let verifyPin = '';
_187
_187const disableDelete = computed(() => !pin.value.length);
_187const disableEnter = computed(() => !(pin.value.length > 3));
_187const disableInput = computed(() => pin.value.length > 8);
_187
_187const errorMessage = ref('');
_187const pin = ref('');
_187const prompt = ref('');
_187const title = ref('');
_187
_187const displayPin = computed(() => '*********'.slice(0, pin.value.length));
_187
_187const append = (n: number) => {
_187  errorMessage.value = '';
_187  pin.value = pin.value.concat(n.toString());
_187};
_187
_187const remove = () => {
_187  if (pin.value) {
_187    pin.value = pin.value.slice(0, pin.value.length - 1);
_187  }
_187};
_187
_187const handleGetPasscodeFlow = () => {
_187  modalController.dismiss(pin.value);
_187}
_187
_187const handleSetPasscodeFlow = () => {
_187  if (!verifyPin) {
_187    initVerifyMode();
_187  } else if (verifyPin === pin.value) {
_187    modalController.dismiss(pin.value);
_187  } else {
_187    errorMessage.value = 'PINs do not match';
_187    initSetPasscodeMode();
_187  }
_187}
_187
_187const initSetPasscodeMode = () => {
_187  title.value = 'Create PIN';
_187  prompt.value = 'Create Session PIN';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initUnlockMode = () => {
_187  title.value = 'Unlock';
_187  prompt.value = 'Enter PIN to Unlock';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initVerifyMode = () => {
_187  prompt.value = 'Verify PIN';
_187  verifyPin = pin.value;
_187  pin.value = '';
_187};
_187
_187const cancel = () => {
_187  modalController.dismiss(undefined, 'cancel');
_187};
_187
_187const submit = () => {
_187  if (props.setPasscodeMode) {
_187    handleSetPasscodeFlow();
_187  } else {
_187    handleGetPasscodeFlow();
_187  }
_187};
_187
_187if (props.setPasscodeMode) {
_187  initSetPasscodeMode();
_187} else {
_187  initUnlockMode();
_187}
_187</script>
_187
_187<style scoped>
_187.prompt {
_187  font-size: 2rem;
_187  font-weight: bold;
_187}
_187
_187.pin {
_187  font-size: 3rem;
_187  font-weight: bold;
_187}
_187
_187.error {
_187  font-size: 1.5rem;
_187  font-weight: bold;
_187}
_187
_187ion-grid {
_187  padding-bottom: 32px;
_187}
_187</style>

There are three modes. The user is either creating a PIN, verifying the newly created PIN, or entering a PIN to unlock the vault.

src/components/AppPinDialog.vue


_187<template>
_187  <ion-header>
_187    <ion-toolbar>
_187      <ion-title>{{ title }}</ion-title>
_187      <ion-buttons v-if="!setPasscodeMode" slot="start">
_187        <ion-button @click="cancel" data-testid="cancel-button">
_187          Cancel
_187        </ion-button>
_187      </ion-buttons>
_187      <ion-buttons slot="end">
_187        <ion-button :strong="true" data-testid="submit-button" @click="submit" :disabled="disableEnter">Enter
_187        </ion-button>
_187      </ion-buttons>
_187    </ion-toolbar>
_187  </ion-header>
_187
_187  <ion-content class="ion-padding ion-text-center">
_187    <ion-label data-testid="prompt">
_187      <div class="prompt">{{ prompt }}</div>
_187    </ion-label>
_187    <ion-label data-testid="display-pin">
_187      <div class="pin">{{ displayPin }}</div>
_187    </ion-label>
_187    <ion-label color="danger" data-testid="error-message">
_187      <div class="error">{{ errorMessage }}</div>
_187    </ion-label>
_187  </ion-content>
_187
_187  <ion-footer>
_187    <ion-grid>
_187      <ion-row>
_187        <ion-col v-for="n of [1, 2, 3]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [4, 5, 6]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [7, 8, 9]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button expand="block" fill="outline" @click="append(0)" :disabled="disableInput"
_187            data-testclass="number-button">0</ion-button>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button icon-only color="tertiary" expand="block" @click="remove()" :disabled="disableDelete"
_187            data-testid="delete-button">
_187            <ion-icon :icon="backspace"></ion-icon>
_187          </ion-button>
_187        </ion-col>
_187      </ion-row>
_187    </ion-grid>
_187  </ion-footer>
_187</template>
_187
_187<script setup lang="ts">
_187import {
_187  IonButton,
_187  IonButtons,
_187  IonCol,
_187  IonContent,
_187  IonFooter,
_187  IonGrid,
_187  IonHeader,
_187  IonLabel,
_187  IonRow,
_187  IonTitle,
_187  IonToolbar,
_187  modalController,
_187} from '@ionic/vue';
_187import { computed, ref } from 'vue';
_187import { backspace } from 'ionicons/icons';
_187
_187// eslint-disable-next-line no-undef
_187const props = defineProps({
_187  setPasscodeMode: Boolean,
_187});
_187
_187let verifyPin = '';
_187
_187const disableDelete = computed(() => !pin.value.length);
_187const disableEnter = computed(() => !(pin.value.length > 3));
_187const disableInput = computed(() => pin.value.length > 8);
_187
_187const errorMessage = ref('');
_187const pin = ref('');
_187const prompt = ref('');
_187const title = ref('');
_187
_187const displayPin = computed(() => '*********'.slice(0, pin.value.length));
_187
_187const append = (n: number) => {
_187  errorMessage.value = '';
_187  pin.value = pin.value.concat(n.toString());
_187};
_187
_187const remove = () => {
_187  if (pin.value) {
_187    pin.value = pin.value.slice(0, pin.value.length - 1);
_187  }
_187};
_187
_187const handleGetPasscodeFlow = () => {
_187  modalController.dismiss(pin.value);
_187}
_187
_187const handleSetPasscodeFlow = () => {
_187  if (!verifyPin) {
_187    initVerifyMode();
_187  } else if (verifyPin === pin.value) {
_187    modalController.dismiss(pin.value);
_187  } else {
_187    errorMessage.value = 'PINs do not match';
_187    initSetPasscodeMode();
_187  }
_187}
_187
_187const initSetPasscodeMode = () => {
_187  title.value = 'Create PIN';
_187  prompt.value = 'Create Session PIN';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initUnlockMode = () => {
_187  title.value = 'Unlock';
_187  prompt.value = 'Enter PIN to Unlock';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initVerifyMode = () => {
_187  prompt.value = 'Verify PIN';
_187  verifyPin = pin.value;
_187  pin.value = '';
_187};
_187
_187const cancel = () => {
_187  modalController.dismiss(undefined, 'cancel');
_187};
_187
_187const submit = () => {
_187  if (props.setPasscodeMode) {
_187    handleSetPasscodeFlow();
_187  } else {
_187    handleGetPasscodeFlow();
_187  }
_187};
_187
_187if (props.setPasscodeMode) {
_187  initSetPasscodeMode();
_187} else {
_187  initUnlockMode();
_187}
_187</script>
_187
_187<style scoped>
_187.prompt {
_187  font-size: 2rem;
_187  font-weight: bold;
_187}
_187
_187.pin {
_187  font-size: 3rem;
_187  font-weight: bold;
_187}
_187
_187.error {
_187  font-size: 1.5rem;
_187  font-weight: bold;
_187}
_187
_187ion-grid {
_187  padding-bottom: 32px;
_187}
_187</style>

When the modal opens, the user is either creating a PIN or entering a PIN to unlock the vault.

src/components/AppPinDialog.vue


_187<template>
_187  <ion-header>
_187    <ion-toolbar>
_187      <ion-title>{{ title }}</ion-title>
_187      <ion-buttons v-if="!setPasscodeMode" slot="start">
_187        <ion-button @click="cancel" data-testid="cancel-button">
_187          Cancel
_187        </ion-button>
_187      </ion-buttons>
_187      <ion-buttons slot="end">
_187        <ion-button :strong="true" data-testid="submit-button" @click="submit" :disabled="disableEnter">Enter
_187        </ion-button>
_187      </ion-buttons>
_187    </ion-toolbar>
_187  </ion-header>
_187
_187  <ion-content class="ion-padding ion-text-center">
_187    <ion-label data-testid="prompt">
_187      <div class="prompt">{{ prompt }}</div>
_187    </ion-label>
_187    <ion-label data-testid="display-pin">
_187      <div class="pin">{{ displayPin }}</div>
_187    </ion-label>
_187    <ion-label color="danger" data-testid="error-message">
_187      <div class="error">{{ errorMessage }}</div>
_187    </ion-label>
_187  </ion-content>
_187
_187  <ion-footer>
_187    <ion-grid>
_187      <ion-row>
_187        <ion-col v-for="n of [1, 2, 3]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [4, 5, 6]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [7, 8, 9]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button expand="block" fill="outline" @click="append(0)" :disabled="disableInput"
_187            data-testclass="number-button">0</ion-button>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button icon-only color="tertiary" expand="block" @click="remove()" :disabled="disableDelete"
_187            data-testid="delete-button">
_187            <ion-icon :icon="backspace"></ion-icon>
_187          </ion-button>
_187        </ion-col>
_187      </ion-row>
_187    </ion-grid>
_187  </ion-footer>
_187</template>
_187
_187<script setup lang="ts">
_187import {
_187  IonButton,
_187  IonButtons,
_187  IonCol,
_187  IonContent,
_187  IonFooter,
_187  IonGrid,
_187  IonHeader,
_187  IonLabel,
_187  IonRow,
_187  IonTitle,
_187  IonToolbar,
_187  modalController,
_187} from '@ionic/vue';
_187import { computed, ref } from 'vue';
_187import { backspace } from 'ionicons/icons';
_187
_187// eslint-disable-next-line no-undef
_187const props = defineProps({
_187  setPasscodeMode: Boolean,
_187});
_187
_187let verifyPin = '';
_187
_187const disableDelete = computed(() => !pin.value.length);
_187const disableEnter = computed(() => !(pin.value.length > 3));
_187const disableInput = computed(() => pin.value.length > 8);
_187
_187const errorMessage = ref('');
_187const pin = ref('');
_187const prompt = ref('');
_187const title = ref('');
_187
_187const displayPin = computed(() => '*********'.slice(0, pin.value.length));
_187
_187const append = (n: number) => {
_187  errorMessage.value = '';
_187  pin.value = pin.value.concat(n.toString());
_187};
_187
_187const remove = () => {
_187  if (pin.value) {
_187    pin.value = pin.value.slice(0, pin.value.length - 1);
_187  }
_187};
_187
_187const handleGetPasscodeFlow = () => {
_187  modalController.dismiss(pin.value);
_187}
_187
_187const handleSetPasscodeFlow = () => {
_187  if (!verifyPin) {
_187    initVerifyMode();
_187  } else if (verifyPin === pin.value) {
_187    modalController.dismiss(pin.value);
_187  } else {
_187    errorMessage.value = 'PINs do not match';
_187    initSetPasscodeMode();
_187  }
_187}
_187
_187const initSetPasscodeMode = () => {
_187  title.value = 'Create PIN';
_187  prompt.value = 'Create Session PIN';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initUnlockMode = () => {
_187  title.value = 'Unlock';
_187  prompt.value = 'Enter PIN to Unlock';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initVerifyMode = () => {
_187  prompt.value = 'Verify PIN';
_187  verifyPin = pin.value;
_187  pin.value = '';
_187};
_187
_187const cancel = () => {
_187  modalController.dismiss(undefined, 'cancel');
_187};
_187
_187const submit = () => {
_187  if (props.setPasscodeMode) {
_187    handleSetPasscodeFlow();
_187  } else {
_187    handleGetPasscodeFlow();
_187  }
_187};
_187
_187if (props.setPasscodeMode) {
_187  initSetPasscodeMode();
_187} else {
_187  initUnlockMode();
_187}
_187</script>
_187
_187<style scoped>
_187.prompt {
_187  font-size: 2rem;
_187  font-weight: bold;
_187}
_187
_187.pin {
_187  font-size: 3rem;
_187  font-weight: bold;
_187}
_187
_187.error {
_187  font-size: 1.5rem;
_187  font-weight: bold;
_187}
_187
_187ion-grid {
_187  padding-bottom: 32px;
_187}
_187</style>

When the user taps the Enter button, we need to handle the proper flow.

src/components/AppPinDialog.vue


_187<template>
_187  <ion-header>
_187    <ion-toolbar>
_187      <ion-title>{{ title }}</ion-title>
_187      <ion-buttons v-if="!setPasscodeMode" slot="start">
_187        <ion-button @click="cancel" data-testid="cancel-button">
_187          Cancel
_187        </ion-button>
_187      </ion-buttons>
_187      <ion-buttons slot="end">
_187        <ion-button :strong="true" data-testid="submit-button" @click="submit" :disabled="disableEnter">Enter
_187        </ion-button>
_187      </ion-buttons>
_187    </ion-toolbar>
_187  </ion-header>
_187
_187  <ion-content class="ion-padding ion-text-center">
_187    <ion-label data-testid="prompt">
_187      <div class="prompt">{{ prompt }}</div>
_187    </ion-label>
_187    <ion-label data-testid="display-pin">
_187      <div class="pin">{{ displayPin }}</div>
_187    </ion-label>
_187    <ion-label color="danger" data-testid="error-message">
_187      <div class="error">{{ errorMessage }}</div>
_187    </ion-label>
_187  </ion-content>
_187
_187  <ion-footer>
_187    <ion-grid>
_187      <ion-row>
_187        <ion-col v-for="n of [1, 2, 3]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [4, 5, 6]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [7, 8, 9]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button expand="block" fill="outline" @click="append(0)" :disabled="disableInput"
_187            data-testclass="number-button">0</ion-button>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button icon-only color="tertiary" expand="block" @click="remove()" :disabled="disableDelete"
_187            data-testid="delete-button">
_187            <ion-icon :icon="backspace"></ion-icon>
_187          </ion-button>
_187        </ion-col>
_187      </ion-row>
_187    </ion-grid>
_187  </ion-footer>
_187</template>
_187
_187<script setup lang="ts">
_187import {
_187  IonButton,
_187  IonButtons,
_187  IonCol,
_187  IonContent,
_187  IonFooter,
_187  IonGrid,
_187  IonHeader,
_187  IonLabel,
_187  IonRow,
_187  IonTitle,
_187  IonToolbar,
_187  modalController,
_187} from '@ionic/vue';
_187import { computed, ref } from 'vue';
_187import { backspace } from 'ionicons/icons';
_187
_187// eslint-disable-next-line no-undef
_187const props = defineProps({
_187  setPasscodeMode: Boolean,
_187});
_187
_187let verifyPin = '';
_187
_187const disableDelete = computed(() => !pin.value.length);
_187const disableEnter = computed(() => !(pin.value.length > 3));
_187const disableInput = computed(() => pin.value.length > 8);
_187
_187const errorMessage = ref('');
_187const pin = ref('');
_187const prompt = ref('');
_187const title = ref('');
_187
_187const displayPin = computed(() => '*********'.slice(0, pin.value.length));
_187
_187const append = (n: number) => {
_187  errorMessage.value = '';
_187  pin.value = pin.value.concat(n.toString());
_187};
_187
_187const remove = () => {
_187  if (pin.value) {
_187    pin.value = pin.value.slice(0, pin.value.length - 1);
_187  }
_187};
_187
_187const handleGetPasscodeFlow = () => {
_187  modalController.dismiss(pin.value);
_187}
_187
_187const handleSetPasscodeFlow = () => {
_187  if (!verifyPin) {
_187    initVerifyMode();
_187  } else if (verifyPin === pin.value) {
_187    modalController.dismiss(pin.value);
_187  } else {
_187    errorMessage.value = 'PINs do not match';
_187    initSetPasscodeMode();
_187  }
_187}
_187
_187const initSetPasscodeMode = () => {
_187  title.value = 'Create PIN';
_187  prompt.value = 'Create Session PIN';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initUnlockMode = () => {
_187  title.value = 'Unlock';
_187  prompt.value = 'Enter PIN to Unlock';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initVerifyMode = () => {
_187  prompt.value = 'Verify PIN';
_187  verifyPin = pin.value;
_187  pin.value = '';
_187};
_187
_187const cancel = () => {
_187  modalController.dismiss(undefined, 'cancel');
_187};
_187
_187const submit = () => {
_187  if (props.setPasscodeMode) {
_187    handleSetPasscodeFlow();
_187  } else {
_187    handleGetPasscodeFlow();
_187  }
_187};
_187
_187if (props.setPasscodeMode) {
_187  initSetPasscodeMode();
_187} else {
_187  initUnlockMode();
_187}
_187</script>
_187
_187<style scoped>
_187.prompt {
_187  font-size: 2rem;
_187  font-weight: bold;
_187}
_187
_187.pin {
_187  font-size: 3rem;
_187  font-weight: bold;
_187}
_187
_187.error {
_187  font-size: 1.5rem;
_187  font-weight: bold;
_187}
_187
_187ion-grid {
_187  padding-bottom: 32px;
_187}
_187</style>

When creating a PIN, either move on to "verify" mode, display an error if the PIN failed in "verify" mode, or close the modal returning the PIN.

src/components/AppPinDialog.vue


_187<template>
_187  <ion-header>
_187    <ion-toolbar>
_187      <ion-title>{{ title }}</ion-title>
_187      <ion-buttons v-if="!setPasscodeMode" slot="start">
_187        <ion-button @click="cancel" data-testid="cancel-button">
_187          Cancel
_187        </ion-button>
_187      </ion-buttons>
_187      <ion-buttons slot="end">
_187        <ion-button :strong="true" data-testid="submit-button" @click="submit" :disabled="disableEnter">Enter
_187        </ion-button>
_187      </ion-buttons>
_187    </ion-toolbar>
_187  </ion-header>
_187
_187  <ion-content class="ion-padding ion-text-center">
_187    <ion-label data-testid="prompt">
_187      <div class="prompt">{{ prompt }}</div>
_187    </ion-label>
_187    <ion-label data-testid="display-pin">
_187      <div class="pin">{{ displayPin }}</div>
_187    </ion-label>
_187    <ion-label color="danger" data-testid="error-message">
_187      <div class="error">{{ errorMessage }}</div>
_187    </ion-label>
_187  </ion-content>
_187
_187  <ion-footer>
_187    <ion-grid>
_187      <ion-row>
_187        <ion-col v-for="n of [1, 2, 3]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [4, 5, 6]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [7, 8, 9]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button expand="block" fill="outline" @click="append(0)" :disabled="disableInput"
_187            data-testclass="number-button">0</ion-button>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button icon-only color="tertiary" expand="block" @click="remove()" :disabled="disableDelete"
_187            data-testid="delete-button">
_187            <ion-icon :icon="backspace"></ion-icon>
_187          </ion-button>
_187        </ion-col>
_187      </ion-row>
_187    </ion-grid>
_187  </ion-footer>
_187</template>
_187
_187<script setup lang="ts">
_187import {
_187  IonButton,
_187  IonButtons,
_187  IonCol,
_187  IonContent,
_187  IonFooter,
_187  IonGrid,
_187  IonHeader,
_187  IonLabel,
_187  IonRow,
_187  IonTitle,
_187  IonToolbar,
_187  modalController,
_187} from '@ionic/vue';
_187import { computed, ref } from 'vue';
_187import { backspace } from 'ionicons/icons';
_187
_187// eslint-disable-next-line no-undef
_187const props = defineProps({
_187  setPasscodeMode: Boolean,
_187});
_187
_187let verifyPin = '';
_187
_187const disableDelete = computed(() => !pin.value.length);
_187const disableEnter = computed(() => !(pin.value.length > 3));
_187const disableInput = computed(() => pin.value.length > 8);
_187
_187const errorMessage = ref('');
_187const pin = ref('');
_187const prompt = ref('');
_187const title = ref('');
_187
_187const displayPin = computed(() => '*********'.slice(0, pin.value.length));
_187
_187const append = (n: number) => {
_187  errorMessage.value = '';
_187  pin.value = pin.value.concat(n.toString());
_187};
_187
_187const remove = () => {
_187  if (pin.value) {
_187    pin.value = pin.value.slice(0, pin.value.length - 1);
_187  }
_187};
_187
_187const handleGetPasscodeFlow = () => {
_187  modalController.dismiss(pin.value);
_187}
_187
_187const handleSetPasscodeFlow = () => {
_187  if (!verifyPin) {
_187    initVerifyMode();
_187  } else if (verifyPin === pin.value) {
_187    modalController.dismiss(pin.value);
_187  } else {
_187    errorMessage.value = 'PINs do not match';
_187    initSetPasscodeMode();
_187  }
_187}
_187
_187const initSetPasscodeMode = () => {
_187  title.value = 'Create PIN';
_187  prompt.value = 'Create Session PIN';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initUnlockMode = () => {
_187  title.value = 'Unlock';
_187  prompt.value = 'Enter PIN to Unlock';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initVerifyMode = () => {
_187  prompt.value = 'Verify PIN';
_187  verifyPin = pin.value;
_187  pin.value = '';
_187};
_187
_187const cancel = () => {
_187  modalController.dismiss(undefined, 'cancel');
_187};
_187
_187const submit = () => {
_187  if (props.setPasscodeMode) {
_187    handleSetPasscodeFlow();
_187  } else {
_187    handleGetPasscodeFlow();
_187  }
_187};
_187
_187if (props.setPasscodeMode) {
_187  initSetPasscodeMode();
_187} else {
_187  initUnlockMode();
_187}
_187</script>
_187
_187<style scoped>
_187.prompt {
_187  font-size: 2rem;
_187  font-weight: bold;
_187}
_187
_187.pin {
_187  font-size: 3rem;
_187  font-weight: bold;
_187}
_187
_187.error {
_187  font-size: 1.5rem;
_187  font-weight: bold;
_187}
_187
_187ion-grid {
_187  padding-bottom: 32px;
_187}
_187</style>

When entering a PIN to unlock the vault, close the modal returning the entered PIN.

Cancel and Submit buttons.

Do not allow the user to cancel if they are creating a passcode.

A user feedback area so they know what is going on.

The keypad.

We do not want to display the PIN, so we calculate a string of asterisks instead.

We need to update the PIN value when the user presses a number button or the delete button on the keypad.

There are three modes. The user is either creating a PIN, verifying the newly created PIN, or entering a PIN to unlock the vault.

When the modal opens, the user is either creating a PIN or entering a PIN to unlock the vault.

When the user taps the Enter button, we need to handle the proper flow.

When creating a PIN, either move on to "verify" mode, display an error if the PIN failed in "verify" mode, or close the modal returning the PIN.

When entering a PIN to unlock the vault, close the modal returning the entered PIN.

src/components/AppPinDialog.vue


_187<template>
_187  <ion-header>
_187    <ion-toolbar>
_187      <ion-title>{{ title }}</ion-title>
_187      <ion-buttons v-if="!setPasscodeMode" slot="start">
_187        <ion-button @click="cancel" data-testid="cancel-button">
_187          Cancel
_187        </ion-button>
_187      </ion-buttons>
_187      <ion-buttons slot="end">
_187        <ion-button :strong="true" data-testid="submit-button" @click="submit" :disabled="disableEnter">Enter
_187        </ion-button>
_187      </ion-buttons>
_187    </ion-toolbar>
_187  </ion-header>
_187
_187  <ion-content class="ion-padding ion-text-center">
_187    <ion-label data-testid="prompt">
_187      <div class="prompt">{{ prompt }}</div>
_187    </ion-label>
_187    <ion-label data-testid="display-pin">
_187      <div class="pin">{{ displayPin }}</div>
_187    </ion-label>
_187    <ion-label color="danger" data-testid="error-message">
_187      <div class="error">{{ errorMessage }}</div>
_187    </ion-label>
_187  </ion-content>
_187
_187  <ion-footer>
_187    <ion-grid>
_187      <ion-row>
_187        <ion-col v-for="n of [1, 2, 3]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [4, 5, 6]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col v-for="n of [7, 8, 9]" :key="n">
_187          <ion-button expand="block" fill="outline" @click="append(n)" :disabled="disableInput"
_187            data-testclass="number-button">{{ n }}</ion-button>
_187        </ion-col>
_187      </ion-row>
_187      <ion-row>
_187        <ion-col>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button expand="block" fill="outline" @click="append(0)" :disabled="disableInput"
_187            data-testclass="number-button">0</ion-button>
_187        </ion-col>
_187        <ion-col>
_187          <ion-button icon-only color="tertiary" expand="block" @click="remove()" :disabled="disableDelete"
_187            data-testid="delete-button">
_187            <ion-icon :icon="backspace"></ion-icon>
_187          </ion-button>
_187        </ion-col>
_187      </ion-row>
_187    </ion-grid>
_187  </ion-footer>
_187</template>
_187
_187<script setup lang="ts">
_187import {
_187  IonButton,
_187  IonButtons,
_187  IonCol,
_187  IonContent,
_187  IonFooter,
_187  IonGrid,
_187  IonHeader,
_187  IonLabel,
_187  IonRow,
_187  IonTitle,
_187  IonToolbar,
_187  modalController,
_187} from '@ionic/vue';
_187import { computed, ref } from 'vue';
_187import { backspace } from 'ionicons/icons';
_187
_187// eslint-disable-next-line no-undef
_187const props = defineProps({
_187  setPasscodeMode: Boolean,
_187});
_187
_187let verifyPin = '';
_187
_187const disableDelete = computed(() => !pin.value.length);
_187const disableEnter = computed(() => !(pin.value.length > 3));
_187const disableInput = computed(() => pin.value.length > 8);
_187
_187const errorMessage = ref('');
_187const pin = ref('');
_187const prompt = ref('');
_187const title = ref('');
_187
_187const displayPin = computed(() => '*********'.slice(0, pin.value.length));
_187
_187const append = (n: number) => {
_187  errorMessage.value = '';
_187  pin.value = pin.value.concat(n.toString());
_187};
_187
_187const remove = () => {
_187  if (pin.value) {
_187    pin.value = pin.value.slice(0, pin.value.length - 1);
_187  }
_187};
_187
_187const handleGetPasscodeFlow = () => {
_187  modalController.dismiss(pin.value);
_187}
_187
_187const handleSetPasscodeFlow = () => {
_187  if (!verifyPin) {
_187    initVerifyMode();
_187  } else if (verifyPin === pin.value) {
_187    modalController.dismiss(pin.value);
_187  } else {
_187    errorMessage.value = 'PINs do not match';
_187    initSetPasscodeMode();
_187  }
_187}
_187 
_187const initSetPasscodeMode = () => {
_187  title.value = 'Create PIN';
_187  prompt.value = 'Create Session PIN';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initUnlockMode = () => {
_187  title.value = 'Unlock';
_187  prompt.value = 'Enter PIN to Unlock';
_187  verifyPin = '';
_187  pin.value = '';
_187};
_187
_187const initVerifyMode = () => {
_187  prompt.value = 'Verify PIN';
_187  verifyPin = pin.value;
_187  pin.value = '';
_187};
_187
_187const cancel = () => {
_187  modalController.dismiss(undefined, 'cancel');
_187};
_187
_187const submit = () => {
_187  if (props.setPasscodeMode) {
_187    handleSetPasscodeFlow();
_187  } else {
_187    handleGetPasscodeFlow();
_187  }
_187};
_187
_187if (props.setPasscodeMode) {
_187  initSetPasscodeMode();
_187} else {
_187  initUnlockMode();
_187}
_187</script>
_187
_187<style scoped>
_187.prompt {
_187  font-size: 2rem;
_187  font-weight: bold;
_187}
_187
_187.pin {
_187  font-size: 3rem;
_187  font-weight: bold;
_187}
_187
_187.error {
_187  font-size: 1.5rem;
_187  font-weight: bold;
_187}
_187
_187ion-grid {
_187  padding-bottom: 32px;
_187}
_187</style>

When the vault needs a PIN it will call onPasscodeRequested(), passing a Boolean flag indicating if the passcode is being used to set a new passcode (true) or unlock the vault (false). We use this callback function to display the PIN Entry Component in a modal dialog, await a response from it, and pass that response back to the vault.

src/composables/session-vault.ts


_104import { useVaultFactory } from '@/composables/vault-factory';
_104import { Session } from '@/models/session';
_104import {
_104  BrowserVault,
_104  DeviceSecurityType,
_104  IdentityVaultConfig,
_104  Vault,
_104  VaultType,
_104} from '@ionic-enterprise/identity-vault';
_104import { modalController } from '@ionic/vue';
_104import { ref } from 'vue';
_104import AppPinDialog from '@/components/AppPinDialog.vue';
_104
_104export type UnlockMode = 'BiometricsWithPasscode' | 'CustomPasscode' | 'InMemory' | 'SecureStorage';
_104
_104const { createVault } = useVaultFactory();
_104const vault: Vault | BrowserVault = createVault();
_104const session = ref<Session | null>(null);
_104
_104const initializeVault = async (): Promise<void> => {
_104  try {
_104    await vault.initialize({
_104      key: 'io.ionic.gettingstartediv',
_104      type: VaultType.SecureStorage,
_104      deviceSecurityType: DeviceSecurityType.None,
_104      lockAfterBackgrounded: 2000,
_104    });
_104  } catch (e: unknown) {
_104    await vault.clear();
_104    await updateUnlockMode('SecureStorage');
_104  }
_104
_104  vault.onLock(() => (session.value = null));
_104
_104  vault.onPasscodeRequested(async (isPasscodeSetRequest: boolean) => {
_104    await vault.setCustomPasscode('1234');
_104  });
_104};
_104
_104const storeSession = async (s: Session): Promise<void> => {
_104  vault.setValue('session', s);
_104  session.value = s;
_104};
_104
_104const getSession = async (): Promise<void> => {
_104  if (await vault.isEmpty()) {
_104    session.value = null;
_104  } else {
_104    session.value = await vault.getValue<Session>('session');
_104  }
_104};
_104
_104const clearSession = async (): Promise<void> => {
_104  await vault.clear();
_104  session.value = null;
_104};
_104
_104const lockSession = async (): Promise<void> => {
_104  await vault.lock();
_104  session.value = null;
_104};
_104
_104const unlockSession = async (): Promise<void> => {
_104  await vault.unlock();
_104  session.value = await vault.getValue<Session>('session');
_104};
_104
_104const sessionIsLocked = async (): Promise<boolean> => {
_104  return (
_104    vault.config?.type !== VaultType.SecureStorage &&
_104    vault.config?.type !== VaultType.InMemory &&
_104    !(await vault.isEmpty()) &&
_104    (await vault.isLocked())
_104  );
_104};
_104
_104const updateUnlockMode = async (mode: UnlockMode): Promise<void> => {
_104  const type =
_104    mode === 'BiometricsWithPasscode'
_104      ? VaultType.DeviceSecurity
_104      : mode === 'CustomPasscode'
_104        ? VaultType.CustomPasscode
_104        : mode === 'InMemory'
_104          ? VaultType.InMemory
_104          : VaultType.SecureStorage;
_104  const deviceSecurityType = type === VaultType.DeviceSecurity ? DeviceSecurityType.Both : DeviceSecurityType.None;
_104  await vault.updateConfig({
_104    ...(vault.config as IdentityVaultConfig),
_104    type,
_104    deviceSecurityType,
_104  });
_104};
_104
_104export const useSessionVault = (): any => ({
_104  clearSession,
_104  getSession,
_104  initializeVault,
_104  lockSession,
_104  session,
_104  sessionIsLocked,
_104  storeSession,
_104  unlockSession,
_104  updateUnlockMode,
_104});

Import the modal controller and the PIN dialog component.

src/composables/session-vault.ts


_112import { useVaultFactory } from '@/composables/vault-factory';
_112import { Session } from '@/models/session';
_112import {
_112  BrowserVault,
_112  DeviceSecurityType,
_112  IdentityVaultConfig,
_112  Vault,
_112  VaultType,
_112} from '@ionic-enterprise/identity-vault';
_112import { modalController } from '@ionic/vue';
_112import { ref } from 'vue';
_112import AppPinDialog from '@/components/AppPinDialog.vue';
_112
_112export type UnlockMode = 'BiometricsWithPasscode' | 'CustomPasscode' | 'InMemory' | 'SecureStorage';
_112
_112const { createVault } = useVaultFactory();
_112const vault: Vault | BrowserVault = createVault();
_112const session = ref<Session | null>(null);
_112
_112const initializeVault = async (): Promise<void> => {
_112  try {
_112    await vault.initialize({
_112      key: 'io.ionic.gettingstartediv',
_112      type: VaultType.SecureStorage,
_112      deviceSecurityType: DeviceSecurityType.None,
_112      lockAfterBackgrounded: 2000,
_112    });
_112  } catch (e: unknown) {
_112    await vault.clear();
_112    await updateUnlockMode('SecureStorage');
_112  }
_112
_112  vault.onLock(() => (session.value = null));
_112
_112  vault.onPasscodeRequested(async (isPasscodeSetRequest: boolean) => {
_112    const modal = await modalController.create({
_112      component: AppPinDialog,
_112      backdropDismiss: false,
_112      componentProps: {
_112        setPasscodeMode: isPasscodeSetRequest,
_112      },
_112    });
_112    await modal.present();
_112    await vault.setCustomPasscode('1234');
_112  });
_112};
_112
_112const storeSession = async (s: Session): Promise<void> => {
_112  vault.setValue('session', s);
_112  session.value = s;
_112};
_112
_112const getSession = async (): Promise<void> => {
_112  if (await vault.isEmpty()) {
_112    session.value = null;
_112  } else {
_112    session.value = await vault.getValue<Session>('session');
_112  }
_112};
_112
_112const clearSession = async (): Promise<void> => {
_112  await vault.clear();
_112  session.value = null;
_112};
_112
_112const lockSession = async (): Promise<void> => {
_112  await vault.lock();
_112  session.value = null;
_112};
_112
_112const unlockSession = async (): Promise<void> => {
_112  await vault.unlock();
_112  session.value = await vault.getValue<Session>('session');
_112};
_112
_112const sessionIsLocked = async (): Promise<boolean> => {
_112  return (
_112    vault.config?.type !== VaultType.SecureStorage &&
_112    vault.config?.type !== VaultType.InMemory &&
_112    !(await vault.isEmpty()) &&
_112    (await vault.isLocked())
_112  );
_112};
_112
_112const updateUnlockMode = async (mode: UnlockMode): Promise<void> => {
_112  const type =
_112    mode === 'BiometricsWithPasscode'
_112      ? VaultType.DeviceSecurity
_112      : mode === 'CustomPasscode'
_112        ? VaultType.CustomPasscode
_112        : mode === 'InMemory'
_112          ? VaultType.InMemory
_112          : VaultType.SecureStorage;
_112  const deviceSecurityType = type === VaultType.DeviceSecurity ? DeviceSecurityType.Both : DeviceSecurityType.None;
_112  await vault.updateConfig({
_112    ...(vault.config as IdentityVaultConfig),
_112    type,
_112    deviceSecurityType,
_112  });
_112};
_112
_112export const useSessionVault = (): any => ({
_112  clearSession,
_112  getSession,
_112  initializeVault,
_112  lockSession,
_112  session,
_112  sessionIsLocked,
_112  storeSession,
_112  unlockSession,
_112  updateUnlockMode,
_112});

Create and present the modal.

src/composables/session-vault.ts


_113import { useVaultFactory } from '@/composables/vault-factory';
_113import { Session } from '@/models/session';
_113import {
_113  BrowserVault,
_113  DeviceSecurityType,
_113  IdentityVaultConfig,
_113  Vault,
_113  VaultType,
_113} from '@ionic-enterprise/identity-vault';
_113import { modalController } from '@ionic/vue';
_113import { ref } from 'vue';
_113import AppPinDialog from '@/components/AppPinDialog.vue';
_113
_113export type UnlockMode = 'BiometricsWithPasscode' | 'CustomPasscode' | 'InMemory' | 'SecureStorage';
_113
_113const { createVault } = useVaultFactory();
_113const vault: Vault | BrowserVault = createVault();
_113const session = ref<Session | null>(null);
_113
_113const initializeVault = async (): Promise<void> => {
_113  try {
_113    await vault.initialize({
_113      key: 'io.ionic.gettingstartediv',
_113      type: VaultType.SecureStorage,
_113      deviceSecurityType: DeviceSecurityType.None,
_113      lockAfterBackgrounded: 2000,
_113    });
_113  } catch (e: unknown) {
_113    await vault.clear();
_113    await updateUnlockMode('SecureStorage');
_113  }
_113
_113  vault.onLock(() => (session.value = null));
_113
_113  vault.onPasscodeRequested(async (isPasscodeSetRequest: boolean) => {
_113    const modal = await modalController.create({
_113      component: AppPinDialog,
_113      backdropDismiss: false,
_113      componentProps: {
_113        setPasscodeMode: isPasscodeSetRequest,
_113      },
_113    });
_113    await modal.present();
_113    const { data } = await modal.onWillDismiss();
_113    await vault.setCustomPasscode(data || '');
_113  });
_113};
_113
_113const storeSession = async (s: Session): Promise<void> => {
_113  vault.setValue('session', s);
_113  session.value = s;
_113};
_113
_113const getSession = async (): Promise<void> => {
_113  if (await vault.isEmpty()) {
_113    session.value = null;
_113  } else {
_113    session.value = await vault.getValue<Session>('session');
_113  }
_113};
_113
_113const clearSession = async (): Promise<void> => {
_113  await vault.clear();
_113  session.value = null;
_113};
_113
_113const lockSession = async (): Promise<void> => {
_113  await vault.lock();
_113  session.value = null;
_113};
_113
_113const unlockSession = async (): Promise<void> => {
_113  await vault.unlock();
_113  session.value = await vault.getValue<Session>('session');
_113};
_113
_113const sessionIsLocked = async (): Promise<boolean> => {
_113  return (
_113    vault.config?.type !== VaultType.SecureStorage &&
_113    vault.config?.type !== VaultType.InMemory &&
_113    !(await vault.isEmpty()) &&
_113    (await vault.isLocked())
_113  );
_113};
_113
_113const updateUnlockMode = async (mode: UnlockMode): Promise<void> => {
_113  const type =
_113    mode === 'BiometricsWithPasscode'
_113      ? VaultType.DeviceSecurity
_113      : mode === 'CustomPasscode'
_113        ? VaultType.CustomPasscode
_113        : mode === 'InMemory'
_113          ? VaultType.InMemory
_113          : VaultType.SecureStorage;
_113  const deviceSecurityType = type === VaultType.DeviceSecurity ? DeviceSecurityType.Both : DeviceSecurityType.None;
_113  await vault.updateConfig({
_113    ...(vault.config as IdentityVaultConfig),
_113    type,
_113    deviceSecurityType,
_113  });
_113};
_113
_113export const useSessionVault = (): any => ({
_113  clearSession,
_113  getSession,
_113  initializeVault,
_113  lockSession,
_113  session,
_113  sessionIsLocked,
_113  storeSession,
_113  unlockSession,
_113  updateUnlockMode,
_113});

Set the passcode for the vault based on the data sent back from the PIN dialog.

Import the modal controller and the PIN dialog component.

Create and present the modal.

Set the passcode for the vault based on the data sent back from the PIN dialog.

src/composables/session-vault.ts


_104import { useVaultFactory } from '@/composables/vault-factory';
_104import { Session } from '@/models/session';
_104import {
_104  BrowserVault,
_104  DeviceSecurityType,
_104  IdentityVaultConfig,
_104  Vault,
_104  VaultType,
_104} from '@ionic-enterprise/identity-vault';
_104import { modalController } from '@ionic/vue';
_104import { ref } from 'vue';
_104import AppPinDialog from '@/components/AppPinDialog.vue';
_104
_104export type UnlockMode = 'BiometricsWithPasscode' | 'CustomPasscode' | 'InMemory' | 'SecureStorage';
_104
_104const { createVault } = useVaultFactory();
_104const vault: Vault | BrowserVault = createVault();
_104const session = ref<Session | null>(null);
_104
_104const initializeVault = async (): Promise<void> => {
_104  try {
_104    await vault.initialize({
_104      key: 'io.ionic.gettingstartediv',
_104      type: VaultType.SecureStorage,
_104      deviceSecurityType: DeviceSecurityType.None,
_104      lockAfterBackgrounded: 2000,
_104    });
_104  } catch (e: unknown) {
_104    await vault.clear();
_104    await updateUnlockMode('SecureStorage');
_104  }
_104
_104  vault.onLock(() => (session.value = null));
_104
_104  vault.onPasscodeRequested(async (isPasscodeSetRequest: boolean) => {
_104    await vault.setCustomPasscode('1234');
_104  });
_104};
_104
_104const storeSession = async (s: Session): Promise<void> => {
_104  vault.setValue('session', s);
_104  session.value = s;
_104};
_104
_104const getSession = async (): Promise<void> => {
_104  if (await vault.isEmpty()) {
_104    session.value = null;
_104  } else {
_104    session.value = await vault.getValue<Session>('session');
_104  }
_104};
_104
_104const clearSession = async (): Promise<void> => {
_104  await vault.clear();
_104  session.value = null;
_104};
_104
_104const lockSession = async (): Promise<void> => {
_104  await vault.lock();
_104  session.value = null;
_104};
_104
_104const unlockSession = async (): Promise<void> => {
_104  await vault.unlock();
_104  session.value = await vault.getValue<Session>('session');
_104};
_104
_104const sessionIsLocked = async (): Promise<boolean> => {
_104  return (
_104    vault.config?.type !== VaultType.SecureStorage &&
_104    vault.config?.type !== VaultType.InMemory &&
_104    !(await vault.isEmpty()) &&
_104    (await vault.isLocked())
_104  );
_104};
_104
_104const updateUnlockMode = async (mode: UnlockMode): Promise<void> => {
_104  const type =
_104    mode === 'BiometricsWithPasscode'
_104      ? VaultType.DeviceSecurity
_104      : mode === 'CustomPasscode'
_104        ? VaultType.CustomPasscode
_104        : mode === 'InMemory'
_104          ? VaultType.InMemory
_104          : VaultType.SecureStorage;
_104  const deviceSecurityType = type === VaultType.DeviceSecurity ? DeviceSecurityType.Both : DeviceSecurityType.None;
_104  await vault.updateConfig({
_104    ...(vault.config as IdentityVaultConfig),
_104    type,
_104    deviceSecurityType,
_104  });
_104};
_104
_104export const useSessionVault = (): any => ({
_104  clearSession,
_104  getSession,
_104  initializeVault,
_104  lockSession,
_104  session,
_104  sessionIsLocked,
_104  storeSession,
_104  unlockSession,
_104  updateUnlockMode,
_104});

At this point, we can test the Custom Passcode workflows via the "Use Custom Passcode" button.

Advanced Implementations

The Custom Passcode is very flexible, and you do not have to use the basic PIN Entry implementation we have outlined here. We do not have demos for these, but would be happy to assist you in your implementation if needed.

Here are a few ideas for other implementations.

Custom Passcode Entry

We created a PIN Entry component here. We could have created any sort of component we wanted so long as that component generates a unique key based on user interaction. Here are some other ideas:

Ask the user to provide a passphrase.
Ask the user to enter a pattern on a grid.
Ask the user to select a combination of pictures or colors.
Use a voice recognition to ask the user for a secret word (accuracy of the voice recognition will obviously be very important).

The input mechanism is up to you so long as it results in a string that can be used to generate a key.

Using with a `Device` Vault

The suggested configuration for a Device vault is to use DeviceSecurityType.Both to allow Biometrics to be used with a System Passcode backup. You can, however, use Custom Passcode as a backup mechanism. To do this, you will need two vaults, a Device vault using DeviceSecurityType.Biometrics (Biometrics-only) and a CustomPasscode vault.

The CustomPasscode vault is the source of truth for the authentication session information.

The Device vault stores the passcode for the CustomPasscode vault.

When unlocking the application, the following workflow is used:

User uses Biometrics to unlock the Device vault.
The Passcode is obtained from the unlocked Device vault.
The stored Passcode is used to unlock the CustomPasscode vault to obtain the session information.

In cases where the user fails to unlock the Device, the application can use the CustomPasscode vault directly, asking the user to enter the passcode in order to unlock the vault.

Best Practices

Favor `Device` Vaults

While CustomPasscode vaults are secure, a Device vault is able to take full advantage of the device's hardware-based encryption and secure storage mechanisms. For this reason, Device vaults should be favored on devices that support them.

For the most secure applications, the following types of vaults are suggested:

Use a Device type vault with DeviceSecurityType.Both. If the user does not have Biometrics configured, this configuration will fall back to using the System Passcode.
Use an InMemory vault if a user has neither Biometrics nor a System Passcode configured on their device.

With this configuration, users who have secured their devices properly will be able to utilize their device security to remain logged in to your application. For users who have not properly secured their devices, your application will still be secure since users will need to provide their application credentials every time the application is locked or launched.

Favor System Passcode Backup

Using a Custom Passcode as backup for Biometrics has the following disadvantages:

It is non-standard. The standard fallback for Biometrics failing when unlocking the device itself, for example, is to use the System Passcode. As such, that is what the user will expect.
Using the System Passcode is built in to Identity Vault. As such, it requires far less code in your application.
Using the System Passcode takes full advantage of the device's encryption hardware area.

As such, while using a Custom Passcode is secure, using a System Passcode as the fallback mechanism for failing Biometrics maximizes both security and usability while minimizing complexity within your application.

Overview​

Let's Code​

Update the Vault Type​

Create Passcode workflow​

A PIN Entry Workflow​

Create a PIN Entry Component​

Hook Up the Modal​

Advanced Implementations​

Custom Passcode Entry​

Using with a Device Vault​

Best Practices​

Favor Device Vaults​

Favor System Passcode Backup​

Contents

Overview

Let's Code

Update the Vault Type

Create Passcode workflow

A PIN Entry Workflow

Create a PIN Entry Component

Hook Up the Modal

Advanced Implementations

Custom Passcode Entry

Using with a `Device` Vault

Best Practices

Favor `Device` Vaults

Favor System Passcode Backup