feat: init rn sdk

Author: gao-sun

.gitignore

@@ -7,6 +7,7 @@ node_modules/
 .expo/
 dist/
 web-build/
+lib/
 
 # Native
 *.orig.*

.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "stylelint.vscode-stylelint"
+  ]
+}

.vscode/settings.json

@@ -0,0 +1,26 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "[scss]": {
+    "editor.codeActionsOnSave": {
+      "source.fixAll.stylelint": "explicit"
+    }
+  },
+  "eslint.workingDirectories": [
+    {
+      "pattern": "./packages/*"
+    }
+  ],
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+  ],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+  },
+  "cSpell.words": [
+    "logto",
+    "oidc"
+  ]
+}

packages/rn-sample/App.tsx

@@ -1,15 +1,54 @@
+import '@logto/rn/polyfill';
+
 import { StatusBar } from 'expo-status-bar';
-import { StyleSheet, Text, View } from 'react-native';
+import { Button, StyleSheet, Text, View } from 'react-native';
+import { LogtoProvider, useLogto } from '@logto/rn';
+import { useEffect } from 'react';
+
+const redirectUri = 'io.logto://callback';
+
+function Content() {
+  const { signIn, signOut, client, isAuthenticated, getRefreshToken } = useLogto();
+
+  useEffect(() => {
+    const get = async () => {
+      const token = await getRefreshToken();
+      console.log('refresh', token);
+    };
+
+    if (isAuthenticated) {
+      get();
+    }
+  }, [isAuthenticated, getRefreshToken]);
 
-export default function App() {
   return (
     <View style={styles.container}>
-      <Text>Open up App.tsx to start working on your app!</Text>
+      <Text>{client.logtoConfig.appId}</Text>
+      {
+        isAuthenticated ? (
+          <Button title="Sign out" onPress={() => signOut()} />
+        ) : (
+          <Button title="Sign in" onPress={() => signIn(redirectUri)} />
+        )
+      }
       <StatusBar style="auto" />
     </View>
   );
 }
 
+export default function App() {
+
+
+  return (
+    <LogtoProvider config={{
+      endpoint: 'http://localhost:3002/',
+      appId: 's5sc0ktp6fs0a8rwqod6h',
+    }}>
+      <Content />
+      </LogtoProvider>
+  );
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

packages/rn-sample/index.js

@@ -1,3 +1,7 @@
+/**
+ * @fileoverview https://docs.expo.dev/guides/monorepos/#change-default-entrypoint
+ */
+
 import { registerRootComponent } from 'expo';
 
 import App from './App';

packages/rn-sample/metro.config.js

@@ -0,0 +1,25 @@
+/**
+ * @fileoverview https://docs.expo.dev/guides/monorepos/#modify-the-metro-config
+ */
+
+const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
+
+// Find the project and workspace directories
+const projectRoot = __dirname;
+// This can be replaced with `find-yarn-workspace-root`
+const monorepoRoot = path.resolve(projectRoot, '../..');
+
+const config = getDefaultConfig(projectRoot);
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [monorepoRoot];
+// 2. Let Metro know where to resolve packages and in what order
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(monorepoRoot, 'node_modules'),
+];
+
+config.resolver.unstable_enablePackageExports = true;
+
+module.exports = config;

packages/rn-sample/package.json

@@ -9,8 +9,11 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@logto/rn": "workspace:^",
     "expo": "~50.0.6",
+    "expo-crypto": "^12.8.0",
     "expo-status-bar": "~1.11.1",
+    "expo-web-browser": "^12.8.2",
     "react": "18.2.0",
     "react-native": "0.73.4"
   },

packages/rn-sample/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../node_modules/expo/tsconfig.base",
+  "extends": "expo/tsconfig.base",
   "compilerOptions": {
     "strict": true
   }

packages/rn/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@logto/rn",
+  "version": "0.1.0",
+  "main": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./lib/index.js",
+      "require": "./lib/index.js",
+      "types": "./lib/index.d.ts"
+    },
+    "./polyfill": {
+      "import": "./lib/polyfill.js",
+      "require": "./lib/polyfill.js"
+    }
+  },
+  "files": [
+    "lib"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/logto-io/react-native.git",
+    "directory": "packages/rn"
+  },
+  "scripts": {
+    "dev:tsc": "tsc -p tsconfig.build.json -w --preserveWatchOutput",
+    "check": "tsc --noEmit",
+    "build": "rm -rf lib/ && tsc -p tsconfig.build.json",
+    "lint": "eslint --ext .ts src"
+  },
+  "devDependencies": {
+    "@babel/preset-env": "^7.23.9",
+    "@silverhand/eslint-config": "^5.0.0",
+    "@silverhand/eslint-config-react": "^5.0.0",
+    "@silverhand/ts-config": "^5.0.0",
+    "@silverhand/ts-config-react": "^5.0.0",
+    "@types/react": "~18.2.45",
+    "eslint": "^8.56.0",
+    "expo-crypto": "^12.8.0",
+    "expo-web-browser": "^12.8.2",
+    "prettier": "^3.2.5",
+    "stylelint": "^16.2.1",
+    "typescript": "^5.3.3"
+  },
+  "eslintConfig": {
+    "extends": "@silverhand/react"
+  },
+  "prettier": "@silverhand/eslint-config/.prettierrc",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "expo-crypto": "^12.8.0",
+    "expo-web-browser": "^12.8.2"
+  },
+  "dependencies": {
+    "@logto/client": "3.0.0-alpha.2",
+    "@logto/js": "4.0.0-alpha.2",
+    "js-base64": "^3.7.6"
+  }
+}

packages/rn/src/client.ts

@@ -0,0 +1,109 @@
+import {
+  type LogtoConfig,
+  createRequester,
+  StandardLogtoClient,
+  type InteractionMode,
+  Prompt,
+  LogtoError,
+} from '@logto/client/lib/shim';
+import { decodeIdToken } from '@logto/js';
+import * as WebBrowser from 'expo-web-browser';
+
+import { LogtoNativeClientError } from './errors';
+import { MemoryStorage } from './storage';
+import { generateCodeChallenge, generateRandomString } from './utils';
+
+const issuedAtTimeTolerance = 300; // 5 minutes
+
+export type LogtoNativeConfig = LogtoConfig & {
+  /**
+   * The prompt to be used for the authentication request. This can be used to skip the login or
+   * consent screen when the user has already granted the required permissions.
+   *
+   * @see {@link https://openid.net/specs/openid-connect-core-1_0.html#AuthRequest | OpenID Connect Core 1.0}
+   * @default [Prompt.Login, Prompt.Consent]
+   */
+  prompt?: Prompt | Prompt[];
+  /**
+   * **Only for iOS**
+   *
+   * Determines whether the session should ask the browser for a private authentication session.
+   * Set this to true to request that the browser doesn’t share cookies or other browsing data
+   * between the authentication session and the user’s normal browser session. Whether the request
+   * is honored depends on the user’s default web browser.
+   *
+   * @default false
+   */
+  preferEphemeralSession?: boolean;
+};
+
+export class LogtoClient extends StandardLogtoClient {
+  storage: MemoryStorage;
+  authSessionResult?: WebBrowser.WebBrowserAuthSessionResult;
+
+  constructor(config: LogtoNativeConfig) {
+    const storage = new MemoryStorage();
+    const requester = createRequester(fetch);
+
+    super(
+      { prompt: [Prompt.Consent], ...config },
+      {
+        requester,
+        navigate: async (url: string, { redirectUri, for: purpose }) => {
+          switch (purpose) {
+            case 'sign-in': {
+              this.authSessionResult = undefined;
+              this.authSessionResult = await WebBrowser.openAuthSessionAsync(url, redirectUri, {
+                preferEphemeralSession: config.preferEphemeralSession,
+              });
+              break;
+            }
+            case 'sign-out': {
+              break;
+            }
+            default: {
+              throw new LogtoNativeClientError('auth_session_failed');
+            }
+          }
+        },
+        storage,
+        generateCodeChallenge,
+        generateCodeVerifier: generateRandomString,
+        generateState: generateRandomString,
+      },
+      (client) => ({
+        // Due to the limitation of Expo, we could not verify JWT signature on the client side.
+        // Thus we only decode the token and verify the claims here. The signature verification
+        // may be done on the server side or in the future when the limitation is resolved.
+        //
+        // Limitations:
+        // - Lack of support for the crypto module or Web Crypto API.
+        // - Lack of support for native modules in the managed workflow.
+        verifyIdToken: async (idToken: string) => {
+          const { issuer } = await client.getOidcConfig();
+          const claims = decodeIdToken(idToken);
+
+          if (Math.abs(claims.iat - Date.now() / 1000) > issuedAtTimeTolerance) {
+            throw new LogtoError('id_token.invalid_iat');
+          }
+
+          if (claims.aud !== client.logtoConfig.appId || claims.iss !== issuer) {
+            throw new LogtoError('id_token.invalid_token');
+          }
+        },
+      })
+    );
+
+    this.storage = storage;
+  }
+
+  override async signIn(redirectUri: string, interactionMode?: InteractionMode): Promise<void> {
+    await super.signIn(redirectUri, interactionMode);
+
+    if (this.authSessionResult?.type !== 'success') {
+      throw new LogtoNativeClientError('auth_session_failed');
+    }
+
+    await this.handleSignInCallback(this.authSessionResult.url);
+  }
+}