chore: Add example for with-thirdparty using Expo (#113)

* Add example for with-thirdparty using Expo

* Delete old example app

examples/with-thirdparty/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

examples/with-thirdparty/App.tsx

@@ -0,0 +1,46 @@
+import SuperTokens from "supertokens-react-native";
+import { API_DOMAIN } from "./constants";
+import { createNativeStackNavigator } from "@react-navigation/native-stack";
+import { NavigationContainer } from "@react-navigation/native";
+import { SplashScreen } from "./splash";
+import { LoginSreen } from "./login";
+import { HomeScreen } from "./home";
+import { SafeAreaProvider } from "react-native-safe-area-context";
+
+SuperTokens.init({
+  apiDomain: API_DOMAIN,
+});
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+export default function App() {
+  return (
+    <SafeAreaProvider>
+      <NavigationContainer>
+        <Stack.Navigator initialRouteName="Splash">
+          <Stack.Screen
+            name="Splash"
+            component={SplashScreen}
+            options={{
+              headerShown: false,
+            }}
+          />
+          <Stack.Screen
+            name="Login"
+            component={LoginSreen}
+            options={{
+              headerShown: false,
+            }}
+          />
+          <Stack.Screen
+            name="Home"
+            component={HomeScreen}
+            options={{
+              headerShown: false,
+            }}
+          />
+        </Stack.Navigator>
+      </NavigationContainer>
+    </SafeAreaProvider>
+  );
+}

examples/with-thirdparty/README.md

@@ -0,0 +1,63 @@
+# SuperTokens Example App
+
+## Add dependencies
+
+This example uses requires the following dependencies:
+
+- [@invertase/react-native-apple-authentication](https://github.com/invertase/react-native-apple-authentication)
+- [@react-native-async-storage/async-storage](https://github.com/react-native-async-storage/async-storage)
+- [@react-native-google-signin/google-signin](https://github.com/react-native-google-signin/google-signin)
+- [react-native-app-auth](https://github.com/FormidableLabs/react-native-app-auth)
+- [supertokens-react-native](https://github.com/supertokens/supertokens-react-native)
+
+```bash
+npm install supertokens-react-native react-native-app-auth @invertase/react-native-apple-authentication
+npx expo install @react-native-google-signin/google-signin
+npx expo install @react-native-async-storage/async-storage
+```
+
+This example uses Expo, you can refer to the documentation of the libraries to see the command to install them in a plain React Native project.
+
+This example app needed to prebuild the iOS and Android native code because it required custom native code. Refer to the Expo docs to know more.
+
+## Setup
+
+### Google
+
+- Create OAuth credentials for iOS on [Google cloud console](https://console.cloud.google.com/)
+- Create OAuth credentials for Web on [Google cloud console](https://console.cloud.google.com/). This is required because we need to get the authorization code in the app to be able to use SuperTokens. You need to provide all values (including domains and URLs) for Google login to work, you can use dummy values if you do not have a web application.
+- Replace all occurences of `GOOGLE_IOS_CLIENT_ID` with the client id for iOS in the app's code (including the info.plist)
+- Replace `GOOGLE_IOS_URL_SCHEME` with the value of `GOOGLE_IOS_CLIENT_ID` in reverse, for example if the iOS client id is `com.org.scheme` the value you want to set is `scheme.org.com`. Google cloud console will provide a way to copy the URL scheme to make this easier.
+- Replace all occurences of `GOOGLE_WEB_CLIENT_ID` with the client id for Web in both the iOS code (including the info.plist) and the backend code
+- Replace all occurences of `GOOGLE_WEB_CLIENT_SECRET` with the client secret in the backend code
+
+### Github
+
+- Create credentials for an OAuth app from Github Developer Settings
+- Use com.supertokens.supertokensexample://oauthredirect when configuring the Authorization callback URL. If you are using your own redirect url be sure to update the performGithubLogin function in `github.ts`
+- Replace all occurences of `GITHUB_CLIENT_ID` in both the frontend and backend
+- Replace all occurences of `GITHUB_CLIENT_SECRET` in the backend code
+
+### Apple
+
+- Add the Sign in with Apple capability for your app's primary target. This is already done for this example app so no steps are needed.
+- If you are not using Xcode's automatic signing you will need to manually add the capability against your bundle id in Apple's dashboard.
+- Replace all occurrences of `APPLE_CLIENT_ID`. This should match your bundle id
+- Replace all occurrences of `APPLE_KEY_ID`. You will need to create a new key with the Sign in with Apple capability on Apple's dashboard.
+- Replace all occurences of `APPLE_PRIVATE_KEY`, when you create a key there will be an option to download the private key. You can only download this once.
+- Replace all occurrences of `APPLE_TEAM_ID` with your Apple developer account's team id
+
+**In this example app, sign in with Apple is only available on iOS**
+
+## Running the app
+
+- Replace the value of the API domain in `constants.ts` and `/backend/config.ts` to match your machines local IP address
+- Navigate to the `/backend` folder and run `npm run start`
+- Run the app by running either `npm run ios` or `npm run android` depending on what platform you want to run on.
+
+## How it works
+
+- On app launch we check if a session exists and redirect to login if it doesnt
+- We initialise SuperTokens which also adds interceptors for `fetch`
+- After logging in we call APIs exposed by the SuperTokens backend SDKs to create a session and redirect to the home screen
+- On the home screen we call a protected API to fetch session information

examples/with-thirdparty/android/.gitignore

@@ -0,0 +1,15 @@
+# OSX
+#
+.DS_Store
+
+# Android/IntelliJ
+#
+build/
+.idea
+.gradle
+local.properties
+*.iml
+*.hprof
+
+# Bundle artifacts
+*.jsbundle

examples/with-thirdparty/android/app/build.gradle

@@ -0,0 +1,182 @@
+apply plugin: "com.android.application"
+apply plugin: "com.facebook.react"
+
+def projectRoot = rootDir.getAbsoluteFile().getParentFile().getAbsolutePath()
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+react {
+    entryFile = file(["node", "-e", "require('expo/scripts/resolveAppEntry')", projectRoot, "android", "absolute"].execute(null, rootDir).text.trim())
+    reactNativeDir = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+    hermesCommand = new File(["node", "--print", "require.resolve('react-native/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsolutePath() + "/sdks/hermesc/%OS-BIN%/hermesc"
+    codegenDir = new File(["node", "--print", "require.resolve('@react-native/codegen/package.json')"].execute(null, rootDir).text.trim()).getParentFile().getAbsoluteFile()
+
+    // Use Expo CLI to bundle the app, this ensures the Metro config
+    // works correctly with Expo projects.
+    cliFile = new File(["node", "--print", "require.resolve('@expo/cli')"].execute(null, rootDir).text.trim())
+    bundleCommand = "export:embed"
+
+    /* Folders */
+    //   The root of your project, i.e. where "package.json" lives. Default is '..'
+    // root = file("../")
+    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
+    // reactNativeDir = file("../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
+    // codegenDir = file("../node_modules/@react-native/codegen")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
+    // entryFile = file("../js/MyApplication.android.js")
+    //
+    //   A list of extra flags to pass to the 'bundle' commands.
+    //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is 'hermesc'
+    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    //
+    //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
+    // hermesFlags = ["-O", "-output-source-map"]
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = (findProperty('android.enableProguardInReleaseBuilds') ?: false).toBoolean()
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+
+    compileSdkVersion rootProject.ext.compileSdkVersion
+
+    namespace 'com.supertokens.supertokensexample'
+    defaultConfig {
+        applicationId 'com.supertokens.supertokensexample'
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0.0"
+
+        buildConfigField("boolean", "REACT_NATIVE_UNSTABLE_USE_RUNTIME_SCHEDULER_ALWAYS", (findProperty("reactNative.unstable_useRuntimeSchedulerAlways") ?: true).toString())
+    }
+    signingConfigs {
+        debug {
+            storeFile file('debug.keystore')
+            storePassword 'android'
+            keyAlias 'androiddebugkey'
+            keyPassword 'android'
+        }
+    }
+    buildTypes {
+        debug {
+            signingConfig signingConfigs.debug
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            signingConfig signingConfigs.debug
+            shrinkResources (findProperty('android.enableShrinkResourcesInReleaseBuilds')?.toBoolean() ?: false)
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+}
+
+// Apply static values from `gradle.properties` to the `android.packagingOptions`
+// Accepts values in comma delimited lists, example:
+// android.packagingOptions.pickFirsts=/LICENSE,**/picasa.ini
+["pickFirsts", "excludes", "merges", "doNotStrip"].each { prop ->
+    // Split option: 'foo,bar' -> ['foo', 'bar']
+    def options = (findProperty("android.packagingOptions.$prop") ?: "").split(",");
+    // Trim all elements in place.
+    for (i in 0..<options.size()) options[i] = options[i].trim();
+    // `[] - ""` is essentially `[""].filter(Boolean)` removing all empty strings.
+    options -= ""
+
+    if (options.length > 0) {
+        println "android.packagingOptions.$prop += $options ($options.length)"
+        // Ex: android.packagingOptions.pickFirsts += '**/SCCS/**'
+        options.each {
+            android.packagingOptions[prop] += it
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
+
+    def isGifEnabled = (findProperty('expo.gif.enabled') ?: "") == "true";
+    def isWebpEnabled = (findProperty('expo.webp.enabled') ?: "") == "true";
+    def isWebpAnimatedEnabled = (findProperty('expo.webp.animated') ?: "") == "true";
+    def frescoVersion = rootProject.ext.frescoVersion
+
+    // If your app supports Android versions before Ice Cream Sandwich (API level 14)
+    if (isGifEnabled || isWebpEnabled) {
+        implementation("com.facebook.fresco:fresco:${frescoVersion}")
+        implementation("com.facebook.fresco:imagepipeline-okhttp3:${frescoVersion}")
+    }
+
+    if (isGifEnabled) {
+        // For animated gif support
+        implementation("com.facebook.fresco:animated-gif:${frescoVersion}")
+    }
+
+    if (isWebpEnabled) {
+        // For webp support
+        implementation("com.facebook.fresco:webpsupport:${frescoVersion}")
+        if (isWebpAnimatedEnabled) {
+            // Animated webp support
+            implementation("com.facebook.fresco:animated-webp:${frescoVersion}")
+        }
+    }
+
+    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
+    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
+        exclude group:'com.squareup.okhttp3', module:'okhttp'
+    }
+    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}
+
+apply from: new File(["node", "--print", "require.resolve('@react-native-community/cli-platform-android/package.json')"].execute(null, rootDir).text.trim(), "../native_modules.gradle");
+applyNativeModulesAppBuildGradle(project)
+apply plugin: 'com.google.gms.google-services'

examples/with-thirdpartyemailpassword/android/app/proguard-rules.pro → examples/with-thirdparty/android/app/proguard-rules.pro

@@ -7,4 +7,8 @@
 # For more details, see
 #   http://developer.android.com/guide/developing/tools/proguard.html
 
+# react-native-reanimated
+-keep class com.swmansion.reanimated.** { *; }
+-keep class com.facebook.react.turbomodule.** { *; }
+
 # Add any project specific keep options here:

examples/with-thirdparty/android/app/src/debug/AndroidManifest.xml

@@ -0,0 +1,7 @@
+<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools">
+
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW"/>
+
+    <application android:usesCleartextTraffic="true" tools:targetApi="28" tools:ignore="GoogleAppIndexingWarning" tools:replace="android:usesCleartextTraffic" />
+</manifest>