Connect

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

Learn about Phantom Connect: For details about authentication flows, login, account selection, and session management, see the Phantom Connect guide.

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

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)

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:

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:

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:

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.

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>
  );
}

Overview

React SDK

React Native SDK

Browser SDK

Server SDK

Guides

useConnect hook (manual connection)

Authentication providers

Checking connection status

Handling connection errors

​Using the Connect modal (recommended)

​useConnect hook (manual connection)

​Authentication providers

​Checking connection status

​Handling connection errors

Using the Connect modal (recommended)

useConnect hook (manual connection)

Authentication providers

Checking connection status

Handling connection errors