Connect

Connecting to Phantom wallets with React Native SDK

Connecting to Phantom Wallets

The React Native SDK provides React hooks for connecting to Phantom wallets with OAuth authentication and hardware-backed security.

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

useConnect Hook

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 connect() method accepts a provider parameter to specify how users should authenticate:

const { connect } = useConnect();

// Connect with Google OAuth
await connect({ provider: "google" });

// Connect with Apple OAuth
await connect({ provider: "apple" });

Note: The "phantom" provider option (for extension login) is not available in React Native, as it’s designed for mobile apps. Only Google and Apple OAuth providers are supported.

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