Ionic

https://ionic.io/docs
Admin
Ionic is a platform for building and deploying modern mobile applications and micro frontend...
Tokens:868,467
Snippets:8,310
Trust Score:10
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install Auth Connect and Sync Platforms

Source: https://ionic.io/docs/auth-connect/5.0/tutorials/angular/getting-started

Installs the Auth Connect package using npm after registering the product key (which creates a .npmrc file). It then synchronizes the native platforms with the project.

```bash
ionic enterprise register
npm install @ionic-enterprise/auth
npx cap sync
```

--------------------------------

### Install Ionic Portals for Web Projects via NPM

Source: https://ionic.io/docs/portals/for-android/guide

Installs the Ionic Portals SDK for your web project using NPM. This command fetches version 0.12.0 of the `@ionic/portals` package and adds it to your project's dependencies. Make sure you have Node.js and NPM installed.

```bash
npm install @ionic/portals@0.12.0  

```

--------------------------------

### Install Capacitor Preferences and Generate Service

Source: https://ionic.io/docs/auth-connect/5.0/tutorials/angular/getting-started

Commands to install the necessary Capacitor plugin for local storage and to generate a new service file for managing the session state.

```bash
npm install @capacitor/preferences  
ionic generate service core/session  
```

--------------------------------

### Install Identity Vault plugin and sync platforms

Source: https://ionic.io/docs/identity-vault/5.0/react/getting-started

Installs the @ionic-enterprise/identity-vault package and synchronizes Capacitor native projects. Ensure the product key is registered via `ionic enterprise register` before running these commands.

```bash
npm install @ionic-enterprise/identity-vault\nnpx cap sync
```

--------------------------------

### Initialize Auth Connect Setup

Source: https://ionic.io/docs/auth-connect/next/tutorials/vue/getting-started

This TypeScript composable initializes Auth Connect with Auth0 provider options and setup. It handles platform detection for native or web and configures auth options. The output is an initialization function that sets up the auth environment.

```typescript
import { Capacitor } from '@capacitor/core';
import {
  Auth0Provider,
  AuthConnect,
  AuthResult,
  ProviderOptions,
} from '@ionic-enterprise/auth';

const isNative = Capacitor.isNativePlatform();
const provider = new Auth0Provider();
let authResult: AuthResult | null = null;

const authOptions: ProviderOptions = {
  audience: 'https://io.ionic.demo.ac',
  clientId: 'yLasZNUGkZ19DGEjTmAITBfGXzqbvd00',
  discoveryUrl:
    'https://dev-2uspt-sz.us.auth0.com/.well-known/openid-configuration',
  logoutUrl: isNative
    ? 'io.ionic.acdemo://auth-action-complete'
    : 'http://localhost:8100/auth-action-complete',
  redirectUri: isNative
    ? 'io.ionic.acdemo://auth-action-complete'
    : 'http://localhost:8100/auth-action-complete',
  scope: 'openid offline_access email picture profile',
};

export const useAuthentication = () => ({
  initializeAuthentication: async (): Promise<void> =>
    AuthConnect.setup({
      platform: isNative ? 'capacitor' : 'web',
      logLevel: 'DEBUG',
      ios: {
        webView: 'private',
      },
      web: {
        uiMode: 'popup',
        authFlow: 'PKCE',
      },
    }),
});
```

--------------------------------

### Initialize Authentication Utilities in TypeScript

Source: https://ionic.io/docs/auth-connect/5.0/tutorials/react/getting-started

Sets up platform detection using Capacitor for Auth Connect configuration. Differentiates between native (iOS/Android) and web contexts for provider setup. Exports setup function for one-time initialization with Auth0 or similar vendors.

```typescript
import { Capacitor } from '@capacitor/core';

const isNative = Capacitor.isNativePlatform();
```

--------------------------------

### Generate Ionic Angular App and Install Platforms

Source: https://ionic.io/docs/auth-connect/5.0/tutorials/angular/getting-started

Scaffolds a new Ionic Angular tabs-based application, changes directory, updates the appId, and installs iOS and Android platforms. It also configures package.json scripts for development server and sync commands.

```bash
ionic start getting-started-ac tabs --type=angular-standalone
cd getting-started-ac
# Update appId in capacitor.config.ts or similar
ionic build
iOS: ionic cap add ios
Android: ionic cap add android
cap sync
# Update scripts in package.json for dev server and sync
```

--------------------------------

### Authentication Service Setup (Angular)

Source: https://ionic.io/docs/auth-connect/5.0/tutorials/angular/getting-started

An Angular service that provides a basic structure for Auth Connect integration. It includes an Injectable decorator for dependency injection and a constructor. This is a starting point for setting up and initializing Auth Connect.

```typescript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class AuthenticationService {
  constructor() {}
  // ... setup and initialization logic will go here
}
```

--------------------------------

### Install Identity Vault Package and Update Capacitor

Source: https://ionic.io/docs/identity-vault/getting-started-react

Installs the @ionic-enterprise/identity-vault package and updates Capacitor to ensure proper integration with native platforms. Requires prior product key registration and .npmrc file configuration for enterprise packages.

```bash
npm install @ionic-enterprise/identity-vault
npx cap update
```

--------------------------------

### Scaffold Ionic Vue App with CLI

Source: https://ionic.io/docs/auth-connect/next/tutorials/vue/getting-started

Use the Ionic CLI to generate a new tabs-based Vue application. This command initializes the project structure and installs necessary dependencies for a Vue project.

```bash
ionic start getting-started-ac tabs --type=vue
```

--------------------------------

### Install Ionic Enterprise Auth Connect

Source: https://ionic.io/docs/auth-connect/4.0/framework-guides/angular

Adds the Auth Connect package for enterprise authentication in Ionic apps. Requires .npmrc with product key from ionic enterprise register. npm install command; inputs registry auth, outputs plugin for login/logout/token handling. Sync platforms after install.

```shell
npm install @ionic-enterprise/auth
```

--------------------------------

### Generate Ionic React Tabs Application

Source: https://ionic.io/docs/auth-connect/5.0/tutorials/react/getting-started

Scaffolds a new Ionic React tabs template using the CLI. Requires Ionic CLI installation. Outputs a project directory for further configuration; no inputs beyond command parameters.

```bash
ionic start getting-started-ac tabs --type=react
```

--------------------------------

### Setup Ionic Auth Connect

Source: https://ionic.io/docs/auth-connect/5.0/tutorials/react/getting-started

Configures Ionic Auth Connect for both native (Capacitor) and web platforms. It specifies authentication flow options, logging levels, and platform-specific settings like `ios.webView` and `web.uiMode`. This setup is crucial for enabling secure authentication within the application.

```typescript
import { Capacitor } from '@capacitor/core';
import {
  Auth0Provider,
  AuthConnect,
  ProviderOptions,
} from '@ionic-enterprise/auth';
import { getSnapshot, setSession } from './session-store';

const isNative = Capacitor.isNativePlatform();
const provider = new Auth0Provider();

const authOptions: ProviderOptions = {
  audience: 'https://io.ionic.demo.ac',
  clientId: 'yLasZNUGkZ19DGEjTmAITBfGXzqbvd00',
  discoveryUrl:
    'https://dev-2uspt-sz.us.auth0.com/.well-known/openid-configuration',
  logoutUrl: isNative
    ? 'io.ionic.acdemo://auth-action-complete'
    : 'http://localhost:8100/auth-action-complete',
  redirectUri: isNative
    ? 'io.ionic.acdemo://auth-action-complete'
    : 'http://localhost:8100/auth-action-complete',
  scope: 'openid offline_access email picture profile',
};

const setupAuthConnect = async (): Promise<void> => {
  return AuthConnect.setup({
    platform: isNative ? 'capacitor' : 'web',
    logLevel: 'DEBUG',
    ios: { webView: 'private' },
    web: { uiMode: 'popup', authFlow: 'PKCE' },
  });
};

export { setupAuthConnect };

```

--------------------------------

### Install Ionic Portals for Web using NPM

Source: https://ionic.io/docs/portals/for-react-native/guide

This command adds the Ionic Portals package to a web project via NPM, enabling portal functionality in web applications. It requires Node.js and NPM installed on the development machine. The installation specifies version 0.12.0; after running, import and use the library in JavaScript code.

```bash
npm install @ionic/portals@0.12.0
```

--------------------------------

### Ionic Auth Connect: Authentication Service Setup (TypeScript)

Source: https://ionic.io/docs/auth-connect/next/tutorials/angular/getting-started

Sets up the AuthenticationService to manage authentication states and tokens using Ionic Auth Connect. It initializes necessary providers and options, storing authentication results for subsequent requests. Dependencies include '@ionic-enterprise/auth' and '@capacitor/core'.

```typescript
import { Injectable } from '@angular/core';
import {
  Auth0Provider,
  AuthConnect,
  AuthResult,
  ProviderOptions,
} from '@ionic-enterprise/auth';
import { Capacitor } from '@capacitor/core';

@Injectable({
  providedIn: 'root',
})
export class AuthenticationService {
  private authOptions: ProviderOptions;
  private authResult: AuthResult | null = null;
  private provider: Auth0Provider;
  private isReady: Promise<void>;

  constructor() {
    // existing constructor code cut for brevity, do not remove in your code
  }
}
```

--------------------------------

### Execute Portals Sync Command

Source: https://ionic.io/docs/portals/appflow/native/getting-started

Runs the portals sync CLI command to download web bundles from Ionic Appflow based on the .portals.yaml configuration. Executes the synchronization process and populates the specified directory with the latest web bundle. Must be run from the directory containing the configuration file.

```bash
portals sync
```

--------------------------------

### Generate Ionic Angular Application with Capacitor

Source: https://ionic.io/docs/identity-vault/getting-started-angular

This command initializes a new blank Ionic Angular standalone application with Capacitor integration. It requires the Ionic CLI to be installed. Outputs a project directory named 'getting-started-iv-angular' ready for mobile development. No specific limitations beyond CLI prerequisites.

```bash
ionic start getting-started-iv-angular blank --type=angular-standalone --capacitor
```

--------------------------------

### Setup AuthConnect and Provider Options in TypeScript

Source: https://ionic.io/docs/auth-connect/6.0/tutorials/react/getting-started

Initialises the Auth0 provider and defines authentication options such as audience, clientId, and URLs. Provides an async setupAuthConnect function that configures AuthConnect for native (Capacitor) or web platforms with debug logging and PKCE flow. Exported for use throughout the Ionic app.

```TypeScript
import { Capacitor } from '@capacitor/core';
import {
  Auth0Provider,
  AuthConnect,
  ProviderOptions,
} from '@ionic-enterprise/auth';
import { getSnapshot, setSession } from './session-store';

const isNative = Capacitor.isNativePlatform();
const provider = new Auth0Provider();

const authOptions: ProviderOptions = {
  audience: 'https://io.ionic.demo.ac',
  clientId: 'yLasZNUGkZ19DGEjTmAITBfGXzqbvd00',
  discoveryUrl:
    'https://dev-2uspt-sz.us.auth0.com/.well-known/openid-configuration',
  logoutUrl: isNative
    ? 'io.ionic.acdemo://auth-action-complete'
    : 'http://localhost:8100/auth-action-complete',
  redirectUri: isNative
    ? 'io.ionic.acdemo://auth-action-complete'
    : 'http://localhost:8100/auth-action-complete',
  scope: 'openid offline_access email picture profile',
};

const setupAuthConnect = async (): Promise<void> => {
  return AuthConnect.setup({
    platform: isNative ? 'capacitor' : 'web',
    logLevel: 'DEBUG',
    ios: { webView: 'private' },
    web: { uiMode: 'popup', authFlow: 'PKCE' },
  });
};

export { setupAuthConnect };
```

--------------------------------

### Install Auth Connect for Capacitor

Source: https://ionic.io/docs/auth-connect/6.0/install

Installs the Ionic Enterprise Auth Connect plugin for Capacitor projects. Requires npm and Capacitor to be set up. After installation, run 'npx cap sync' to update native projects.

```bash
npm install @ionic-enterprise/auth@6
npx cap sync
```

--------------------------------

### Install Capacitor Plugin and Sync

Source: https://ionic.io/docs/premier-plugins/setup

Installs an Ionic Enterprise plugin for a Capacitor project and synchronizes the project to update native configurations. Assumes Capacitor is already installed.

```bash
npm install @ionic-enterprise/plugin-name
npx cap sync
```

--------------------------------

### Generate Ionic React Application with CLI

Source: https://ionic.io/docs/identity-vault/getting-started-react

Creates a new Ionic React application using the Ionic CLI with the blank template and React type. This command initializes the project structure and installs necessary dependencies for an Ionic React app.

```bash
ionic start getting-started-iv-react blank --type=react
```

--------------------------------

### Install Device plugin with Capacitor

Source: https://ionic.io/docs/supported-plugins/device

Installs the Device plugin using npm for Capacitor projects. Requires Ionic Enterprise setup. Syncs the plugin after installation.

```bash
npm install @ionic-enterprise/device  
npx cap sync  
```

--------------------------------

### Start New Ionic App

Source: https://ionic.io/docs/premier-plugins/setup

Creates a new local Ionic application. Prompts the user for app name, preferred JavaScript framework, and template.

```bash
ionic start
```

--------------------------------

### Install Auth Connect for Capacitor

Source: https://ionic.io/docs/auth-connect/5.0/install

Installs the Auth Connect plugin for Capacitor projects. Requires prior setup of Ionic Enterprise. After installation, configure custom URL scheme or deep linking for authentication redirects.

```bash
npm install @ionic-enterprise/auth@5
npx cap sync
```

--------------------------------

### Install Identity Vault Package

Source: https://ionic.io/docs/auth-connect/framework-guides/angular

Installs the necessary Identity Vault package for Ionic Enterprise. This is the first step to enable secure storage for authentication results.

```bash
npm i @ionic-enterprise/identity-vault  
```

--------------------------------

### Build and Open Native Projects with Capacitor

Source: https://ionic.io/docs/auth-connect/5.0/tutorials/react/getting-started

Commands to build the web application and open the native Android and iOS projects using Capacitor. These are essential steps before configuring native settings.

```bash
npm run build

npx cap open android

npx cap open ios
```

--------------------------------

### Install Auth Connect and Sync Platforms

Source: https://ionic.io/docs/auth-connect/3.x/getting-started-vue

These commands install the Ionic Auth Connect package and sync the platforms, requiring a product key in .npmrc. The output installs the library and updates native platforms with the new dependencies.

```bash
npm install @ionic-enterprise/auth
ionic cap sync
```

--------------------------------

### Install Identity Vault and Sync Capacitor Platforms (Bash)

Source: https://ionic.io/docs/auth-connect/3.x/getting-started-vue

Command-line instructions to add the Identity Vault package to the project and synchronize Capacitor platforms, preparing the environment for secure token storage integration.

```Bash
npm i @ionic-enterprise/identity-vault\nionic cap sync
```

--------------------------------

### Install Identity Vault - npm

Source: https://ionic.io/docs/auth-connect/4.0/framework-guides/angular

This snippet shows the npm command to install the Identity Vault package. It's a prerequisite for implementing secure storage in the Ionic application.

```bash
npm i @ionic-enterprise/identity-vault
```

--------------------------------

### Build and Open Native Projects (Ionic CLI)

Source: https://ionic.io/docs/auth-connect/5.0/tutorials/angular/getting-started

Commands to build the Ionic application for native deployment and open the respective native projects in Android Studio and Xcode.

```bash
npm run build
npx cap open android
npx cap open ios
```

--------------------------------

### Initialize Session Composable in Ionic

Source: https://ionic.io/docs/auth-connect/next/tutorials/vue/getting-started

This snippet shows the initial setup for a session composable that will use Capacitor Preferences to manage session persistence. It's a starting point for implementing session management.

```TypeScript
export const useSession = () => ({});
```

--------------------------------

### Configure Portals CLI via YAML

Source: https://ionic.io/docs/portals/appflow/native/getting-started

Creates the .portals.yaml configuration file that specifies which Ionic Appflow apps to synchronize. Defines the app ID, Live Update channel, target directory, and authentication token required for portals sync command execution. Requires valid Appflow credentials and proper directory permissions.

```yaml
sync:
  - app-id: 11a0971f
    channel: production
    directory-name: portals/debug
token: ion_XXXXXXXXXXXXX
```

--------------------------------

### Install Ionic Secure Storage

Source: https://ionic.io/docs/enterprise-starter/secure-storage

Demonstrates the installation of Ionic Secure Storage in an Ionic project using npm.

```bash
npm install @ionic-enterprise/secure-storagenpx cap sync
```

--------------------------------

### Install Ionic CLI

Source: https://ionic.io/docs/premier-plugins/setup

Installs the latest version of the Ionic Command Line Interface globally. This is a prerequisite for managing Ionic projects and running Ionic commands.

```bash
npm install -g @ionic/cli
```

--------------------------------

### Build and Add Mobile Platforms

Source: https://ionic.io/docs/auth-connect/3.x/getting-started-vue

These commands build the Vue app and add iOS and Android platforms using Ionic Capacitor. They require the app to be built first and Capacitor to be configured. The output adds platform directories for native builds.

```bash
npm run build
ionic cap add android
ionic cap add ios
```

--------------------------------

### Add AuthActionCompletePage route in Ionic React Router

Source: https://ionic.io/docs/auth-connect/5.0/tutorials/react/getting-started

Demonstrates how to add the AuthActionCompletePage to the application's routing configuration within an Ionic React Tabs setup.

```TypeScript
import { Redirect, Route } from 'react-router-dom';
import {
  IonApp,
  IonIcon,
  IonLabel,
  IonRouterOutlet,
  IonTabBar,
  IonTabButton,
  IonTabs,
  setupIonicReact,
} from '@ionic/react';
import { IonReactRouter } from '@ionic/react-router';
import { ellipse, square, triangle } from 'ionicons/icons';
import AuthActionCompletePage from './pages/AuthActionCompletePage';
import Tab1 from './pages/Tab1';
import Tab2 from './pages/Tab2';
import Tab3 from './pages/Tab3';

/* Core CSS required for Ionic components to work properly */
import '@ionic/react/css/core.css';

/* Basic CSS for apps built with Ionic */
import '@ionic/react/css/normalize.css';
import '@ionic/react/css/structure.css';
import '@ionic/react/css/typography.css';

/* Optional CSS utils that can be commented out */
import '@ionic/react/css/padding.css';
import '@ionic/react/css/float-elements.css';
import '@ionic/react/css/text-alignment.css';
import '@ionic/react/css/text-transformation.css';
import '@ionic/react/css/flex-utils.css';
import '@ionic/react/css/display.css';

/* Theme variables */
import './theme/variables.css';

setupIonicReact();

const App: React.FC = () => (
  <IonApp>
    <IonReactRouter>
      <IonTabs>
        <IonRouterOutlet>
          <Route exact path="/tab1">
            <Tab1 />
          </Route>
          <Route exact path="/tab2">
            <Tab2 />
          </Route>
          <Route path="/tab3">
            <Tab3 />
          </Route>
          <Route path="/auth-action-complete">
            <AuthActionCompletePage />
          </Route>
          <Route exact path="/">
            <Redirect to="/tab1" />
          </Route>
        </IonRouterOutlet>
        <IonTabBar slot="bottom">
          <IonTabButton tab="tab1" href="/tab1">
            <IonIcon aria-hidden="true" icon={triangle} />
            <IonLabel>Tab 1</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab2" href="/tab2">
            <IonIcon aria-hidden="true" icon={ellipse} />
            <IonLabel>Tab 2</IonLabel>
          </IonTabButton>
          <IonTabButton tab="tab3" href="/tab3">
            <IonIcon aria-hidden="true" icon={square} />
            <IonLabel>Tab 3</IonLabel>
          </IonTabButton>
        </IonTabBar>
      </IonTabs>
    </IonReactRouter>
  </IonApp>
);

export default App;
```

--------------------------------

### Register Product Key

Source: https://ionic.io/docs/premier-plugins/setup

Registers a product key to the current Ionic app. This command generates a `.npmrc` file and updates `ionic.config.json`, enabling access to enterprise plugins. Run this within the app's directory.

```bash
cd myApp
ionic enterprise register
```

--------------------------------

### Auth Connect Configuration Boilerplate in Vue

Source: https://ionic.io/docs/auth-connect/4.0/framework-guides/vue

Vue composable setup in `src/composables/auth.ts` for Auth Connect. Includes basic `ProviderOptions` and a placeholder `useAuth` function.

```typescript
import { ProviderOptions } from '@ionic-enterprise/auth';
import { isPlatform } from '@ionic/vue';

const isNative = isPlatform('hybrid');

const options: ProviderOptions = {
  clientId: '',
  discoveryUrl: '',
  scope: 'openid offline_access',
  audience: '',
  redirectUri: isNative ? '' : '',
  logoutUrl: isNative ? '' : '',
};

export const useAuth = () => ({});

```

--------------------------------

### Initialize Auth Connect and Auth0Provider - TypeScript

Source: https://ionic.io/docs/auth-connect/5.0/framework-guides/react

Initializes Auth Connect with platform-specific settings and creates an Auth0Provider instance. Includes React context provider setup with async initialization and state management to ensure setup completion before child component rendering.

```typescript
import { AuthConnect, ProviderOptions, Auth0Provider } from '@ionic-enterprise/auth';
import { isPlatform } from '@ionic/react';
import { PropsWithChildren, createContext, useState, useEffect } from 'react';

const isNative = isPlatform('hybrid');

const options: ProviderOptions = {
  // see the options setting above
};

const setupAuthConnect = async (): Promise<void> => {
  return AuthConnect.setup({
    platform: isNative ? 'capacitor' : 'web',
    logLevel: 'DEBUG',
    ios: { webView: 'private' },
    web: { uiMode: 'popup', authFlow: 'implicit' },
  });
};

export const AuthContext = createContext<{}>({});

const provider = new Auth0Provider();

export const AuthProvider: React.FC<PropsWithChildren> = ({ children }) => {
  const [isSetup, setIsSetup] = useState<boolean>(false);

  useEffect(() => {
    setupAuthConnect().then(() => setIsSetup(true));
  }, []);

  return <AuthContext.Provider value={{}}>{isSetup && children}</AuthContext.Provider>;
};
```

--------------------------------

### Generate Ionic Vue Application with Tabs

Source: https://ionic.io/docs/auth-connect/3.x/getting-started-vue

This command generates a new Ionic Vue application with a tabs template using the Ionic CLI. It requires Node.js and the Ionic CLI to be installed. The output is a new project directory with Vue setup.

```bash
ionic start getting-started-ac-vue tabs --type=vue
```

--------------------------------

### Configure Vault with SecureStorage in TypeScript

Source: https://ionic.io/docs/identity-vault/getting-started-angular

Initializes a vault configuration with SecureStorage type, specifying settings like lock timeout and passcode attempts. This is typically done during vault setup.

```TypeScript
const config: IdentityVaultConfig = {  
  key: 'io.ionic.getstartedivangular',  
  type: VaultType.SecureStorage,  
  deviceSecurityType: DeviceSecurityType.None,  
  lockAfterBackgrounded: 2000,  
  shouldClearVaultAfterTooManyFailedAttempts: true,  
  customPasscodeInvalidUnlockAttempts: 2,  
  unlockVaultOnLoad: false,  
};
```

--------------------------------

### AuthenticationService Implementation (Angular)

Source: https://ionic.io/docs/auth-connect/next/tutorials/angular/getting-started

Basic Angular service structure for Auth Connect. It includes the necessary @Injectable decorator and a constructor. This service will be extended to handle Auth Connect setup and initialization.

```typescript
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class AuthenticationService {
  constructor() {}
}
```

--------------------------------

### Update Build Script with Cap Copy

Source: https://ionic.io/docs/auth-connect/3.x/getting-started-vue

This updates the package.json scripts to include 'cap copy' after the Vue build, ensuring assets are copied to platforms. It requires Vue and Capacitor to be set up. The output is an updated npm script for automated building.

```json
{
  "scripts": {
    "build": "vue-cli-service build && cap copy",
    ...
  }
}
```

--------------------------------

### Setup session vault utilities imports

Source: https://ionic.io/docs/identity-vault/5.0/react/getting-started

Imports necessary functions and types into the session‑vault utility file, preparing it for later implementation of vault operations such as saving and retrieving the session.

```typescript
import { createVault } from './vault-factory';\nimport { Session } from '../models/Session';\nimport { setState } from './session-store';
```

--------------------------------

### Build and Open Native Projects in Ionic

Source: https://ionic.io/docs/auth-connect/6.0/tutorials/react/getting-started

These commands are used to build the Ionic application for mobile deployment and then open the native project files in their respective IDEs (Android Studio for Android, Xcode for iOS). This is a common workflow for mobile development with Ionic Capacitor.

```bash
1
npm run build

2
npx cap open android

3
npx cap open ios
```

--------------------------------

### Install Ionic Portals for React Native using NPM

Source: https://ionic.io/docs/portals/for-react-native/guide

This command installs the React Native-specific Ionic Portals package via NPM, allowing integration of portals into mobile apps. Node.js and NPM are prerequisites, and React Native 0.75.4 or later is required. Post-installation, configure and register the API key before rendering portals.

```bash
npm install @ionic/portals-react-native@0.8.0
```

--------------------------------

### Configure Identity Vault: TypeScript

Source: https://ionic.io/docs/identity-vault/getting-started-react

Defines the configuration for the Ionic Identity Vault, specifying the vault key, type, device security type, and other security-related settings. This configuration is used during the initial setup of the vault.

```typescript
const config: IdentityVaultConfig = {
  key: 'io.ionic.getstartedivreact',
  type: VaultType.SecureStorage,
  deviceSecurityType: DeviceSecurityType.None,
  lockAfterBackgrounded: 2000,
  shouldClearVaultAfterTooManyFailedAttempts: true,
  customPasscodeInvalidUnlockAttempts: 2,
  unlockVaultOnLoad: false
};
```

--------------------------------

### Install Identity Vault Package and Sync Platforms (Shell)

Source: https://ionic.io/docs/auth-connect/getting-started-vue

Installs the @ionic-enterprise/identity-vault NPM package for secure token storage and syncs Capacitor platforms to apply changes. Required before using vault in production apps. Inputs: none; Outputs: installed dependencies; run in project root.

```shell
npm i @ionic-enterprise/identity-vault
ionic cap sync
```

--------------------------------

### Vue Script Setup for Session Management

Source: https://ionic.io/docs/identity-vault/5.0/vue/getting-started

Sets up the script section for Tab1Page.vue, importing necessary Ionic components and the `useSessionVault` composable. It exposes `clearSession`, `getSession`, and `storeSession` functions and a `session` ref for use in the template.

```javascript
<script setup lang="ts">
import {
  IonButton,
  IonContent,
  IonItem,
  IonLabel,
  IonList,
  IonPage,
  IonHeader,
  IonTitle,
  IonToolbar,
} from '@ionic/vue';
import { ref } from 'vue';
import { useSessionVault } from '@/composables/session-vault';
import { Session } from '@/models/session';

const { clearSession, getSession, storeSession } = useSessionVault();
const session = ref<Session>();

const storeClicked = async (): Promise<void> => {
  await storeSession({
    email: 'test@ionic.io',
    firstName: 'Tessa',
    lastName: 'Testsmith',

```

--------------------------------

### Setup authentication observable in AuthService (Angular/TypeScript)

Source: https://ionic.io/docs/auth-connect/5.0/framework-guides/angular

Adds a BehaviorSubject to broadcast authentication changes and exposes it as an observable. The service updates the subject on login, logout, and initialization. This enables other components to react to authentication state changes.

```typescript
import { Injectable, NgZone } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { Platform } from '@ionic/angular';
import { AuthConnect, AuthResult, TokenType } from 'auth-connect'; // assumed imports

@Injectable({
  providedIn: 'root'
})
export class AuthService {
  private authenticationChange: BehaviorSubject<boolean> = new BehaviorSubject(false);
  public authenticationChange$: Observable<boolean>;
  private authResult: AuthResult | null = null;
  private isNative: boolean;
  private authOptions: any;
  private provider: any;

  constructor(platform: Platform, private ngZone: NgZone) {
    this.isNative = platform.is('hybrid');
    this.authOptions = { /* ... */ };
    this.initialize();
    this.authenticationChange$ = this.authenticationChange.asObservable();
    this.isAuthenticated().then(authenticated => this.onAuthChange(authenticated));
  }

  public async login(): Promise<void> {
    await this.initialize();
    this.authResult = await AuthConnect.login(this.provider, this.authOptions);
    this.onAuthChange(await this.isAuthenticated());
  }

  public async logout(): Promise<void> {
    await this.initialize();
    if (this.authResult) {
      await AuthConnect.logout(this.provider, this.authResult);
      this.authResult = null;
      this.onAuthChange(await this.isAuthenticated());
    }
  }

  private async onAuthChange(isAuthenticated: boolean): Promise<void> {
    this.ngZone.run(() => {
      this.authenticationChange.next(isAuthenticated);
    });
  }

  public async getAuthResult(): Promise<AuthResult | null> {
    return this.authResult;
  }

  public async isAuthenticated(): Promise<boolean> {
    await this.initialize();
    return !!(await this.getAuthResult());
  }

  // Token helper methods (added later)
  public async getAccessToken(): Promise<string | undefined> {
    await this.initialize();
    const res = await this.getAuthResult();
    return res?.accessToken;
  }

  public async getUserName(): Promise<string | undefined> {
    await this.initialize();
    const res = await this.getAuthResult();
    if (res) {
      const data = (await AuthConnect.decodeToken(TokenType.id, res)) as { name: string };
      return data?.name;
    }
    return undefined;
  }
}
```

--------------------------------

### Update Unlock Mode in React with Ionic

Source: https://ionic.io/docs/identity-vault/5.0/react/getting-started

This code demonstrates how to update the unlock mode using the `updateUnlockMode` function in a React component with Ionic. The example uses 'BiometricsWithPasscode', 'InMemory', or 'SecureStorage' as unlock modes.

```typescript
import { IonButton } from '@ionic/react';
import { updateUnlockMode } from '../util/session-vault';

<IonButton expand="block" color="secondary" onClick={() => updateUnlockMode('BiometricsWithPasscode')}>Use Biometrics</IonButton>
```

--------------------------------

### Generate Ionic React tabs application

Source: https://ionic.io/docs/identity-vault/5.0/react/getting-started

Uses the Ionic CLI to scaffold a new React tabs project. This command initializes the project structure and installs required dependencies. Run it in a terminal before adding any platforms.

```bash
ionic start iv-getting-started tabs --type=react
```
Tokens:
Raw