Social Linking

Recommended: JavaScript SDK with React Hooks

For new React apps, we recommend the JavaScript SDK with React Hooks (@dynamic-labs-sdk/react-hooks) instead of the legacy React SDK documented here. The JS SDK comes with many benefits such as a much smaller bundle size and other optimizations. Use the React quickstart (JavaScript SDK) to get started.

This guide is currently React only.

Dynamic supports linking social accounts from Apple, Discord, Facebook, Farcaster, Github, Google, Telegram, Twitch and Twitter!

You can do this by going to the Information Capture section of the dashboard and toggling on Social Account Linking.

It will then prompt you to configure a social provider, and you can find the guides for each one in the social providers section.

General Setup

Enable Social Account Linking in the dashboard and configure providers.

• Go to Login & User Profile settings
• Toggle on “Social Account Linking”
• Configure the providers you wish to offer
• Refer to the provider guides for setup steps

See the provider list: /social-providers/overview

Using our UI

When enabled, the profile view in our UI will display available providers. Users can link and unlink directly from their profile.

Using your UI

Use useSocialAccounts to manage linking and unlinking.

React

import { useSocialAccounts } from '@dynamic-labs/sdk-react-core';

const providers = [
  'apple',
  'discord',
  'facebook',
  'farcaster',
  'github',
  'google',
  'telegram',
  'twitch',
  'twitter',
];

export function SocialAccounts() {
  const {
    linkSocialAccount,
    unlinkSocialAccount,
    isLinked,
    getLinkedAccountInformation,
    isProcessing,
  } = useSocialAccounts();

  return (
    <div>
      {providers.map((provider) => {
        const linked = isLinked(provider);
        const info = getLinkedAccountInformation(provider);
        return (
          <div key={provider}>
            <span>{info?.publicIdentifier ?? provider}</span>
            {linked ? (
              <button disabled={isProcessing} onClick={() => unlinkSocialAccount(provider)}>
                Disconnect
              </button>
            ) : (
              <button disabled={isProcessing} onClick={() => linkSocialAccount(provider)}>
                Connect
              </button>
            )}
          </div>
        );
      })}
    </div>
  );
}

Make sure the provider is properly configured in the dashboard (client IDs, secrets, redirect URIs where applicable) before exposing it to users.