showSocialAccounts

client.showSocialAccounts({
  container: HTMLElement|id,
  accessToken: string,
  // Optional arguments
  providers: string[],
  auth: string[],
  onReady: function,
  theme: object,
  i18n: object,
})

Description

Show the widget allowing the current profile to manage the social logins linked to his account.

Examples

const accessToken = // Here paste the authorization token of the profile retrieved after login

client.showSocialAccounts({
  container: 'social-accounts-container',
  accessToken,
  providers: ['facebook', 'google'],
  auth: {
      redirectUri: 'https://example.com/auth-callback'
  },
  theme: {
      primaryColor: '#274890',
      borderRadius: '25',
      socialButton: {
        inline: true
      }
    },
  i18n: {
      'socialAccounts.linkNewAccount': 'Link a new account'
  }
})

Widget

showSocialAccounts noProviders
showSocialAccounts configuredProviders

Options

container HTMLElement |id

The DOM element or the id of a DOM element in which the widget should be embedded.

accessToken function

The profile’s access token.

providers string[]

List of the available social providers.

Defaults to all configured providers in your account settings.

auth object

List of authentication options

responseType string

Should be set to code for server-side authentication, and token for client-side authentication.

Defaults to code when redirectUri is provided, and to token otherwise. For messenger account linking, responseType should be set to messenger_code.

redirectUri string

The URL where the user will be redirected back to after authentication.

This value is required with code response type and defaults to the current page with token response type. For messenger account linking, redirectUri should be set with the redirect_uri query param provided by Facebook on URL.

state string

Persist data between user being directed to the authorization server and back again.

Use case: help mitigate CSRF attacks or indicating which app’s pages to redirect to after authorization. Could be Base64 encoded JSON object, JWT or nonce.

prompt string

Specify whether social provider must prompt for reauthentication or consent.

The defined values are:

  • none: no authentication nor consent. The user must be already authenticated in social provider.

  • login: the social provider must prompt the user for reauthentication.

  • consent: the social provider must prompt for consent.

nonce string

String value used to associate a local session with an ID Token, and to mitigate replay attacks. The value is passed through unmodified to the ID Token.

popupMode boolean

Whether to use popup mode.

Defaults to false.

This mode is not recommended due to known bugs in Android or Firefox in iOS.

origin string

Free text parameter describing the source of the login (only for reporting purpose).

scope string[]

The list of the profile’s scopes. Make sure they are allowed by the client.

Optional if the fetchBasicProfile option is set to true and default scopes are the allowed scopes set up in the client’s configuration.

fetchBasicProfile boolean

Fetch user’s basic profile information when they sign in. Adds profile, email, phone and openid to the requested scopes.

Defaults to true.

accessToken string

Access token of the current user. Enables social login linking to an existing account.

providerScope string

Whitespace separated list of scopes that you want to request from the social provider.

Defaults to scope configured in your ReachFive’s console.

Only for login with social provider.

requireRefreshToken boolean

If set to true, an OAuth 2.0 Refresh Token will be present in the token response.

Defaults to false.

Settings this parameter to true is equivalent to adding the OpenID’s offline_access scope value to the requested scopes.

Only accessible if your Client’s authorization method is POST, and if the Refresh Token option is selected.

onReady function

Callback function called after the widget has been successfully loaded and rendered inside the container. The callback is called with the widget instance.

theme object

The options to set up to customize the appearance of the widget.

primaryColor string

The button and link default color.

Default to #229955.

borderRadius string

The radius of the social login button and other input. Can be used to make circle social login button with inline used.

Default to 3.

socialButton object

Social button theming options.

i18n object

Widget labels and error messages to override. Falls back to the default wordings in en, fr, es, it and nl. For example, you might re-word the socialAccounts.linkNewAccount or change the way other wordings display to the user while leaving the remaining text on the widget intact.