Authentication

To use the SDK, you need a public API key (beginning with pk_) to send data to Customer.io. If you upgrade from an earlier SDK version, or use in-app messaging with an SDK version before 7.2.0, you also need your Site ID.

These keys come from different places in Customer.io!

1. Public API key: This key starts with pk_ and is shown in code samples as cdpApiKey. You’ll get this key when you set up your mobile app as a data-in integration in Customer.io, or you can create one for an existing integration on the API Credentials page.
2. Site ID: If you’re upgrading from a previous version of the Customer.io SDK, you set your Site ID as the migrationSiteId. In SDK versions before 7.2.0, you also need it in the inApp option to support in-app messages. In 7.2.0 and later, the SDK uses your public key for in-app messages instead.

Get your public key

You’ll use your public key to initialize the SDK and send data to Customer.io; you’ll get this key from your React Native entry under Integrations. If you don’t see your app on this page, you’ll need to add up a new integration.

1. Go to Integrations.
2. Go to the Connections tab and find your React Native connection. If you don’t have a React Native connection, you’ll need to set one up.

   

3. Go to Settings and find your public key. It starts with pk_. Copy this key into the CioConfig.CdpApiKey config option.

   

   JAVASCRIPT

   Copy

   import {
   CioRegion, CustomerIO, CioConfig
   } from 'customerio-reactnative';
   
   const App = () => {
   
   useEffect(() => {
      const config: CioConfig = {
         cdpApiKey: 'CDP API Key', // Mandatory
         migrationSiteId: 'siteId', // Required if migrating from an earlier version
         region: CioRegion.US, // Replace with CioRegion.EU if your Customer.io account is in the EU.
         inApp: {
            siteId: 'site_id',
         }
      };
      CustomerIO.initialize(config)
      }, [])
   }
   

Add a new integration

If you don’t already have a public key, you’ll need to set up a new connection . The connection represents your app and the stream of data that you’ll send to Customer.io.

1. Go to Integrations and click Add integration.
2. Select React Native.
3. Enter a Name for your integration, like “My React Native App”.
4. Click the Copy and paste code tab. The code sample includes your public key (beginning with pk_) as cdpApiKey. Copy this key and keep it handy; you’ll need it to initialize the SDK.

   

5. Click Test connection to check that Customer.io receives data from your app, and then click Complete setup. If you aren’t ready to test your app yet, click Save for later.

Remember, you can also connect your React Native app to services outside of Customer.io—like your analytics provider, data warehouse, or CRM.

Get your Site ID

If you’re upgrading from a previous version of the SDK, you set your Site ID as your migrationSiteId. The SDK uses it to send remaining tasks to Customer.io when your audience updates your app.

If you use an SDK version before 7.2.0, you also need your Site ID in the inApp option. In 7.2.0 and later, the SDK uses your public key for in-app messages, so you can leave out the Site ID and pass an empty inApp object instead.

1. Go to Settings > Workspace Settings in the upper-right corner of the Customer.io app and go to API and Webhook Credentials.

2. Copy the Site ID for the set of credentials that you want to send your in-app messages from. If you don’t have a set of credentials, click Create Tracking API Key.

   

3. You’ll use this key to initialize the inApp package.

   JAVASCRIPT

   Copy

   import {
   CioLogLevel, CioRegion, CustomerIO, CioConfig
   } from 'customerio-reactnative';
   
   const App = () => {
   
   useEffect(() => {
   const config: CioConfig = {
      cdpApiKey: 'CDP API Key', // Mandatory
      migrationSiteId: 'siteId', // Required if migrating from an earlier version
      region: CioRegion.US, // Replace with CioRegion.EU if your Customer.io account is in the EU.
      logLevel: CioLogLevel.Debug,
      trackApplicationLifecycleEvents: true,
      inApp: {
         siteId: 'site_id',
      },
      push: {
         android: {
            pushClickBehavior: PushClickBehaviorAndroid.ActivityPreventRestart
         }
      }
   };
   CustomerIO.initialize(config)
   }, [])
   }

Securing your credentials

To simplify things, code samples in our documentation sometimes show API keys directly in your code. But you don’t have to hard-code your keys in your app. You can use environment variables, management tools that handle secrets, or other methods to keep your keys secure if you’re concerned about security.

To be clear, the keys that you’ll use to initialize the SDK don’t provide read access to data in Customer.io; they only write data to Customer.io. A bad actor who found your credentials can’t use your keys to read data from our servers.