feat: add observer for notifying about changes in state

Author: slawomirzaba

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;