Mobile - React Native
Integrating OwnID with a react native app that uses SAP CDC involves four basic steps:
- Creating a CDC application and modifying the CDC schema
- Use the OwnID Console to create an OwnID application
- Configure your project
- Integrate OwnID with your react native app
#
Step 1: Configure CDCConfiguring CDC includes creating a new CDC application with appropriate permissions.
#
Create Permissions Group and Application Key/SecretThe CDC application used for the OwnID integration will require a Permissions Group that authorizes OwnID to perform certain actions. OwnID strongly recommends that you create a new CDC application that is dedicated to the OwnID integration.
#
Step 2: Create OwnID ApplicationAn OwnID application will connect your website's identity platform with the OwnID widget in the front end. First, you must integrate with CDC when creating the application. This OwnID application is then assigned a unique appId
that is added to the website's front end. To create an OwnID application:
- Open the OwnID Console and create an account or log in to an existing account.
- Click on Create Application.
- Define the details of the OwnID application, and select Next.
- Select the Customer Data Cloud card.
- Collect the identifying information of the CDC application (site data center, site API key, application key, and application secret) and then define them in the OwnID application. When working with a site group, the API Key identifies the key of the child site.
#
Step 3: Configure Your Project#
Add dependency to your projectThe OwnID React Native Gigya SDK is available from the npm repository:
The OwnID React Native Gigya SDK supports autolinking and is built with Android API version 33 (minimum API version 23) and Java 8. The OwnID React Native Gigya iOS SDK supports iOS 13 and higher.
#
Step 4: Integrate OwnID with Your React Native App#
Create OwnID Gigya instanceBefore using OwnID Button on your screens, you have to create the OwnID Gigya instance. If you use the default Gigya account model (GigyaAccount class
/ GigyaAccount struct
) then you can do this from React Native. To do so, call the OwnIdGigya.init
function with the OwnID configuration. As a minimum, this configuration object defines the OwnID App Id
- the unique identifier of your OwnID application, which you can obtain from the OwnID Console - and redirection_uri_ios
to set the redirection Uri value for iOS:
The OwnIdGigya.init
function must be called after the Android/iOS native Gigya instance is initialized. See the details for Android and iOS. It is also recommended to create the OwnID instance as early as possible in the application lifecycle, as the OwnID Button will only be shown after the creation is completed.
If you use a custom Gigya account model you have to create the OwnID Gigya instance in the native code, see Native Initialization.
#
RegistrationAdd passwordless authentication to your application's Registration screen by including the OwnIdButton
view with the type OwnIdButtonType.Register
.
Call the OwnIdRegister
function once the user finishes the OwnID flow in the OwnID WebApp and tap "Create Account" on the registration form
See a complete example here.
The OwnID OwnIdRegister()
function must be called in response to the ReadyToRegister
event. This function calls the standard Gigya SDK function register(String email, String password, Map<String, Object> params, GigyaLoginCallback<T> callback)
to register the user in Gigya, so that you do not need to call this Gigya function yourself. You can define custom parameters for the registration request and pass it to OwnIdRegister().
These parameters are then passed to the Gigya registration call.
#
LoginSimilar to the Registration screen, add passwordless authentication to your application's Login screen by including the OwnIdButton view with the type OwnIdButtonType.Login
.
See a complete example here.
#
Customizing the UI

The following is a complete list of the UI customization parameters:
Parameters
backgroundColor
- background color of the button (default value#FFFFFF
, default value-night:#2A3743
)borderColor
- border color of the button (default value#D0D0D0
, default value-night:#2A3743
)biometryIconColor
- icon or text color (default value#0070F2
, default value-night:#2E8FFF
)
Here's an example on how you can change these parameters:
#
Advanced Configuration#
Native initializationIn case you don't want to create an instance of OwnID Gigya SDK from React Native or if you use a custom Gigya account model, you can create the OwnID Gigya SDK instance from native Android and iOS code.
#
Android#
Create configuration fileThe OwnID SDK uses a configuration file in your assets
folder to configure itself. As a minimum, this JSON configuration file defines the OwnID App Id - the unique identifier of your OwnID application - which you can obtain from the OwnID Console. Create assets/ownIdGigyaSdkConfig.json
and define the app_id
parameter:
#
Create OwnID Gigya instanceMost commonly, you will create the OwnID CDC instance using the Android Application class. For information on initializing and creating an instance of CDC, refer to the SAP CDC documentation. The MyAccount
is an optional class that extends GigyaAccount. More details are given in the SAP CDC documentation.
- Kotlin
- Java
The OwnID SDK automatically reads the ownIdGigyaSdkConfig.json
configuration file from your assets folder and creates a default instance that is accessible as OwnId.gigya
.
#
iOS#
Add property list file to your projectWhen the application starts, the OwnID SDK automatically reads OwnIDConfiguration.plist
from the file system to configure the default instance that was created. In this PLIST file, you must define a redirection URI
and the OwnID App Id
. Create OwnIDConfiguration.plist
and define the following mandatory parameters:
Where:
- The
OwnIDAppID
is the unique AppID, which you can obtain from OwnID Console. - The
OwnIDRedirectionURL
is the full redirection URL, including its custom scheme. This URL custom scheme must match the one that you defined in your target.
#
Create URL type (custom URL scheme)You will need to open your project and create a new URL type that corresponds to the redirection URL specified in OwnIDConfiguration.plist
. In Xcode, go to Info > URL Types
, and then use the URL Schemes field to specify the redirection URL. For example, if the value of the OwnIDRedirectionURL
key is com.myapp.demo://bazco
, then you could copy com.myapp.demo
and paste it into the URL Schemes field.
#
Initialize the SDKImport the OwnID module so that you can access the SDK features. Add the following import to your native source files:
The OwnID React SDK must be initialized properly using the configure() function, preferably in the main entry point of your app (in the @main App struct).
Main entry point of your app: