10. REL-ID Update Password Flow - React Native Codelab

🎯 Learning Path:

Complete REL-ID Complete Activation & Login Flow Codelab
Complete REL-ID Additional Device Activation Flow Codelab
You are here → Update Password Flow Implementation (Post-Login)

Welcome to the REL-ID Update Password codelab! This tutorial builds upon your existing MFA implementation to add secure user-initiated password update capabilities using REL-ID SDK's credential management APIs.

What You'll Build

In this codelab, you'll enhance your existing MFA application with:

🔐 Post-Login Password Update: User-initiated password change from dashboard with challengeMode = 2 (RDNA_OP_UPDATE_CREDENTIALS)
📋 Credential Availability Detection: Automatic detection using getAllChallenges() API and onCredentialsAvailableForUpdate event
🎯 Conditional Menu Display: Show "Update Password" only when credential is available for update
📝 Three-Field Password Form: Current password, new password, and confirm password validation with keyboard management
🔄 Screen-Level Event Handling: Proper onUpdateCredentialResponse event handling with cleanup
⚠️ SDK Event Chain Management: Handle automatic onUserLoggedOff → getUser events for status codes 110/153

What You'll Learn

By completing this codelab, you'll master:

Credential Availability Check: Post-login detection using getAllChallenges() API
Update Flow Initiation: Triggering password update with initiateUpdateFlowForCredential('Password') API
Drawer Navigation Integration: Conditional menu item rendering based on credential availability
UpdatePassword API Integration: Implementing updatePassword(current, new, 2) with challengeMode 2
Password Policy Extraction: Parsing RELID_PASSWORD_POLICY from challenge data
Screen-Level Event Management: onUpdateCredentialResponse handler with proper cleanup
SDK Event Chain Handling: Managing automatic logout events for specific status codes
Keyboard Management: Proper KeyboardAvoidingView implementation for multi-field forms

Prerequisites

Before starting this codelab, ensure you have:

✅ Completed REL-ID MFA Complete Activation & Login Flow Codelab - All MFA screens and flows must be fully implemented
✅ React Native Development Environment - Android Studio, Xcode, and React Native CLI configured
✅ REL-ID SDK Integration - Latest SDK with credential management APIs
✅ TypeScript Knowledge - Understanding of TypeScript interfaces and type safety patterns
✅ Drawer Navigation Setup - DrawerNavigator configured with Dashboard screen
✅ Server Configuration - REL-ID server with password update credential enabled

Get the Code from GitHub

The code to get started can be found in a GitHub repository.

You can clone the repository using the following command:

git clone https://github.com/uniken-public/codelab-react-native.git

Navigate to the relid-MFA-update-password folder in the repository you cloned earlier

Codelab Architecture Overview

This codelab extends your MFA application with five core password update components:

UpdatePasswordScreen: Three-field password form with policy display and keyboard management in drawer navigation
Credential Availability Detection: getAllChallenges() API integration after login with onCredentialsAvailableForUpdate event handler
Update Flow Initiation: initiateUpdateFlowForCredential('Password') API to trigger password update from drawer menu
Conditional Menu Rendering: Dynamic drawer menu based on onCredentialsAvailableForUpdate event
Screen-Level Event Handling: onUpdateCredentialResponse handler with automatic cleanup and SDK event chain management

Before implementing password update functionality, let's understand the key SDK events and APIs that power the user-initiated password update workflow (post-login).

Update Password Event Flow

The password update process follows this event-driven pattern:

User Logs In Successfully → getAllChallenges() Called →
onCredentialsAvailableForUpdate Event → Drawer Menu Shows "Update Password" →
User Taps Menu Item → initiateUpdateFlowForCredential('Password') →
getPassword Event (challengeMode=2) → UpdatePasswordScreen Displays →
User Updates Password → updatePassword(current, new, 2) →
onUpdateCredentialResponse (statusCode 110/153) →
SDK Triggers onUserLoggedOff → getUser Event → Navigation to Login

Challenge Mode 2 vs Challenge Mode 4

It's crucial to understand the difference between user-initiated update and password expiry:

Challenge Mode	Use Case	Trigger	User Action	Screen Location
`challengeMode = 2`	User-initiated password update (post-login)	User taps "Update Password" menu	Provide current + new password	DrawerNavigator
`challengeMode = 4`	Password expiry during login	Server detects expired password	Provide current + new password	Stack Navigator
`challengeMode = 0`	Password verification for login	User attempts to log in	Enter password	Stack Navigator
`challengeMode = 1`	Set new password during activation	First-time activation	Create password	Stack Navigator

Credential Availability Detection Flow

Post-login password update requires credential availability check:

Step	API/Event	Description
1. User Login	`onUserLoggedIn` event	User successfully completes MFA login
2. Credential Check	`getAllChallenges(username)` API	Check which credentials are available for update
3. Availability Event	`onCredentialsAvailableForUpdate` event	SDK returns array of updatable credentials (e.g., `["Password"]`)
4. Menu Display	Conditional rendering	Show "Update Password" menu item if `options` includes "Password"
5. User Initiates	`initiateUpdateFlowForCredential('Password')` API	User taps menu item to start update flow
6. SDK Triggers	`getPassword` event with `challengeMode = 2`	SDK requests password update
7. Screen Display	UpdatePasswordScreen	Show three-field password form in drawer

Core Update Password APIs and Events

The REL-ID SDK provides these APIs and events for password update:

API/Event	Type	Description	User Action Required
`getAllChallenges(username)`	API	Check available credential updates after login	System calls automatically
`onCredentialsAvailableForUpdate`	Event	Receives array of updatable credentials	System stores in context
`initiateUpdateFlowForCredential(type)`	API	Initiate update flow for specific credential	User taps menu item
`getPassword` (challengeMode=2)	Event	Password update request with policy	User provides passwords
`updatePassword(current, new, 2)`	API	Submit password update	User submits form
`onUpdateCredentialResponse`	Event	Password update result with status codes	System handles response

Password Policy Extraction

Password update flow uses the standard policy key:

Flow	Policy Key	Description
Password Creation (challengeMode=1)	`RELID_PASSWORD_POLICY`	Policy for new password creation
Password Update (challengeMode=2)	`RELID_PASSWORD_POLICY`	Policy for user-initiated password update
Password Expiry (challengeMode=4)	`RELID_PASSWORD_POLICY`	Policy for expired password update

SDK Event Chain - Critical Status Codes

When onUpdateCredentialResponse receives these status codes, the SDK automatically triggers onUserLoggedOff → getUser event chain:

Status Code	Meaning	SDK Behavior	Action Required
`statusCode = 110`	Password has expired while updating	SDK triggers `onUserLoggedOff` → `getUser`	Clear fields, user must re-login
`statusCode = 153`	Attempts exhausted	SDK triggers `onUserLoggedOff` → `getUser`	Clear fields, user logs out
`statusCode = 190`	Password does not meet policy	No automatic logout but triggers `getPassword`	Clear fields, display error

Drawer Navigation vs Stack Navigation

Update Password flow uses DrawerNavigator, not Stack navigation:

Screen	Navigation Type	Reason	Access Method
UpdatePasswordScreen	DrawerNavigator	Post-login feature, conditional access	Menu item in drawer
UpdateExpiryPasswordScreen	Stack Navigator	Login-blocking feature, forced update	Automatic SDK navigation
SetPasswordScreen	Stack Navigator	Activation flow, first-time setup	Automatic SDK navigation
VerifyPasswordScreen	Stack Navigator	Login flow, authentication	Automatic SDK navigation

Screen-Level Event Handler Pattern

Update password uses screen-level event handling with cleanup:

// UpdatePasswordScreen.tsx - Screen-level event handler
useEffect(() => {
  const eventManager = rdnaService.getEventManager();

  // Set handler when screen mounts
  const handleUpdateCredentialResponse = (data: RDNAUpdateCredentialResponseData) => {
    // Process status codes 110, 153
    // SDK will trigger onUserLoggedOff → getUser after this
  };

  eventManager.setUpdateCredentialResponseHandler(handleUpdateCredentialResponse);

  // Cleanup when screen unmounts
  return () => {
    eventManager.setUpdateCredentialResponseHandler(undefined);
  };
}, [navigation]);

Let's implement the credential management APIs in your service layer following established REL-ID SDK patterns.

Step 1: Add getAllChallenges API

Add this method to

src/uniken/services/rdnaService.ts

// src/uniken/services/rdnaService.ts (addition to existing class)

/**
 * Get all available challenges for credential updates
 *
 * This API checks which credentials are available for update after successful login.
 * Call this immediately after onUserLoggedIn event to populate the drawer menu with
 * available credential update options.
 *
 * @see https://developer.uniken.com/docs/getallchallenges
 *
 * Workflow:
 * 1. User logs in successfully (onUserLoggedIn event)
 * 2. Call getAllChallenges(username) immediately after login
 * 3. SDK checks server for available credential updates
 * 4. SDK triggers onCredentialsAvailableForUpdate event
 * 5. Event handler receives options array (e.g., ["Password", "PIN"])
 * 6. App displays conditional menu items in drawer
 *
 * Response Validation Logic:
 * 1. Check error.longErrorCode: 0 = success, > 0 = error
 * 2. On success, triggers onCredentialsAvailableForUpdate event
 * 3. On failure, credentials update unavailable
 * 4. Async event will be handled by SDKEventProvider
 *
 * @param username The username to check credential availability
 * @returns Promise<RDNASyncResponse> that resolves with sync response structure
 */
async getAllChallenges(username: string): Promise<RDNASyncResponse> {
  return new Promise((resolve, reject) => {
    console.log('RdnaService - Getting all challenges for user:', username);

    RdnaClient.getAllChallenges(username, response => {
      console.log('RdnaService - GetAllChallenges sync callback received');
      const result: RDNASyncResponse = response;

      if (result.error && result.error.longErrorCode === 0) {
        console.log('RdnaService - GetAllChallenges sync response success, waiting for onCredentialsAvailableForUpdate event');
        resolve(result);
      } else {
        console.error('RdnaService - GetAllChallenges sync response error:', result);
        reject(result);
      }
    });
  });
}

Step 2: Add initiateUpdateFlowForCredential API

Add this method to

src/uniken/services/rdnaService.ts

// src/uniken/services/rdnaService.ts (addition to existing class)

/**
 * Initiate update flow for a specific credential
 *
 * This API triggers the SDK to start the credential update flow for a specific type.
 * Call this when user taps "Update Password" menu item in drawer.
 * The SDK will respond with getPassword event (challengeMode=2).
 *
 * @see https://developer.uniken.com/docs/initiateupdateflowforcredential
 *
 * Workflow:
 * 1. User taps "Update Password" menu item
 * 2. Call initiateUpdateFlowForCredential('Password')
 * 3. SDK processes request
 * 4. SDK triggers getPassword event with challengeMode=2
 * 5. SDKEventProvider navigates to UpdatePasswordScreen in drawer
 * 6. User provides current and new passwords
 *
 * Response Validation Logic:
 * 1. Check error.longErrorCode: 0 = success, > 0 = error
 * 2. On success, triggers getPassword event with challengeMode=2
 * 3. On failure, update flow cannot be initiated
 * 4. Async event will be handled by SDKEventProvider
 *
 * @param credentialType The credential type to update (e.g., "Password", "PIN")
 * @returns Promise<RDNASyncResponse> that resolves with sync response structure
 */
async initiateUpdateFlowForCredential(credentialType: string): Promise<RDNASyncResponse> {
  return new Promise((resolve, reject) => {
    console.log('RdnaService - Initiating update flow for credential:', credentialType);

    RdnaClient.initiateUpdateFlowForCredential(credentialType, response => {
      console.log('RdnaService - InitiateUpdateFlowForCredential sync callback received');
      const result: RDNASyncResponse = response;

      if (result.error && result.error.longErrorCode === 0) {
        console.log('RdnaService - InitiateUpdateFlowForCredential sync response success, waiting for getPassword event');
        resolve(result);
      } else {
        console.error('RdnaService - InitiateUpdateFlowForCredential sync response error:', result);
        reject(result);
      }
    });
  });
}

Step 3: Add updatePassword API with challengeMode 2

Add this method to

src/uniken/services/rdnaService.ts

// src/uniken/services/rdnaService.ts (addition to existing class)

/**
 * Updates password for user-initiated password update (Post-Login)
 *
 * This method is specifically used for user-initiated password updates after login.
 * When user taps "Update Password" in drawer and enters passwords, this API
 * submits the password update request with challengeMode=2 (RDNA_OP_UPDATE_CREDENTIALS).
 * Uses sync response pattern similar to setPassword() method.
 *
 * @see https://developer.uniken.com/docs/updating-other-credentials
 *
 * Workflow:
 * 1. User taps "Update Password" menu item (post-login)
 * 2. initiateUpdateFlowForCredential('Password') called
 * 3. SDK triggers getPassword with challengeMode=2
 * 4. App displays UpdatePasswordScreen in drawer
 * 5. User provides current and new passwords
 * 6. App calls updatePassword(current, new, 2)
 * 7. SDK validates and updates password
 * 8. SDK triggers onUpdateCredentialResponse event
 * 9. On statusCode 110/153, SDK auto-triggers onUserLoggedOff → getUser
 *
 * Response Validation Logic:
 * 1. Check error.longErrorCode: 0 = success, > 0 = error
 * 2. On success, triggers onUpdateCredentialResponse event
 * 3. On failure, may trigger getPassword again with error status
 * 4. StatusCode 100 = Success
 * 5. StatusCode 110 = Password expired (SDK triggers logout)
 * 6. StatusCode 153 = Attempts exhausted (SDK triggers logout)
 * 7. StatusCode 190 = Policy violation (no automatic logout)
 * 8. Async events will be handled by screen-level handler
 *
 * @param currentPassword The user's current password
 * @param newPassword The new password to set
 * @param challengeMode Challenge mode (should be 2 for RDNA_OP_UPDATE_CREDENTIALS)
 * @returns Promise<RDNASyncResponse> that resolves with sync response structure
 */
async updatePassword(
  currentPassword: string,
  newPassword: string,
  challengeMode: number = 2
): Promise<RDNASyncResponse> {
  return new Promise((resolve, reject) => {
    console.log('RdnaService - Updating password with challengeMode:', challengeMode);

    RdnaClient.updatePassword(currentPassword, newPassword, challengeMode, response => {
      console.log('RdnaService - UpdatePassword sync callback received');
      const result: RDNASyncResponse = response;

      if (result.error && result.error.longErrorCode === 0) {
        console.log('RdnaService - UpdatePassword sync response success, waiting for onUpdateCredentialResponse event');
        resolve(result);
      } else {
        console.error('RdnaService - UpdatePassword sync response error:', result);
        reject(result);
      }
    });
  });
}

Step 4: Verify Service Layer Integration

Ensure these imports exist in

src/uniken/services/rdnaService.ts

import RdnaClient from 'react-native-rdna-client';
import type { RDNASyncResponse } from '../types/rdnaEvents';

Verify your service class exports all methods:

class RdnaService {
  // Existing MFA methods...

  // ✅ New credential management methods
  async getAllChallenges(username: string): Promise<RDNASyncResponse> { /* ... */ }
  async initiateUpdateFlowForCredential(credentialType: string): Promise<RDNASyncResponse> { /* ... */ }
  async updatePassword(currentPassword: string, newPassword: string, challengeMode: number = 2): Promise<RDNASyncResponse> { /* ... */ }
}

export default new RdnaService();

Now let's enhance your SDKEventProvider to handle credential availability detection and password update routing.

Step 1: Add TypeScript Type Definitions

Ensure these types exist in

src/uniken/types/rdnaEvents.ts

// src/uniken/types/rdnaEvents.ts (additions)

/**
 * Credentials Available for Update Event Data
 * Triggered after getAllChallenges() API call
 */
export interface RDNACredentialsAvailableForUpdateData {
  userID: string;
  options: string[]; // Array of updatable credentials: ["Password", "PIN", etc.]
}

/**
 * Update Credential Response Event Data
 * Triggered after updatePassword() API call
 */
export interface RDNAUpdateCredentialResponseData {
  userID: string;
  credType: string; // "Password", "PIN", etc.
  status: {
    statusCode: number; // 100=success, 110=expired, 153=exhausted, 190=policy
    statusMessage: string;
  };
}

// Callback type definitions
export type RDNACredentialsAvailableForUpdateCallback = (data: RDNACredentialsAvailableForUpdateData) => void;
export type RDNAUpdateCredentialResponseCallback = (data: RDNAUpdateCredentialResponseData) => void;

Step 2: Add Event Handlers to rdnaEventManager

Enhance

src/uniken/services/rdnaEventManager.ts

// src/uniken/services/rdnaEventManager.ts (additions)

import type {
  // ... existing types
  RDNACredentialsAvailableForUpdateCallback,
  RDNAUpdateCredentialResponseCallback,
} from '../types/rdnaEvents';

class RdnaEventManager {
  // Existing callbacks...

  // ✅ New callback properties
  public onCredentialsAvailableForUpdateCallback?: RDNACredentialsAvailableForUpdateCallback;
  public onUpdateCredentialResponseCallback?: RDNAUpdateCredentialResponseCallback;

  // ✅ New setter methods
  setCredentialsAvailableForUpdateHandler(handler?: RDNACredentialsAvailableForUpdateCallback): void {
    this.onCredentialsAvailableForUpdateCallback = handler;
    if (handler) {
      RdnaClient.setOnCredentialsAvailableForUpdateListener(handler);
    }
  }

  setUpdateCredentialResponseHandler(handler?: RDNAUpdateCredentialResponseCallback): void {
    this.onUpdateCredentialResponseCallback = handler;
    if (handler) {
      RdnaClient.setOnUpdateCredentialResponseListener(handler);
    }
  }

  cleanup(): void {
    // Existing cleanup...
    this.onCredentialsAvailableForUpdateCallback = undefined;
    this.onUpdateCredentialResponseCallback = undefined;
  }
}