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 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
Build a headless experience to show linked accounts and allow link/unlink.
Use useSocialAccounts
to manage linking and unlinking.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.