​
Summary

A hook which can be used to trigger social account linking and unlinking for the authenticated user. The hook needs to be initialized within a child of DynamicContextProvider.

​
Usage

Available functions and states:

MethodTypeDescription
linkSocialAccount(provider: ProviderEnum) => Promise<void>When called, will trigger the oauth linking for the specified provider
unlinkSocialAccount(provider: ProviderEnum) => Promise<void>When called, it will unlink the user account for the specified provider
isLinked(provider: ProviderEnum) => booleanReturns true if user has an account linked for the specified provider. Otherwise returns false.
getLinkedAccountInformation(provider: ProviderEnum) => SocialAccountInformationReturns an object with the information about the linked account for the specified provider if there’s a linked account. If not, returns undefined.
isProcessingbooleanIndicates whether a link or unlink request is in process
errorSocialOAuthError | undefinedContains the code and message in case of an error during the link or unlink process

​
Types

ProviderEnum =
  "discord" |
  "facebook" |
  "github" |
  "google" |
  "instagram" |
  "twitch" |
  "twitter";

SocialAccountInformation = {
  id: string;
  provider: ProviderEnum;
  accountId: string;
  publicIdentifier: string;
  avatar?: string;
  displayName?: string;
  email?: string;
  username?: string;
};

SocialOAuthError =
  "social_linking_not_enabled" | // the social account linking feature has not been enabled in the dashboard so it cannot be used
  "no_provider" | // a hook menthod was called without passing a provider when required
  "provider_not_enabled" | // the provider has not been enabled in the dashboard for the social account linking feature
  "invalid_provider" | // the provider is not a valid social provider
  "account_already_linked" | // trying to link an account for a provider that already has an account linked
  "no_oauth_url" | // could not find the oauth url to initiate linking flow
  "oauth_error" | // user denied access to account
  "no_auth_code" | // oauth provider did not return a valid authorization code
  "verification_error" | // could not validate authorization code
  "oauth_window_closed" | // user closed oauth window without finishing auth flow
  "oauth_window_timeout" | // user closed oauth window or left if open for too long without finishing auth flow
  "session_timeout" | // user tried to authorize oauth after the timeout period
  "no_account_linked" | // trying to unlink the account for a provider that has no linked accounts
  "unlink_error" | // could not unlink social account
  "general_error";

​
Example

const UserProfileSocialAccount = () => {
  const {
    linkSocialAccount,
    unlinkSocialAccount,
    isProcessing,
    isLinked,
    getLinkedAccountInformation,
  } = useSocialAccounts();

  const provider = "google";
  const isGoogleLinked = isLinked(provider);
  const connectedAccountInfo = getLinkedAccountInformation(provider);

  return (
    <div>
      <div className="icon">
        {isGoogleLinked ? (
          <Avatar avatarUrl={connectedAccountInfo?.avatar} />
        ) : (
          <GoogleIcon />
        )}
      </div>
      <div className="label">
        <Typography>
          {connectedAccountInfo?.publicIdentifier ?? provider}
        </Typography>
      </div>
      {isGoogleLinked ? (
        <Button
          onClick={() => unlinkSocialAccount(provider)}
          loading={isProcessing}
        >
          Disconnect
        </Button>
      ) : (
        <Button
          onClick={() => linkSocialAccount(provider)}
          loading={isProcessing}
        >
          Connect
        </Button>
      )}
    </div>
  );
};

Was this page helpful?

useTokenBalancesuseUserUpdateRequest