@openfort/react-native 0.0.3 → 0.1.0

package/dist/lib/hookConsistency.js

@@ -0,0 +1,16 @@
+export const onSuccess = ({ hookOptions, options, data, }) => {
+    hookOptions?.onSuccess?.(data);
+    hookOptions?.onSettled?.(data, null);
+    options?.onSuccess?.(data);
+    options?.onSettled?.(data, null);
+    return data;
+};
+export const onError = ({ hookOptions, options, error, }) => {
+    hookOptions?.onError?.(error);
+    hookOptions?.onSettled?.(null, error);
+    options?.onError?.(error);
+    options?.onSettled?.(null, error);
+    if (hookOptions?.throwOnError || options?.throwOnError)
+        throw error;
+    return { error };
+};

package/dist/native/index.js

@@ -0,0 +1,6 @@
+// WebView integration
+export { EmbeddedWalletWebView, WebViewUtils } from './webview';
+// Storage utilities
+export { isSecureStorageMessage, handleSecureStorageMessage, NativeStorageUtils, } from './storage';
+// OAuth flows
+export { openOAuthSession, authenticateWithApple, isAppleSignInAvailable, parseOAuthUrl, createOAuthRedirectUri, OAuthUtils, } from './oauth';

package/dist/native/oauth.js

@@ -0,0 +1,183 @@
+import { Platform } from 'react-native';
+import * as WebBrowser from 'expo-web-browser';
+import * as Linking from 'expo-linking';
+import * as AppleAuthentication from 'expo-apple-authentication';
+import { OAuthProvider as OAuthProviderType } from '@openfort/openfort-js';
+/**
+ * Opens an OAuth authentication session
+ */
+export async function openOAuthSession(config) {
+    try {
+        const result = await WebBrowser.openAuthSessionAsync(config.url, config.redirectUri, {
+            // Additional options can be configured here
+            showInRecents: false,
+        });
+        if (result.type === 'success') {
+            return {
+                type: 'success',
+                url: result.url,
+            };
+        }
+        if (result.type === 'cancel' || result.type === 'dismiss') {
+            return {
+                type: 'cancel',
+            };
+        }
+        return {
+            type: 'error',
+            error: 'OAuth session failed',
+        };
+    }
+    catch (error) {
+        return {
+            type: 'error',
+            error: error instanceof Error ? error.message : 'Unknown OAuth error',
+        };
+    }
+}
+/**
+ * Handles Apple Sign-In authentication for iOS
+ */
+export async function authenticateWithApple(options) {
+    if (Platform.OS !== 'ios') {
+        throw new Error('Apple Sign-In is only available on iOS');
+    }
+    try {
+        const result = await AppleAuthentication.signInAsync({
+            state: options.state,
+            requestedScopes: [
+                AppleAuthentication.AppleAuthenticationScope.EMAIL,
+                AppleAuthentication.AppleAuthenticationScope.FULL_NAME,
+            ],
+        });
+        if (!result.authorizationCode || !result.state) {
+            throw new Error('Invalid Apple authentication response');
+        }
+        return {
+            authorizationCode: result.authorizationCode,
+            state: result.state,
+            identityToken: result.identityToken || undefined,
+            email: result.email || undefined,
+            fullName: result.fullName || undefined,
+        };
+    }
+    catch (error) {
+        if (error instanceof Error && 'code' in error && error.code === 'ERR_REQUEST_CANCELED') {
+            const errorCode = options.isLogin
+                ? 'login_with_oauth_was_cancelled_by_user'
+                : 'link_with_oauth_was_cancelled_by_user';
+            throw {
+                code: errorCode,
+                error: 'Apple login was cancelled',
+            };
+        }
+        throw error;
+    }
+}
+/**
+ * Checks if Apple Sign-In is available on the current device
+ */
+export async function isAppleSignInAvailable() {
+    if (Platform.OS !== 'ios') {
+        return false;
+    }
+    try {
+        return await AppleAuthentication.isAvailableAsync();
+    }
+    catch {
+        return false;
+    }
+}
+/**
+ * Parses OAuth parameters from a URL
+ */
+export function parseOAuthUrl(url) {
+    try {
+        const { queryParams } = Linking.parse(url);
+        console.log('Parsed OAuth URL:', queryParams);
+        return {
+            access_token: queryParams?.access_token,
+            refresh_token: queryParams?.refresh_token,
+            player_id: queryParams?.player_id,
+            error: queryParams?.error,
+            errorDescription: queryParams?.error_description,
+        };
+    }
+    catch (error) {
+        console.warn('Failed to parse OAuth URL:', error);
+        return {};
+    }
+}
+/**
+ * Creates a redirect URI for OAuth flows
+ */
+export function createOAuthRedirectUri(path = '/') {
+    return Linking.createURL(path);
+}
+/**
+ * OAuth provider utilities
+ */
+export const OAuthUtils = {
+    /**
+     * Checks if a provider should use native authentication
+     */
+    shouldUseNativeAuth(provider, isLegacyAppleIosBehaviorEnabled = false) {
+        return (Platform.OS === 'ios' &&
+            provider === 'apple' &&
+            !isLegacyAppleIosBehaviorEnabled);
+    },
+    /**
+     * Gets platform-specific OAuth configuration
+     */
+    getPlatformConfig() {
+        return {
+            supportsNativeApple: Platform.OS === 'ios',
+            platform: Platform.OS,
+            supportsWebBrowser: true,
+        };
+    },
+    /**
+     * Validates OAuth provider support
+     */
+    isProviderSupported(provider) {
+        const supportedProviders = [
+            OAuthProviderType.GOOGLE,
+            OAuthProviderType.TWITTER,
+            OAuthProviderType.DISCORD,
+            OAuthProviderType.LINE,
+            OAuthProviderType.FACEBOOK,
+            OAuthProviderType.EPIC_GAMES,
+            OAuthProviderType.APPLE
+        ];
+        return supportedProviders.includes(provider);
+    },
+    /**
+     * Gets the appropriate OAuth URL for a provider
+     */
+    getProviderUrl(provider, baseUrl) {
+        // Handle Twitter URL compatibility between platforms
+        if (provider === 'twitter' && Platform.OS === 'android') {
+            return baseUrl.replace('x.com', 'twitter.com');
+        }
+        return baseUrl;
+    },
+    /**
+     * Handles OAuth session timeout
+     */
+    createTimeoutPromise(timeoutMs = 120000) {
+        return new Promise((_, reject) => {
+            setTimeout(() => {
+                reject(new Error('OAuth session timed out'));
+            }, timeoutMs);
+        });
+    },
+    /**
+     * Combines OAuth session with timeout
+     */
+    async withTimeout(promise, timeoutMs = 120000) {
+        return Promise.race([
+            promise,
+            this.createTimeoutPromise(timeoutMs),
+        ]);
+    },
+};

package/dist/native/storage.js

@@ -0,0 +1,178 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import * as SecureStore from 'expo-secure-store';
+import { Platform } from 'react-native';
+/**
+ * Checks if a message is a secure storage related message
+ */
+export function isSecureStorageMessage(message) {
+    if (typeof message !== 'object' ||
+        message === null ||
+        !('event' in message) ||
+        typeof message.event !== 'string' ||
+        !('id' in message) ||
+        typeof message.id !== 'string' ||
+        !('data' in message) ||
+        typeof message.data !== 'object' ||
+        message.data === null) {
+        return false;
+    }
+    return message.event.startsWith('app:secure-storage:');
+}
+/**
+ * Handles secure storage operations from WebView messages
+ */
+export async function handleSecureStorageMessage(message) {
+    console.log('Handling secure storage message:', message);
+    switch (message.event) {
+        case 'app:secure-storage:get': {
+            const { key } = message.data;
+            try {
+                const value = await SecureStore.getItemAsync(normalizeKey(key), {
+                    keychainAccessible: SecureStore.AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY,
+                });
+                return {
+                    event: message.event,
+                    id: message.id,
+                    data: { value },
+                };
+            }
+            catch (error) {
+                console.warn('Failed to get the value from secure store', error);
+                return {
+                    event: message.event,
+                    id: message.id,
+                    data: { value: null },
+                };
+            }
+        }
+        case 'app:secure-storage:set': {
+            const { key, value } = message.data;
+            try {
+                await SecureStore.setItemAsync(normalizeKey(key), value, {
+                    keychainAccessible: SecureStore.AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY,
+                });
+                return {
+                    event: message.event,
+                    id: message.id,
+                    data: { success: true },
+                };
+            }
+            catch (error) {
+                console.warn('Failed to write the value to secure store', error);
+                return {
+                    event: message.event,
+                    id: message.id,
+                    data: { success: false },
+                };
+            }
+        }
+        case 'app:secure-storage:remove': {
+            const { key } = message.data;
+            try {
+                await SecureStore.deleteItemAsync(normalizeKey(key), {
+                    keychainAccessible: SecureStore.AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY,
+                });
+                return {
+                    event: message.event,
+                    id: message.id,
+                    data: { success: true },
+                };
+            }
+            catch (error) {
+                console.warn('Failed to remove the value from secure store', error);
+                return {
+                    event: message.event,
+                    id: message.id,
+                    data: { success: false },
+                };
+            }
+        }
+        case 'app:secure-storage:flush': {
+            const { origin } = message.data;
+            try {
+                // Systematically delete all known storage keys for this origin
+                // These are the keys used by the iframe signature service
+                const storageKeys = [
+                    'playerID', 'chainId', 'deviceID', 'accountType', 'address',
+                    'ownerAddress', 'share', 'account', 'chainType', 'signerId'
+                ];
+                const deletePromises = storageKeys.map(async (key) => {
+                    const fullKey = normalizeKey(`${origin}:${key}`);
+                    try {
+                        await SecureStore.deleteItemAsync(fullKey, {
+                            keychainAccessible: SecureStore.AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY,
+                        });
+                    }
+                    catch (error) {
+                        // Ignore errors for keys that don't exist
+                        console.debug(`Key ${fullKey} not found during flush:`, error);
+                    }
+                });
+                await Promise.all(deletePromises);
+                console.log('Flushed secure storage for origin:', origin);
+                return {
+                    event: message.event,
+                    id: message.id,
+                    data: { success: true },
+                };
+            }
+            catch (error) {
+                console.warn('Failed to flush secure store', error);
+                return {
+                    event: message.event,
+                    id: message.id,
+                    data: { success: false },
+                };
+            }
+        }
+        default:
+            throw new Error(`Unknown secure storage event: ${message.event}`);
+    }
+}
+/**
+ * Normalizes storage keys for compatibility with secure storage
+ */
+function normalizeKey(key) {
+    return key.replaceAll(':', '-');
+}
+/**
+ * Native storage utilities for platform-specific operations
+ */
+export const NativeStorageUtils = {
+    /**
+     * Checks if secure storage is available on the current platform
+     */
+    isAvailable() {
+        return Platform.OS === 'ios' || Platform.OS === 'android';
+    },
+    /**
+     * Gets the platform-specific storage options
+     */
+    getStorageOptions() {
+        return {
+            keychainAccessible: SecureStore.AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY,
+        };
+    },
+    /**
+     * Safely checks if a key exists in secure storage
+     */
+    async keyExists(key) {
+        try {
+            const value = await SecureStore.getItemAsync(normalizeKey(key), this.getStorageOptions());
+            return value !== null;
+        }
+        catch {
+            return false;
+        }
+    },
+    /**
+     * Gets all available storage information
+     */
+    async getStorageInfo() {
+        return {
+            isAvailable: this.isAvailable(),
+            platform: Platform.OS,
+            keychainAccessible: SecureStore.AFTER_FIRST_UNLOCK_THIS_DEVICE_ONLY,
+        };
+    },
+};

package/dist/native/webview.js

@@ -0,0 +1,157 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import React, { useRef, useCallback, useEffect } from 'react';
+import { AppState, Platform, View } from 'react-native';
+import WebView from 'react-native-webview';
+import { isSecureStorageMessage, handleSecureStorageMessage } from './storage';
+/**
+ * WebView component for embedded wallet integration
+ * Handles secure communication between React Native and the embedded wallet WebView
+ * This component is hidden and only used for wallet communication
+ */
+export const EmbeddedWalletWebView = ({ client, isClientReady, onProxyStatusChange, }) => {
+    const webViewRef = useRef(null);
+    // Handle app state changes to monitor WebView health
+    useEffect(() => {
+        const handleAppStateChange = async (nextAppState) => {
+            if (nextAppState === 'active') {
+                // Check if embedded wallet is still responsive
+                try {
+                    await client.embeddedWallet.ping(500);
+                    // if (!isResponsive) {
+                    //   onProxyStatusChange?.('reloading');
+                    //   // client.embeddedWallet.reload();
+                    // }
+                }
+                catch (error) {
+                    console.warn('Failed to ping embedded wallet:', error);
+                }
+            }
+        };
+        const subscription = AppState.addEventListener('change', handleAppStateChange);
+        return () => subscription?.remove();
+    }, [client, onProxyStatusChange]);
+    // Handle WebView load events
+    const handleLoad = useCallback(() => {
+        onProxyStatusChange?.('loaded');
+    }, [onProxyStatusChange]);
+    const handleError = useCallback((error) => {
+        console.error('WebView error:', error);
+    }, []);
+    // Set up WebView reference with client immediately when both are available
+    useEffect(() => {
+        if (webViewRef.current) {
+            // Simple message poster that uses WebView's postMessage directly
+            const messagePoster = {
+                postMessage: (message) => {
+                    webViewRef.current?.postMessage(message);
+                }
+            };
+            client.embeddedWallet.setMessagePoster(messagePoster);
+        }
+    }, [client, isClientReady]);
+    // Clean message handler using the new penpal bridge
+    const handleMessage = useCallback(async (event) => {
+        try {
+            const messageData = JSON.parse(event?.nativeEvent?.data);
+            if (!messageData)
+                return;
+            // Handle secure storage messages
+            if (isSecureStorageMessage(messageData)) {
+                const response = await handleSecureStorageMessage(messageData);
+                webViewRef.current?.postMessage(JSON.stringify(response));
+                return;
+            }
+            // Forward all messages to the embedded wallet
+            client.embeddedWallet.onMessage(messageData);
+        }
+        catch (error) {
+            console.error('Failed to handle WebView message:', error);
+            // Don't crash the app on message handling errors
+        }
+    }, [client]);
+    // Ref callback to set up message poster immediately
+    const handleWebViewRef = useCallback((ref) => {
+        if (webViewRef.current !== ref) {
+            webViewRef.current = ref;
+        }
+        if (ref) {
+            const messagePoster = {
+                postMessage: (message) => {
+                    ref.postMessage(message);
+                }
+            };
+            client.embeddedWallet.setMessagePoster(messagePoster);
+        }
+    }, [client]);
+    return (React.createElement(View, { style: { width: 0, height: 0, overflow: 'hidden' } },
+        React.createElement(WebView, { ref: handleWebViewRef, source: {
+                uri: client.embeddedWallet.getURL(),
+            }, webviewDebuggingEnabled: true, cacheEnabled: false, injectedJavaScriptObject: { shouldUseAppBackedStorage: true }, cacheMode: "LOAD_NO_CACHE", onLoad: handleLoad, onError: handleError, onMessage: handleMessage })));
+};
+/**
+ * Utilities for WebView integration
+ */
+export const WebViewUtils = {
+    /**
+     * Checks if WebView is supported on the current platform
+     */
+    isSupported() {
+        return Platform.OS === 'ios' || Platform.OS === 'android';
+    },
+    /**
+     * Gets platform-specific WebView configuration
+     */
+    getPlatformConfig() {
+        if (Platform.OS === 'ios') {
+            return {
+                allowsInlineMediaPlayback: false,
+                allowsLinkPreview: false,
+                bounces: false,
+            };
+        }
+        if (Platform.OS === 'android') {
+            return {
+                domStorageEnabled: false,
+                javaScriptCanOpenWindowsAutomatically: false,
+                mixedContentMode: 'never',
+            };
+        }
+        return {};
+    },
+    /**
+     * Creates a secure message for WebView communication
+     */
+    createSecureMessage(data) {
+        return JSON.stringify({
+            timestamp: Date.now(),
+            platform: Platform.OS,
+            data,
+        });
+    },
+    /**
+     * Validates a message received from WebView
+     */
+    validateMessage(message) {
+        try {
+            const parsed = JSON.parse(message);
+            // Basic validation
+            if (typeof parsed !== 'object' || parsed === null) {
+                return { isValid: false, error: 'Invalid message format' };
+            }
+            return { isValid: true, data: parsed };
+        }
+        catch (error) {
+            return {
+                isValid: false,
+                error: error instanceof Error ? error.message : 'Failed to parse message'
+            };
+        }
+    },
+    /**
+     * Gets WebView user agent for the current platform
+     */
+    getUserAgent() {
+        const baseAgent = 'OpenfortEmbeddedWallet/1.0';
+        return `${baseAgent} (${Platform.OS}; ${Platform.Version})`;
+    },
+};

package/dist/types/auth.js

@@ -0,0 +1 @@
+export {};

package/dist/types/baseFlowState.js

@@ -0,0 +1,8 @@
+export const mapStatus = (status) => {
+    return {
+        isLoading: status.status === 'loading',
+        isError: status.status === 'error',
+        isSuccess: status.status === 'success',
+        error: status.error
+    };
+};

package/dist/types/components/AuthBoundary.d.ts

@@ -0,0 +1,85 @@
+import React from 'react';
+/**
+ * Props for the AuthBoundary component
+ */
+export interface AuthBoundaryProps {
+    /**
+     * Component to render while the SDK is initializing and not ready
+     */
+    loading: React.ReactNode;
+    /**
+     * Component to render when the user is not authenticated
+     */
+    unauthenticated: React.ReactNode;
+    /**
+     * Optional component to render when there's an error during SDK initialization
+     * Can be a component or a function that receives the error and returns a component
+     */
+    error?: React.ReactNode | ((error: Error) => React.ReactNode);
+    /**
+     * Children to render when the user is authenticated and the SDK is ready
+     */
+    children: React.ReactNode;
+}
+/**
+ * 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 declare const AuthBoundary: React.FC<AuthBoundaryProps>;
+export default AuthBoundary;

package/dist/types/components/index.d.ts

@@ -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/types/config.js

@@ -0,0 +1 @@
+export {};

package/dist/types/constants/config.d.ts

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

package/dist/types/constants/index.d.ts

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

package/dist/types/core/client.d.ts

@@ -0,0 +1,24 @@
+import { Openfort as OpenfortClient, OpenfortSDKConfiguration } from '@openfort/openfort-js';
+/**
+ * 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 declare function createOpenfortClient({ baseConfiguration, overrides, shieldConfiguration, }: OpenfortSDKConfiguration): OpenfortClient;
+/**
+ * Gets or creates the default Openfort client instance
+ * @internal
+ */
+export declare function getDefaultClient(options?: OpenfortSDKConfiguration): OpenfortClient;
+/**
+ * Sets the default Openfort client instance
+ * @internal
+ */
+export declare function setDefaultClient(client: OpenfortClient): void;