11

Authentication

To use the SDK, you’ll need two kinds of API keys: A CDP API Key to send data to Customer.io and a Site ID, telling the SDK which workspace your messages come from.

These keys come from different places in Customer.io!

1. CDP API Key: You’ll get this key when you set up your mobile app as a data sourceA source is a website or server that you want to capture data from—it’s a source of data! in Customer.io.
2. Site ID: This key tells the SDK which workspace your in-app messages come from. You’ll use it to support inApp messages. If you’re upgrading from a previous version of the Customer.io SDK, it also serves as the migrationSiteId.

Get your CDP API Key

You’ll use your write key to initialize the SDK and send data to Customer.io; you’ll get this key from your mobile app’s data sourceA source is a website or server that you want to capture data from—it’s a source of data! in Customer.io. If you don’t already have a mobile data source, you’ll need to set one up.

1. Go to the Data Pipelines tab.
2. On the Connections page under Sources, select your React Native source. If there is no React Native source, you’ll need to set one up.

   

   
3. Go to Settings and find your API Key. Copy this key into the CioConfig.CdpApiKey config option.

   

   

   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,
         inApp: {
            siteId: 'site_id',
         }
      };
      CustomerIO.initialize(config)
      }, [])
   }

Set up a new source

If you don’t already have a write key, you’ll need to set up a new data sourceA source is a website or server that you want to capture data from—it’s a source of data!. The source represents your app and the stream of data that you’ll send to Customer.io.

1. Go to the Data Pipelines tab. On the Connections page under Sources, click Add Source.
2. Select the Mobile: React Native source and then click Next: Connect React Native.

   

   
3. Enter a Name for the source, like “My React Native App”.
4. We’ll present you with a code sample containing a cdpApiKey that you’ll use to initialize the SDK. Copy this key and keep it handy.
5. Click Complete Setup to finish setting up your source.

   

   

Now the Connections page shows that your React Native source is connected to your Journeys workspace. Hover over a source or destination to see its active connections. You can also connect your React Native source to additional destinations if you want to send your mobile data to additional services—like your analytics provider, data warehouse, or CRM.

Get your Site ID

You’ll use your site ID with the inApp option to support in-app messaging.

And if you’re upgrading from a previous version of the SDK, you’ll also use your site ID as your migrationSiteId. This key is used to send remaining tasks to Customer.io when your audience updates your app.

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.

   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,
      logLevel: CioLogLevel.Debug,
      trackApplicationLifecycleEvents: true,
      inApp: {
         siteId: 'site_id',
      },
      push: {
         android: {
            pushClickBehavior: PushClickBehaviorAndroid.ResetTaskStack
         }
      }
   };
   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.