React-native module for UAE Pass
npm install react-native-uaepassReact-native module for UAE Pass.
UAE PASS is the first secure national digital identity for citizens, residents and visitors in UAE. It empowers individuals to access a wide range of online services across various sectors.
Getting Started
To integrate UAE Pass into your React Native project, please follow the enrollment steps provided on the official UAE Pass website: UAE Pass
For developers, the UAE Pass developer documentation can be found here: UAE Pass Developer Documentation
Install the library from npm:
``sh`
npm install react-native-uaepass--- or ---
yarn add react-native-uaepass
UAEPass SDK for iOS requires iOS 13, so make sure that your deployment target is >= 13.0 in your iOS project settings. (Do not change it, if target is > 13.0)
Add the following to your iOS/Podfile above the use_native_modules! function and run pod install from the ios folder:
`rubyUAEPass dependencies
pod 'UAEPassClient', :path => '../node_modules/react-native-uaepass/ios/LocalPods/UAEPassClient'
`
`ruby`platform :ios, min_ios_version_supported (Do this change only if your target is < 13.0)
platform :ios, '13.0'
install the pod.
`sh`
$ (cd ios && pod install)--- or ---
$ npx pod-install
Add your URL Schemes to info.plist
`xml`
Add UAEPass Application Queries Schemes to info.plist
`xml`
Add below code to AppDelegate.mm
`c`
#import "UAEPass-Swift.h"
`c
- (BOOL)application:(UIApplication *)application
openURL:(NSURL *)url
options:(NSDictionary
{
UAEPass *uaepass = [[UAEPass alloc] init];
NSNumber *handled = [uaepass handleRedirectUrl:url];
if (handled != nil) {
return YES; // handled by UAEPass
}
// Other link handler code goes here
// return [RCTLinkingManager application:application openURL:url options:options];
return YES;
}
`
If your project using AppDelegate.swift. Add below code.
`c`
import react_native_uaepass
`c
// Add these function to 'class AppDelegate'
func application(
_ app: UIApplication,
open url: URL,
options: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
if handleUAEPassRedirect(url: url) {
return true
}
return RCTLinkingManager.application(app, open: url, options: options)
}
func application(
_ application: UIApplication,
continue userActivity: NSUserActivity,
restorationHandler: @escaping ([UIUserActivityRestoring]?) -> Void
) -> Bool {
if let url = userActivity.webpageURL, handleUAEPassRedirect(url: url) {
return true
}
return RCTLinkingManager.application(
application,
continue: userActivity,
restorationHandler: restorationHandler
)
}
func handleUAEPassRedirect(url: URL) -> Bool {
let uaepass = UAEPass()
// nil = not UAEPASS URL
return uaepass.handleRedirectUrl(url) != nil
}
`
`gradle`
// Add below line to android/gradle.properties
android.useAndroidX=true
android.enableJetifier=true
`gradle`
// Add below code to android/build.gradle file. Paste it above the last line - "apply plugin..."
allprojects {
repositories{
flatDir{
dirs "$rootDir/../node_modules/react-native-uaepass/android/libs"
}
}
}
`gradle`
// Add below code to android/app/build.gradle file and use your UAE pass scheme
manifestPlaceholders = [
appAuthRedirectScheme: "com.test",
host_success: "uaePassSuccess",
host_failure: "uaePassFail",
scheme : "scheme",
main_scheme:"com.test"
]
// UAEPass
Add below lines to AndroidManifest.xml (screenshot below)
`xml`
`xml`
`xml`
#### iOS
#### Android
`js
import React, { useState } from 'react';
import {
SafeAreaView,
StyleSheet,
Text,
View,
TouchableOpacity,
} from 'react-native';
import { UAEPass } from 'react-native-uaepass';
const UAEPassConfig = {
env: 'staging', // or production // default staging
clientId: 'clientId',
redirectURL: 'com.test://uaepass',
successHost: 'uaePassSuccess',
failureHost: 'uaePassFail',
scheme: 'testscheme',
scope: 'urn:uae:digitalid:profile',
locale: 'en'
};
const App = () => {
const [userData, setData] = useState(null);
const login = async () => {
try {
const response = await UAEPass.login(UAEPassConfig);
if (response && response.accessCode) {
setData(response);
}
} catch (e) {
console.log('error', e);
}
};
const logout = async () => {
try {
const response = await UAEPass.logout();
console.log('response', response);
setData(null);
} catch (e) {
console.log('error', e);
}
};
return (
{!userData && (
)}
{userData && (
userData,
null,
4
)}}
)}
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: 'gray',
},
text: {
fontSize: 16,
color: '#fff',
},
button: {
marginTop: 50,
padding: 10,
marginVertical: 10,
justifyContent: 'center',
alignItems: 'center',
},
});
export default App;
`
#### 1. Add the plugin to your app.config.js
`
"newArchEnabled": false,
...
plugins: [
[
"react-native-uaepass",
{
"uaePassBundleURLName": "com.yourapp.uaepass",
"uaePassBundleURLScheme": "com.yourapp.uaepass",
"uaePassScheme": "scheme",
"uaePassSuccess": "success",
"uaePassFailure": "failure",
"appAuthRedirectScheme": "com.yourapp.uaepass",
"appPackageId":"app.packageId"
}
]
]
#### 2. Run prebuild:
npx expo prebuild --clean
#### 2. Run your app:
`
npx expo run:ios
npx expo run:android
For more detailed usage and examples, refer to the documentation provided in the UAE Pass developer documentation.
#### Contributing
See the contributing guide to learn how to contribute to the repository and the development workflow.
#### License
This project is licensed under the MIT License - see the LICENSE file for details.
#### Acknowledgments
Special thanks to the UAE Pass team for providing a secure and convenient national digital identity solution.
#### Author
Hi there! I'm Vyshakh Parakkat. My expertise lies in crafting robust solutions using React Native, ReactJS, Kubernetes, Fastlane and Python.
I hope this project helps you to integrate UAE Pass without any hassle. If you have any questions, suggestions, or just want to connect, feel free to reach out.
Happy coding! 🚀
#### Disclaimer:
This project is not affiliated with or endorsed by UAE Pass or the government of the United Arab Emirates. It is an independent open-source project created for the purpose of integrating UAE Pass functionality into React Native applications.
---