> For the complete documentation index, see [llms.txt](https://docs.caf.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.caf.io/caf-sdk/react-native/migrating-from-cafsdk.md).

# Migrating from CafSdk

Migrate a React Native app from the sequential useCafSdk API to Certta DevX in @caf.io/react-native-sdk 5.4.0. Compare configuration, module launch, and event handling.

{% hint style="warning" %}
This guide covers **@caf.io/react-native-sdk 5.4.0** and above (Certta DevX). For the previous sequential `useCafSdk` flow, see the [legacy documentation](https://docs.caf.io/caf-sdk/react-native/getting-started-with-the-sdk).
{% endhint %}

Starting with **@caf.io/react-native-sdk 5.4.0**, **Certta DevX** (`useCerttaSdk` + per-module `open()`) is the recommended API for new integrations. The sequential `useCafSdk` API remains available in the same package. Existing `initialize` / `startSDK` flows keep working.

This page maps the legacy sequential API to independent module `open()` calls.

## API comparison

| Area              | useCafSdk (legacy)                                                           | Certta DevX (5.4.0+)                                                                            |
| ----------------- | ---------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| Session hook      | `useCafSdk`                                                                  | `useCerttaSdk`                                                                                  |
| Session setup     | `initialize({ configuration, mobileToken, personId, ... })`                  | `configureSDK(CerttaConfiguration)`                                                             |
| Module order      | `presentationOrder` runs Face Liveness and Document Detector in one sequence | Each module is opened independently                                                             |
| Launch            | One `startSDK()` starts the whole pipeline                                   | `useCafFaceLiveness().open`, `useCafDocumentDetector().open`, `useCafDocumentDetectorUI().open` |
| Module config     | `applyCafFaceLiveness` / `applyCafDocumentDetector` before `initialize`      | Pass `CerttaLivenessConfiguration` / `CerttaDocumentDetectorConfiguration` directly to `open()` |
| Events            | Single `response` object on `useCafSdk`                                      | Per-hook `event` state + `logs` on `useCerttaSdk`                                               |
| Person identifier | `personId`                                                                   | `userId`                                                                                        |
| Security flag     | `enableSecurityModule` on builder configuration                              | `securityEnabled` on `CerttaConfiguration`                                                      |
| Colors            | `colorConfiguration` on builder configuration                                | `colorConfiguration` on `CerttaConfiguration`                                                   |

Module selection (`caf-modules-config.json`), Maven repositories, CocoaPods, permissions, and ProGuard **do not change**. Follow the [Installation Guide](/caf-sdk/react-native/installation-guide.md).

## 1. Configure the session once

```typescript
// Before (useCafSdk)
const { initialize, startSDK, response } = useCafSdk();
const { applyCafFaceLiveness } = useCafFaceLiveness();
const { applyCafDocumentDetector } = useCafDocumentDetector();

await initialize(
  {
    configuration: {
      presentationOrder: [
        CafModuleType.FACE_LIVENESS,
        CafModuleType.DOCUMENT_DETECTOR,
      ],
      enableSecurityModule: true,
    },
    mobileToken: 'token',
    environment: CafEnvironment.PROD,
    personId: 'personId',
  },
  async () => {
    await applyCafFaceLiveness({ maxRetryAttempts: 3 });
    await applyCafDocumentDetector({
      flow: [{ document: CafDocument.RG_FRONT }],
    });
    return true;
  },
);

// After (Certta DevX)
const { configureSDK, updateUserId, updateMobileToken } = useCerttaSdk();

try {
  await configureSDK({
    mobileToken: 'token',
    userId: 'personId',
    environment: CafEnvironment.PROD,
    securityEnabled: true,
  });
} catch {
  // Handle BRIDGE_EXCEPTION
}
```

After `configureSDK`, update credentials without rebuilding the full configuration:

```typescript
updateUserId('new-user-id');
updateMobileToken('new-jwt-token');
```

## 2. Open one module at a time

There is no `presentationOrder` on Certta. Start Face Liveness or Document Detector when your product flow needs it.

```typescript
// Face Liveness
const { open: openLiveness } = useCafFaceLiveness();
try {
  await openLiveness({
    maxRetryAttempts: 3,
    faceAuthEnabled: false,
    showLoading: true,
    useFaceLivenessUi: true,
  });
} catch {
  // Handle BRIDGE_EXCEPTION
}

// Document Detector (headless)
const { open: openDocumentDetector } = useCafDocumentDetector();
try {
  await openDocumentDetector({
    flow: [
      { document: CafDocument.RG_FRONT },
      { document: CafDocument.RG_BACK },
    ],
  });
} catch {
  // Handle BRIDGE_EXCEPTION
}

// Document Detector UI
const { open: openDocumentDetectorUI } = useCafDocumentDetectorUI();
try {
  await openDocumentDetectorUI({
    flow: [{ document: CafDocument.RG_FRONT }],
  });
} catch {
  // Handle BRIDGE_EXCEPTION
}
```

| Legacy apply + module config | Certta launch                                                            |
| ---------------------------- | ------------------------------------------------------------------------ |
| `applyCafFaceLiveness`       | `useCafFaceLiveness().open(CerttaLivenessConfiguration)`                 |
| `applyCafFaceLivenessUI`     | `open({ useFaceLivenessUi: true, ... })`                                 |
| `applyCafDocumentDetector`   | `useCafDocumentDetector().open(CerttaDocumentDetectorConfiguration)`     |
| `applyCafDocumentDetectorUI` | `useCafDocumentDetectorUI().open(CerttaDocumentDetectorUIConfiguration)` |

Certta liveness configuration is a smaller set: `maxRetryAttempts`, `faceAuthEnabled`, `showLoading`, `useFaceLivenessUi`, and `payFaceDebugMode` (iOS). Proxy URLs, certificates, and instruction-screen fields from `CafFaceLivenessConfiguration` are not part of the Certta configuration object.

## 3. Listen to typed module events

```typescript
// Before — one response object on useCafSdk
useEffect(() => {
  response.success?.forEach((item) => {
    // item.moduleName + item.signedResponse
  });
  if (response.failure) { /* CafFailureType */ }
  if (response.error) { /* CafErrorType */ }
}, [response]);

// After — per-hook event state
const { event: livenessEvent } = useCafFaceLiveness();
const { event: documentEvent } = useCafDocumentDetector();
const { logs } = useCerttaSdk();

useEffect(() => {
  if (livenessEvent.success) { /* JWT in livenessEvent.success.response */ }
  if (livenessEvent.failed) { /* CerttaLivenessFailure */ }
  if (livenessEvent.error) { /* CerttaError */ }
}, [livenessEvent]);

useEffect(() => {
  if (documentEvent.success) { /* JWT */ }
  if (documentEvent.error) { /* CerttaError */ }
}, [documentEvent]);
```

| useCafSdk `response`     | Certta equivalent                        |
| ------------------------ | ---------------------------------------- |
| `success.signedResponse` | `event.success.response`                 |
| `success.moduleName`     | Implied by which hook received the event |
| `failure`                | `useCafFaceLiveness().event.failed`      |
| `error`                  | `event.error` (`CerttaError`)            |
| `log`                    | `useCerttaSdk().logs`                    |
| `loading` / `loaded`     | Not forwarded on Certta module hooks     |

Bridge mapper rejections reject the `configureSDK` / `open()` promise with `CerttaPlatformException` and code `BRIDGE_EXCEPTION` (`CerttaErrorCode.BridgeException`) instead of only appearing on hook events.

## 4. Sequential pipelines

If you used `presentationOrder`, transition screens (`enableTransitionScreens`), or `waitForAllServices` with `useCafSdk`, the same product flow can be built with Certta DevX: configure the session once, then chain module `open()` calls from your app logic (for example, start Face Liveness when Document Detector `event.success` is set).

The sequential `useCafSdk` API remains available in `@caf.io/react-native-sdk` and is documented in [Legacy Getting Started](/caf-sdk/react-native/getting-started-with-the-sdk.md). Both APIs are supported and cover equivalent integration needs — prefer Certta DevX for new work and when migrating existing apps.

## Next steps

{% content-ref url="/pages/tC8MaVHQnCi3YdHr6s0p" %}
[Installation Guide](/caf-sdk/react-native/installation-guide.md)
{% endcontent-ref %}

{% content-ref url="/pages/kzXW2VibOXBWCXSGprnP" %}
[Face Liveness](/caf-sdk/react-native/face-liveness.md)
{% endcontent-ref %}

{% content-ref url="/pages/NcrmbSIkgcjxtOxZcp4D" %}
[Document Detector](/caf-sdk/react-native/document-detector.md)
{% endcontent-ref %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.caf.io/caf-sdk/react-native/migrating-from-cafsdk.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.