@openfort/react-native 0.0.3 → 0.1.0

package/README.md

@@ -1,85 +0,0 @@
-# Openfort React native SDK
-
-## Install required packages:
-
-Using the package manager of your preference, install the openfort-js react native library, e.g. with yarn: `yarn add @openfort/react-native @openfort/openfort-js`.
-
-Since react native requires installing native dependencies directly, you also have to install these required dependencies
-```
-yarn add buffer react-native-crypto react-native-get-random-values react-native-randombytes stream-browserify react-native-mmkv
-```
-
-## Setup your metro config 
-
-If you do not already have a `metro.config.js`, create one with those required extra node modules:
-```
-// sample metro.config.js
-const { getDefaultConfig } = require('expo/metro-config');
-
-module.exports = (() => {
-  const config = getDefaultConfig(__dirname);
-
-  // Add shims for Node.js modules like crypto and stream
-  config.resolver.extraNodeModules = {
-    crypto: require.resolve('react-native-crypto'),
-    stream: require.resolve('stream-browserify'),
-    buffer: require.resolve('buffer'),
-  };
-
-  return config;
-})();
-
-```
-## Import `Openfort` at the top of your app
-The first file loaded should be Openfort-js polyfills: 
-```
-import  "@openfort/react-native/polyfills";
-```
-This will ensure the correct modules are imported and will ensure `openfort-js` works properly.
-
-## Configure `Openfort`
-
-Configure openfort, the same way that you would with openfort-js
-```
-import Openfort from "@openfort/openfort-js";
-
-const openfort = new Openfort({
-  baseConfiguration: {
-    publishableKey: "YOUR_OPENFORT_PUBLISHABLE_KEY",
-  },
-  shieldConfiguration: {
-    shieldPublishableKey: "YOUR_SHIELD_PUBLISHABLE_KEY",
-  }
-});
-```
-Check out the documentation [here](https://www.openfort.xyz/docs/guides/getting-started#4-import-openfort-into-your-app)
-
-## Render secure WebView
-
-Openfort uses a `WebView` (from `react-native-webview`) to operate as a secure environment, managing the private key and executing wallet operations. [Learn more](https://www.openfort.xyz/docs/security#embedded-self-custodial-signer).
-
-This WebView needs to always be displayed, it is recommended to put it on top of your app. It is wrapped inside a view with `flex: 0`
-
-Simply import it from `@openfort/react-native`
-
-```
-// Sample app/_layout.tsx using expo router
-import { Iframe } from  '@openfort/react-native';
-
-export default function RootLayout() {
-
-  return (
-    <>
-      <Iframe />
-      <Slot />
-    </>
-  );
-}
-```
-## Notes
-
-Because we are using `mmkv` storage, expo-go will not work. To run your app use `expo run:ios` or `expo run:android`.
- 
-# Sample
-
-You can check out the [React native auth sample](https://github.com/openfort-xyz/react-native-auth-sample) to get your app running.

package/dist/components/AuthBoundary.js

@@ -0,0 +1,83 @@
+import React from 'react';
+import { useOpenfort } from '../hooks/core/useOpenfort';
+/**
+ * Authentication boundary component that conditionally renders content based on
+ * the user's authentication status and SDK readiness.
+ *
+ * This component simplifies protecting routes and content based on authentication state.
+ * It handles three main states:
+ * 1. Loading - SDK is initializing
+ * 2. Error - SDK encountered an initialization error
+ * 3. Unauthenticated - User is not logged in
+ * 4. Authenticated - User is logged in and SDK is ready
+ *
+ * @example
+ * ```tsx
+ * import { AuthBoundary } from '@openfort/react-native';
+ * import { Text, ActivityIndicator } from 'react-native';
+ *
+ * function App() {
+ *   return (
+ *     <AuthBoundary
+ *       loading={<ActivityIndicator size="large" />}
+ *       unauthenticated={<LoginScreen />}
+ *       error={(error) => <Text>Error: {error.message}</Text>}
+ *     >
+ *       <AuthenticatedApp />
+ *     </AuthBoundary>
+ *   );
+ * }
+ * ```
+ *
+ * @example
+ * // With React Navigation
+ * ```tsx
+ * import { AuthBoundary } from '@openfort/react-native';
+ * import { NavigationContainer } from '@react-navigation/native';
+ * import { createNativeStackNavigator } from '@react-navigation/native-stack';
+ *
+ * const Stack = createNativeStackNavigator();
+ *
+ * function App() {
+ *   return (
+ *     <NavigationContainer>
+ *       <AuthBoundary
+ *         loading={<SplashScreen />}
+ *         unauthenticated={
+ *           <Stack.Navigator>
+ *             <Stack.Screen name="Login" component={LoginScreen} />
+ *             <Stack.Screen name="Signup" component={SignupScreen} />
+ *           </Stack.Navigator>
+ *         }
+ *       >
+ *         <Stack.Navigator>
+ *           <Stack.Screen name="Home" component={HomeScreen} />
+ *           <Stack.Screen name="Profile" component={ProfileScreen} />
+ *         </Stack.Navigator>
+ *       </AuthBoundary>
+ *     </NavigationContainer>
+ *   );
+ * }
+ * ```
+ */
+export const AuthBoundary = ({ loading, unauthenticated, error: errorComponent, children, }) => {
+    const { user, isReady, error } = useOpenfort();
+    // SDK encountered an error during initialization
+    if (error && errorComponent) {
+        if (typeof errorComponent === 'function') {
+            return React.createElement(React.Fragment, null, errorComponent(error));
+        }
+        return React.createElement(React.Fragment, null, errorComponent);
+    }
+    // SDK is still initializing
+    if (!isReady) {
+        return React.createElement(React.Fragment, null, loading);
+    }
+    // User is not authenticated
+    if (!user) {
+        return React.createElement(React.Fragment, null, unauthenticated);
+    }
+    // User is authenticated and SDK is ready
+    return React.createElement(React.Fragment, null, children);
+};
+export default AuthBoundary;

package/dist/components/index.js

@@ -0,0 +1,10 @@
+/**
+ * Openfort React Native SDK Components
+ *
+ * This module provides React components and hooks for building user interfaces
+ * that integrate with the Openfort platform in React Native applications.
+ *
+ * The components are organized into the following categories:
+ * - Authentication boundaries and guards
+ */
+export { AuthBoundary } from './AuthBoundary';

package/dist/constants/config.js

@@ -0,0 +1,9 @@
+/**
+ * SDK package information
+ */
+export const SDK_INFO = {
+    name: '@openfort/react-native',
+    version: '0.1.0',
+    description: 'React Native client for Openfort',
+    homepage: 'https://openfort.io/docs',
+};

package/dist/constants/index.js

@@ -0,0 +1 @@
+export * from './config';

package/dist/core/client.js

@@ -0,0 +1,78 @@
+import { Openfort as OpenfortClient } from '@openfort/openfort-js';
+import { digest } from 'expo-crypto';
+import { applicationId } from 'expo-application';
+import { SecureStorageAdapter, createNormalizedStorage } from './storage';
+/**
+ * Creates an instance of the Openfort client configured for Expo/React Native
+ *
+ * @param options Configuration options for the Openfort client
+ * @returns Configured Openfort client instance
+ *
+ * @example
+ * const client = createOpenfortClient({
+ * });
+ *
+ * const token = await client.getAccessToken();
+ */
+export function createOpenfortClient({ baseConfiguration, overrides, shieldConfiguration, }) {
+    const nativeAppId = getNativeApplicationId();
+    console.log('Creating Openfort client with native app ID:', nativeAppId);
+    // appId,
+    // clientId,
+    // supportedChains,
+    // storage: createNormalizedStorage(storage),
+    // sdkVersion: `expo:${SDK_INFO.version}`,
+    // nativeAppIdentifier: nativeAppId,
+    // crypto: {
+    //   digest,
+    // },
+    // baseUrl,
+    // logLevel,
+    return new OpenfortClient({
+        baseConfiguration,
+        overrides: {
+            ...overrides,
+            crypto: {
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                digest: digest,
+            },
+            storage: createNormalizedStorage(SecureStorageAdapter)
+        },
+        shieldConfiguration
+    });
+}
+/**
+ * Gets the native application identifier from Expo
+ * Throws an error if the identifier cannot be determined
+ */
+function getNativeApplicationId() {
+    if (typeof applicationId !== 'string') {
+        throw new Error('Cannot determine native application ID. Please make sure `expo-application` is installed as a dependency and that `ios.bundleId` or `android.package` is set.');
+    }
+    return applicationId;
+}
+/**
+ * Default Openfort client instance - should only be used internally
+ * Applications should create their own client instances using createOpenfortClient
+ */
+let defaultClient = null;
+/**
+ * Gets or creates the default Openfort client instance
+ * @internal
+ */
+export function getDefaultClient(options) {
+    if (!defaultClient && options) {
+        defaultClient = new OpenfortClient(options);
+    }
+    if (!defaultClient) {
+        throw new Error('Openfort client not initialized. Make sure to wrap your app with OpenfortProvider.');
+    }
+    return defaultClient;
+}
+/**
+ * Sets the default Openfort client instance
+ * @internal
+ */
+export function setDefaultClient(client) {
+    defaultClient = client;
+}

package/dist/core/context.js

@@ -0,0 +1,37 @@
+import React from 'react';
+/**
+ * React context for sharing Openfort SDK state throughout the component tree
+ */
+export const OpenfortContext = React.createContext(null);
+/**
+ * Hook to access the Openfort context
+ * Throws an error if used outside of a OpenfortProvider
+ */
+export function useOpenfortContext() {
+    const context = React.useContext(OpenfortContext);
+    if (!context) {
+        throw new Error('useOpenfortContext must be used within a OpenfortProvider. ' +
+            'Make sure to wrap your app with <OpenfortProvider>.');
+    }
+    return context;
+}
+/**
+ * Hook to safely access the Openfort context
+ * Returns null if used outside of a OpenfortProvider
+ */
+export function useOpenfortContextSafe() {
+    return React.useContext(OpenfortContext);
+}
+/**
+ * Type guard to check if a value is a valid OpenfortContextValue
+ */
+export function isOpenfortContextValue(value) {
+    return (typeof value === 'object' &&
+        value !== null &&
+        'client' in value &&
+        'isReady' in value &&
+        'logout' in value &&
+        'getAccessToken' in value &&
+        'embeddedState' in value &&
+        '_internal' in value);
+}

package/dist/core/index.js

@@ -0,0 +1,10 @@
+// Client creation and configuration
+export { createOpenfortClient, getDefaultClient, setDefaultClient } from './client';
+// Re-export important types and enums from openfort-js
+export { RecoveryMethod } from '@openfort/openfort-js';
+// React context and hooks
+export { OpenfortContext, useOpenfortContext, useOpenfortContextSafe, isOpenfortContextValue } from './context';
+// Main provider component
+export { OpenfortProvider } from './provider';
+// Storage adapters
+export { SecureStorageAdapter, createNormalizedStorage } from './storage';

package/dist/core/provider.js

@@ -0,0 +1,224 @@
+import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { OpenfortConfiguration, ShieldConfiguration, EmbeddedState } from '@openfort/openfort-js';
+import { OpenfortContext } from './context';
+import { createOpenfortClient, setDefaultClient } from './client';
+import { EmbeddedWalletWebView, WebViewUtils } from '../native';
+/**
+ * Main provider component that wraps the entire application and provides
+ * Openfort SDK functionality through React context
+ */
+export const OpenfortProvider = ({ children, publishableKey, customAuth, supportedChains, walletConfig, overrides, }) => {
+    // Prevent multiple OpenfortProvider instances
+    const existingContext = React.useContext(OpenfortContext);
+    if (existingContext) {
+        throw new Error('Found multiple instances of OpenfortProvider. Ensure there is only one mounted in your application tree.');
+    }
+    // Create or use provided client
+    const client = useMemo(() => {
+        const newClient = createOpenfortClient({
+            baseConfiguration: new OpenfortConfiguration({
+                publishableKey: publishableKey,
+            }),
+            shieldConfiguration: walletConfig ? new ShieldConfiguration({
+                shieldPublishableKey: walletConfig.shieldPublishableKey,
+                shieldEncryptionKey: 'shieldEncryptionKey' in walletConfig ? walletConfig.shieldEncryptionKey : undefined,
+                shieldDebug: walletConfig.debug,
+            }) : undefined,
+            overrides: {
+                ...overrides,
+            },
+        });
+        setDefaultClient(newClient);
+        return newClient;
+    }, [publishableKey, walletConfig, overrides]);
+    // Embedded state
+    const [embeddedState, setEmbeddedState] = useState(EmbeddedState.NONE);
+    const pollingRef = useRef(null);
+    const pollEmbeddedState = useCallback(async () => {
+        if (!client)
+            return;
+        try {
+            const state = await client.embeddedWallet.getEmbeddedState();
+            console.log('Current embedded state:', state);
+            setEmbeddedState(state);
+        }
+        catch (error) {
+            console.error('Error checking embedded state with Openfort:', error);
+            if (pollingRef.current)
+                clearInterval(pollingRef.current);
+        }
+    }, [client]);
+    const startPollingEmbeddedState = useCallback(() => {
+        if (pollingRef.current)
+            return;
+        pollingRef.current = setInterval(pollEmbeddedState, 1000);
+    }, [pollEmbeddedState]);
+    const stopPollingEmbeddedState = useCallback(() => {
+        clearInterval(pollingRef.current || undefined);
+        pollingRef.current = null;
+    }, []);
+    useEffect(() => {
+        if (!client)
+            return;
+        startPollingEmbeddedState();
+        return () => {
+            stopPollingEmbeddedState();
+        };
+    }, [client]);
+    // Core state
+    const [user, setUser] = useState(null);
+    const [isUserInitialized, setIsUserInitialized] = useState(false);
+    const [isClientReady, setIsClientReady] = useState(false);
+    const [error, setError] = useState(null);
+    // Flow states
+    const [passwordState, setPasswordState] = useState({ status: 'initial' });
+    const [oAuthState, setOAuthState] = useState({ status: 'initial' });
+    const [siweState, setSiweState] = useState({ status: 'initial' });
+    const [recoveryFlowState, setRecoveryFlowState] = useState({ status: 'initial' });
+    // User state management
+    const handleUserChange = useCallback((newUser) => {
+        console.log('User state changed:', newUser);
+        setUser(newUser);
+        if (newUser) {
+            setError(null);
+        }
+    }, []);
+    // Core methods
+    const logout = useCallback(async () => {
+        handleUserChange(null);
+        return client.auth.logout();
+    }, [client, handleUserChange]);
+    const getAccessToken = useCallback(async () => {
+        try {
+            return await client.getAccessToken();
+        }
+        catch (err) {
+            console.debug('Failed to get access token:', err);
+            return null;
+        }
+    }, [client]);
+    // Initialize client and user
+    useEffect(() => {
+        console.log('Initializing Openfort client and user state', isUserInitialized);
+        if (!isUserInitialized) {
+            (async () => {
+                console.log('Initializing Openfort client');
+                try {
+                    // Openfort client doesn't need explicit initialization
+                    setIsClientReady(true);
+                }
+                catch (err) {
+                    setError(err instanceof Error ? err : new Error(String(err)));
+                }
+                try {
+                    console.log('Refreshing user state on initial load');
+                    await refreshUserState();
+                }
+                catch {
+                    // User not logged in, which is fine
+                    handleUserChange(null);
+                }
+                finally {
+                    setIsUserInitialized(true);
+                }
+            })();
+        }
+    }, [client, isUserInitialized, handleUserChange]);
+    // Internal refresh function for auth hooks to use
+    const refreshUserState = useCallback(async (user) => {
+        try {
+            console.log('Refreshing user state', user);
+            // If user is provided, use it directly instead of fetching from API
+            if (user !== undefined) {
+                handleUserChange(user);
+                return user;
+            }
+            // Otherwise, fetch from API
+            const currentUser = await client.user.get();
+            console.log('Refreshed user state:', currentUser);
+            handleUserChange(currentUser);
+            return currentUser;
+        }
+        catch (err) {
+            console.log('Failed to refresh user state:', err);
+            handleUserChange(null);
+            return null;
+        }
+    }, [client, handleUserChange]);
+    // Custom auth state management
+    useEffect(() => {
+        if (customAuth?.enabled && isUserInitialized && isClientReady) {
+            (async () => {
+                try {
+                    const { getCustomAccessToken, isLoading } = customAuth;
+                    if (isLoading)
+                        return;
+                    const customToken = await getCustomAccessToken();
+                    if (customToken) {
+                        // Custom auth sync implementation would go here
+                        // This would typically handle SIWE authentication with the custom token
+                        console.debug('Custom token available for authentication sync');
+                    }
+                }
+                catch (err) {
+                    console.error('Custom auth sync failed:', err);
+                }
+            })();
+        }
+    }, [client, customAuth, isUserInitialized, isClientReady]);
+    // Determine if SDK is ready
+    const isReady = useMemo(() => {
+        const customAuthReady = !customAuth?.enabled || !customAuth.isLoading;
+        return isUserInitialized && isClientReady && customAuthReady;
+    }, [isUserInitialized, isClientReady, customAuth?.enabled, customAuth?.isLoading]);
+    // Context value
+    const contextValue = useMemo(() => ({
+        client,
+        user,
+        isReady,
+        error,
+        supportedChains,
+        embeddedWallet: walletConfig,
+        embeddedState,
+        // Flow states
+        passwordState,
+        oAuthState,
+        siweState,
+        recoveryFlowState,
+        // State setters
+        setPasswordState,
+        setOAuthState,
+        setSiweState,
+        setRecoveryFlowState,
+        // Core methods
+        logout,
+        getAccessToken,
+        // Internal methods
+        _internal: {
+            refreshUserState,
+        },
+    }), [
+        client,
+        user,
+        isReady,
+        error,
+        supportedChains,
+        walletConfig,
+        embeddedState,
+        passwordState,
+        oAuthState,
+        siweState,
+        recoveryFlowState,
+        logout,
+        getAccessToken,
+        refreshUserState,
+    ]);
+    return (React.createElement(OpenfortContext.Provider, { value: contextValue },
+        children,
+        client && isReady && WebViewUtils.isSupported() && (React.createElement(EmbeddedWalletWebView, { client: client, isClientReady: isReady, onProxyStatusChange: (status) => {
+                // Handle WebView status changes for debugging
+                if (process.env.NODE_ENV === 'development') {
+                    console.debug('WebView status changed:', status);
+                }
+            } }))));
+};

package/dist/core/storage.js

@@ -0,0 +1,141 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as SecureStore from 'expo-secure-store';
+import { NativeStorageUtils } from '../native';
+// Define the StorageKeys enum values that match the Openfort SDK
+var StorageKeys;
+(function (StorageKeys) {
+    StorageKeys["AUTHENTICATION"] = "openfort.authentication";
+    StorageKeys["SIGNER"] = "openfort.signer";
+    StorageKeys["CONFIGURATION"] = "openfort.configuration";
+    StorageKeys["ACCOUNT"] = "openfort.account";
+    StorageKeys["TEST"] = "openfort.test";
+    StorageKeys["RECOVERY"] = "openfort.recovery";
+    StorageKeys["SESSION"] = "openfort.session";
+    StorageKeys["PKCE_STATE"] = "openfort.pkce_state";
+    StorageKeys["PKCE_VERIFIER"] = "openfort.pkce_verifier";
+})(StorageKeys || (StorageKeys = {}));
+/**
+ * Storage adapter using `expo-secure-store` intended for
+ * use with `Openfort` class from `@openfort/openfort-js`.
+ */
+export const SecureStorageAdapter = {
+    async get(key) {
+        try {
+            const normalizedKey = normalizeKey(key);
+            const result = await SecureStore.getItemAsync(normalizedKey, NativeStorageUtils.getStorageOptions());
+            // If result is a string (as expected), return it
+            if (typeof result === 'string' || result === null) {
+                return result;
+            }
+            // Handle unexpected Promise-like objects (shouldn't happen according to docs)
+            if (result && typeof result === 'object' && '_j' in result) {
+                console.warn('WARNING: SecureStore returned a Promise-like object instead of a string');
+                const actualValue = result._j;
+                return typeof actualValue === 'string' ? actualValue : null;
+            }
+            // If we get here, something is wrong
+            console.error('Unexpected result type from SecureStore:', result);
+            return null;
+        }
+        catch (error) {
+            console.warn('Failed to get item from secure store:', error);
+            return null;
+        }
+    },
+    async save(key, value) {
+        try {
+            const normalizedKey = normalizeKey(key);
+            await SecureStore.setItemAsync(normalizedKey, value, NativeStorageUtils.getStorageOptions());
+        }
+        catch (error) {
+            console.warn('Failed to set item in secure store:', error);
+            throw error;
+        }
+    },
+    async remove(key) {
+        try {
+            const normalizedKey = normalizeKey(key);
+            await SecureStore.deleteItemAsync(normalizedKey, NativeStorageUtils.getStorageOptions());
+        }
+        catch (error) {
+            console.warn('Failed to delete item from secure store:', error);
+            throw error;
+        }
+    },
+    flush() {
+        // SecureStore doesn't provide a way to list all keys
+        // This is a no-op for secure store
+    },
+    // Additional utility methods using native storage utilities
+    async keyExists(key) {
+        const normalizedKey = normalizeKey(key);
+        return await NativeStorageUtils.keyExists(normalizedKey);
+    },
+    async getStorageInfo() {
+        return await NativeStorageUtils.getStorageInfo();
+    },
+};
+/**
+ * Normalizes storage keys by replacing colons with hyphens
+ * to ensure compatibility with expo-secure-store
+ */
+function normalizeKey(key) {
+    return key.replaceAll(':', '-');
+}
+/**
+ * Creates a type-safe storage adapter that bridges between the Openfort SDK's
+ * expected Storage interface and our React Native implementation
+ */
+export function createNormalizedStorage(customStorage) {
+    const baseStorage = customStorage || SecureStorageAdapter;
+    return {
+        async get(key) {
+            // Convert the unknown key to our StorageKeys enum
+            const storageKey = keyToStorageKeys(key);
+            const result = await baseStorage.get(storageKey);
+            return result;
+        },
+        save(key, value) {
+            console.log('storage save:', key, value);
+            const storageKey = keyToStorageKeys(key);
+            // Fire and forget - don't await as the SDK expects synchronous behavior
+            baseStorage.save(storageKey, value).catch(error => {
+                console.error('Failed to save to storage:', error);
+            });
+        },
+        remove(key) {
+            console.log('storage remove:', key);
+            const storageKey = keyToStorageKeys(key);
+            // Fire and forget - don't await as the SDK expects synchronous behavior
+            baseStorage.remove(storageKey).catch(error => {
+                console.error('Failed to remove from storage:', error);
+            });
+        },
+        flush() {
+            console.log('storage flush');
+            baseStorage.flush();
+        },
+    };
+}
+/**
+ * Converts an unknown key (likely from the Openfort SDK) to our StorageKeys enum
+ */
+function keyToStorageKeys(key) {
+    if (typeof key === 'string') {
+        // Check if the string matches one of our enum values
+        const storageKey = Object.values(StorageKeys).find(value => value === key);
+        if (storageKey) {
+            return storageKey;
+        }
+    }
+    // If it's an enum-like object, try to get its value
+    if (typeof key === 'object' && key !== null && 'toString' in key) {
+        const keyString = key.toString();
+        const storageKey = Object.values(StorageKeys).find(value => value === keyString);
+        if (storageKey) {
+            return storageKey;
+        }
+    }
+    // Fallback: throw an error for unknown keys
+    throw new Error(`Unknown storage key: ${key}. Expected one of: ${Object.values(StorageKeys).join(', ')}`);
+}