Skip to main content

Mobile - React Native

Integrating OwnID with a react native app that uses SAP CDC involves four basic steps:

  • Create a CDC application and modify 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 CDC#

Configuring CDC includes creating a new CDC application with appropriate permissions and adding custom fields to the CDC schema.

Create Permissions Group and Application Key/Secret#

The CDC application used for the OwnID integration requires 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.

Modify CDC Schema#

SAP Customer Data Cloud includes a schema that stores all of your users' data. To integrate OwnID, you need to add custom fields to this CDC schema. You could create these fields one-by-one, but this is tedious and prone to error. To simplify the effort, CDC accepts an API call that automatically adds the fields to the schema, allowing you to use a REST client like Postman to accomplish the task. To add the custom fields to the schema:

  1. Open Postman and switch to the workspace where you want to import a collection. If you are new to Postman, you can start with the Postman documentation.
  2. Select the following button to import the collection that contains the required API call: Run in Postman
  3. In Postman, use the drop-down to select the OwnID-CDC Integration environment, and then select the Quick Look icon to open the variables of the environment. If you prefer, you can use the current environment and manually create each variable in the next step.
  4. Define the variables used by the API request (datacenter, apiKey, userKey, and secret). If you are using a CDC site group, apiKey must be the API Key of the parent site, not the child site. Note that userKey refers to the CDC application key. For more information about defining variables in Postman, see Using Variables.
  5. Send the API request.

You can now check the CDC schema to verify that the request successfully added the custom fields. Open your site in the CDC Console and select Schema in the left-hand navigation pane. You should see the schema fields under accounts > data > ownid.

Step 2: Create OwnID Application#

An OwnID application connects your website's identity platform with the OwnID widget in the front end. First, you 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:

  1. Open the OwnID Console and create an account or log in to an existing account.
  2. Click on Create Application.
  3. Define the details of the OwnID application, and select Next.
  4. Select the Customer Data Cloud card.
  5. 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 project#

The OwnID React Native Gigya SDK is available from the npm repository:

npm install @ownid/react-native-gigya

Configure Android#

Enable Java 8 Compatibility in Your Project

The OwnID SDK requires Java 8 bytecode. To enable this feature, add the following to your module's build.gradle file:

android {
compileOptions {
sourceCompatibility JavaVersion.VERSION_1_8
targetCompatibility JavaVersion.VERSION_1_8
}
kotlinOptions {
jvmTarget = "1.8"
}
}

Add React Native Dependencies

In your applicaltion build.gradle add a dependency to ownid-react-native-gigya project:

implementation project(":ownid-react-native-gigya")

Set the correct path to ownid-react-native-core and ownid-react-native-gigya projects in your settings.gradle file:

include ":ownid-react-native-core"
project(":ownid-react-native-core").projectDir = new File("../node_modules/@ownid/react-native-core/android")
include ":ownid-react-native-gigya"
project(":ownid-react-native-gigya").projectDir = new File("../node_modules/@ownid/react-native-gigya/android")

Create Configuration File

The OwnID SDK uses a configuration file in your assets folder to configure itself. At 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:

{
"app_id": "47tb9nt6iaur0zv"
}

Create Default OwnID CDC Instance

Before adding OwnID UI to your app screens, you need to use an Android Context and instance of CDC to create a default instance of OwnID CDC. Most commonly, you create this OwnID CDC instance using the Android Application class. For information on initializing and creating an instance of CDC, refer to the SAP CDC documentation. MyAccount class is optional and extends GigyaAccount class.

You can check a complete example here.

class MyApplication : Application() {
override fun onCreate() {
super.onCreate()
// Create Gigya instance
Gigya.setApplication(this)
// MyAccount class is optional and extends GigyaAccount class
val gigya = Gigya.getInstance(MyAccount::class.java)
// Create OwnID Gigya instance
OwnId.createGigyaInstance(this /* Context */, gigya)
}
}

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.

Finally, locate ReactNativeHost’s getPackages() method and add the com.ownid.sdk.OwnIdPackage package to the packages list getPackages().

See complete example here.

override fun getPackages(): List<ReactPackage> =
PackageList(this).packages.apply {
add(OwnIdPackage())
}

Configure iOS#

Add Package Dependency

The OwnID iOS SDK is distributed as an SPM package. Use the Swift Package Manager to add the following package dependency to your project:

https://github.com/OwnID/ownid-ios-sdk

When prompted, select the OwnIDGigyaSDK product.

Add Property List File to Project

When the application starts, the OwnID SDK automatically reads OwnIDConfiguration.plist from the file system to configure the default instance that is 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:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>OwnIDRedirectionURL</key>
<string>com.myapp.demo://bazco</string>
<key>OwnIDAppID</key>
<string>47tb9nt6iaur0zv</string>
</dict>
</plist>

Where:

  • The OwnIDAppID is the unique AppID, which you can obtain from the 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)

Open your project and create a new URL type that corresponds to the redirection URL specified in OwnIDConfiguration.plist. In Xcode, go to Target > 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.ownid.demo.react://bazco, then you should copy com.ownid.demo.react and paste it into the URL Schemes field.

iOS URL Types

Add Source Files

Add the following source files directly to your project:

OwnIDReactCoreSDK : add OwnIDReactCoreSDK folder from project_root/node_modules/@ownid/react-native-core/ios. OwnIDReactGigyaSDK: add OwnIDReactGigyaSDK folder from project_root>/node_modules/@ownid/react-native-gigya/iOS.

note

When performing the actions described above, on the dialog, we recommend you to do the following:

  • Uncheck "Copy items if needed" checkbox
  • Make sure "Create groups" is selected.
  • Add files to your target in order to make it work properly

Initialize the SDK

Now that you have added the OwnID package dependency, you need to import the OwnID module so you can access the SDK features. Add the following import to your source files:

import OwnIDGigyaSDK

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).

Also, when react creates the OwnID button, the viewCreationClosure needs to receive the custom account schema you use to communicate with Gigya (example: MyAccount.self). Place the function createViewClosure() in the same main entry point of your app:

@main
struct ExampleApp: App {
init() {
//Init Gigya SDK
Gigya.sharedInstance(MyAccount.self)
//Init OwnID React SDK
OwnID.ReactGigyaSDK.configure()
//create view closure
createViewClosure()
}
private func createViewClosure() {
CreationInformation.shared.viewCreationClosure = { type in
let vc = OwnIDGigyaButtonViewController<MyAccount>()
vc.type = type
return vc
}
}
}

Step 4: Integrate OwnID with your React Native App#

Registration#

Import OwnIdButton and OwnIdRegister functions and add them to your Registration screen:

import { OwnIdButton, OwnIdRegister } from '@ownid/react-native-gigya';

Add the passwordless authentication to your application's Registration screen by including the OwnIdButton view with type register. Call OwnIdRegister function once the user finishes OwnID flow and submits the registration form.

See complete example here.

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [ownIdReadyToRegister, setOwnIdReadyToRegister] = useState(false);
const onSubmit = async (event) => {
event.preventDefault();
...
if (ownIdReadyToRegister) {
const profile = JSON.stringify({ firstName: name });
OwnIdRegister(email, { profile });
return;
}
...
}
const onOwnIdEvent = (event) => {
switch (event.eventType) {
// Event when OwnID is busy processing request
case 'OwnIdRegisterEvent.Busy':
/* Show busy status 'event.isBusy' according to your application UI */
break;
// Event when user successfully finishes Skip Password in OwnID Web App
case 'OwnIdRegisterEvent.ReadyToRegister':
setOwnIdReadyToRegister(true);
setEmail(event.loginId); // OwnID Web App may ask user to enter his login id (like email)
break;
// Event when user select "Undo" option in ready-to-register state
case 'OwnIdRegisterEvent.Undo':
setOwnIdReadyToRegister(false);
break;
// Event when OwnID creates Gigya account and logs in user
case 'OwnIdRegisterEvent.LoggedIn':
setOwnIdReadyToRegister(false);
/* User is logged in with OwnID */
break;
// Event when OwnID returns an error
case 'OwnIdRegisterEvent.Error':
/* Handle 'event.cause' according to your application flow */
break;
}
};
return (
<View>
<TextInput value={name} onChangeText={setName} placeholder="First Name"/>
<TextInput value={email} onChangeText={setEmail} placeholder="Email"/>
<View>
<TextInput placeholder="Password" secureTextEntry={true}/>
<OwnIdButton type="register" loginId={email} onOwnIdEvent={onOwnIdEvent} />
</View>
<TouchableOpacity onPress={onSubmit}><Text>Create Account</Text></TouchableOpacity>
</View>
);

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 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 passed to the Gigya registration call.

Login#

The process of implementing your Login screen is very similar to the one used to implement the Registration screen - add an OwnIdButton view to your Login screen. Your app then waits for events while the user interacts with OwnID.

Import OwnIdButton function:

import { OwnIdButton } from '@ownid/react-native-gigya';

Similar to the Registration screen, add the passwordless authentication to your application's Login screen by including the OwnIdButton view with type login.

See complete example here.

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const onOwnIdEvent = (event) => {
switch (event.eventType) {
// Event when OwnID is busy processing request
case 'OwnIdLoginEvent.Busy':
/* Show busy status 'event.isBusy' according to your application UI */
break;
//Event when user who previously set up OwnID logs in with Skip Password
case 'OwnIdLoginEvent.LoggedIn':
/* User is logged in with OwnID */
break;
// Event when OwnID returns an error
case 'OwnIdLoginEvent.Error':
/* Handle 'event.cause' according to your application flow */
break;
}
};
return (
<View>
<TextInput value={email} onChangeText={setEmail} placeholder="Email"/>
<View>
<TextInput value={password} onChangeText={setPassword} placeholder="Password" secureTextEntry={true} />
<OwnIdButton type="login" loginId={email} onOwnIdEvent={onOwnIdEvent} />
</View>
...
</View>
);

Customizing the UI#

View ExampleView Example

The following is a complete list of 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:

<OwnIdButton ... showOr={true} style={{ backgroundColor: "#FFFFFF", biometryIconColor: "#0070F2", borderColor: "#D0D0D0" }}/>