Authenticate with Social

Prerequisites

Before this: create and initialize a Dynamic client (see Creating a Dynamic Client, Initializing the Dynamic Client).

Usage

JavaScript

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

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.

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.