Skip to main content
Version: 3.x

Securing Tokens with Identity Vault

On native devices, Auth Connect defaults to storing all of the data and tokens it needs in localStorage, a key/value storage API that works in all browsers. It provides a simple solution that works across all platforms and allows developers to get up and running as quickly as possible. However, before pushing your application to production, we strongly advise implementing a different token storage provider in order to properly secure tokens and prevent them from being cleared by the device operating system. Auth Connect is designed to work easily with Identity Vault to provide a complete security solution for authentication and storage of logged-in credentials by simply passing an instance of Identity Vault to the tokenStorageProvider configuration option for Auth Connect. Alternatively, you can provide your own storage solution by implementing the TokenStorageProvider interface and providing it to the Auth Connect configuration.

Identity Vault v4​

Angular​

It's recommended to create a Service that encapsulates all Identity Vault logic not only as a best practice, but also since it makes it easy to integrate Auth Connect and Identity Vault together. Within the service, extend the IonicIdentityVaultUser class:


_19
import { Injectable } from '@angular/core';
_19
import { AuthMode, IonicIdentityVaultUser, IonicNativeAuthPlugin, DefaultSession} from '@ionic-enterprise/identity-vault';
_19
import { Platform } from '@ionic/angular';
_19
@Injectable({
_19
providedIn: 'root'
_19
})
_19
export class IdentityService extends IonicIdentityVaultUser<DefaultSession> {
_19
constructor(public platform: Platform) {
_19
// Identity Vault configuration will vary; see IV docs
_19
super(platform, {
_19
restoreSessionOnReady: false,
_19
unlockOnReady: false,
_19
// Automatically trigger Face Id
_19
unlockOnAccess: true,
_19
lockAfter: 1000,
_19
hideScreenOnBackground: true,
_19
authMode: AuthMode.BiometricAndPasscode
_19
});
_19
}

Next, pass an instance of Identity Vault to Auth Connect's tokenStorageProvider configuration option. After a user has authenticated successfully with their service provider using Auth Connect, tokens are automatically stored securely in Identity Vault.


_17
import { IonicAuth } from '@ionic-enterprise/auth';
_17
import { IdentityService } from './identity.service';
_17
@Injectable({
_17
providedIn: 'root'
_17
})
_17
export class AuthenticationService extends IonicAuth {
_17
constructor(identityService: IdentityService) {
_17
let authConfig: IonicAuthOptions = {
_17
authConfig: 'auth0',
_17
platform: 'capacitor',
_17
// snip - other options
_17
};
_17
_17
// Pass IV instance here
_17
authConfig.tokenStorageProvider = identityService;
_17
super(authConfig);
_17
}

React​

Coming Soon...

Identity Vault v5+​

Identity Vault version 5 and above offers a simpler API.

Angular​

It's recommended to create a Service that encapsulates all Identity Vault logic not only as a best practice, but also since it makes it easy to integrate Auth Connect and Identity Vault together. Within the service, initialize the Vault object with various configuration options:


_24
import { Injectable } from '@angular/core';
_24
import { Vault } from '@ionic-enterprise/identity-vault';
_24
export interface VaultServiceState {
_24
session: string;
_24
}
_24
@Injectable({
_24
providedIn: 'root'
_24
})
_24
export class VaultService {
_24
vault: Vault;
_24
constructor() {
_24
this.init();
_24
}
_24
async init() {
_24
this.vault = new Vault({
_24
key: 'io.ionic.getstartedivangular',
_24
type: 'SecureStorage',
_24
deviceSecurityType: 'SystemPasscode',
_24
lockAfterBackgrounded: 2000,
_24
shouldClearVaultAfterTooManyFailedAttempts: true,
_24
customPasscodeInvalidUnlockAttempts: 2,
_24
unlockVaultOnLoad: false,
_24
});
_24
}

Next, pass an instance of Identity Vault to Auth Connect's tokenStorageProvider configuration option. After a user has authenticated successfully with their service provider using Auth Connect, tokens are automatically stored securely in Identity Vault.


_17
import { IonicAuth } from '@ionic-enterprise/auth';
_17
import { VaultService } from './vault.service';
_17
@Injectable({
_17
providedIn: 'root'
_17
})
_17
export class AuthenticationService extends IonicAuth {
_17
constructor(vaultService: VaultService) {
_17
let authConfig: IonicAuthOptions = {
_17
authConfig: 'auth0',
_17
platform: 'capacitor',
_17
// snip - other options
_17
};
_17
_17
// Pass IV instance here
_17
authConfig.tokenStorageProvider = vaultService.vault;
_17
super(authConfig);
_17
}

React​

Coming Soon...

Handling Privacy Screens​

Identity Vault provides the option to obscure the screen in app switcher mode through the setHideScreenOnBackground method. This may cause the privacy screen to overlay the web view launched by Auth Connect when logging in.

To prevent this behavior, programmatically disable the option to obscure the screen, wait for Auth Connect’s login method to resolve, then re-enable the option:


_10
await Device.setHideScreenOnBackground(false);
_10
await myAuthService.login();
_10
await Device.setHideScreenOnBackground(true);

Contents