The complete guide to implement social login

How does social login work

Social login allows you to sign up or authenticate users with just 1-click and using their existing accounts. Before using it with Arengu, it's recommended to take into account the main features about how it works:

• You can add social login buttons to any form step.
• When using social login, all other fields in the same step will be ignored.
• You can dynamically control the redirect URL after submitting a form.
• Linked flows will be executed and receive the data obtained from the social provider.
• User will be prompted with a permission dialog that may be displayed as a new tab on the browser or as a pop-up on the same browser tab.
• All data obtained from any social provider will follow OpenID standard claims.

How to implement social login

Adding social login to your forms, it's a simple task with Arengu, you only need to drag the social field and drop it where you want:

To set up this field it's mandatory to add Client ID and select the permissions (scope) the users have to grant. If no scope is specified, it will email scope.

Standard OpenID claims

Most of social providers have slight differences when returning claims like first name, last name, etc so in order to unify this, Arengu will return an object containing OpenID standard claims:

All retrieved data will be included inside your field ID and profile property, we will assume you are using social as field ID for the following examples:

Example of received data using Google as social provider:

{
  "social": {
    "provider": "GOOGLE",
    "accessToken": "eyJhbGciOiJSUzI1NiIsImtpZCI6IjZhZG...",
    "profile": {
      "name": "Jane Doe",
      "email": "john.doe@arengu.com",
      "given_name": "Jane",
      "family_name": "Doe",
      "sub": "104255271847926400180"
    }
  }
}

Example of received data using Facebook as social provider:

{
  "social": {
    "provider": "FACEBOOK",
    "accessToken": "EAAIHOpudMXYBAKOvznN5U6QH...",
    "profile": {
      "name": "John Doe",
      "email": "john.doe@arengu.com",
      "given_name": "John",
      "family_name": "Doe",
      "sub": "110361337624452"
    }
  }
}

Example of received data in a flow:

Setting up social providers

Setup on Facebook

Go to https://developers.facebook.com/apps and create an app. Go under "Settings > Basic" and find there your App ID to use in your social login field.

On App Domains, you'll have to include all domains where you will use your social login:

And last, remember to enable Facebook Login under Products section and make sure Web OAuth Login  is enabled:

Setup on Google

Go to the credentials page of your Google Cloud Console project and create an OAuth client ID:

You can find your client ID inside your credentials settings and last, make sure to add your website domain under Authorised JavaScript origins: