Social Login

Social Login, a key component of Authentication and Customer Registration, offers users the convenience of bypassing traditional forms. By signing into your website using their existing social media accounts, such as Facebook, Twitter, LinkedIn, Google, and more, users can effortlessly create customer profiles and enjoy seamless login experiences. This feature simplifies the onboarding process and enhances user convenience across various use cases.

Common Use Cases

• Frictionless Onboarding: This feature simplifies registration by allowing users to sign up or log in with their social media accounts.
• Seamless Data Collection: Social Login automatically fetches verified user data such as email, name, and profile picture, significantly reducing the need for additional input fields. This not only saves users time and effort but also simplifies the registration process for developers.
• Improved Engagement Rates: By offering a convenient login method that users are familiar with, Social Login can significantly boost sign-up and engagement rates. This not only enhances the user experience but also increases the reach and impact of your application.

To explore these workflows, visit our Live Demo Page to experience how Social Login can enhance your applications.

Note: LoginRadius provides an Account Linking feature that links customer profiles from different providers. This document explains account linking in more detail.

Configurations

Enable Social Providers

• Navigate to the Authentication -> Social Providers section in the LoginRadius Admin Console.
• Ensure you're on the Configuration tab and choose the social providers (e.g., Google, Facebook, Twitter) you want to enable.
• Use the toggle switch on the right to enable the provider.
• Click on the provider's icon or name to open the Configuration tab.
• Go to the Setup Guide tab and follow the instructions to create an app in the provider’s developer portal.
• Obtain the Consumer Key and Consumer Secret from the developer portal.
• Return to the Configuration tab and enter the consumer Key and Secret in the input fields.
• Click Update to save the configuration.

Note: To disable a social provider, simply toggle the switch to the OFF position.

Configure Redirect URLs

• Ensure the correct redirect URLs are configured so each social provider can handle login callbacks securely.
• Example of a Standard Redirect URI Format:

https://<LoginRadius site name>.hub.loginradius.com:443/socialauth/validate.sauth

• Note: The exact format may vary slightly based on the social provider's requirements. Configuration of Redirect URLs is managed in the respective social provider's app, not within the LoginRadius platform.

Customize Permissions

• Define the scope of data requested during login (e.g., email, profile, and contacts) based on your app's requirements. These permissions are typically managed within the Settings tab of the social provider section in the LoginRadius Admin Console.

Updating Existing Social Apps

You can reuse existing social apps integrated with your website or update them to support additional settings. Follow the steps below to manage this process:

• Following the instructions provided earlier, configure the desired social provider.
• Once you've selected a provider, locate the section to set valid Redirect URIs or Website URIs.
• Modify the existing URI to match the format specified in the documentation. Common formats include:
  • <LoginRadius site name>.hub.loginradius.com
  • <LoginRadius site name>.hub.loginradius.com:443/socialauth/validate.sauth
• Save your changes and continue with the remaining setup steps.

Impact of Updating a Social App

• Updating the Consumer key and Consumer Secret for a social provider will trigger the following behaviors:
  • Users will be prompted again to grant access (e.g., email, public profile).
  • If the email address matches, LoginRadius will link the new provider ID to the same UID.
  • The UID remains unchanged; users may have two social provider IDs under the same UID.
  • No impact on users registered via standard registration or other providers.

Integration Guide

This section offers a detailed walkthrough for integrating a robust and secure social login process into your application using LoginRadius. It includes back-end integration, front-end customization, LoginRadius SocialLogin Library functions, programmatic links, SDKs and Libraries, and post-login management to deliver a seamless user experience.

Implementing Social Login Using LoginRadius JavaScript Interface

LoginRadius provides a built-in JavaScript interface to render a customizable social login experience.

Create Custom Interface

var custom_interface_option = {};
custom_interface_option.templateName = "loginradiuscustom_tmpl";

LRObject.util.ready(function () {
  LRObject.customInterface(".interfacecontainerdiv", custom_interface_option);
});

Add an HTML container where the interface will be rendered:

<div id="interfacecontainerdiv" class="interfacecontainerdiv"></div>

Apply Social Login Template

Define a social login button template using JavaScript.

<script type="text/html" id="loginradiuscustom_tmpl">
    <a class="lr-provider-label" href="javascript:void(0)"
       onclick="return <#=ObjectName #>.util.openWindow('<#=Endpoint #>');"
       title="<#=Name #>"
       alt="Sign in with <#=Name #>">
        <#=Name #>
    </a>
</script>

This template dynamically generates social login buttons based on configured providers.

Process Login Response

When a user logs in, the response contains the access token and the user’s social profile.

var sl_options = {};
sl_options.onSuccess = function (response) {
  // Login Successful
  console.log("Access Token:", response.access_token);
  console.log("User Profile:", response.Profile);

  // Store the access token securely
  localStorage.setItem("lrAccessToken", response.access_token);
};

sl_options.onError = function (errors) {
  // Handle login errors
  console.error("Social Login Failed:", errors);
};

sl_options.container = "sociallogin-container";

LRObject.util.ready(function () {
  LRObject.init("socialLogin", sl_options);
});

Display Social Login UI

• Identify Placement: Determine where you want the social login buttons to appear on your webpage, such as a login page, signup form, or modal popup.

• Insert HTML Container: Add the following <div> element to your webpage at the desired location:

<div id="sociallogin-container">
</div>

• Ensure Proper Styling: Apply CSS styles to adjust the layout, spacing, and alignment of the social login buttons within the container.

API-Driven Approach

If you obtain a social provider's access token (e.g., from Google, Facebook, etc.) separately, you can exchange it for a LoginRadius access token.

Get Social Access Token

Capture the access token from the provider’s response.

• Google OAuth: Returns both an ID token and an access token.
• Facebook SDK: Issues an access token after login.
• Firebase: Generates an authentication token for the signed-in user

Exchange for LoginRadius Token

Use the Social Token to LoginRadius Token API:

API Endpoint:

POST https://api.loginradius.com/identity/v2/auth/sociallogin

Request Body:

{
  "provider": "google",
  "token": "your_social_access_token",
  "key": "your_loginradius_api_key"
}

Replace:

• "google" with the correct provider name.
• "your_social_access_token" with the token received from Google, Facebook, etc.
• "your_loginradius_api_key" with your LoginRadius API key.

Handle Token Response

Upon success, LoginRadius returns a new access token and user profile.

Example Response:

{
  "access_token": "your_loginradius_token",
  "Profile": {
    "FullName": "John Doe",
    "Email": "[email protected]",
    "Provider": "google"
  }
}

Authenticate with LoginRadius Token

• Secure Token Storage: Store the access_token securely to prevent unauthorized access.
• Use for API authentication: Include the access_token in API requests to authenticate and authorize user actions.
• Reference V2JS Library: Utilize the V2JS Library Documentation for token management and authentication implementation.

Using Programmatic Link

You can create custom links for buttons or trigger social login. To initiate authentication, format your links as follows:

• Link Format:

https://<Site-Name>.hub.loginradius.com/RequestHandler.aspx?apikey=<LoginRadius API Key>&provider=<Provider Name>

In the above, replace <your LoginRadius Site Name> with your actual LoginRadius site name, <your LoginRadius API Key> with your API key, and <Provider Name> with the lowercase name of the social provider (e.g., Facebook, twitter, etc.).

SDKs and Libraries

LoginRadius offers robust SDKs to simplify Social Login implementation:

• Web SDK:
  To implement Social login using Web SDK, please refer to this document.
• Mobile SDK
  To implement Social login using Mobile SDK, please refer to this document.

Post-Login Actions

1. Session Management:

   • Store the access token securely (e.g., in-session storage).

   • Handle token expiration securely to maintain user sessions.

     To learn more about managing sessions, please refer to this document.

2. Profile Enrichment:
   • Use the access token to fetch additional user details via LoginRadius Auth APIs.

Best Practices for Social Login Integration

• Configure accurate Redirect URIs to prevent callback failures.
• Test changes in a staging or development environment before pushing to production.
• Secure access tokens using best practices (e.g., secure storage, HTTPS, short lifetimes).

Related Resources

• SDK Libraries
• Social Login APIs
• Data Points by Provider
• Standard Login
• Customer Identity APIs