refactor(rn): mark all native modules as peer dependency (#17)

* refactor(rn): mark all native modules as peer dependency

mask all native modules as peer dependency

* fix: add commit lint configs

add commit lint configs

* feat: update readme

update readme

* chore: update the readme content

update the read me content

* fix: content update

content update

* chore: update code syntax

update code syntax

Author: simeng-li

.gitignore

@@ -8,6 +8,8 @@ node_modules/
 dist/
 web-build/
 lib/
+android
+ios
 
 # Native
 *.orig.*

.husky/commit-msg

@@ -0,0 +1 @@
+npx --no-install commitlint --edit ""

.husky/pre-commit

@@ -0,0 +1,3 @@
+# Keep concurrency 1 to avoid lint-staged issue
+# Which may cause ALL your work LOST WITHOUT STASH
+FORCE_COLOR=1 pnpm -r --workspace-concurrency 1 --filter "[HEAD]" precommit

README.md

@@ -17,6 +17,93 @@ The monorepo for Logto React Native (Expo) SDK and sample.
 - [@logto/rn](./packages/rn) - Logto React Native SDK
 - [@logto/rn-sample](./packages/rn-sample) - Sample app using Logto React Native SDK
 
+## Installation
+
+```bash
+npm install @logto/rn --save
+npm install expo-crypto expo-secure-store expo-web-browser @react-native-async-storage/async-storage
+```
+
+The `@logto/rn` package is the SDK for Logto. The remaining packages are its peer dependencies. They couldn't be listed as direct dependencies because the Expo CLI requires that all dependencies for native modules be installed directly within the root project's package.json.
+
+You could also use other package managers such as `yarn` or `pnpm`.
+
+## Configuration
+
+To make the redirect URI deep link work, you need to configure the `scheme` in the `app.json` file.
+
+e.g. In the `@logto/rn-sample` we use `io.logto://callback` as the callback URL.
+
+```json
+{
+  "expo": {
+    "scheme": "io.logto"
+  }
+}
+```
+
+## Integration
+
+```tsx
+import { LogtoProvider, useLogto } from "@logto/rn";
+
+const App = () => {
+  const { signIn, signOut, isAuthenticated } = useLogto();
+
+  const logtoConfig = {
+    appId: "YOUR_APP",
+    endpoint: "YOUR_LOGTO_ENDPOINT",
+  };
+
+  return (
+    <LogtoProvider config={logtoConfig}>
+      {isAuthenticated ? (
+        <Button title="Sign Out" onPress={signOut} />
+      ) : (
+        <Button title="Sign In" onPress={async () => signIn(redirectUri)} />
+      )}
+    </LogtoProvider>
+  );
+};
+```
+
+## Run the sample app
+
+### Replace the `appId` and `endpoint` in `App.tsx` with your own Logto settings.
+
+```tsx
+const endpoint = "YOUR_LOGTO_ENDPOINT";
+const appId = "YOUR_APP_ID";
+```
+
+### Run using Expo Go
+
+> [!Caution]
+> This SDK is not compatible with "Expo Go" sandbox on Android.
+> Under the hood, this SDK uses `ExpoAuthSession` to handle the user authentication flow. Native deep linking is not supported in "Expo Go". For more details please refer to [deep-linking](https://docs.expo.dev/guides/deep-linking/)
+> Use [development-build](https://docs.expo.dev/develop/development-builds/introduction/) to test this SDK on Android.
+
+Under the path `packages/rn-sample` run the following command.
+
+```bash
+pnpm dev:ios
+```
+
+### Build and run native package
+
+Under the path `packages/rn-sample` run the following command.
+
+```bash
+# Run expo
+pnpm expo run
+
+# Directly run on android device
+# pnpm android
+
+# Directly run on ios device
+# pnpm ios
+```
+
 ## Resources
 
 - [📖 Logto docs](https://docs.logto.io/?utm_source=github&utm_medium=repo_logto)

commitlint.config.cjs

@@ -0,0 +1,9 @@
+const { rules } = require('@commitlint/config-conventional');
+
+/** @type {import('@commitlint/types').UserConfig} **/
+module.exports = {
+  extends: ['@commitlint/config-conventional'],
+  rules: {
+    'type-enum': [2, 'always', [...rules['type-enum'][2], 'release']],
+  },
+};

package.json

@@ -5,5 +5,11 @@
   "license": "UNLICENSED",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "@commitlint/cli": "^18.6.1",
+    "@commitlint/config-conventional": "^18.6.1",
+    "@commitlint/types": "^18.6.1",
+    "husky": "^9.0.11"
   }
 }

packages/rn-sample/app.json

@@ -11,9 +11,7 @@
       "resizeMode": "contain",
       "backgroundColor": "#ffffff"
     },
-    "assetBundlePatterns": [
-      "**/*"
-    ],
+    "assetBundlePatterns": ["**/*"],
     "ios": {
       "supportsTablet": true
     },
@@ -25,6 +23,7 @@
     },
     "web": {
       "favicon": "./assets/favicon.png"
-    }
+    },
+    "scheme": "io.logto"
   }
 }

packages/rn-sample/package.json

@@ -4,15 +4,20 @@
   "version": "0.1.0",
   "main": "index.js",
   "scripts": {
-    "start": "expo start",
-    "android": "expo start --android",
-    "ios": "expo start --ios",
-    "web": "expo start --web"
+    "dev": "expo start",
+    "dev:android": "expo start --android",
+    "dev:ios": "expo start --ios",
+    "android": "expo run:android",
+    "ios": "expo run:ios"
   },
   "dependencies": {
     "@logto/rn": "workspace:^",
+    "@react-native-async-storage/async-storage": "^1.22.0",
     "expo": "~50.0.6",
+    "expo-crypto": "^12.8.1",
+    "expo-secure-store": "^12.8.1",
     "expo-status-bar": "~1.11.1",
+    "expo-web-browser": "^12.8.2",
     "react": "18.2.0",
     "react-native": "0.73.4"
   },

packages/rn/package.json

@@ -55,11 +55,13 @@
   "dependencies": {
     "@logto/client": "3.0.0-alpha.2",
     "@logto/js": "4.0.0-alpha.2",
-    "@react-native-async-storage/async-storage": "^1.22.0",
     "crypto-es": "^2.1.0",
+    "js-base64": "^3.7.6"
+  },
+  "peerDependencies": {
+    "@react-native-async-storage/async-storage": "^1.22.0",
     "expo-crypto": "^12.8.0",
     "expo-secure-store": "^12.8.1",
-    "expo-web-browser": "^12.8.2",
-    "js-base64": "^3.7.6"
+    "expo-web-browser": "^12.8.2"
   }
 }