Guides & tutorials

The complete guide to implement social login

No items found.
Table of contents

How does social login work

Social login allows you to sign up or authenticate users with just one 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 is a simple task with Arengu — you only need to drag the social field and drop it wherever you want:

To set up this field it is 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. In order to unify this, Arengu will return an object containing OpenID standard claims:

Parameter Description
sub An unique and never never reassigned identifier for the user.
email The user's email address.
name The user's full name.
given_name The user's given name(s) or first name(s).
family_name The user's surname(s) or last name(s).
We can't assure all data will be present as it depends on the social provider.

All retrieved data will be included inside your field ID and profile property, it will be assumed that 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 your App ID to use in your social login field.

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

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

If you don't wish to use your personal Facebook account to try out your social login implementation, you can use test users offered by Facebook.

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:

You might like to read

Getting started with Arengu

Arengu allows you to build all your user flows connected to your current stack, and avoids coding all the UI, complex integrations, validations or logic from scratch. Try it for free and start building faster and scaling your application needs as they grow.