The Auth SDK is an authentication library written in React Native. It designed to streamline the login process with Auth0, providing developers with efficient tools to retrieve login details and authenticate users swiftly. Beyond its authentication capabilities, the Auth SDK encompasses Subscription Video-On-Demand (SVOD) and Transactional Video-On-Demand (TVOD) functionalities for a comprehensive range of platforms, including iOS, Apple TV, Android, Android TV, and Fire TV. This comprehensive feature set empowers developers to seamlessly integrate subscription and transactional video services.
Features
The dotstudioPRO Auth SDK boasts robust support for seamless login processes through Auth0 integration. Leveraging the Core SDK, it efficiently communicates with the API to retrieve SVOD (Subscription Video-On-Demand) or TVOD (Transactional Video-On-Demand) plans, displaying subscription options for users. Users can easily subscribe or make individual purchases through designated stores such as Apple, Google, or Amazon. Following the user's transactional actions on the respective stores, the SDK triggers an API call to confirm the subscription status.
Key Features:
- Comprehensive Functionality Support: The SDK have comprehensive support for login, logout, SVOD(Subscription Video On Demand), and TVOD(Transactional Video On Demand) purchase functionalities.
- Internal User Detail Storage: The Auth SDK also internally stores user details upon successful login.
- Efficient Callback Handling: The Auth SDK efficiently manages the necessary callbacks for key events such as login, logout, SVOD(Subscription Video On Demand), and TVOD(Transactional Video On Demand).
Requirements
Below are the minimum required operating system (OS) versions for the respective platforms. Please review the following details for accurate information on the minimum OS requirements for each platform.
| Platform | Minimum Version | Installation | Status |
|---|---|---|---|
| iOS | 13.0+ | CocoaPods | Fully Tested |
| tvOS | 13.0+ | CocoaPods | Fully Tested |
| Android | Android 5.0: Lollipop (API 21) | npm | Fully Tested |
| Android TV | Android 5.0: Lollipop (API 21) | npm | Fully Tested |
| Fire TV | Android 5.0: Lollipop (API 21) | npm | Fully Tested |
Before proceeding to the subsequent steps, it is crucial to acquaint yourself with the process of setting up in-app purchase subscriptions or consumable products on the Apple, Google, and Amazon platforms.
To facilitate this, we have provided the necessary links for your reference below:
Apple: https://developer.apple.com/help/app-store-connect/configure-in-app-purchase-settings/overview-for-configuring-in-app-purchases
Google: https://support.google.com/googleplay/android-developer/answer/1153481?hl=en
Amazon: https://developer.amazon.com/docs/in-app-purchasing/iap-overview.html
After creating an in-app purchase, it is imperative to input the in-app purchase ID into the dotstudioPRO CMS. This ensures that the backend can seamlessly provide the respective clients with the necessary in-app purchase IDs for transactions. To complete this step, navigate to your CMS URL and access the Subscriptions section. For instance, you can use the following example URL:
https://<client-sub-domain>.dotstudiopro.com/admin/subscriptions/
Furthermore, for the validation of subscriptions on the Apple platform, it is essential to insert the Apple subscription key generated from the In-App Purchase (IAP) section into the dotstudioPRO CMS. Access this by navigating to Admin > Settings > Company > Apple App Secret Key.
This ensures the smooth and secure validation of subscriptions on the Apple platform.
Installation
Utilize the following command to seamlessly install the Auth SDK into your React Native project:
npm install @dotstudiopro/authOR
yarn add @dotstudiopro/auth
How to Use
To incorporate login functionality into your React Native project for mobile platforms, import the AuthControllerMobile from the dotstudiopro/auth SDK. Subsequently, integrate it into your Stack navigation to facilitate navigation to this screen, as illustrated below:
name="AuthControllerMobile"
component={AuthControllerMobile}
options={{
headerShown: false,
headerShadowVisible: false,
presentation: 'fullScreenModal',
}}
Login
Once the screen is integrated into the React Native stack, initiate navigation and supply the required inputs outlined below to facilitate the login process:
navigation.navigate('AuthControllerMobile', {
authenticationType: 'login',
auth0_domain_name: ,
auth0_client_id: ,
theme: theme,
onAuthenticationSuccess,
onAuthenticationFail,
});
Properties
The Auth Login Component possesses the following properties:
| Key | Type | Description |
|---|---|---|
| authenticationType | String | Type of authentication a user need to perform. |
| auth0_domain_name | String | Domain name of Auth0 account. |
| auth0_client_id | String | Client ID of the app created inside the Auth0 account. |
| theme | JSON theme object | theme of the authcontroller screen. |
| onAuthenticationSuccess | Callback | Callback when login is successful. |
| onAuthenticationFail | Callback | Callback when login fails. |
Logout
Once the screen is integrated into the React Native stack, initiate navigation and supply the required inputs outlined below to facilitate the logout process:
navigation.navigate('AuthControllerMobile', {
authenticationType: 'logout',
auth0_domain_name: <auth0_domain_name>,
auth0_client_id: <auth0_client_id>,
onLogoutSuccess,
onLogoutFail,
});
Properties
The Auth Logout Component possesses the following properties:
| Key | Type | Description |
|---|---|---|
| authenticationType | String | Type of authentication a user need to perform. |
| auth0_domain_name | String | Domain name of Auth0 account. |
| auth0_client_id | String | Client ID of the app created inside the Auth0 account. |
| onLogoutSuccess | Callback | Callback when logout is successful. |
| onLogoutFail | Callback | Callback when logout fails. |
SVOD (Subscription Video On Demand)
After integrating the screen into the React Native stack, initiate navigation and provide the required inputs below to enable subscription. If the user is not logged in, the system will first execute the login process. Upon successful login, it will display all available subscription plans:
navigation.navigate('AuthControllerMobile', {
skippable: false,
authenticationType: "subscription",
headerText: <header text to be shown on svod plan screen>,
theme: theme,
onAuthenticationSuccess,
onAuthenticationFail,
onSkipForNowPress,
onRestoreSubscriptionPress,
onLogoutPress,
onLogoutFail,
});
Properties
The Auth Logout Component possesses the following properties:
| Key | Type | Description |
|---|---|---|
| skippable | boolean | Decides whether skip option should be shown or not. |
| authenticationType | String | Type of authentication a user needs to perform. |
| headerText | String | Show a header text in the subscription screen. |
| onAuthenticationSuccess | Callback | Callback when login is successful. |
| onAuthenticationFail | Callback | Callback when login fails. |
|
onSkipForNowPress |
Callback | Callback when skip the button is pressed. |
| onRestoreSubscriptionPress | Callback | Callback when the restore subscription button is pressed from subscription. |
| onLogoutPress | Callback | Callback when the logout button is pressed from subscription. |
| onLogoutFail | Callback | Callback when logout fails. |
TVOD (Transactional Video On Demand)
After integrating the screen into the React Native stack, initiate navigation and provide the required inputs below to enable TVOD purchase. If the user is not logged in, the system will first execute the login process. Upon successful login, it will display all available TVOD products:
navigation.navigate('AuthControllerMobile', {
skippable: true,
authenticationType: "tvod",
headerText: <header text to be shown on tvod plan screen>,
theme: theme,
channel: channel,
onAuthenticationSuccess,
onAuthenticationFail,
onSkipForNowPress,
});
Properties
The Auth Logout Component possesses the following properties:
| Key | Type | Description |
|---|---|---|
| skippable | boolean | Decides whether the skip option should be shown or not on the subscription plan screen. |
| authenticationType | String | Type of authentication a user needs to perform. |
| headerText | String | Show a header text in the subscription screen. |
| onAuthenticationSuccess | Callback | Callback when login is successful. |
| onAuthenticationFail | Callback | Callback when login fails. |
|
onSkipForNowPress |
Callback | Callback when skip the button is pressed. |
Updated