feat: implement keychain for rt

packages/@magic-sdk/provider/src/core/view-controller.ts

@@ -12,10 +12,10 @@ import { MagicSDKWarning, createModalNotReadyError } from './sdk-exceptions';
 import { clearDeviceShares, encryptAndPersistDeviceShare } from '../util/device-share-web-crypto';
 import {
   createMagicRequest,
-  persistMagicEventRefreshToken,
   standardizeResponse,
   debounce,
 } from '../util/view-controller-utils';
+import { setItem } from '../util/storage';
 
 interface RemoveEventListenerFunction {
   (): void;
@@ -111,7 +111,7 @@ export abstract class ViewController {
        */
       const acknowledgeResponse = (removeEventListener: RemoveEventListenerFunction) => (event: MagicMessageEvent) => {
         const { id, response } = standardizeResponse(payload, event);
-        persistMagicEventRefreshToken(event);
+        this.persistMagicEventRefreshToken(event);
         if (response?.payload.error?.message === 'User denied account access.') {
           clearDeviceShares();
         } else if (event.data.deviceShare) {
@@ -249,4 +249,16 @@ export abstract class ViewController {
       this.heartbeatIntervalTimer = null;
     }
   }
+
+  async persistMagicEventRefreshToken(event: MagicMessageEvent) {
+    if (!event.data.rt) {
+      return;
+    }
+
+    await this.persistRefreshToken(event.data.rt)
+  }
+
+  persistRefreshToken(rt: string) {
+    return setItem('rt', rt);
+  }
 }

packages/@magic-sdk/react-native-bare/package.json

@@ -28,6 +28,7 @@
     "process": "~0.11.10",
     "react-native-device-info": "^10.3.0",
     "react-native-event-listeners": "^1.0.7",
+    "react-native-keychain": "^10.0.0",
     "regenerator-runtime": "0.13.9",
     "tslib": "^2.0.3",
     "whatwg-url": "~8.1.0"

packages/@magic-sdk/react-native-bare/src/keychain.ts

@@ -0,0 +1,22 @@
+import * as Keychain from 'react-native-keychain';
+
+const SERVICE = 'magic_sdk_rt';
+const KEY = 'magic_rt';
+
+export const setRefreshTokenInKeychain = async (rt: string) => {
+  return await Keychain.setGenericPassword(KEY, rt, {
+    service: SERVICE,
+    accessible: Keychain.ACCESSIBLE.AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY,
+  });
+};
+
+export const getRefreshTokenInKeychain = async () => {
+  const keychainEntry = await Keychain.getGenericPassword({ service: SERVICE });
+  if (!keychainEntry) return null;
+
+  return keychainEntry.password;
+};
+
+export const removeRefreshTokenInKeychain = async () => {
+  return await Keychain.resetGenericPassword({ service: SERVICE });
+};

packages/@magic-sdk/react-native-bare/src/react-native-webview-controller.tsx

@@ -10,6 +10,7 @@ import { EventRegister } from 'react-native-event-listeners';
 /* global NodeJS */
 import Global = NodeJS.Global;
 import { useInternetConnection } from './hooks';
+import { getRefreshTokenInKeychain, setRefreshTokenInKeychain } from './keychain';
 
 const MAGIC_PAYLOAD_FLAG_TYPED_ARRAY = 'MAGIC_PAYLOAD_FLAG_TYPED_ARRAY';
 const OPEN_IN_DEVICE_BROWSER = 'open_in_device_browser';
@@ -22,10 +23,7 @@ const LAST_MESSAGE_TIME = 'lastMessageTime';
  */
 function createWebViewStyles() {
   return StyleSheet.create({
-    'magic-webview': {
-      flex: 1,
-      backgroundColor: 'transparent',
-    },
+    'magic-webview': { flex: 1, backgroundColor: 'transparent' },
 
     'webview-container': {
       flex: 1,
@@ -38,15 +36,9 @@ function createWebViewStyles() {
       bottom: 0,
     },
 
-    show: {
-      zIndex: 10000,
-      elevation: 10000,
-    },
+    show: { zIndex: 10000, elevation: 10000 },
 
-    hide: {
-      zIndex: -10000,
-      elevation: 0,
-    },
+    hide: { zIndex: -10000, elevation: 0 },
   });
 }
 
@@ -99,6 +91,14 @@ export class ReactNativeWebViewController extends ViewController {
       };
     }, []);
 
+    useEffect(() => {
+      // try to retrieve the refresh token from secure storage and set it to the localforage
+      getRefreshTokenInKeychain().then(rt => {
+        if (!rt) return;
+        super.persistRefreshToken(rt);
+      });
+    }, []);
+
     useEffect(() => {
       EventRegister.addEventListener(MSG_POSTED_AFTER_INACTIVITY_EVENT, async message => {
         // If inactivity has been determined, the message is posted only after a brief
@@ -132,11 +132,7 @@ export class ReactNativeWebViewController extends ViewController {
      * display styles.
      */
     const containerRef = useCallback((view: any): void => {
-      this.container = {
-        ...view,
-        showOverlay,
-        hideOverlay,
-      };
+      this.container = { ...view, showOverlay, hideOverlay };
     }, []);
 
     /**
@@ -156,12 +152,7 @@ export class ReactNativeWebViewController extends ViewController {
     const containerStyles = useMemo(() => {
       return [
         this.styles['webview-container'],
-        show
-          ? {
-              ...this.styles.show,
-              backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR,
-            }
-          : this.styles.hide,
+        show ? { ...this.styles.show, backgroundColor: backgroundColor ?? DEFAULT_BACKGROUND_COLOR } : this.styles.hide,
       ];
     }, [show]);
 
@@ -289,6 +280,15 @@ export class ReactNativeWebViewController extends ViewController {
     }
   }
 
+  async persistMagicEventRefreshToken(event: MagicMessageEvent) {
+    if (!event.data.rt) {
+      return;
+    }
+
+    super.persistMagicEventRefreshToken(event);
+    setRefreshTokenInKeychain(event.data.rt);
+  }
+
   // Todo - implement these methods
   /* istanbul ignore next */
   protected checkRelayerExistsInDOM(): Promise<boolean> {

yarn.lock

@@ -3364,6 +3364,7 @@ __metadata:
     react-native: ~0.78.1
     react-native-device-info: ^10.3.0
     react-native-event-listeners: ^1.0.7
+    react-native-keychain: ^10.0.0
     react-native-safe-area-context: 5.3.0
     react-native-webview: ^13.3.0
     react-test-renderer: ^19.1.0
@@ -17300,6 +17301,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-keychain@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "react-native-keychain@npm:10.0.0"
+  checksum: 1055cc192df58cb110bd49df1264a401007a354ad28b93adefd740aeac0f746cdab86d7428887694a1b0949ef8d0dc85db8984e77db684d7b967180167b64d42
+  languageName: node
+  linkType: hard
+
 "react-native-safe-area-context@npm:5.3.0, react-native-safe-area-context@npm:^5.3.0":
   version: 5.3.0
   resolution: "react-native-safe-area-context@npm:5.3.0"