> ## 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](https://docs.dynamic.xyz/docs/javascript/reference/client/create-dynamic-client.md), [Initializing the Dynamic Client](https://docs.dynamic.xyz/docs/javascript/reference/client/initialize-dynamic-client.md)).

## Usage

> [tab] 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] 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 />;
> }
> ```

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


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