Quickstart with Automatic recovery

// app/_layout.tsx
import { OpenfortProvider, RecoveryMethod } from "@openfort/react-native";
import Constants from "expo-constants";
import { Stack } from "expo-router";
 
export default function RootLayout() {
  return (
    <OpenfortProvider
      publishableKey={Constants.expoConfig?.extra?.openfortPublishableKey}
      walletConfig={{
        debug: false,
        recoveryMethod: RecoveryMethod.AUTOMATIC, // or RecoveryMethod.PASSWORD
        ethereumProviderPolicyId: Constants.expoConfig?.extra?.openfortPolicyId,
        shieldPublishableKey: Constants.expoConfig?.extra?.openfortShieldPublishableKey,
        createEncryptedSessionEndpoint: Constants.expoConfig?.extra?.openfortShieldRecoveryEndpoint,
      }}
      verbose={true}
      supportedChains={[
        {
          id: 84532,
          name: 'Base Sepolia',
          nativeCurrency: {
            name: 'Base Sepolia Ether',
            symbol: 'ETH',
            decimals: 18
          },
          rpcUrls: { default: { http: ['https://sepolia.base.org'] } },
        },
        {
          id: 11155111,
          name: 'Sepolia',
          nativeCurrency: {
            name: 'Sepolia Ether',
            symbol: 'ETH',
            decimals: 18
          },
          rpcUrls: { default: { http: ['https://ethereum-sepolia-rpc.publicnode.com'] } },
        },
      ]}
    >
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </OpenfortProvider>
  );
}

// components/LoginScreen.tsx
import { OAuthProvider, useGuestAuth, useOAuth } from "@openfort/react-native";
import { useEffect } from "react";
import { Button, Text, View, StyleSheet } from "react-native";
 
export default function LoginScreen() {
  const { signUpGuest } = useGuestAuth();
  const { initOAuth, error: authError } = useOAuth();
 
  const SELECTED_PROVIDERS = [
    OAuthProvider.GOOGLE,
    OAuthProvider.TWITTER,
    OAuthProvider.DISCORD,
    OAuthProvider.APPLE,
  ]
 
  useEffect(() => {
    if (authError) {
      console.error("[Openfort RN] Error logging in with OAuth:", authError);
    }
  }, [authError]);
 
  const handleSignUpGuest = () => {
    signUpGuest()
        .catch((error) => {
            console.error("[Openfort RN] Error signing up guest:", error);
        });
  };
 
  const handleLoginWithOAuth = async (provider: OAuthProvider) => {
    initOAuth({ provider });
  };
 
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Openfort Expo Example</Text>
 
      <Button
        title="Login as Guest"
        onPress={handleSignUpGuest}
      />
 
      <View style={styles.providersContainer}>
        {SELECTED_PROVIDERS.map((provider) => (
          <View key={provider.toString()}>
            <Button
              title={`Login with ${provider.toString()}`}
              onPress={() => handleLoginWithOAuth(provider)}
            />
          </View>
        ))}
      </View>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    gap: 10,
    marginHorizontal: 10,
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  providersContainer: {
    display: "flex",
    flexDirection: "column",
    gap: 5,
    margin: 10,
  },
});

// app/index.tsx
import LoginScreen from '../components/LoginScreen';
import { UserScreen } from '../components/UserScreen';
import { useOpenfort } from '@openfort/react-native';
 
export default function Index() {
  const { user } = useOpenfort();
 
  if (user === null) {
    console.warn('Tried to fetch user from Openfort. The user is not authenticated yet.');
  } else {
    console.log('Fetched user from Openfort:', user);
  }
 
  return !user ? <LoginScreen /> : <UserScreen />;
}