Social login with PrestaShop

Social login is a solid solution to onboard users with just one click. Several researches have proved that users are annoyed by most signup and login flows, given the increasing number of accounts they have to keep, as well as the length of most online forms.

In this context, social login is a fast and secure solution to log users in and reduce friction to the fullest. Today we're showing you how to build a standard social login form for your PrestaShop site. Follow these steps and get your social login for PrestaShop without coding.

How to build a social login for PrestaShop

1. Get the Arengu addon for PrestaShop

First, remember to get the Arengu module from Arengu's GitHub. Then, in your PrestaShop account, go to Improve > Modules and upload the Arengu addon.

2. Build a login form with social login

To build a form, select one of the predefined templates or select Blank Form if you prefer to build it from a white canvas. Keep in mind every template is editable, so you can completely personalize the form and align it with your goals. In this case, we will select the Login Form and add some extra details.

When you use the Login Form template, you will get two fields and one CTA: email, password and the submit button. In this case, you just need to add the social login button with your preferred social providers.

Configure the social login button by adding the Client ID (that you can find under settings in your social provider account) and the Scopes. Keep in mind setting the Scopes is optional — when not configured, you will get basic data by default.

3. Build a flow to authenticate users

In the Forms editor, click on Flows on the vertical menu at the right side of your screen. There you will see an overview of your form and the flows that are connected to it in each stage.

To start editing your flow, click on the right side of the flow and it will open in a new tab so you can edit it.

Templates come with predetermined fields, but also with predetermined logic. In this case, we will change the login flow to adapt it to the social login. This is how your flow should look like:

Now, keep in mind you can completely personalize the logic of your flows, and this is just an example. You can combine this flow with additional validation or integration flows and adapt your onboarding to your business rules.

These are the actions we will add to this flow:

• If/then condition
  First, we need to branch the flow according to what the user chose as a login system. This action will trigger different actions depending on what the user entered in the form: social login or login with email and password.
  
  To configure it, add the reference {{input.body.social}} and select exists.

• Passwordless login
  If the user chose to log in with a social provider, the path on the left will be executed. To log the user in, add the action Passwordless login and configure it as you can see in the image below.

Add the base URL of your PrestaShop site, paste your secret API key, and then add the reference {{input.body.social.profile.email}} under the field email. All the data obtained from the social login will be gathered under the fieldID of the social login button (in this case, we used social) and under the property profile.

• Login with password
  If the user chose to log in with email and password, the path on the right will be triggered. In this case, you need to add the action Login with password.
  
  To configure it, you just need to follow the same rules: add the base URL of your PrestaShop site, paste your secret API key, and then add the email and password by selecting them on the drop-down menu.

• If/then condition
  After setting the login actions, you need to add an extra If/then condition. This one will check if any error was detected, and trigger the final actions in both cases.
  
  To set this if/then action, add the condition {{passwordlessLogin.success}}, choose is true, as you can see in this example:

• Submit the form or Show error message
  If no error is detected, the form will be successfully submitted and the user will be automatically redirected. If an error occurs, an error message will be displayed, the form won't be submitted and the user won't be logged in.
  
  To correctly redirect the user after submitting the form, select Redirect to URL and add the reference {{passwordlessLogin.body.login_url}}. You can add personalized success or error message in each action's settings.

These native actions return an URL with an authentication token so users can be automatically signed in. Keep in mind you can also send this URL via email to the user if you want.

4. Embed your form in your PrestaShop

To start using your form, go to the Forms editor and click on the Embed tab. Here you will find all the sharing options. Simply copy these two lines of code and paste them in your PrestaShop site.

If you wish to edit any detail, keep in mind you won't have to deploy the changes. Simply modify everything you need and the form will be automatically modified, in every site where it is embedded.

Do you want to create your signup form for PrestaShop now? Register for free and start building your own personalized social login forms and embed them in PrestaShop.