Authenticate with Social

Sign up with Social

Sign up/sign in with Apple, Discord, Facebook, Farcaster, Github, Google, Telegram, Twitch or Twitter!

Similar to email, you can toggle and configure each social provider in the social providers section of the dashboard.

Configuration guides for individual social signup options can be found in the social providers section of the docs.

Note that when configuring any social provider, you can adjust the social prop in the DynamicContextProvider component to customize the user experience i.e. whether you use a redirect or popup.

Dynamic UI

Once toggled on, these methods will be available in the Dynamic widget, and you can customize the behaviour using the following guide.

Hooks Only

You’ll use the useSocialAccounts hook available from the sdk-react-core package.

This hook comes with a method called signInWithSocialAccount that you can utilize:

import { FC } from 'react';
import {
  DynamicWidget,
  useDynamicContext,
  useSocialAccounts,
} from '@dynamic-labs/sdk-react-core';
import { ProviderEnum } from '@dynamic-labs/types';
import { FarcasterIcon, GoogleIcon, TwitterIcon } from '@dynamic-labs/iconic';

const SocialSignIn = () => {
  const { error, isProcessing, signInWithSocialAccount } = useSocialAccounts();

  return (
    <div className='headless-social-signin'>
      <div className='headless-social-signin__container'>
        <p>Log in or sign up</p>

        <button onClick={() => signInWithSocialAccount(ProviderEnum.Farcaster)}>
          <FarcasterIcon />
          Sign in with Farcaster
        </button>
        <button onClick={() => signInWithSocialAccount(ProviderEnum.Google)}>
          <GoogleIcon />
          Sign in with Google
        </button>
        <button onClick={() => signInWithSocialAccount(ProviderEnum.Twitter)}>
          <TwitterIcon />
          Sign in with Twitter
        </button>
        {isProcessing && <span className='processing'>Processing...</span>}
        {error && <span className='error'>{error.message}</span>}
      </div>
    </div>
  );
};

const LoggedInUser = () => {
  const { user } = useDynamicContext();

  return (
    <>
      <DynamicWidget />
      <p>user: {user?.email}</p>
    </>
  );
};

export const HeadlessSocialSignInView: FC = () => {
  const { user } = useDynamicContext();

  return (
    <div style={{ overflowY: 'scroll' }}>
      {user ? <LoggedInUser /> : <SocialSignIn />}
    </div>
  );
};