feat: implement secure storage

Author: gao-sun

packages/rn-sample/App.tsx

@@ -1,53 +1,64 @@
+// eslint-disable-next-line import/no-unassigned-import
 import '@logto/rn/polyfill';
 
+import { LogtoProvider, useLogto, type IdTokenClaims } from '@logto/rn';
 import { StatusBar } from 'expo-status-bar';
+import { useEffect, useState } from 'react';
 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();
+const Content = () => {
+  const { signIn, signOut, client, isAuthenticated, getIdTokenClaims } = useLogto();
+  const [claims, setClaims] = useState<IdTokenClaims>();
 
   useEffect(() => {
     const get = async () => {
-      const token = await getRefreshToken();
-      console.log('refresh', token);
+      setClaims(await getIdTokenClaims());
     };
 
     if (isAuthenticated) {
-      get();
+      void get();
     }
-  }, [isAuthenticated, getRefreshToken]);
+  }, [isAuthenticated, getIdTokenClaims]);
 
   return (
     <View style={styles.container}>
-      <Text>{client.logtoConfig.appId}</Text>
-      {
-        isAuthenticated ? (
-          <Button title="Sign out" onPress={() => signOut()} />
-        ) : (
-          <Button title="Sign in" onPress={() => signIn(redirectUri)} />
-        )
-      }
+      <Text style={styles.metadata}>App ID: {client.logtoConfig.appId}</Text>
+      {isAuthenticated ? (
+        <>
+          <Text style={styles.title}>Authenticated</Text>
+          {claims &&
+            Object.entries(claims).map(([key, value]) => (
+              <Text key={key}>
+                {key}: {String(value)}
+              </Text>
+            ))}
+          <Button title="Sign out" onPress={async () => signOut()} />
+        </>
+      ) : (
+        <Button title="Sign in" onPress={async () => signIn(redirectUri)} />
+      )}
+      {/* eslint-disable-next-line react/style-prop-object */}
       <StatusBar style="auto" />
     </View>
   );
-}
-
-export default function App() {
-
+};
 
+const App = () => {
   return (
-    <LogtoProvider config={{
-      endpoint: 'http://localhost:3002/',
-      appId: 's5sc0ktp6fs0a8rwqod6h',
-    }}>
+    <LogtoProvider
+      config={{
+        endpoint: 'http://localhost:3002/',
+        appId: 's5sc0ktp6fs0a8rwqod6h',
+      }}
+    >
       <Content />
-      </LogtoProvider>
+    </LogtoProvider>
   );
-}
+};
+
+export default App;
 
 const styles = StyleSheet.create({
   container: {
@@ -56,4 +67,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
+  title: {
+    fontSize: 20,
+    marginBottom: 16,
+  },
+  metadata: {
+    fontSize: 14,
+    marginBottom: 16,
+    fontStyle: 'italic',
+    color: '#666',
+  },
 });

packages/rn-sample/package.json

@@ -1,5 +1,6 @@
 {
   "name": "@logto/rn-sample",
+  "private": true,
   "version": "1.0.0",
   "main": "index.js",
   "scripts": {
@@ -11,16 +12,22 @@
   "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"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
+    "@silverhand/eslint-config": "^5.0.0",
+    "@silverhand/eslint-config-react": "^5.0.0",
     "@types/react": "~18.2.45",
+    "eslint": "^8.56.0",
+    "prettier": "^3.2.5",
+    "stylelint": "^16.2.1",
     "typescript": "^5.1.3"
   },
-  "private": true
+  "eslintConfig": {
+    "extends": "@silverhand/react"
+  },
+  "prettier": "@silverhand/eslint-config/.prettierrc"
 }

packages/rn-sample/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "extends": "expo/tsconfig.base",
   "compilerOptions": {
+    "moduleResolution": "bundler",
     "strict": true
   }
 }

packages/rn/package.json

@@ -37,8 +37,6 @@
     "@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"
@@ -50,13 +48,14 @@
   "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",
+    "@react-native-async-storage/async-storage": "^1.22.0",
+    "crypto-es": "^2.1.0",
+    "expo-crypto": "^12.8.0",
+    "expo-secure-store": "^12.8.1",
+    "expo-web-browser": "^12.8.2",
     "js-base64": "^3.7.6"
   }
 }

packages/rn/src/client.ts

@@ -5,12 +5,12 @@ import {
   type InteractionMode,
   Prompt,
   LogtoError,
-} from '@logto/client/lib/shim';
+} from '@logto/client/shim';
 import { decodeIdToken } from '@logto/js';
 import * as WebBrowser from 'expo-web-browser';
 
 import { LogtoNativeClientError } from './errors';
-import { MemoryStorage } from './storage';
+import { SecureStorage } from './storage';
 import { generateCodeChallenge, generateRandomString } from './utils';
 
 const issuedAtTimeTolerance = 300; // 5 minutes
@@ -32,17 +32,17 @@ export type LogtoNativeConfig = LogtoConfig & {
    * 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
+   * @default true
    */
   preferEphemeralSession?: boolean;
 };
 
 export class LogtoClient extends StandardLogtoClient {
-  storage: MemoryStorage;
   authSessionResult?: WebBrowser.WebBrowserAuthSessionResult;
+  protected storage: SecureStorage;
 
   constructor(config: LogtoNativeConfig) {
-    const storage = new MemoryStorage();
+    const storage = new SecureStorage(`logto.${config.appId}`);
     const requester = createRequester(fetch);
 
     super(
@@ -54,7 +54,7 @@ export class LogtoClient extends StandardLogtoClient {
             case 'sign-in': {
               this.authSessionResult = undefined;
               this.authSessionResult = await WebBrowser.openAuthSessionAsync(url, redirectUri, {
-                preferEphemeralSession: config.preferEphemeralSession,
+                preferEphemeralSession: config.preferEphemeralSession ?? true,
               });
               break;
             }

packages/rn/src/index.ts

@@ -1,3 +1,29 @@
+export type {
+  IdTokenClaims,
+  LogtoErrorCode,
+  LogtoConfig,
+  LogtoClientErrorCode,
+  UserInfoResponse,
+  InteractionMode,
+  ClientAdapter,
+} from '@logto/client/shim';
+
+export {
+  createRequester,
+  LogtoError,
+  LogtoRequestError,
+  LogtoClientError,
+  OidcError,
+  Prompt,
+  ReservedScope,
+  ReservedResource,
+  UserScope,
+  organizationUrnPrefix,
+  buildOrganizationUrn,
+  getOrganizationIdFromUrn,
+  PersistKey,
+} from '@logto/client/shim';
+
 export * from './client';
 export * from './context';
 export * from './errors';

packages/rn/src/storage.ts

@@ -1,17 +1,57 @@
-import { type Storage } from '@logto/client/lib/shim';
+import { type Storage } from '@logto/client/shim';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import CryptoES from 'crypto-es';
+import * as SecureStore from 'expo-secure-store';
 
-export class MemoryStorage implements Storage<string> {
-  storage = new Map<string, string>();
+import { generateRandomString } from './utils';
+
+export class SecureStorage implements Storage<string> {
+  constructor(public id: string) {}
+
+  getStorageKey(key: string) {
+    return `${this.id}.${key}`;
+  }
 
   async getItem(key: string) {
-    return this.storage.get(key) ?? null;
+    const storageKey = this.getStorageKey(key);
+    const encrypted = await AsyncStorage.getItem(storageKey);
+
+    if (!encrypted) {
+      return null;
+    }
+
+    return this.#decrypt(storageKey, encrypted);
   }
 
   async setItem(key: string, value: string) {
-    this.storage.set(key, value);
+    const storageKey = this.getStorageKey(key);
+    const encrypted = await this.#encrypt(storageKey, value);
+    await AsyncStorage.setItem(storageKey, encrypted);
   }
 
   async removeItem(key: string) {
-    this.storage.delete(key);
+    const storageKey = this.getStorageKey(key);
+    await Promise.all([
+      AsyncStorage.removeItem(storageKey),
+      SecureStore.deleteItemAsync(storageKey),
+    ]);
+  }
+
+  async #encrypt(key: string, value: string) {
+    const encryptionKey = await generateRandomString();
+    const encrypted = CryptoES.AES.encrypt(value, encryptionKey).toString();
+
+    await SecureStore.setItemAsync(key, encryptionKey);
+    return encrypted;
+  }
+
+  async #decrypt(key: string, value: string) {
+    const encryptionKey = await SecureStore.getItemAsync(key);
+
+    if (!encryptionKey) {
+      return null;
+    }
+
+    return CryptoES.AES.decrypt(value, encryptionKey).toString(CryptoES.enc.Utf8);
   }
 }

packages/rn/src/utils.ts

@@ -1,8 +1,8 @@
 import * as Crypto from 'expo-crypto';
 import { encode, fromUint8Array, toUint8Array } from 'js-base64';
 
-export const generateRandomString = async (length = 64) =>
-  fromUint8Array(await Crypto.getRandomBytesAsync(length), true);
+export const generateRandomString = async (byteLength = 64) =>
+  fromUint8Array(await Crypto.getRandomBytesAsync(byteLength), true);
 
 export const generateCodeChallenge = async (codeVerifier: string): Promise<string> => {
   const codeChallenge = new Uint8Array(

packages/rn/tsconfig.json

@@ -2,9 +2,7 @@
   "extends": "@silverhand/ts-config-react/tsconfig.base",
   "compilerOptions": {
     "noEmit": false,
-    "outDir": "lib",
-    "moduleResolution": "node10",
-    "module": "commonjs"
+    "outDir": "lib"
   },
   "include": [
     "src",