- React
- Browser SDK
- React Native
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>
);
}
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",
},
});
Handle the OAuth callback
Create a callback page at yourredirectUrl:
// 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>
);
}