ConnectKit

Due to the way ConnectKit is structured, we need a hack to add social logins. Start by adding this code to your app's initialization flow:

import { supportedSocialConnectors } from '@zerodevapp/wagmi/connectkit'
import { supportedConnectors } from "connectkit";
supportedConnectors.push(...supportedSocialConnectors)

Then you can use ConnectKit with our social connectors:

import { 
  SocialWalletConnector,
  GoogleSocialWalletConnector, 
  FacebookSocialWalletConnector, 
  GithubSocialWalletConnector,
  DiscordSocialWalletConnector,
  TwitchSocialWalletConnector,
  TwitterSocialWalletConnector,
} from '@zerodevapp/wagmi'

import { createClient } from "wagmi"

import { getDefaultClient } from "connectkit"

Live Editor

function ConnectKitExample() { const chains = [polygonMumbai] const options = { options: { projectId: defaultProjectId } } const client = createClient(getDefaultClient({ chains, connectors: [ new GoogleSocialWalletConnector(options), new FacebookSocialWalletConnector(options), new GithubSocialWalletConnector(options), new DiscordSocialWalletConnector(options), new TwitchSocialWalletConnector(options), new TwitterSocialWalletConnector(options), new MetaMaskConnector(), ], autoConnect:false, })) return ( <WagmiConfig client={client}> <ConnectKitProvider theme="midnight"> <ConnectKitButton /> </ConnectKitProvider> </WagmiConfig> ) }

function ConnectKitExample() {
  const chains = [polygonMumbai]
  const options = { options: { projectId: defaultProjectId } } 

  const client = createClient(getDefaultClient({
    chains,
    connectors: [
        new GoogleSocialWalletConnector(options),
        new FacebookSocialWalletConnector(options),
        new GithubSocialWalletConnector(options),
        new DiscordSocialWalletConnector(options),
        new TwitchSocialWalletConnector(options),
        new TwitterSocialWalletConnector(options),
        new MetaMaskConnector(),
    ],
    autoConnect:false,
  }))

  return (
    <WagmiConfig client={client}>
        <ConnectKitProvider theme="midnight">
            <ConnectKitButton />
        </ConnectKitProvider>
    </WagmiConfig>
  )
}

Result

Loading...