Authenticate with Social

Prerequisites

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

Usage

import {
  completeSocialAuthentication,
  detectOAuthRedirect,
  type SocialProvider,
  authenticateWithSocial,
} from '@dynamic-labs-sdk/client';

// First, call authenticateWithSocial 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 authenticateWithSocial({
    provider,
    redirectUrl: 'https://your-app.com/callback',
  });
}

// Use the `detectOAuthRedirect` 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 `completeSocialAuthentication` to complete the authentication process
const detectRedirect = async () => {
  const currentUrl = new URL(window.location.href);
  const isReturning = await detectOAuthRedirect({
    url: currentUrl,
  });

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

    // User is now authenticated
  }
}

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.