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

# Session management

> Keep users logged in across page reloads and browser sessions

The SDK automatically persists sessions. Here's how to handle the connection state and show the right UI.

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

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

    function AppContent() {
      const { isConnected } = usePhantom();
      const { open } = useModal();
      const addresses = useAccounts();
      const { disconnect } = useDisconnect();

      // User is logged in
      if (isConnected && addresses) {
        return (
          <div>
            <p>Welcome back!</p>
            <p>Wallet: {addresses[0]?.address}</p>
            <button onClick={() => disconnect()}>Sign out</button>
          </div>
        );
      }

      // User needs to log in
      return (
        <div>
          <h1>Welcome</h1>
          <button onClick={open}>Sign in</button>
        </div>
      );
    }
    ```
  </Tab>

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

    const sdk = new BrowserSDK({
      providers: ["google", "apple", "injected"],
      appId: "your-app-id",
      addressTypes: [AddressType.solana],
    });

    // Listen for connection events
    sdk.on("connect", (data) => {
      console.log("Connected:", data.addresses);
      // Update your UI to show logged-in state
    });

    sdk.on("disconnect", () => {
      console.log("Disconnected");
      // Update your UI to show logged-out state
    });

    // Try to restore existing session on page load
    await sdk.autoConnect();
    ```
  </Tab>

  <Tab title="React Native">
    ```tsx theme={null}
    import { PhantomProvider, usePhantom, useModal, useAccounts, useDisconnect, AddressType, darkTheme } from "@phantom/react-native-sdk";
    import { View, Text, Button, StyleSheet, ActivityIndicator } 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"
        >
          <AppContent />
        </PhantomProvider>
      );
    }

    function AppContent() {
      const { isConnected } = usePhantom();
      const { open } = useModal();
      const addresses = useAccounts();
      const { disconnect } = useDisconnect();

      if (isConnected && addresses) {
        return (
          <View style={styles.container}>
            <Text style={styles.welcome}>Welcome back!</Text>
            <Text style={styles.address}>Wallet: {addresses[0]?.address}</Text>
            <Button title="Sign out" onPress={() => disconnect()} />
          </View>
        );
      }

      return (
        <View style={styles.container}>
          <Text style={styles.title}>Welcome</Text>
          <Button title="Sign in" 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",
        marginBottom: 20,
      },
    });
    ```
  </Tab>
</Tabs>