Usage

Basic Example

import Trustchex from '@trustchex/react-native-sdk';

<Trustchex
  baseUrl="https://your-api.com"
  sessionId="session-123"
  onCompleted={() => console.log('Done')}
  onError={(error) => console.error(error)}
/>

Props

Prop	Type	Required	Description
baseUrl	string	✅	Your API base URL
sessionId	string	❌	Session identifier
branding	object	❌	Colors and logo
locale	'en' | 'tr'	❌	Language
onCompleted	() => void	❌	Success callback
onError	(error) => void	❌	Error callback

With Branding

<Trustchex
  baseUrl="https://your-api.com"
  sessionId="session-123"
  branding={{
    logoUrl: 'https://your-logo.png',
    primaryColor: '#1E40AF',
    secondaryColor: '#F8FAFC',
    tertiaryColor: '#DC2626'
  }}
  locale="en"
  onCompleted={() => console.log('Done')}
/>

Deep Links (Optional)

Deep link functionality is an optional feature if you want to publish a standalone app. To process deep links with the SDK, you need to configure deep links in your app and set up the required hooks to handle incoming URLs.

1. Configure Deep Link Schemes

iOS - Add to Info.plist:

<key>CFBundleURLTypes</key>
<array>
  <dict>
    <key>CFBundleURLSchemes</key>
    <array>
      <string>yourapp</string>
    </array>
  </dict>
</array>

Android - Add to AndroidManifest.xml:

<activity android:name=".MainActivity">
  <intent-filter android:autoVerify="true">
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="yourapp" />
  </intent-filter>
</activity>

2. Set Up Deep Link Handling

Import and use the handleDeepLink function to process incoming URLs:

import React from 'react';
import { AppState, Linking } from 'react-native';
import Trustchex, { handleDeepLink } from '@trustchex/react-native-sdk';

const App = () => {
  const [baseUrl, setBaseUrl] = React.useState<string | undefined>();
  const [sessionId, setSessionId] = React.useState<string>('');

  React.useEffect(() => {
    const handleInitialDeepLink = async () => {
      const url = await Linking.getInitialURL();
      if (url) {
        const [bUrl, sId] = handleDeepLink({ url });
        if (bUrl && sId) {
          setBaseUrl(bUrl);
          setSessionId(sId);
        }
      }
    };

    const handleIncomingLink = ({ url }: { url: string }) => {
      const [bUrl, sId] = handleDeepLink({ url });
      if (bUrl && sId) {
        setBaseUrl(bUrl);
        setSessionId(sId);
      }
    };

    Linking.addEventListener('url', handleIncomingLink);
    handleInitialDeepLink();

    const subscription = AppState.addEventListener('change', (nextAppState) => {
      handleInitialDeepLink();
    });

    return () => {
      Linking.removeAllListeners('url');
      subscription.remove();
    };
  }, []);

  return (
    <Trustchex
      baseUrl={baseUrl}
      sessionId={sessionId}
      onCompleted={() => console.log('Done')}
      onError={(error) => console.error(error)}
    />
  );
};

The handleDeepLink function parses URLs with the format:

scheme://app-url/your-api.com/verification-session/session-123

And returns [baseUrl, sessionId] that you can use with the Trustchex component.

Sessions

Create sessions using the REST API.

Session Access Methods

The SDK provides multiple ways for users to access their verification session:

1. Deep Link (Recommended)

Users click a link that opens the app directly with the session:

// Deep link format: yourapp://app-url/your-api.com/verification-session/session-123
<Trustchex
  baseUrl="https://your-api.com"
  sessionId="session-123" // From deep link
  onCompleted={() => console.log('Done')}
/>

Benefits:

• Seamless user experience - one tap to start
• Direct navigation to verification
• No manual input required
• Works great for email and SMS campaigns

2. QR Code Scanning (Recommended)

Users scan a QR code that contains the session information. The SDK includes a built-in QR scanner accessible from the welcome screen.

Benefits:

• Quick and contactless
• No typing required
• Ideal for in-person verification
• Built-in scanner included in SDK

3. Session Code Entry (Alternative)

Users can manually enter an 8-character alphanumeric code:

<Trustchex
  baseUrl="https://your-api.com"
  // No sessionId prop needed - user enters code manually
  onCompleted={() => console.log('Done')}
/>

When no sessionId is provided, the SDK displays a screen where users can:

• Enter the 8-character session code
• Scan a QR code

Use Cases:

• Fallback when QR/deep link unavailable
• Phone/voice support scenarios
• Print media without QR capability

Creating Sessions

When creating a session via the REST API, you'll receive access methods in the response:

const response = await fetch('https://your-api.com/api/v1/verification-sessions', {
  method: 'POST',
  headers: { 'x-api-key': 'YOUR_API_KEY' },
  body: JSON.stringify({
    workflowId: 'workflow-123',
    email: '[email protected]'
  })
});

const { deepLink, qrCodeLink, sessionCode } = await response.json();

// Use deepLink for direct app navigation (recommended)
// Use qrCodeLink to generate QR code (recommended)
// Use sessionCode as alternative access method