Authenticate 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 dashboard. Configuration guides for individual social signup options can be found in the social providers section of the docs.

Using our UI

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

Using your UI

React
React Native
Javascript
Swift
Flutter

You’ll use the useSocialAccounts hook available from the sdk-react-core package.This hook comes with a method called signInWithSocialAccount that you can utilize:

React

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

Note that when configuring any social provider, you can adjust the social prop in the DynamicContextProvider component to customize the user experience i.e. whether you use a redirect or popup.

React Native provides social authentication through the dynamic client’s auth methods. You can use the Dynamic UI or customUI for social authentication with full account management capabilities.

Make sure you’ve setup your deeplink URLs correctly. See here.

React Native

import { dynamicClient } from '<path to client file>';
import { ProviderEnum } from '@dynamic-labs/types';

// Using Dynamic UI to trigger social login
dynamicClient.ui.auth.show();

// social connect (example: Farcaster)
await dynamicClient.auth.social.connect({ provider: ProviderEnum.Farcaster });

// Check if a provider is linked
const isGoogleLinked = await dynamicClient.auth.social.isLinked(ProviderEnum.Google);

// Get all linked accounts for a specific provider
const googleAccounts = await dynamicClient.auth.social.getLinkedAccounts(ProviderEnum.Google);

// Get all linked accounts across all providers
const allAccounts = await dynamicClient.auth.social.getAllLinkedAccounts();

// Unlink a social account
await dynamicClient.auth.social.unlink(ProviderEnum.Google);

For a complete example with UI, see the React Native social authentication guide.

Prerequisites

You need to have the Dynamic Client initialized (See this guide on how to do that).

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 singInWithSocial = 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.

Swift

import DynamicSwiftSDK

let provider: ProviderType = .google
let user: SdkUser = try await socialLogin(
client: dynamicClient,
with: provider,
deepLinkUrl: "myapp://auth/callback"
)

Flutter

await DynamicSDK.instance.auth.social.connect(
  provider: SocialProvider.farcaster,
  redirectPathname: '/login_screen',
);

Installation & Configuration

Authenticate

Bring Your Own Authentication

Wallets

Money & Funding

Chains & Networks

Users & Verified Credentials

Gating & Access Control

Customizing Our UI

General Guidance

Authenticate with Social

Using our UI

Using your UI

Prerequisites

Usage

User data

Installation & Configuration

Authenticate

Bring Your Own Authentication

Wallets

Money & Funding

Chains & Networks

Users & Verified Credentials

Gating & Access Control

Customizing Our UI

General Guidance

​Sign up with Social

​Using our UI

​Using your UI

​Prerequisites

​Usage

​User data

Sign up with Social

Using our UI

Using your UI

Prerequisites

Usage

User data