Merge pull request #7 from contentpass/CP-2494-add-observer-for-notifying-about-changes-in-state

Cp 2494 add observer for notifying about changes in state

Author: slawomirzaba

.yarn/patches/@sourcepoint-react-native-cmp-patch-34fca36663.patch

@@ -0,0 +1,13 @@
+diff --git a/android/src/main/java/com/sourcepoint/reactnativecmp/RNSourcepointCmpTypes.kt b/android/src/main/java/com/sourcepoint/reactnativecmp/RNSourcepointCmpTypes.kt
+index bb8c6c37adc3d7980c7e92268b98b9d97ef8de40..3d67b3a3f44743c4542a1966e66e1af3ea93c555 100644
+--- a/android/src/main/java/com/sourcepoint/reactnativecmp/RNSourcepointCmpTypes.kt
++++ b/android/src/main/java/com/sourcepoint/reactnativecmp/RNSourcepointCmpTypes.kt
+@@ -16,7 +16,7 @@ data class SPCampaign(
+   val rawTargetingParam: ReadableMap?,
+   val supportLegacyUSPString: Boolean
+ ) {
+-  val targetingParams = rawTargetingParam?.toHashMap()?.map { TargetingParam(it.key, it.toString()) } ?: emptyList()
++  val targetingParams = rawTargetingParam?.toHashMap()?.map { TargetingParam(it.key, it.value.toString()) } ?: emptyList()
+ }
+ 
+ data class SPCampaigns(

package.json

@@ -92,7 +92,7 @@
   },
   "resolutions": {
     "@types/react": "^18.2.44",
-    "@sourcepoint/react-native-cmp@^0.3.0": "patch:@sourcepoint/react-native-cmp@npm%3A0.3.0#./.yarn/patches/@sourcepoint-react-native-cmp-npm-0.3.0-2434c31dc9.patch"
+    "@sourcepoint/react-native-cmp@^0.3.0": "patch:@sourcepoint/react-native-cmp@patch%3A@sourcepoint/react-native-cmp@npm%253A0.3.0%23./.yarn/patches/@sourcepoint-react-native-cmp-npm-0.3.0-2434c31dc9.patch%3A%3Aversion=0.3.0&hash=664e70&locator=react-native-contentpass%2540workspace%253A.#./.yarn/patches/@sourcepoint-react-native-cmp-patch-34fca36663.patch"
   },
   "peerDependencies": {
     "react": "*",

sharedExample/src/ContentpassUsage.tsx

@@ -1,7 +1,7 @@
 import { useContentpassSdk } from './ContentpassContext';
 import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { AuthenticateResult } from 'react-native-contentpass';
+import { useEffect, useRef, useState } from 'react';
+import type { ContentpassState } from 'react-native-contentpass';
 import {
   SPConsentManager,
   type SPUserData,
@@ -13,6 +13,11 @@ const styles = StyleSheet.create({
     height: 400,
     flexGrow: 0,
   },
+  buttonsContainer: {
+    display: 'flex',
+    gap: 4,
+    marginTop: 10,
+  },
   logsView: {
     marginTop: 10,
   },
@@ -40,21 +45,13 @@ const setupSourcepoint = (hasValidSubscription: boolean) => {
 };
 
 export default function ContentpassUsage() {
-  const [authResult, setAuthResult] = useState<
-    AuthenticateResult | undefined
-  >();
+  const [authResult, setAuthResult] = useState<ContentpassState | undefined>();
   const contentpassSdk = useContentpassSdk();
   const spConsentManager = useRef<SPConsentManager | null>();
   const [sourcepointUserData, setSourcepointUserData] = useState<
     SPUserData | undefined
   >();
 
-  const authenticate = useCallback(async () => {
-    spConsentManager.current?.dispose();
-    const result = await contentpassSdk.authenticate();
-    setAuthResult(result);
-  }, [contentpassSdk]);
-
   useEffect(() => {
     spConsentManager.current = setupSourcepoint(
       authResult?.hasValidSubscription ?? false
@@ -66,7 +63,7 @@ export default function ContentpassUsage() {
 
     spConsentManager.current?.onAction((action) => {
       if (action.customActionId === "cp('login')") {
-        authenticate();
+        contentpassSdk.authenticate();
       }
     });
 
@@ -75,7 +72,18 @@ export default function ContentpassUsage() {
     return () => {
       spConsentManager.current?.dispose();
     };
-  }, [authResult, authenticate]);
+  }, [authResult, contentpassSdk]);
+
+  useEffect(() => {
+    const onContentpassStateChange = (state: ContentpassState) => {
+      setAuthResult(state);
+    };
+    contentpassSdk.registerObserver(onContentpassStateChange);
+
+    return () => {
+      contentpassSdk.unregisterObserver(onContentpassStateChange);
+    };
+  }, [contentpassSdk]);
 
   const clearSourcepointData = () => {
     spConsentManager.current?.clearLocalData();
@@ -85,7 +93,13 @@ export default function ContentpassUsage() {
 
   return (
     <>
-      <Button title={'Clear sourcepoint data'} onPress={clearSourcepointData} />
+      <View style={styles.buttonsContainer}>
+        <Button
+          title={'Clear sourcepoint data'}
+          onPress={clearSourcepointData}
+        />
+        <Button title={'Logout'} onPress={contentpassSdk.logout} />
+      </View>
       <View style={styles.logsView}>
         <Text>Authenticate result:</Text>
         <Text>{JSON.stringify(authResult, null, 2)}</Text>

sharedExample/src/contentpassConfig.ts

@@ -1,6 +1,6 @@
-import type { Config } from 'react-native-contentpass';
+import type { ContentpassConfig } from 'react-native-contentpass';
 
-export const contentpassConfig: Config = {
+export const contentpassConfig: ContentpassConfig = {
   propertyId: 'cc3fc4ad-cbe5-4d09-bf85-a49796603b19',
   redirectUrl: 'de.contentpass.demo://oauth',
   issuer: 'https://my.contentpass.dev',

src/OidcAuthStateStorage.ts

@@ -1,20 +1,27 @@
 import EncryptedStorage from 'react-native-encrypted-storage';
-import type { AuthorizeResult } from 'react-native-app-auth';
 
 const AUTH_STATE_KEY = 'OIDCAuthState';
 
+export type OidcAuthState = {
+  accessToken: string;
+  accessTokenExpirationDate: string;
+  idToken: string;
+  refreshToken: string | null;
+  tokenType: string;
+};
+
 export default class OidcAuthStateStorage {
   private readonly key;
 
   constructor(clientId: string) {
     this.key = `de.contentpass.${clientId}-${AUTH_STATE_KEY}`;
   }
 
-  public async storeOidcAuthState(authState: AuthorizeResult) {
+  public async storeOidcAuthState(authState: OidcAuthState) {
     await EncryptedStorage.setItem(this.key, JSON.stringify(authState));
   }
 
-  public async getOidcAuthState() {
+  public async getOidcAuthState(): Promise<OidcAuthState | undefined> {
     const oidcAuthStateString = await EncryptedStorage.getItem(this.key);
 
     return oidcAuthStateString ? JSON.parse(oidcAuthStateString) : undefined;

src/oidcConsts.ts src/consts/oidcConsts.tssrc/oidcConsts.ts renamed to src/consts/oidcConsts.ts

@@ -1,2 +1,3 @@
 export const SCOPES = ['openid', 'offline_access', 'contentpass'];
 export const TOKEN_ENDPOINT = `/auth/oidc/token`;
+export const REFRESH_TOKEN_RETRIES = 6;