> ## Documentation Index
> Fetch the complete documentation index at: https://docs.phantom.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Connect

> Connect to Phantom wallets with the React Native SDK.

The Phantom Connect React Native SDK provides hooks for connecting users with OAuth authentication and secure key handling.

<Info>
  **Learn about Phantom Connect**: For details about authentication flows, login, account selection, and session management, see the [Phantom Connect](/phantom-connect) guide.
</Info>

## Using the Connect modal (recommended)

The SDK includes a built-in bottom sheet Connect modal that handles sign-in and wallet connection. Use the `useModal()` hook to open it:

```tsx theme={null}
import React from "react";
import { View, Button, Text } from "react-native";
import { useModal, useAccounts } from "@phantom/react-native-sdk";

function WalletScreen() {
  const modal = useModal();
  const { isConnected, addresses } = useAccounts();

  if (!isConnected) {
    return (
      <View style={{ padding: 20 }}>
        <Button title="Connect Wallet" onPress={() => modal.open()} />
      </View>
    );
  }

  return (
    <View style={{ padding: 20 }}>
      <Text style={{ fontSize: 18, marginBottom: 10 }}>Wallet Connected</Text>
      {addresses.map((addr, index) => (
        <Text key={index}>
          {addr.addressType}: {addr.address}
        </Text>
      ))}
      <Button title="Manage Wallet" onPress={() => modal.open()} />
    </View>
  );
}
```

Modal features:

* Sign-in with Google and Apple
* Built-in error handling and loading states
* Works across devices and environments
* Handles the full connection flow and returns a ready-to-use wallet session
* Presented as a bottom sheet optimized for mobile interaction

## useConnect hook (manual connection)

```tsx theme={null}
import React from "react";
import { View, Button, Alert } from "react-native";
import { useConnect } from "@phantom/react-native-sdk";

function ConnectButton() {
  const { connect, isConnecting, error } = useConnect();

  const handleConnect = async () => {
    try {
      const result = await connect({ provider: "google" });
      Alert.alert("Success", "Wallet connected!");
      console.log("Connection successful:", result);
    } catch (error) {
      Alert.alert("Error", `Failed to connect: ${error.message}`);
    }
  };

  return (
    <View>
      <Button
        title={isConnecting ? "Connecting..." : "Connect Phantom"}
        onPress={handleConnect}
        disabled={isConnecting}
      />
      {error && (
        <Text style={{ color: "red", marginTop: 10 }}>
          Error: {error.message}
        </Text>
      )}
    </View>
  );
}
```

## Authentication providers

The React Native SDK supports **Google** and **Apple** OAuth providers. React Native uses system browser authentication (Safari on iOS, Chrome Custom Tab on Android) to complete the sign-in flow.

The `connect()` method accepts a `provider` parameter to specify how users should authenticate. Available providers are configured in the `PhantomProvider` config:

```tsx theme={null}
import { PhantomProvider, AddressType } from "@phantom/react-native-sdk";

<PhantomProvider
  config={{
    providers: ["google", "apple"], // Specify enabled providers
    appId: "your-app-id",
    scheme: "myapp",
    addressTypes: [AddressType.solana],
  }}
>
  <App />
</PhantomProvider>
```

Then use the `connect()` method with one of the enabled providers:

```tsx theme={null}
const { connect } = useConnect();

// Connect with specific provider
await connect({ provider: "google" });  // Google OAuth
await connect({ provider: "apple" });   // Apple ID
```

## Checking connection status

Use the `useAccounts` hook to check if a wallet is already connected:

```tsx theme={null}
import React from "react";
import { View, Text, Button } from "react-native";
import { useConnect, useAccounts } from "@phantom/react-native-sdk";

function WalletStatus() {
  const { connect } = useConnect();
  const { addresses, isConnected, walletId } = useAccounts();

  if (isConnected && addresses) {
    return (
      <View style={{ padding: 20 }}>
        <Text style={{ fontSize: 18, marginBottom: 10 }}>Connected to Phantom</Text>
        <Text>Wallet ID: {walletId}</Text>
        {addresses.map((account, index) => (
          <Text key={index} style={{ marginTop: 5 }}>
            {account.addressType}: {account.address}
          </Text>
        ))}
      </View>
    );
  }

  return (
    <View style={{ padding: 20 }}>
      <Button
        title="Connect Phantom"
        onPress={() => connect({ provider: "google" })}
      />
    </View>
  );
}
```

## Handling connection errors

When a connection fails, the `connect()` promise rejects with an error.

```tsx theme={null}
import React from "react";
import { View, Button, Alert, Text } from "react-native";
import { useConnect } from "@phantom/react-native-sdk";

function ConnectButton() {
  const { connect, isConnecting, error } = useConnect();

  const handleConnect = async () => {
    try {
      const result = await connect({ provider: "google" });
      // Connection successful
      Alert.alert("Success", "Wallet connected!");
      console.log("Connection successful:", result);
    } catch (error) {
      // Connection failed (user cancelled, network error, etc)
      Alert.alert("Error", `Failed to connect: ${error.message}`);
    }
  };

  return (
    <View>
      <Button
        title={isConnecting ? "Connecting..." : "Connect Phantom"}
        onPress={handleConnect}
        disabled={isConnecting}
      />
      {error && (
        <Text style={{ color: "red", marginTop: 10 }}>
          Error: {error.message}
        </Text>
      )}
    </View>
  );
}
```