> ## Documentation Index
> Fetch the complete documentation index at: https://docs.dynamic.xyz/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Authenticate with Social

> [card] 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)](https://docs.dynamic.xyz/docs/javascript/reference/react-quickstart.md) to get started.

#### 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 Dynamic Console](https://console.dynamic.xyz/dashboard/log-in-user-profile).

Configuration guides for individual social signup options can be found in [the social providers section of the docs](https://docs.dynamic.xyz/docs/platform/social-providers/overview.md).

## Using our UI

Once toggled on, these methods will be available in the Dynamic widget.

## Using your UI

You'll use [the `useSocialAccounts` hook](https://docs.dynamic.xyz/docs/react/reference/hooks/login-user-management/usesocialaccounts) available from the `sdk-react-core` package.

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

```tsx React theme={"system"}
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='social-signin'>
      <div className='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 SocialSignInView: FC = () => {
  const { user } = useDynamicContext();

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

> [!TIP]
>
> Note that when configuring any social provider, you can adjust [the `social` prop](https://docs.dynamic.xyz/docs/react/reference/providers/dynamiccontextprovider#social) in the `DynamicContextProvider` component to customize the user experience i.e. whether you use a redirect or popup.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.