> ## 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.

# Browser extension login

> Connect to existing Phantom browser extension wallets

Let users connect their existing Phantom browser extension wallet to your app.

<Info>
  **Note for React Native**: Browser extension connection is not available in React Native apps. Use OAuth providers (Google, Apple) instead. See [Social login](/recipes/auth/social-login) for React Native authentication.
</Info>

<Tabs>
  <Tab title="React">
    ```tsx theme={null}
    import { PhantomProvider, useConnect, usePhantom, useAccounts, useIsExtensionInstalled, darkTheme } from "@phantom/react-sdk";
    import { AddressType } from "@phantom/browser-sdk";

    function App() {
      return (
        <PhantomProvider
          config={{
            providers: ["injected"],
            appId: "your-app-id",
            addressTypes: [AddressType.solana],
          }}
          theme={darkTheme}
          appName="Your App"
        >
          <ExtensionLogin />
        </PhantomProvider>
      );
    }

    function ExtensionLogin() {
      const { connect, isConnecting } = useConnect();
      const { isConnected } = usePhantom();
      const addresses = useAccounts();
      const { isInstalled, isLoading } = useIsExtensionInstalled();

      if (isLoading) {
        return <p>Checking for Phantom...</p>;
      }

      if (!isInstalled) {
        return (
          <div>
            <p>Phantom extension not found</p>
            <a href="https://phantom.app/download" target="_blank">
              Install Phantom
            </a>
          </div>
        );
      }

      if (isConnected && addresses) {
        return <p>Connected: {addresses[0]?.address}</p>;
      }

      return (
        <button onClick={() => connect({ provider: "injected" })} disabled={isConnecting}>
          {isConnecting ? "Connecting..." : "Connect Phantom"}
        </button>
      );
    }
    ```
  </Tab>

  <Tab title="Browser SDK">
    ```typescript theme={null}
    import { BrowserSDK, AddressType, waitForPhantomExtension } from "@phantom/browser-sdk";

    const sdk = new BrowserSDK({
      providers: ["injected"],
      addressTypes: [AddressType.solana],
    });

    // Check if extension is installed
    const isAvailable = await waitForPhantomExtension(3000);

    if (!isAvailable) {
      // Show install prompt
      window.location.href = "https://phantom.app/download";
    }

    // Connect to extension
    const { addresses } = await sdk.connect({ provider: "injected" });
    console.log("Connected:", addresses[0].address);
    ```
  </Tab>
</Tabs>