> ## 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

## Prerequisites

Before this: create and initialize a Dynamic client (see [Creating a Dynamic Client](/javascript/reference/client/create-dynamic-client), [Initializing the Dynamic Client](/javascript/reference/client/initialize-dynamic-client)).

## Usage

<Tabs>
  <Tab title="JavaScript">
    ```javascript theme={"system"}
    import {
      completeSocialRedirect,
      detectSocialRedirectUrl,
      type SocialProvider,
      signInWithSocialRedirect,
    } from '@dynamic-labs-sdk/client';

    // First, call signInWithSocialRedirect to redirect the user to the social provider's authorization page
    // The redirectUrl should be the URL of your app that the user will be redirected to after they authenticate with the social provider
    // It does not need to be a specific page, it can be the root URL of your app
    const signInWithSocial = async (provider: SocialProvider) => {
      await signInWithSocialRedirect({
        provider,
        redirectUrl: 'https://your-app.com/callback',
      });
    }

    // Use the `detectSocialRedirectUrl` helper function when you app loads to check if the user is returning from the social provider's authorization page
    // If the user is returning, use `completeSocialRedirect` to complete the authentication process
    const detectRedirect = async () => {
      const currentUrl = new URL(window.location.href);
      const isReturning = await detectSocialRedirectUrl({
        url: currentUrl,
      });

      if (isReturning) {
        await completeSocialRedirect({
          url: currentUrl,
        });

        // User is now authenticated
      }
    }
    ```
  </Tab>

  <Tab title="React">
    Trigger the redirect with `useSignInWithSocialRedirect`, then detect the return in a `useEffect` on your app root or callback page. `detectSocialRedirectUrl` is one-shot startup work with no dedicated hook, so call it (and `completeSocialRedirect`) directly inside the effect.

    ```tsx theme={"system"}
    import {
      detectSocialRedirectUrl,
      completeSocialRedirect,
      type SocialProvider,
    } from '@dynamic-labs-sdk/client';
    import { useSignInWithSocialRedirect } from '@dynamic-labs-sdk/react-hooks';
    import { useEffect } from 'react';

    // Sign-in button — triggers redirect to social provider
    function SocialSignInButton({ provider }: { provider: SocialProvider }) {
      const { mutate: signInWithSocialRedirect } = useSignInWithSocialRedirect();

      return (
        <button
          onClick={() =>
            signInWithSocialRedirect({ provider, redirectUrl: `${window.location.origin}` })
          }
        >
          Sign in with {provider}
        </button>
      );
    }

    // App root — detect the OAuth return and complete authentication
    function App() {
      useEffect(() => {
        const handleRedirect = async () => {
          const url = new URL(window.location.href);
          const isReturning = await detectSocialRedirectUrl({ url });
          if (isReturning) {
            await completeSocialRedirect({ url });
            // User is now authenticated
          }
        };

        handleRedirect();
      }, []);

      return <YourApp />;
    }
    ```
  </Tab>
</Tabs>

## User data

When a user authenticates with a social provider, the user data is stored in the `user` object.
If the social provider returns an email address, it will be added to the user's emails list and can be used to authenticate with email.