Skip to main content

Social Login

Overview

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

1. Enable Social Providers

  • Navigate to the Authentication -> Social Providers section in the LoginRadius Admin Console.

  • Select the social providers (e.g., Google, Facebook, Twitter) you want to enable.

  • Provide each provider's required API credentials (e.g., client ID and client secret). Refer to the Social Login Setup Guide for detailed instructions.

    2. 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.

    3. 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.

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.

Step 1: Define a 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>

Step 2: Apply a 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.

Step 3: Handle Social 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);
});

Step 4: Render the Social Login Interface

Place this HTML container in your webpage where the social login buttons should appear:

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

API-Driven Approach: Converting a Social Access Token to a LoginRadius Access Token

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.

Step 1: Obtain a Social Access Token

If you use an external authentication provider (e.g., Firebase, Google OAuth, or Facebook SDK), first retrieve the social access token.

Step 2: Exchange Social Access Token for a 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.

Step 3: Handle the LoginRadius Access 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"
}
}

Step 4: Use LoginRadius Access Token for Authentication

Store the access_token securely and use it for API authentication.

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.