The complete guide to implement social login

How does social login work

Social login allows you to sign up or authenticate users with just one click by using their existing accounts. Before implementing it with Arengu, it's recommended to learn about its main features and 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.
• Users 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 social providers will follow the OpenID standard claims.

How to implement social login

Adding social login to your forms is a simple task with Arengu - just drag and drop wherever you want it:

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

Standard OpenID claims

Most of social providers have slight differences when returning claims like first name, last name, etc. 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 properties, for the following examples, it is assumed that the field ID is named social:

Example of received data using Google as a 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 a 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

Login with Facebook

Go to the facebook developer console and create or select your app. Under Settings -> Basic you will find your App ID to use in your social login field.

On App Domains, include all the domains where you will use your social login:

And lastly, remember to add Facebook Login for Business under the Products section and make sure Web OAuth Login  is enabled:

Login with Google

Go to the Google Cloud APIs credential console   and select or create an OAuth client ID:

You will find the client ID and Client Secret, in the OAuth consent screen make sure to select User type External for external domains, in the Credentials settings to use in your social login field, make sure to add your website domain under Authorized JavaScript origins and add the url https://oauth.arengu.com/forms/callback under Authorized redirect URIs:

Login with Microsoft

Go to the Microsoft Azure portal to register an application, select Supported account types: "Accounts in any organizational directory (Any Azure AD directory - Multitenant) and personal Microsoft accounts (e.g. Skype, Xbox)" and add the url https://oauth.arengu.com/forms/callback under Redirect URI:

Once it has been created, you will find the Application (client) ID.

Select the Certificates & secrets to add a client secret

You will need the Application (client) ID and the Secret Value to use in your social login field.

Login with Github

Go to the Github Developer settings page and add an OAuth app, name the app, add a Homepage URL, and add the url https://oauth.arengu.com/forms/callback under Authorization callback URL:

Once the application has been created you will find the Client ID, then Generate a client secret to use in your social login field.

‍Login with LinkedIn

‍Go to the LinkedIn Developer Dashboard and Create an app. Select your company LinkedIn page and URL. Once it has been created, you will find the Client ID and Client secret under the Auth tab to use in your social login field.

Add the url https://oauth.arengu.com/forms/callback under the Authorized redirect URLs for your app and update.

‍