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

# Social login (Google, Apple)

> Let users sign in with Google or Apple and automatically get a Phantom wallet

Let users sign in with familiar social accounts. Phantom Connect creates a non-custodial wallet for them automatically.

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

    function App() {
      return (
        <PhantomProvider
          config={{
            providers: ["google", "apple"],
            appId: "your-app-id",
            addressTypes: [AddressType.solana],
            authOptions: {
              redirectUrl: "https://yourapp.com/auth/callback",
            },
          }}
          theme={darkTheme}
          appName="Your App"
        >
          <LoginPage />
        </PhantomProvider>
      );
    }

    function LoginPage() {
      const { open } = useModal();
      const { isConnected } = usePhantom();
      const addresses = useAccounts();

      if (isConnected && addresses) {
        return (
          <div>
            <p>Welcome! Your wallet: {addresses[0]?.address}</p>
          </div>
        );
      }

      return (
        <div>
          <h1>Sign in to get started</h1>
          <button onClick={open}>Continue with Google or Apple</button>
        </div>
      );
    }
    ```
  </Tab>

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

    const sdk = new BrowserSDK({
      providers: ["google", "apple"],
      appId: "your-app-id",
      addressTypes: [AddressType.solana],
      authOptions: {
        redirectUrl: "https://yourapp.com/callback",
      },
    });

    // Sign in with Google
    document.getElementById("google-btn").onclick = async () => {
      const { addresses } = await sdk.connect({ provider: "google" });
      console.log("Wallet address:", addresses[0].address);
    };

    // Sign in with Apple
    document.getElementById("apple-btn").onclick = async () => {
      const { addresses } = await sdk.connect({ provider: "apple" });
      console.log("Wallet address:", addresses[0].address);
    };
    ```
  </Tab>

  <Tab title="React Native">
    ```tsx theme={null}
    import { PhantomProvider, useModal, usePhantom, useAccounts, AddressType, darkTheme } from "@phantom/react-native-sdk";
    import { View, Text, Button, StyleSheet } from "react-native";

    function App() {
      return (
        <PhantomProvider
          config={{
            providers: ["google", "apple"],
            appId: "your-app-id",
            scheme: "yourapp",
            addressTypes: [AddressType.solana],
            authOptions: {
              redirectUrl: "yourapp://auth/callback",
            },
          }}
          theme={darkTheme}
          appName="Your App"
        >
          <LoginPage />
        </PhantomProvider>
      );
    }

    function LoginPage() {
      const { open } = useModal();
      const { isConnected } = usePhantom();
      const addresses = useAccounts();

      if (isConnected && addresses) {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>Welcome!</Text>
            <Text style={styles.address}>Your wallet: {addresses[0]?.address}</Text>
          </View>
        );
      }

      return (
        <View style={styles.container}>
          <Text style={styles.title}>Sign in to get started</Text>
          <Button title="Continue with Google or Apple" onPress={open} />
        </View>
      );
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        padding: 20,
      },
      title: {
        fontSize: 24,
        fontWeight: "bold",
        marginBottom: 20,
      },
      welcome: {
        fontSize: 20,
        fontWeight: "bold",
        marginBottom: 10,
      },
      address: {
        fontSize: 14,
        color: "#666",
      },
    });
    ```
  </Tab>
</Tabs>

## Handle the OAuth callback

Create a callback page at your `redirectUrl`:

```tsx theme={null}
// app/auth/callback/page.tsx (Next.js)
"use client";
import { ConnectBox } from "@phantom/react-sdk";

export default function AuthCallback() {
  return (
    <div style={{ display: "flex", justifyContent: "center", alignItems: "center", minHeight: "100vh" }}>
      <ConnectBox />
    </div>
  );
}
```