add-social-login

Add Social Login Authentication

When to use

• User asks to add social login or enable Google/Apple sign-in
• User wants to set up embedded wallets
• User wants to add passwordless authentication with Phantom

Workflow

Step 1: Register at Phantom Portal

1. Go to Phantom Portal.
2. Create a new app and obtain your appId.
3. Configure your allowed redirect URLs.

You must have a valid appId for social login to work.

Step 2: Configure Providers (React SDK)

import { PhantomProvider } from "@phantom/react-sdk";

function App() {
  return (
    <PhantomProvider
      config={{
        appId: "your-app-id-from-phantom-portal",
        providers: ["google", "apple"],
        addressTypes: ["solana"],
        authOptions: {
          redirectUrl: "https://your-app.com/auth/callback",
        },
      }}
    >
      <YourApp />
    </PhantomProvider>
  );
}

Step 3: Configure Providers (Browser SDK)

import { BrowserSDK, AddressType } from "@phantom/browser-sdk";

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

Step 4: Configure Providers (React Native SDK)

import "react-native-get-random-values";
import { PhantomProvider } from "@phantom/react-native-sdk";

export default function App() {
  return (
    <PhantomProvider
      config={{
        appId: "your-app-id-from-phantom-portal",
        providers: ["google", "apple"],
        addressTypes: ["solana"],
        scheme: "your-app-scheme",
        redirectUrl: "your-app-scheme://auth/callback",
      }}
    >
      <YourApp />
    </PhantomProvider>
  );
}

Step 5: Handle the Connect Button

The ConnectButton component automatically presents social login options when providers are configured:

import { ConnectButton } from "@phantom/react-sdk";

function LoginPage() {
  return (
    <div>
      <h1>Welcome</h1>
      <p>Sign in with your Google or Apple account to get started.</p>
      <ConnectButton />
    </div>
  );
}