Tackle social login experience: Unlocking the power of convenience
Tags: webdev, design, beginners, tutorial
Published: 2023-06-27 12:02:53

Author: Ran, Product & Design

Most users are big fans of [social login](https://en.wikipedia.org/wiki/Social_login) (social sign-in) due to its simplicity, convenience, enhanced security, and elimination of password headaches. If you're one of them, you'll be interested to know that there are several factors to consider when implementing social login to ensure an optimal user experience.

In this blog post, we will explore why product authentication chooses social login and discuss ways to enhance its advantages through thoughtful design choices. Additionally, you can experience the seamless social login flow firsthand within Logto's web console.

---
<center>
<a href="https://logto.io/?utm_source=dev&utm_campaign=tackle-social-login-experience">
Unlock Social Login with Logto
</a>
</center>
---

## Increase conversion: Make 'em say yes

> Research shows that social login can significantly boost conversion rates, with an average improvement of 20%-40%.

### Less is more, but choose wisely

Facebook, Google, Apple, Twitter, LinkedIn, Microsoft, GitHub... they're the cool kids in town. Adding too many login options can overwhelm users during registration; or make it difficult for them to recall which provider they used during login. It's best to offer a minimum but relevant selection of providers. Typically, two providers are sufficient for most products.

### Branding is key, for trust and usability

Adhere to the branding guidelines of social providers to build trust and maintain a polished UI. For instance, Apple Store strictly reviews the usage of the Apple sign-in button. Facebook or Google sign-in buttons should display the user's avatar, username, or email. Google leverages its browser platform to offer a one-tap sign-in pop-up. You can quickly refer to the platform guidelines for [Facebook](https://developers.facebook.com/docs/facebook-login), [Google](https://developers.google.com/identity/gsi/web/guides/overview), [Apple](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple), [Slack](https://api.slack.com/authentication/sign-in-with-slack#implementation).

## Get quality data: Personalize like a pro

> Social login provides valuable user profile and social relationship data, allowing products to personalize user experiences quickly.

### Ask nicely for the info you need

While social providers offer access to users' public profiles (email, username, avatar), be cautious when requesting additional user information during registration for personalizing product experience. Requesting excessive or non-essential private details without a clear purpose may trigger user skepticism. Instead, prioritize a seamless registration process, gradually seeking additional information as users become engaged with your product.

### Sync once or forever, you decide

Typically, user information is synced from social platforms during the first login, allowing users to make changes within the app's profile afterward. But if you prefer the product to always utilize the latest profile information from the social provider, you can choose to sync user information during each login.

## Retain users: Don't let them slip away

> Did you know that 92% of users will ditch a website if they forget their username or password? Social login comes to the rescue, but it might not be enough on its own.

### Email and phone options: a backup plan

Not all users prefer social login, as they may have concerns about privacy or desire anonymity. Therefore, it's essential to offer email or phone number-based login methods alongside social login. Even for users who choose social login, acquiring their email or phone number is necessary. This helps prevent any disruptions caused by social providers discontinuing services or being affected by regional policies. It also enables your marketing team to maintain communication with users through emails or SMS for promotions or re-engagement campaigns.

### One account, no more confusion

Recently, while attempting to sign in to ChatGPT, I occasionally found myself unsure whether I had used email sign-in or Google sign-in. This confusion resulted in encountering the following interface and necessitated logging out and back in. I have also experienced a similar issue with Pinterest.

![ChatGPT authentication error page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvoks5d2ej934v1lwd7z.png)

Many users prefer to have a single account, except for those seeking multiple free trial periods. However, after accessing the product, users generally don't navigate to the account management page to link accounts since it's too cumbersome.

Therefore, during registration, an automated and seamless account linking process, with the user's consent, can yield the best results. Here's an optimized design approach when requesting a user's email:

1. If the social provider gives us a trustworthy email that isn't already registered, we automatically link it during registration. Easy peasy!
2. If the social provider gives us a trustworthy email, but it's already associated with an account, we ask the user if they want to link their existing account or link another one.
3. If the social provider doesn't provide a reliable email, we kindly request the user to provide one during registration.

![The social login flowchart for a seamless user experience](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rmqxmu954xs12aoa8hyz.png)

## Efficiently configure social login

If you're loving this seamless experience and don't want the hassle of developing it yourself, give Logto a try! It's a quick and easy way to integrate social connectors and level up your social login game. We offer preconfigured options for popular social connectors, and you can also create your own social connectors using standard protocols like OAuth 2.0, OIDC, and SAML.

The figure below shows the Logto console for configuring end users' sign-in experience social login. You can easily add or remove social connectors, customize the branding, and set up different sign-in methods.

![Logto web console for sign-in experience](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jo5t5r6l7h66893jlsuy.png)

---
<p>
<center>
<a href="https://logto.io/?utm_source=dev&utm_campaign=tackle-social-login-experience">
Configure your social login in minutes
</a>
</center>
</p>
---

We value your insights and welcome open communication if you have any better suggestions.