How to build a social login form for PrestaShop

Introduction
How to build a social login form for 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'd like to show you how to build a standard social login form for your PrestaShop site. Follow these steps and get your social login for PrestaShop in no time!

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.

Upload Arengu module PrestaShop

2. Build a login form with social login

To build a form, you can 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.

Form builder for PrestaShop

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.

Social login forms for PrestaShop

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.

Social login forms for PrestaShop

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:

Forms with conditional logic for PrestaShop

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.
Low code form builder for PrestaShop
  • 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.

Forms with social login for PrestaShop
  • 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.
No code form builder for PrestaShop
  • 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:
No code form builder for PrestaShop
  • 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!

No code form builder for PrestaShop

4. Embed your form in your PrestaShop

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

Embedding social login forms in PrestaShop

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!

Author

Ana Vilar García

Marketing Specialist at Arengu

View Comments
Next Post

Build social login forms for a WordPress site and WooCommerce

Previous Post

How to create an Arengu signup form for PrestaShop