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 CDC#

Configuring CDC includes creating a new CDC application with appropriate permissions.

Create Permissions Group and Application Key/Secret#

The 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 Application#

An 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 project#

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

npm install @ownid/react-native-core @ownid/react-native-gigya
cd ios && pod install && cd .. # CocoaPods on iOS needs this extra step

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 instance#

Before 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:

import OwnIdGigya from '@ownid/react-native-gigya';

OwnIdGigya.init({ app_id: "47tb9nt6iaur0zv", redirection_uri_ios: "com.myapp.demo://bazco" });

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.

Registration#

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

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

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: OwnIdEvent) => {
  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"/>
      <OwnIdButton type={OwnIdButtonType.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 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.

Login#

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

import { OwnIdButton, OwnIdButtonType, OwnIdEvent, OwnIdLoginEvent } from '@ownid/react-native-gigya';

const [email, setEmail] = useState('');

const onOwnIdEvent = (event: OwnIdEvent) => {
  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} placeholder="Email"/>

    <View>
      <TextInput placeholder="Password"/>
      <OwnIdButton type={OwnIdButtonType.Login} loginId={email} onOwnIdEvent={onOwnIdEvent} />
    </View>
    ...
  </View>
);

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:

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

Advanced Configuration#

Native initialization#

In 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 file#

The 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:

{
   "app_id": "47tb9nt6iaur0zv"
}

Create OwnID Gigya instance#

Most 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

class MyApplication : Application() {
   override fun onCreate() {
      super.onCreate()
      // Create Gigya instance
      Gigya.setApplication(this)

      // Create OwnID Gigya instance
      OwnId.createGigyaInstance(this /* Context */)

      // If you use custom account class
      // OwnId.createGigyaInstance(this, gigya = Gigya.getInstance(MyAccount::class.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 project#

When 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:

<?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 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 SDK#

Import the OwnID module so that you can access the SDK features. Add the following import to your native source files:

import SDKGigya

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:

@main
struct ExampleApp: App {

    init() {
        //Init Gigya SDK
        Gigya.sharedInstance(MyAccount.self)
        
        //Init OwnID React SDK
        OwnID.ReactGigyaSDK.configure(MyAccount.self)
    }
  }
}