From 445b3e339215403bd60244b02b090ddf95b707a4 Mon Sep 17 00:00:00 2001 From: Maximilian Haupt Date: Fri, 20 Feb 2026 13:34:09 +0100 Subject: [PATCH 1/5] chore: remove debug logs --- .../src/OnetrustCmpAdapter.ts | 2 -- .../src/components/ContentpassConsentGate.tsx | 7 ------- .../src/components/ContentpassLayer.tsx | 2 +- 3 files changed, 1 insertion(+), 10 deletions(-) diff --git a/packages/react-native-contentpass-cmp-onetrust/src/OnetrustCmpAdapter.ts b/packages/react-native-contentpass-cmp-onetrust/src/OnetrustCmpAdapter.ts index a1803e0..da6da01 100644 --- a/packages/react-native-contentpass-cmp-onetrust/src/OnetrustCmpAdapter.ts +++ b/packages/react-native-contentpass-cmp-onetrust/src/OnetrustCmpAdapter.ts @@ -9,11 +9,9 @@ export async function createOnetrustCmpAdapter( ): Promise { try { const bannerData = await sdk.getBannerData(); - console.log('Banner data', bannerData); const preferenceCenterData: PreferenceCenterData = await sdk.getPreferenceCenterData(); - console.log('Preference center data', preferenceCenterData); return new OnetrustCmpAdapter(sdk, bannerData, preferenceCenterData); } catch (error: any) { diff --git a/packages/react-native-contentpass-ui/src/components/ContentpassConsentGate.tsx b/packages/react-native-contentpass-ui/src/components/ContentpassConsentGate.tsx index d9c585a..90167c0 100644 --- a/packages/react-native-contentpass-ui/src/components/ContentpassConsentGate.tsx +++ b/packages/react-native-contentpass-ui/src/components/ContentpassConsentGate.tsx @@ -132,13 +132,6 @@ export default function ContentpassConsentGate({ cpAuthState.state === ContentpassStateType.AUTHENTICATED || hasFullConsent; const visible = !isFine; - console.log( - '>>> Changing visibility to', - visible, - isFine, - cpAuthState.state, - hasFullConsent - ); if (visible !== isVisible) { onVisibilityChange?.(visible); } diff --git a/packages/react-native-contentpass-ui/src/components/ContentpassLayer.tsx b/packages/react-native-contentpass-ui/src/components/ContentpassLayer.tsx index e10bec3..aea91b0 100644 --- a/packages/react-native-contentpass-ui/src/components/ContentpassLayer.tsx +++ b/packages/react-native-contentpass-ui/src/components/ContentpassLayer.tsx @@ -92,7 +92,7 @@ export default function ContentpassLayer({ } if (!msg || msg.protocol !== MESSAGE_PROTOCOL) { - console.log('WebView message with unknown protocol', msg.protocol, msg); + console.warn('WebView message with unknown protocol', msg.protocol, msg); return; } From c097eca8ab43e49e9b5d13541f12a4c0cb4228ad Mon Sep 17 00:00:00 2001 From: Maximilian Haupt Date: Fri, 20 Feb 2026 13:35:28 +0100 Subject: [PATCH 2/5] chore: switch to classic-app theme --- .../src/components/buildFirstLayerUrl.test.ts | 2 +- .../src/components/buildFirstLayerUrl.ts | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.test.ts b/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.test.ts index 9b5f80a..36b6d33 100644 --- a/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.test.ts +++ b/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.test.ts @@ -26,7 +26,7 @@ describe('buildFirstLayerUrl', () => { const url = buildFirstLayerUrl(defaultParams); const parsed = new URL(url); - expect(parsed.searchParams.get('theme')).toBe('steps'); + expect(parsed.searchParams.get('theme')).toBe('classic-app'); }); it('should include the SDK version parameter', () => { diff --git a/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.ts b/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.ts index 8755a33..a0b31cd 100644 --- a/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.ts +++ b/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.ts @@ -1,6 +1,4 @@ -// const THEME = 'classic'; -// const THEME = 'classic-app'; -const THEME = 'steps'; +const THEME = 'classic-app'; // FIXME pass something from this SDK? const SDK_VERSION = '20260203105802-ef26e7d899'; From 62a98646501390741a4aef03b09ba8e7ac2636a2 Mon Sep 17 00:00:00 2001 From: Maximilian Haupt Date: Fri, 20 Feb 2026 13:38:47 +0100 Subject: [PATCH 3/5] chore: pass proper version to layer --- .../src/components/buildFirstLayerUrl.test.ts | 4 ++++ .../src/components/buildFirstLayerUrl.ts | 5 +++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.test.ts b/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.test.ts index 36b6d33..dd91f7b 100644 --- a/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.test.ts +++ b/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.test.ts @@ -1,3 +1,4 @@ +import packageJson from '../../package.json'; import buildFirstLayerUrl from './buildFirstLayerUrl'; describe('buildFirstLayerUrl', () => { @@ -34,6 +35,9 @@ describe('buildFirstLayerUrl', () => { const parsed = new URL(url); expect(parsed.searchParams.get('v')).toBeTruthy(); + expect(parsed.searchParams.get('v')).toBe( + `react-native-contentpass-ui@${packageJson.version}` + ); }); it('should set locale to en-US', () => { diff --git a/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.ts b/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.ts index a0b31cd..c1ca416 100644 --- a/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.ts +++ b/packages/react-native-contentpass-ui/src/components/buildFirstLayerUrl.ts @@ -1,7 +1,8 @@ +import packageJson from '../../package.json'; + const THEME = 'classic-app'; -// FIXME pass something from this SDK? -const SDK_VERSION = '20260203105802-ef26e7d899'; +const SDK_VERSION = `react-native-contentpass-ui@${packageJson.version}`; export default function buildFirstLayerUrl({ baseUrl, From 4f33c4036d7b549a3b893813d4e45b7022e5589d Mon Sep 17 00:00:00 2001 From: Maximilian Haupt Date: Fri, 20 Feb 2026 14:00:24 +0100 Subject: [PATCH 4/5] docs: update README files --- README.md | 153 ++------------- .../README.md | 113 +++++++++++ .../react-native-contentpass-ui/README.md | 65 ++++++- packages/react-native-contentpass/README.md | 180 ++++++++++++++++++ 4 files changed, 369 insertions(+), 142 deletions(-) create mode 100644 packages/react-native-contentpass-cmp-onetrust/README.md create mode 100644 packages/react-native-contentpass/README.md diff --git a/README.md b/README.md index 0ebf92a..495ae42 100644 --- a/README.md +++ b/README.md @@ -1,150 +1,27 @@ -# @contentpass/react-native-contentpass +# react-native-contentpass -Contentpass React Native SDK enables easy integration of Contentpass functionality into your React Native applications. +Monorepo for the Contentpass React Native SDK and related packages. -## Installation -Install the package using npm or Yarn: +## Packages -```sh -npm install @contentpass/react-native-contentpass -``` +| Package | Description | +|---------|-------------| +| [`@contentpass/react-native-contentpass`](./packages/react-native-contentpass) | Core SDK — authentication, subscription validation, and impression tracking. | +| [`@contentpass/react-native-contentpass-ui`](./packages/react-native-contentpass-ui) | Pre-built UI components for the Contentpass consent layer. | +| [`@contentpass/react-native-contentpass-cmp-onetrust`](./packages/react-native-contentpass-cmp-onetrust) | OneTrust CMP adapter for the Contentpass SDK. | -or +## Examples -```sh -yarn add @contentpass/react-native-contentpass -``` - -### Peer Dependencies -The following peer dependencies must also be installed: -- [react](https://github.com/facebook/react) (Required for React Native projects.) -- [react-native](https://github.com/facebook/react-native) (Core React Native framework) -- [react-native-app-auth](https://github.com/FormidableLabs/react-native-app-auth) (Used for OAuth 2.0 authentication) -- [react-native-encrypted-storage](https://github.com/emeraldsanto/react-native-encrypted-storage) (Ensures secure storage of authentication tokens) - -Some dependencies require additional setup in the native code. Refer to their official guides: -- [react-native-app-auth setup](https://commerce.nearform.com/open-source/react-native-app-auth/docs#setup) -- [react-native-encrypted-storage setup](https://github.com/emeraldsanto/react-native-encrypted-storage?tab=readme-ov-file#installation) - -### Expo support -If you are using Expo, you need to run the following command to enable modifications to the `ios` and `android` directories: - -```sh -npx expo prebuild -``` - -## Usage - -### Initialization -Wrap your app's root component with ContentpassSdkProvider. The provider requires a configuration object (contentpassConfig) with the following properties: -- `propertyId` - Your unique property ID (ask Contentpass team for details) -- `planId` - The ID of the plan you want to check the user's subscription status against (ask Contentpass team for details) -- `issuer` - The OAuth 2.0 server URL (e.g. `https://my.contentpass.net`) -- `redirectUrl` - the redirect URL of your app to which the OAuth2 server will redirect after the authentication -- `samplingRate` - Optional: The rate at which the SDK will send impression events for unauthenticated users. Default is 0.05 (5%) -- `logLevel` - Optional: The log level for the SDK. By default logger is disabled. Possible values are 'info', 'warn', 'error' and 'debug' - - -```jsx -import React from 'react'; -import { ContentpassSdkProvider } from '@contentpass/react-native-contentpass'; - -const contentpassConfig = { - propertyId: 'property-id', - planId: 'plan-id', - issuer: 'https://my.contentpass.net', - redirectUrl: 'com.yourapp://oauthredirect', - samplingRate: 0.1, - logLevel: 'info' -}; - -const App = () => { - return ( - - - - ); -}; - -export default App; -``` - -### SDK Methods -The SDK exposes the following methods through the `useContentpassSdk` hook: - -### authenticate -Initiates the OAuth 2.0 authentication process via a modal interface. It validates the user’s active Contentpass subscriptions -upon successful authentication. - -### countImpression -Tracks and increments the impression count for the current user. This method should be invoked whenever a user views a -piece of content. It applies to all users, whether authenticated or unauthenticated. - -### registerObserver -Registers a callback function to listen for changes in the user’s authentication and subscription status. The observer function -receives a state object describing the current status (see the exported [ContentpassState](./packages/react-native-contentpass/src/types/ContentpassState.ts) type). - -### unregisterObserver -Unregisters a previously registered observer. The observer will no longer receive updates. - -### logout -Logs the user out by clearing all stored authentication tokens. - -### recoverFromError -During background token refresh, an error state may occur due to poor or no internet connection. This is indicated by the -`state` switching to `ERROR`. The state object includes a reference to the original exception that was thrown. As the SDK -does not monitor the device's connection state, you must notify the SDK when the network connection has been reestablished -or improved. The SDK will then refresh and revalidate the user's authentication tokens. - -```jsx -import React, { useEffect } from 'react'; -import { useContentpassSdk } from '@contentpass/react-native-contentpass'; -import { Button, View } from 'react-native'; - -const YourApp = () => { - const { - authenticate, - countImpression, - registerObserver, - unregisterObserver, - logout, - recoverFromError - } = useContentpassSdk(); - - useEffect(() => { - const observer = (state) => { - console.log('Contentpass state changed:', state); - }; - - registerObserver(observer); - - return () => { - unregisterObserver(observer); - }; - }, []); - - return ( - -