Mobile SDK - Urtentic Documentation

Urtentic’s mobile integration embeds the hosted verification flow (https://verify.urtentic.com) inside a native WebView. This gives you a full verification experience with camera access, liveness detection, and document capture — without needing a native SDK.

How It Works

Your app opens a WebView pointed at https://verify.urtentic.com with clientId, flowId, and metadata as query parameters.
The verification flow runs entirely within the WebView (camera, document capture, liveness, etc.).
The hosted page posts postMessage events to signal progress.
Your app listens for these events via a JavaScript bridge and responds accordingly (close the WebView, update state, etc.).

Flutter Integration

The example below is a complete Flutter implementation using webview_flutter.

Dependencies

Add these to your pubspec.yaml:

dependencies:
  webview_flutter: ^4.13.0
  webview_flutter_android: ^4.10.11
  webview_flutter_wkwebview: ^3.23.5
  permission_handler: ^12.0.1

iOS Setup

In ios/Runner/Info.plist, add camera and microphone usage descriptions:

<key>NSCameraUsageDescription</key>
<string>Camera access is required for identity verification.</string>
<key>NSMicrophoneUsageDescription</key>
<string>Microphone access is required for video verification.</string>

Android Setup

In android/app/src/main/AndroidManifest.xml, add:

<uses-permission android:name="android.permission.CAMERA" />
<uses-permission android:name="android.permission.RECORD_AUDIO" />
<uses-permission android:name="android.permission.INTERNET" />

Full Implementation

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:permission_handler/permission_handler.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_android/webview_flutter_android.dart';
import 'package:webview_flutter_wkwebview/webview_flutter_wkwebview.dart';

class UrtenticVerificationPage extends StatefulWidget {
  final String clientId;
  final String flowId;
  final String metadata;
  final void Function(String) onFinished;
  final void Function() onExited;

  const UrtenticVerificationPage({
    super.key,
    required this.clientId,
    required this.flowId,
    required this.metadata,
    required this.onFinished,
    required this.onExited,
  });

  @override
  State<UrtenticVerificationPage> createState() =>
      _UrtenticVerificationPageState();
}

class _UrtenticVerificationPageState extends State<UrtenticVerificationPage> {
  late WebViewController controller;
  int loadingPercentage = 0;

  static const _urtenticUrl = 'https://verify.urtentic.com';

  Future<void> _requestPermissions() async {
    await [Permission.camera, Permission.microphone].request();
  }

  @override
  void initState() {
    super.initState();
    _requestPermissions();
    _initializeController();
  }

  void _initializeController() {
    late final PlatformWebViewControllerCreationParams params;

    // iOS: enable inline media playback without requiring user gesture
    if (WebViewPlatform.instance is WebKitWebViewPlatform) {
      params = WebKitWebViewControllerCreationParams(
        allowsInlineMediaPlayback: true,
        mediaTypesRequiringUserAction: const <PlaybackMediaTypes>{},
      );
    } else {
      params = const PlatformWebViewControllerCreationParams();
    }

    controller = WebViewController.fromPlatformCreationParams(params)
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setBackgroundColor(Colors.white)
      // Register a JS bridge so the hosted page can send events to Flutter
      ..addJavaScriptChannel(
        'UrtenticBridge',
        onMessageReceived: (JavaScriptMessage message) {
          _handleMessage(message.message);
        },
      )
      ..setNavigationDelegate(
        NavigationDelegate(
          onProgress: (progress) =>
              setState(() => loadingPercentage = progress),
          onPageStarted: (_) => setState(() => loadingPercentage = 0),
          onPageFinished: (_) {
            _injectBridgeListener();
            setState(() => loadingPercentage = 100);
          },
        ),
      );

    // Android: grant camera/microphone permissions from within the WebView
    if (controller.platform is AndroidWebViewController) {
      AndroidWebViewController.enableDebugging(true);
      final androidController =
          controller.platform as AndroidWebViewController;
      androidController.setMediaPlaybackRequiresUserGesture(false);
      androidController.setOnPlatformPermissionRequest((request) {
        request.grant();
      });
    }

    // Build the verification URL with required query parameters
    final uri = Uri.parse(_urtenticUrl).replace(
      queryParameters: {
        'clientId': widget.clientId,
        'flowId': widget.flowId,
        'metadata': widget.metadata,
      },
    );

    controller.loadRequest(uri);
  }

  /// Inject a postMessage listener after the page loads.
  /// This forwards verification events from the hosted page to the Flutter bridge.
  void _injectBridgeListener() {
    const jsScript = '''
      window.addEventListener('message', function(event) {
          const expectedOrigin = new URL("$_urtenticUrl").origin;
          if (event.origin !== expectedOrigin) return;

          const data = event.data;
          if (data && (
            data.type === 'verificationComplete' ||
            data.type === 'verificationStarted' ||
            data.type === 'verificationExited'
          )) {
              if (window.UrtenticBridge) {
                  window.UrtenticBridge.postMessage(JSON.stringify(data));
              }
          }
      }, false);
    ''';

    controller.runJavaScript(jsScript);
  }

  /// Handle events sent from the hosted verification page.
  void _handleMessage(String jsonString) {
    try {
      final data = jsonDecode(jsonString) as Map<String, dynamic>;
      final type = data['type'] as String?;

      switch (type) {
        case 'verificationStarted':
          // Verification flow has begun — update UI if needed
          break;
        case 'verificationComplete':
          Navigator.of(context).pop();
          widget.onFinished(type!);
          break;
        case 'verificationExited':
          Navigator.of(context).pop();
          widget.onExited();
          break;
      }
    } catch (e) {
      debugPrint('UrtenticBridge error: $e');
    }
  }

  @override
  void setState(VoidCallback fn) {
    if (mounted) super.setState(fn);
  }

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: false, // Prevent back-swipe from closing mid-verification
      child: Scaffold(
        appBar: AppBar(title: const Text('Verify Identity')),
        body: Stack(
          children: [
            WebViewWidget(controller: controller),
            if (loadingPercentage < 80)
              const Center(child: CircularProgressIndicator()),
          ],
        ),
      ),
    );
  }
}

Launching the Verification Page

import 'dart:convert';

Future<void> startVerification(BuildContext context) async {
  final metadata = jsonEncode({
    'userId': 'user_12345',
    'deviceId': 'device_abc',
  });

  await Navigator.of(context).push(
    MaterialPageRoute(
      builder: (_) => UrtenticVerificationPage(
        clientId: 'YOUR_CLIENT_ID',
        flowId: 'YOUR_FLOW_ID',
        metadata: metadata,
        onFinished: (type) {
          // type == 'verificationComplete'
          // Update your backend or local state here
          print('Verification finished: $type');
        },
        onExited: () {
          // User exited before completing
          print('User exited verification');
        },
      ),
    ),
  );
}

Verification Events

The hosted page emits postMessage events that your bridge forwards to Flutter:

Event type	Meaning
`verificationStarted`	The user has begun the verification flow
`verificationComplete`	The user has completed all verification steps
`verificationExited`	The user closed or abandoned the flow

verificationComplete indicates the user finished the flow in the UI — it does not mean the backend has approved the verification. Always rely on webhook notifications for the authoritative result before granting access.

URL Parameters

The verification page is loaded at:

https://verify.urtentic.com?clientId={CLIENT_ID}&flowId={FLOW_ID}&metadata={METADATA}

Parameter	Required	Description
`clientId`	Yes	Your Urtentic client ID (base64-encoded)
`flowId`	Yes	The UUID of your verification flow
`metadata`	No	URL-encoded JSON string with custom data (e.g. `userId`, `deviceId`)

Permissions

The WebView requires camera and microphone access for document capture and liveness detection. Request these at the OS level before loading the WebView:

await [Permission.camera, Permission.microphone].request();

On Android, also grant permissions requested from within the WebView by implementing setOnPlatformPermissionRequest:

androidController.setOnPlatformPermissionRequest((request) {
  request.grant();
});

Handling Results

After verificationComplete, refresh the user’s verification status from your backend rather than relying solely on the event type:

onFinished: (type) async {
  final status = await yourApi.getVerificationStatus(userId);
  // Update local state based on backend response
},

React Native Integration

For React Native, use react-native-webview. The approach is identical: load https://verify.urtentic.com with query parameters and listen for postMessage events.

import React, { useRef } from 'react';
import { WebView } from 'react-native-webview';

const CLIENT_ID = 'YOUR_CLIENT_ID';
const FLOW_ID = 'YOUR_FLOW_ID';

export function UrtenticVerification({ userId, onFinished, onExited }) {
  const webviewRef = useRef(null);

  const uri = `https://verify.urtentic.com?clientId=${encodeURIComponent(CLIENT_ID)}&flowId=${encodeURIComponent(FLOW_ID)}&metadata=${encodeURIComponent(JSON.stringify({ userId }))}`;

  // Inject a listener that forwards postMessage events to React Native
  const injectedJS = `
    window.addEventListener('message', function(event) {
      const expectedOrigin = new URL('https://verify.urtentic.com').origin;
      if (event.origin !== expectedOrigin) return;
      const data = event.data;
      if (data && (
        data.type === 'verificationComplete' ||
        data.type === 'verificationStarted' ||
        data.type === 'verificationExited'
      )) {
        window.ReactNativeWebView.postMessage(JSON.stringify(data));
      }
    }, false);
    true;
  `;

  const handleMessage = (event) => {
    try {
      const data = JSON.parse(event.nativeEvent.data);
      if (data.type === 'verificationComplete') {
        onFinished(data.type);
      } else if (data.type === 'verificationExited') {
        onExited();
      }
    } catch (e) {
      console.error('Urtentic bridge error:', e);
    }
  };

  return (
    <WebView
      ref={webviewRef}
      source={{ uri }}
      injectedJavaScript={injectedJS}
      onMessage={handleMessage}
      mediaPlaybackRequiresUserAction={false}
      allowsInlineMediaPlayback={true}
      javaScriptEnabled={true}
    />
  );
}

React Native Permissions

import { PermissionsAndroid, Platform } from 'react-native';

async function requestPermissions() {
  if (Platform.OS === 'android') {
    await PermissionsAndroid.requestMultiple([
      PermissionsAndroid.PERMISSIONS.CAMERA,
      PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
    ]);
  }
  // iOS permissions are handled via Info.plist
}

Next Steps

Webhooks — receive authoritative verification results server-side
Direct Link — if you want a redirect-based flow without a WebView bridge
Verification Processes — understand what each step verifies

​How It Works

​Flutter Integration

​Dependencies

​iOS Setup

​Android Setup

​Full Implementation

​Launching the Verification Page

​Verification Events

​URL Parameters

​Permissions

​Handling Results

​React Native Integration

​React Native Permissions

​Next Steps

How It Works

Flutter Integration

Dependencies

iOS Setup

Android Setup

Full Implementation

Launching the Verification Page

Verification Events

URL Parameters

Permissions

Handling Results

React Native Integration

React Native Permissions

Next Steps