Social login (Google, Apple)

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

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