SocialSignInButton

This component is a button shell that allows users to sign into de[id] via a connected social.

For more information on binding a social account to a de[id], see documentation on the SocialBindingButton 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 { SocialSignInButton, SocialSignInButtonChildProps } from "@thedegods/profiles/core";
 
function App() {
  return (
    <SocialSignInButton
      provider="TWITTER"
      scope={[
        "tweet.read",
        "tweet.write",
        "users.read",
        "like.write",
        "follows.write",
        "offline.access",
      ]}
    >
      {({ loading, privateAuthHandler, profile }: SocialSignInButtonChildProps) => (
        {/** ... */} 
      )}
    </SocialSignInButton>
  );
}

Props

provider

IdentityProviderName

The social provider to use for sign in. The provider has to be bound to a de[id] for sign in to work.

scope

string[]

The scope of the social provider to use for sign in. This is an array of strings that represent the permissions that the social provider will grant to the de[id] when signing in.

onInitAuth (optional)

() => void

The callback function that will be called when the user clicks the social sign in button.

onSuccess (optional)

(profile: Profile, accessToken: string, refreshToken: string) => Promise<void>

The callback function that will be called when the user successfully signs in. The callback function will be passed the profile of the user, the access token, and the refresh token.

injectedDeId (optional)

DeIdContext

The de[id] context that will be used to sign in the user. If not provided, the de[id] context will be inferred from the nearest parent DeIdProvider component. This prop is usually only used when calling this component from another component within the SDK inside its own dependency container. Eg. Calling this component inside a component in EVM, where then this component would not have access to the DeIdContext provided in the provider from useDeId.

Returns

This component shell returns SocialSignInButtonChildProps to the child component.

import { SocialSignInButtonChildProps } from "@thedegods/profiles/core";

loading

boolean

A boolean that represents whether loading state of the social sign in.

privateAuthHandler

() => Promise<void>

A function that will trigger the social sign in flow.

profile

Profile

The profile of the user that is currently signed in.

TwitterSignInButton

Out of the box, a Twitter sign in button is provided. This component is a styled version using the SocialSignInButton component shell to sign into Twitter.

Usage

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

disabled (optional)

boolean

A boolean that represents whether the button is disabled.

onInitAuth (optional)

() => void

The same onInitAuth prop as the SocialSignInButton component shell.

onSuccess (optional)

(profile: Profile, accessToken: string, refreshToken: string) => Promise<void>

The same onSuccess prop as the SocialSignInButton component shell.

injectedDeId (optional)

DeIdContext

The same injectedDeId prop as the SocialSignInButton component shell.