UAE Pass WebView Native Module

A custom Expo module that provides a native WebView implementation for UAE Pass authentication with proper deep link interception at the native level.

Overview

This module solves the "Can't open url: uaepass://..." issue by implementing native WebView delegates that intercept navigation before the WebView processes it, exactly like the official UAE Pass SDK samples.

Installation from npm

If you published this module to npm and are getting the error:

WARN Unable to get the view config for %s from module %s default view UaepassWebview

This means the module was published without being built first. Here's how to fix it:

Option 1: Republish the Package (Recommended)

1. Clone/navigate to the module source:

cd modules/uaepass-webview

2. Install dependencies:

npm install

3. Build the module (compiles TypeScript to JavaScript):

npm run build

4. Verify the build folder exists:

ls -la build/
# You should see: index.js, index.d.ts, and src/ folder

5. Bump version and republish:

# Update version in package.json (e.g., 1.0.1 -> 1.0.2)
npm version patch

# Publish (use --access public for scoped packages)
npm publish --access public

6. Update your app to use the new version:

cd ../..  # Back to project root
npm install uaepass-webview@latest
# or: npm install @yourorg/uaepass-webview@latest

7. Rebuild your app:

eas build --profile development --platform ios

Option 2: Use as Local Module

Instead of npm, use it as a local module (no need to publish):

1. In your app's package.json, reference the local path:

{
  "dependencies": {
    "uaepass-webview": "file:./modules/uaepass-webview"
  }
}

2. Run expo prebuild:

npx expo prebuild --clean

Architecture

• iOS: Uses WKNavigationDelegate.webView(_:decidePolicyFor:) to intercept navigation
• Android: Uses WebViewClient.shouldOverrideUrlLoading() to intercept navigation

Both catch UAE Pass deep links, authorization codes, and errors before the WebView tries to navigate, ensuring 100% reliability.

Build & Install

1. Clean Previous Builds

# From project root
rm -rf ios android

2. Prebuild with Local Module

npx expo prebuild --clean

This will:

• Discover the local module in modules/uaepass-webview/
• Generate native iOS/Android projects with the module included
• Link the native code

3. Run on Device

# For iOS
npx expo run:ios

# For Android
npx expo run:android

Important: You MUST run on a real device (or simulator) that has UAE Pass staging app installed.

Usage

The module is already integrated into components/uae-pass/oauth-webview.tsx:

import { UaepassWebview } from '@/modules/uaepass-webview';

<UaepassWebview
  url={authorizationUrl}
  onUAEPassURL={handleUAEPassURL}
  onAuthorizationCode={handleAuthorizationCode}
  onError={handleError}
  onLoadStart={handleLoadStart}
  onLoadEnd={handleLoadEnd}
  style={{ flex: 1 }}
/>

How It Works

1. Page Loads

WebView navigates through OAuth flow normally:

• https://stg-id.uaepass.ae/idshub/authorize?...
• https://stg-ids.uaepass.ae/oauth2/authorize?...
• https://stg-ids.uaepass.ae/authenticationendpoint/mobileWaiting.jsp?...

2. UAE Pass Deep Link Detected

When the page tries to navigate to uaepass://digitalid-users-ids/signatures/...?successurl=...&failureurl=...:

iOS (UaepassWebviewView.swift line 62):

public func webView(_ webView: WKWebView, decidePolicyFor navigationAction: ...) {
    if url.contains("uaepass://") {
        // Extract successURL and failureURL
        onUAEPassURL([...])
        decisionHandler(.cancel) // ← Prevents navigation
        return
    }
}

Android (UaepassWebviewView.kt line 54):

override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
    if (url.contains("uaepass://")) {
        // Extract successURL and failureURL
        dispatchEvent("onUAEPassURL", event)
        return true // ← Prevents navigation
    }
}

3. React Native Receives Event

handleUAEPassURL(event: { nativeEvent: { url, successURL, failureURL } }) {
    // Apply scheme correction (uaepass:// → uaepassstg://)
    // Transform URL with app's resume-authn callback
    // Launch UAE Pass app
    Linking.openURL(transformedUrl)
}

4. User Authenticates in UAE Pass App

5. App Resumes

UAE Pass app returns to your app via:

mohre-mobile://resume-authn?url=https://stg-ids.uaepass.ae/...?status=success

6. Success URL Loaded in WebView

WebView navigates to the success URL, which redirects to:

https://fsapp-uat.mohre.gov.ae/api/sso/uae-pass/callback?code=abc123&state=xyz

7. Authorization Code Intercepted

Native delegate catches the code:

if url.contains("code=") && url.contains("state=") {
    onAuthorizationCode(["code": code, "state": state])
    decisionHandler(.cancel)
}

8. Login Completes

React Native receives the code and completes login with backend.

Expected Logs

[UAEPassWebView] Navigation to: https://stg-id.uaepass.ae/...
[UAEPassWebView] Navigation to: https://stg-ids.uaepass.ae/...
[UAEPassWebView] Navigation to: https://stg-ids.uaepass.ae/authenticationendpoint/mobileWaiting.jsp?...
[UAEPassWebView] Navigation to: uaepass://digitalid-users-ids/signatures/...?successurl=...
[UAEPassWebView] Detected UAE Pass deep link!
[UAEPassWebView] Success URL: https://stg-ids.uaepass.ae/...?status=success
[UAEPassWebView] Failure URL: https://stg-ids.uaepass.ae/...?status=failure
UAEPass Native WebView - Detected UAE Pass deep link: uaepass://...
UAE Pass: Correcting production scheme to staging scheme
UAEPass Native WebView - Launching UAE Pass app
[UAE Pass app opens]
[User authenticates]
UAEPass Native WebView - Received resume event: https://...?status=success
[UAEPassWebView] Navigation to: https://fsapp-uat.mohre.gov.ae/api/sso/uae-pass/callback?code=...
[UAEPassWebView] Detected authorization code!
[UAEPassWebView] Code: abc123...
UAEPass Native WebView - Authorization code received
[Login completes]

Troubleshooting

Module not found error during build

Run:

npx expo prebuild --clean
npx expo run:ios

TypeScript error: Cannot find module 'uaepass-webview'

This is expected before building. The module will be available after:

npx expo prebuild --clean

Still getting "Can't open url" warning

Make sure you ran npx expo run:ios (not just expo start). The native code needs to be compiled.

UAE Pass app doesn't open

Check:

1. UAE Pass staging app is installed
2. ios/MoHREUAESkills/Info.plist has uaepassstg in LSApplicationQueriesSchemes
3. ios/MoHREUAESkills/Info.plist does NOT have uaepassstg in CFBundleURLSchemes

Files

• ios/UaepassWebviewView.swift - iOS WKWebView with navigation delegate
• ios/UaepassWebviewModule.swift - iOS module definition
• android/.../UaepassWebviewView.kt - Android WebView with client
• android/.../UaepassWebviewModule.kt - Android module definition
• src/UaepassWebviewView.tsx - React Native component wrapper
• src/UaepassWebview.types.ts - TypeScript type definitions
• index.ts - Module exports

License

MIT