SocialBindingButton

This component is a button shell that allows users to bind a social account to their de[id].

Binding a social account to a de[id] allows for future sign ins using that bound social account. See documentation on the SocialSignInButton component.

The button shell alone contains no styling, and passes in relevant parameters into the child component. When using the button shell by itself, you can customize the styling of the social sign in button using your own application's styling.

Usage

import { SocialBindingButton, SocialBindingButtonChildProps } from "@dustlabs/profiles/core";
 
function App() {
  return (
    <SocialBindingButton
      provider="TWITTER"
      scope={["users.read", "tweet.read"]}
    >
      {({ loading, privateAuthHandler }: SocialBindingButtonChildProps) => (
        {/** ... */} 
      )}
    </SocialBindingButton>
  );
}

Props

provider

IdentityProviderName

The social provider to bind to the de[id].

scope

string[]

The scope of the social provider to allow de[id] to access. This is an array of strings that represent the permissions that the social provider will grant to the de[id] when bound.

onInitBinding (optional)

() => void

The onInitBinding function will be called before the social binding initiates.

onSuccess (optional)

() => void

The onSuccess function that will be called when the user successfully binds a social account to their de[id].

Returns

This component shell returns SocialBindingButtonChildProps to the child component.

import { SocialBindingButtonChildProps } from "@dustlabs/profiles/core";

loading

boolean

A boolean that represents whether loading state of the social binding.

privateAuthHandler

() => Promise<void>

A function that will trigger the social binding flow.

TwitterBindingButton

Out of the box, a Twitter binding button is provided. This component is a styled version using the SocialBindingButton component shell to bind the signed in de[id] to Twitter.

Usage

import { TwitterBindingButton } from "@dustlabs/profiles/core";
 
function App() {
  return <TwitterBindingButton />
}

disabled (optional)

boolean

A boolean that represents whether the button is disabled.

onInitBinding (optional)

() => void

The same onInitBinding prop as the SocialSignInButton component shell.

onSuccess (optional)

() => void

The same onSuccess prop as the SocialSignInButton component shell.