feat: start using contentpass sdk in expo app

Author: slawomirzaba

expoExample/App.tsx

@@ -93,6 +93,9 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0.0"
+        manifestPlaceholders = [
+          appAuthRedirectScheme: 'de.contentpass.demo'
+        ]
     }
     signingConfigs {
         debug {

expoExample/android/app/build.gradle

@@ -1,6 +1,6 @@
 import { registerRootComponent } from 'expo';
 
-import App from './App';
+import App from './src/App';
 
 // registerRootComponent calls AppRegistry.registerComponent('main', () => App);
 // It also ensures that whether you load the app in Expo Go or in a native build,

expoExample/index.ts

@@ -273,6 +273,7 @@
 			);
 			inputPaths = (
 				"${PODS_ROOT}/Target Support Files/Pods-ContentpassExpoExample/Pods-ContentpassExpoExample-resources.sh",
+				"${PODS_CONFIGURATION_BUILD_DIR}/AppAuth/AppAuthCore_Privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/EXConstants.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/EXConstants/ExpoConstants_privacy.bundle",
 				"${PODS_CONFIGURATION_BUILD_DIR}/ExpoFileSystem/ExpoFileSystem_privacy.bundle",
@@ -284,6 +285,7 @@
 			);
 			name = "[CP] Copy Pods Resources";
 			outputPaths = (
+				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/AppAuthCore_Privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/EXConstants.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoConstants_privacy.bundle",
 				"${TARGET_BUILD_DIR}/${UNLOCALIZED_RESOURCES_FOLDER_PATH}/ExpoFileSystem_privacy.bundle",

expoExample/ios/ContentpassExpoExample.xcodeproj/project.pbxproj

@@ -1,7 +1,10 @@
+#import <React/RCTLinkingManager.h>
+#import "RNAppAuthAuthorizationFlowManager.h"
 #import <RCTAppDelegate.h>
 #import <UIKit/UIKit.h>
 #import <Expo/Expo.h>
 
-@interface AppDelegate : EXAppDelegateWrapper
+@interface AppDelegate : EXAppDelegateWrapper <RNAppAuthAuthorizationFlowManager>
+@property(nonatomic, weak) id<RNAppAuthAuthorizationFlowManagerDelegate> authorizationFlowManagerDelegate;
 
 @end

expoExample/ios/ContentpassExpoExample/AppDelegate.h

@@ -1,4 +1,10 @@
 PODS:
+  - AppAuth (1.7.6):
+    - AppAuth/Core (= 1.7.6)
+    - AppAuth/ExternalUserAgent (= 1.7.6)
+  - AppAuth/Core (1.7.6)
+  - AppAuth/ExternalUserAgent (1.7.6):
+    - AppAuth/Core
   - boost (1.84.0)
   - DoubleConversion (1.1.6)
   - EXConstants (17.0.3):
@@ -1277,6 +1283,11 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
+  - react-native-app-auth (8.0.1):
+    - AppAuth (>= 1.7.6)
+    - React-Core
+  - react-native-encrypted-storage (4.0.3):
+    - React-Core
   - React-nativeconfig (0.76.3)
   - React-NativeModulesApple (0.76.3):
     - glog
@@ -1592,6 +1603,8 @@ DEPENDENCIES:
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
   - React-microtasksnativemodule (from `../node_modules/react-native/ReactCommon/react/nativemodule/microtasks`)
+  - react-native-app-auth (from `../node_modules/react-native-app-auth`)
+  - react-native-encrypted-storage (from `../node_modules/react-native-encrypted-storage`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
   - React-perflogger (from `../node_modules/react-native/ReactCommon/reactperflogger`)
@@ -1623,6 +1636,7 @@ DEPENDENCIES:
 
 SPEC REPOS:
   trunk:
+    - AppAuth
     - SocketRocket
 
 EXTERNAL SOURCES:
@@ -1711,6 +1725,10 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon"
   React-microtasksnativemodule:
     :path: "../node_modules/react-native/ReactCommon/react/nativemodule/microtasks"
+  react-native-app-auth:
+    :path: "../node_modules/react-native-app-auth"
+  react-native-encrypted-storage:
+    :path: "../node_modules/react-native-encrypted-storage"
   React-nativeconfig:
     :path: "../node_modules/react-native/ReactCommon"
   React-NativeModulesApple:
@@ -1769,6 +1787,7 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
+  AppAuth: d4f13a8fe0baf391b2108511793e4b479691fb73
   boost: 1dca942403ed9342f98334bf4c3621f011aa7946
   DoubleConversion: f16ae600a246532c4020132d54af21d0ddb2a385
   EXConstants: dd2fe64c6cdb1383b694c309a63028a8e9f2be6d
@@ -1811,6 +1830,8 @@ SPEC CHECKSUMS:
   React-logger: 26155dc23db5c9038794db915f80bd2044512c2e
   React-Mapbuffer: ad1ba0205205a16dbff11b8ade6d1b3959451658
   React-microtasksnativemodule: e771eb9eb6ace5884ee40a293a0e14a9d7a4343c
+  react-native-app-auth: 79605228ffe689f63ad5b046319f5e154e3e96c2
+  react-native-encrypted-storage: db300a3f2f0aba1e818417c1c0a6be549038deb7
   React-nativeconfig: aeed6e2a8ac02b2df54476afcc7c663416c12bf7
   React-NativeModulesApple: c5b7813da94136f50ef084fa1ac077332dcfc658
   React-perflogger: 6afb7eebf7d9521cc70481688ccddf212970e9d3

expoExample/ios/Podfile.lock

@@ -11,7 +11,9 @@
     "expo": "~52.0.11",
     "expo-status-bar": "~2.0.0",
     "react": "18.3.1",
-    "react-native": "0.76.3"
+    "react-native": "0.76.3",
+    "react-native-app-auth": "^8.0.1",
+    "react-native-encrypted-storage": "^4.0.3"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

expoExample/package.json

@@ -0,0 +1,26 @@
+import { StyleSheet, View } from 'react-native';
+import { ContentpassSdkProvider } from './ContentpassContext';
+import ContentpassUsage from './ContentpassUsage';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});
+
+export default function App() {
+  return (
+    <ContentpassSdkProvider>
+      <View style={styles.container}>
+        <ContentpassUsage />
+      </View>
+    </ContentpassSdkProvider>
+  );
+}

expoExample/src/App.tsx

@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { Contentpass } from 'react-native-contentpass';
+import { contentpassConfig } from './contentpassConfig';
+
+const contentpassSdkContext = createContext<Contentpass | undefined>(undefined);
+
+export const ContentpassSdkProvider = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const [contentpassSdk, setContentpassSdk] = useState<
+    Contentpass | undefined
+  >();
+
+  useEffect(() => {
+    const contentpass = new Contentpass(contentpassConfig);
+
+    setContentpassSdk(contentpass);
+  }, []);
+
+  if (!contentpassSdk) {
+    return null;
+  }
+
+  return (
+    <contentpassSdkContext.Provider value={contentpassSdk}>
+      {children}
+    </contentpassSdkContext.Provider>
+  );
+};
+
+export const useContentpassSdk = () => {
+  const contentpassSdk = useContext(contentpassSdkContext);
+
+  if (!contentpassSdk) {
+    throw new Error(
+      'useContentpassSdk must be used within a ContentpassSdkProvider'
+    );
+  }
+
+  return contentpassSdk;
+};

expoExample/src/ContentpassContext.tsx

@@ -0,0 +1,23 @@
+import { useContentpassSdk } from './ContentpassContext';
+import { Button, Text } from 'react-native';
+import { useState } from 'react';
+import type { AuthenticateResult } from 'react-native-contentpass';
+
+export default function ContentpassUsage() {
+  const [authResult, setAuthResult] = useState<
+    AuthenticateResult | undefined
+  >();
+  const contentpassSdk = useContentpassSdk();
+
+  const authenticate = async () => {
+    const result = await contentpassSdk.authenticate();
+    setAuthResult(result);
+  };
+
+  return (
+    <>
+      <Button title={'Authenticate'} onPress={authenticate} />
+      <Text>Result: {JSON.stringify(authResult)}</Text>
+    </>
+  );
+}