— Social login in Arengu — The complete guide to implement it

— Social login in Arengu — The complete guide to implement it

Social login has become a popular login system, since it reduces friction for the user, eliminates passwords, and can boost conversion rates. Signing in via social media accounts (such as Facebook and Google) has many benefits for your forms, your metrics and your users.

Social login presents multiple advantages, and that is why this is one of our latest features. Here's how you can implement it with Arengu!

👉 Check how social login can boost your form conversion rates.

How does social login work?

Social login is a sign-in or sign-up process that takes pre-existing information, located in a certain social network, to access a website or an app. This method allows users to access your web or app with their social media credentials, without having to create a different account.

To do so, the social login process follows these steps:

  1. To create a social login, first you need a registration form. In your form, you can add fields for a registration via email and some extra social login buttons.
  2. After clicking on the social login call to action, the user will be prompted with a permission dialog. This dialog may be displayed as a new tab on the browser (the user is redirected to a new page and accepts the terms there) or as a pop-up on the same browser tab (the user stays on the same page and accepts the terms without leaving the page).
    The permission dialog is crucial so the user can accept the terms and conditions and actively accept to share their social data with the new registration site.
    It is also significant to choose where to place the permissions dialog. Adding it in a new tab adds some extra redirections that may add friction for the user, as well as technical complexities for the development of the form.
  3. Once the user accepts to share all the necessary data, an access token will be generated and sent to the selected social media platform.
  4. Here, the access token will be accepted or rejected. Afterwards, the token will be sent (carrying all pertinent information) from the social media to the browser where the user was initially navigating. When approved, the user will be automatically authenticated.
  5. Once the user has been authenticated, they will be redirected to a determined URL.

How to implement social login with Arengu

1. Create a form

Open Arengu and just click on Create form. You can use any of the use case templates if they meet your needs, or start from scratch for a completely personalized form.

Social login forms templates

Use the wizard to select all the options you need: the use case you want to build, the tech stack you want to embed it in, the elements you want, etc.

2. Add the social login field

In order to add social login to your form, simply activate the toggle when you select the template. If you're starting from scratch (or if you forgot!) you can drag the social login field to the form and drop it where you prefer. Just keep in mind, if this is the case, the flows won't be automatically added and configured!

Add social login to forms

Just afterwards, you will be displayed with a settings menu. Here, you can select the social media provider and arrange its settings. It is mandatory to add Client ID and select the permissions the users have to grant.

3. Setup on Facebook

To get the keys, you just have to go to your developer account on the social media provider you chose. For instance, if you have chosen to add a social login with Facebook, go to https://developers.facebook.com/apps. Click on Add a new app, and then go to Settings. On this tab, you will find your App ID. Just copy paste it on the settings fields on Arengu, and your social login will be ready to work properly. Keep in mind the App ID is a public key and visible in your website, so you don't have to worry about sharing it with third-parties.

On App Domains, you'll have to have to include all the sites where your social login is implemented.

In order for your social login to work properly, the option Web OAuth Login has to be enabled. This option is enabled by default.

Lastly, if you don't wish to use your personal Facebook account to set up your social login, you can use test users offered by Facebook.

4. Setup on Google

If you're configuring social login with Google instead, simply follow these instructions;

Open your Google dev console and go to the credentials page, where you will find your APIs. Here, click on + Create credentials and select OAuth client  ID.

All you have to do then is select the app type, name your credential and create it. The client ID will then be created, and you just need to copy paste it under the Google social login button in Arengu.

5. Personalize the logic of the form

Arengu allows you to personalize your forms to the fullest. Even if a social login allows users to register or log in to your site, you can also add additional steps and logic to the form.

If you build your social login form with a predefined template, all the flow and its actions will be automatically built and set up — you just have to replace your WordPress URL and your API and your job will be done! In the image below, you can see an example of a flow, that is already configured.

But remember you can build additional flows with other types of actions, and complement your signup or login form.

6. Check the social output data

One of the great advantages of adding social login to your forms is the data enrichment aspect. With it, you can get interesting data without having to ask the user and hurt the experience.

In order to check these output data, go to Flows > Executions, on the top of your editor. You will find input from the social provider under Profile.

7. Test and embed your form wherever you need

When your smart form with social login is ready to fly, you can embed it into your website with just two lines of code. Good news — you can use Arengu's forms regardless of the stack you use!

Remember you can test your form first, without having to embed it in your webpage. Simply click on Preview, and play around to check everything is working correctly!

👉 Want to know more? Check how to build a social login form for WordPress and WooCommerce, or how to build a social login form for PrestaShop.

If you want to see it for yourself, don't hesitate and try Arengu for free!


Ana Vilar García

Marketing Specialist at Arengu

View Comments
Next Post

7 benefits of implementing social login in forms with Arengu

Previous Post

Improving internal communications with form automating actions