add-social-login

phantom

•

424 months ago

Source Raw

Configure Google and Apple social login with Phantom Connect SDK to enable embedded wallet creation

Quick Install

npxskills add phantom/phantom-connect-cursor-plugin--skill add-social-login

Instructions

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

Go to Phantom Portal.
Create a new app and obtain your appId.
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>
  );
}

Step 6: Handle Session Persistence

Social login sessions persist for 7 days from the last authentication. Handle re-authentication gracefully:

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

function SessionGuard({ children }: { children: React.ReactNode }) {
  const { isConnected, connect } = useConnect();

  if (!isConnected) {
    return (
      <div>
        <p>Your session has expired. Please sign in again.</p>
        <button onClick={() => connect()}>Reconnect</button>
      </div>
    );
  }

  return <>{children}</>;
}

Important Notes

appId is required — social login will not work without a valid app ID from Phantom Portal.
Sessions last 7 days from the last authentication event.
Default spending limit for embedded wallets is $1,000 USD/day per app per user.
providers accepts "google" and "apple" — these are the supported social login methods.
The redirectUrl in authOptions must be whitelisted in your Phantom Portal app settings.

Loading…

Related Skills

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,360

skill-creator

Create or update AgentSkills. Use when designing, structuring, or packaging skills with scripts, references, and assets.

367,309

1password

Set up and use 1Password CLI (op). Use when installing the CLI, enabling desktop app integration, signing in (single or multi-account), or reading/injecting/running secrets via op.

365,915

himalaya

CLI to manage emails via IMAP/SMTP. Use `himalaya` to list, read, write, reply, forward, search, and organize emails from the terminal. Supports multiple accounts and message composition with MML (MIME Meta Language).

365,885