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, Google, LinkedIn, and so forth) 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!
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:
- 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 (such as Facebook, Google, LinkedIn, GitHub, Twitter, and many more).
- 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.
- Once the user accepts to share all the necessary data, an access token will be generated and sent to the selected social media platform.
- 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.
- 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.
2. Add the social login field
Drag the social login field to the form and drop it where you prefer. 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. Personalize the rest 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.
Just click on Add new step on the Forms sections to keep on adding fields to your forms.
When you're done creating your form, you can also add logic to it. Go to Flows and add any actions you need to complement your registration form.
You can use the native actions or build one of your own with an HTTP request. After building the flow that goes behind your registration form, go to Forms > Flows and connect the flows you built to the stages of the form. This way, right after a user signs up with a social provider, different actions can be executed according to the logic you've built yourself.
5. 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!
If you want to see it for yourself, don't hesitate and try Arengu for free!