Getting started
React Native OMH Auth is a project that brings various native auth providers to React Native. It provides a single API to use different auth providers:
Prerequisites
Before getting started, the documentation assumes you are able to create a project with React Native. If you do not meet these prerequisites, follow the links below:
React Native - Setting up the development environment
Additionally, the current versions of Android OMH libraries have a minimum Android API level requirement of 23. In order for your Android application to build successfully, make sure that minSdkVersion is set to a value greater or equal to 23 in your android/build.gradle file.
Compatibility
| React Native | 1.0.3 |
|---|---|
| 0.73.6 | ✅ |
Installation
To integrate a React Native OMH Auth provider into your React Native project, you need to install @openmobilehub/auth-core and one of the available libraries:
| Provider | Package |
|---|---|
@openmobilehub/auth-google | |
@openmobilehub/auth-facebook | |
| Microsoft | @openmobilehub/auth-microsoft |
| Dropbox | @openmobilehub/auth-dropbox |
By running the following commands:
npm add @openmobilehub/auth-core
npm add @openmobilehub/auth-<provider-name>
Provider configuration
Each provider requires you to specify different secrets. Please follow the individual provider configuration:
Android configuration
No additional steps required.
Applicable to @openmobilehub/auth-core versions earlier than 1.0.5
Each plugin requires that the @openmobilehub/auth-core module to be manually linked inside your Android application. Add the following line to your android/settings.gradle file:
rootProject.name = 'Example'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesSettingsGradle(settings)
apply from: file("../node_modules/@openmobilehub/auth-core/android/native_modules.gradle")
include ':app'
includeBuild('../node_modules/@react-native/gradle-plugin')
iOS configuration
Each plugin requires that the react-native-app-auth dependency to be installed and configured inside your React Native application. Proceed to install it by running the following command:
npm add react-native-app-auth
Next, follow the iOS Setup guide in order finish the configuration.
In order to avoid any issues on the Android side, you have to disable automatic linking for react-native-app-auth by adding the following lines to your react-native.config.js file:
module.exports = {
dependencies: {
'react-native-app-auth': {
platforms: {
android: null,
},
},
},
};
Additionally, in order for the @openmobilehub/auth-core module to work correctly, please install the @react-native-async-storage/async-storage dependency by running the following command:
npm add @react-native-async-storage/async-storage
Usage
In this guide, we'll use the Google provider as an example. However, feel free to choose any other provider as the exposed methods are identical. They all inherit the IAuthModule from the @openmobilehub/auth-core, ensuring consistency across different providers. This means you won't need to learn any additional methods regardless of the provider you choose!
Initializing
Before interacting with a provider, initialization is necessary. Each provider requires a specific configuration to be passed as an argument.
import GoogleAuthClient from '@openmobilehub/auth-google';
await GoogleAuthClient.initialize({
android: {
scopes: ['openid', 'profile', 'email'],
webClientId: GOOGLE_WEB_CLIENT_ID,
},
ios: {
scopes: ['openid', 'profile', 'email'],
clientId: '<YOUR_GOOGLE_CLIENT_ID>',
redirectUrl: `com.googleusercontent.apps.${
'<YOUR_GOOGLE_CLIENT_ID>'.split('.')[0]
}:/oauth2redirect/google`,
},
});
Sign in
Initiates the sign-in process with the provider.
await GoogleAuthClient.signIn();
Get access token
Retrieves the access token from the provider.
const accessToken = await GoogleAuthClient.getAccessToken();
Get user
Obtains user information for the current signed-in user. Returns an object of type OmhUserProfile.
type OmhUserProfile = {
name?: string;
surname?: string;
email?: string;
profileImage?: string;
idToken?: string;
};
const user: OmhUserProfile = await GoogleAuthClient.getUser();
Refresh access token
Refreshes the access token if it has expired.
const newAccessToken = await GoogleAuthClient.refreshAccessToken();
Revoke access token
Revokes the current access token.
await GoogleAuthClient.revokeAccessToken();
Sign out
Initiates the sign-out process with the provider.
await GoogleAuthClient.signOut();
For a more in depth view on the available methods, access the Reference API.
Sample app
Explore the sample app included in the repository to see the implementation of authentication with Google and other providers.
Troubleshooting
2 files found with path 'META-INF/DEPENDENCIES'
2 files found with path 'META-INF/DEPENDENCIES' from inputs:
- ~/.gradle/caches/transforms-3/974cf06afa1f6a930c75c22e66ec0fcc/transformed/jetified-httpclient-4.5.13.jar
- ~/.gradle/caches/transforms-3/435f87d6658aae4740f0a56a1a48eac1/transformed/jetified-httpcore-4.4.15.jar
If you see the above error during the android build process, please add the following code snippet to your android/app/build.gradle file:
android {
// ... other build settings
packagingOptions {
resources.excludes.add("META-INF/DEPENDENCIES")
}
}
Please also check the related GitHub issue for more context to the problem.
Unsupported class file major version 63
Failed to transform jackson-core-2.15.0.jar (com.fasterxml.jackson.core:jackson-core:2.15.0) to match attributes {artifactType=android-classes-jar, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=jar, org.gradle.status=release, org.gradle.usage=java-api}
If you see the above error during the android build process, please add the following code snippet to your android/gradle.properties file:
android.jetifier.ignorelist=jackson-core,fastdoubleparser
Please also check the related GitHub issue for more context to the problem.