showSocialLogin

client.showSocialLogin({
  container: HTMLElement|id,
  // Optional arguments
  socialProviders: string[],
  auth: string[],
  onReady: function,
  onSuccess: function,
  onError: function,
  theme: object,
})

See the example

Description

Show the social login buttons.

Examples

client.showSocialLogin({
    container: 'social-login-container',
    socialProviders: ['facebook', 'google', 'linkedin', 'apple'],
    auth: {
      redirectUri: 'https://example.com/auth-callback'
    },
    onReady: instance => {
      // Destroy the widget
      // if (...) instance.destroy()
    },
    onSuccess: () => {
      console.log("Success!")
    },
    onError: (error: ErrorResponse) => {
      console.error(error)
    },
})

Widget

showSocialLogin

Parameters

container HTMLElement id

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

socialProviders string[]

Lists the available social providers. This is an array of strings. If you pass an empty array, social providers are not displayed.

If socialProviders isn’t provided at all, it defaults to the social providers active on the account. These are found at Settings  Providers under Active providers in the ReachFive Console.

You can also specify variants for a provider as a key:value pair:

<provider>: <variant> (1)
1 Where provider is the provider like line and the variant is the specific version of that provider like korea. Example line:korea.

auth object

List of authentication options

responseType string

The desired OAuth2 grant type. Use code to request an authorization code (recommended) or token for a token set (implicit grant, discouraged).

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 the social provider should explicitly prompt the user for reauthentication or consent.

The defined values are:

  • none: Require that no user interaction take place. This is typically used to silenty check for existing authentication and/or consent.

  • login: The social provider should prompt the user for reauthentication before consent, otherwise an error must be returned to the client (login_required).

  • consent: The social provider should prompt for consent, otherwise an error must be returned to the client (consent_required).

  • select_account: The social provider should prompt for user account selection, and if account selection is impossible, return an error (account_selection_required).

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

Boolean that specifies whether to use popup mode or not.

Defaults to false.

Options

  • true = A popup window is opened to the social provider login page.

  • false = Instead of a popup window, the user is redirected (in the same window) to the social provider login page.

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 purposes).

scope string[]

List of space-delimited, case-sensitive strings representing the requested scope.

Optional if the fetchBasicProfile option is set to true and the profile, email, phone and openid scope values are allowed in client 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

Enables social login linking to an existing account with a fresh token (less than 5 minutes old).

providerScope string

List of space-delimited, case-sensitive strings representing the requested scope at the social provider.

Defaults to the scope configured for the given provider in your ReachFive 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.

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

Refresh Tokens are only available in confidential Clients (with a configured authentication method) or for public Clients that enforce PKCE in the authorization code grant. The Refresh Token option must also be selected.

returnProviderToken boolean

Boolean that specifies whether you should return the provider access token.

If set to true, you retrieve the provider and provider access token as part of the authentication result.

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.

onSuccess function

Callback function called when the request was successful.

You can override this function with custom logic if desired:

client.showSocialLogin example
…​
    onSuccess: () ⇒ {
        // Handle success for showSocialLogin
        console.info('Success!')
    },
…​

onError function

Callback function called when the request has failed.

See our full list of SDK and API errors.

You can override this function with custom logic if desired:

client.showSocialLogin example
…​
    onError: (error)  ⇒ {
        // Handle error for showSocialLogin
        console.error("An error occurred", error)
    },
…​

theme object

Social button theming options.

inline boolean

Whether the buttons are horizontally aligned.

Default to false.

theme attributes

base

attribute

animateWidgetEntrance

fontSize

smallTextFontSize

lineHeight

headingColor

textColor

mutedTextColor

borderRadius

borderColor

borderWidth

backgroundColor

primaryColor

dangerColor

warningColor

successColor

lightBackgroundColor

maxWidth

paddingY

paddingX

spacing

_absoluteLineHeight

_blockInnerHeight

_blockHeight

link

color

decoration

hoverColor

hoverDecoration

input

color

placeholderColor

background

disabledBackground

boxShadow

focusBoxShadow

fontSize

lineHeight

paddingX

paddingY

borderRadius

borderColor

borderWidth

focusBorderColor

height

button

fontWeight

fontSize

lineHeight

paddingX

paddingY

borderRadius

borderWidth

focusBoxShadow

height

socialButton

inline

textVisible

fontWeight

fontSize

lineHeight

paddingX

paddingY

borderRadius

borderWidth

focusBoxShadow

height

passwordStrengthValidator

color0

color1

color2

color3

color4