Multiple Social Apps

LoginRadius supports configuring multiple instances of the same social ID provider to enhance flexibility in social login workflows. This is especially useful in scenarios like multi-brand setups or region-specific apps.

Note: This feature is currently supported for the following social providers only:

• Google
• Twitter
• Facebook
• Apple
• LinkedIn
• Live

To enable this feature, please reach out to LoginRadius support.

Use Cases

• Multi-Brand Login Experience: An organization managing several brands (e.g., different storefronts or regional sites) can configure separate Facebook or Google apps per brand. This allows different branding, redirect URLs, and analytics tracking—without conflict.

• Regional Compliance & Data Control: Some providers like Apple or Google may enforce region-specific configurations. For instance, one app for EU users and another for APAC users can help comply with local policies or legal constraints while still using a shared identity infrastructure.

Multiple App Configuration

Adding the APP

To create a new application of the existing provider, you need to add the new app details, as shown in the steps below:

• Go to Console -> Authentication -> Social Providers
• Click on the desired social provider (e.g., Google, Facebook).
• Click the Add App button.
• Enter the configuration details (App ID, Secret, etc.) you received from the provider. To obtain these credentials, refer to the configuration guide.
• Click Save.

Customize Hosted Pages

Custom JavaScript is required to support multiple apps visually on hosted pages. Add the following scripts:

• Go to Console-->Branding-->Hosted Pages
• You must add the following script to the End Script file of your Authentication pages and Profile pages section and click on Save.

For the Authentication Pages

const TEXT_LENGTH=40;

// Here 40 is the defined character for the name of your new app, you can customize it as per your requirement.

const PROVIDER_ARRAY=["Google",
"Apple",
"Facebook",
"LinkedIn",
"Live",
"Twitter",
"Wordpress",
"Odnoklassniki",
"Sinaweibo",
"Yahoo",
"Foursquare",
"Salesforce",
"Mailru",
"Paypal",
"QQ",
"Amazon",
"Disqus",
"Github",
"Pinterest",
"Line",
"Vkontakte",
"Login with Facebook",
"Login with Google",
"Login with Twitter",
"Login with Apple",
"Login with LinkedIn",
"Login with Live",
"Login with Wordpress",
"Login with Odnoklassniki",
"Login with SinaWeibo",
"Login with Yahoo",
"Login with FourSquare",
"Login with Salesforce",
"Login with Mailru",
"Login with Paypal",
"Login with QQ",
"Login with Amazon",
"Login with Disqus",
"Login with Github",
"Login with Pinterest",
"Login with Line",
"Login with Vkontakte",
];
var waitForEl = function(selector, callback) {
 if (jQuery(selector).length) {
   callback();
 } else {
   setTimeout(function() {
     waitForEl(selector, callback);
   }, 1);
 }
};

waitForEl(".lr-sl-shaded-brick-frame", function() {
       waitForEl(".lr-provider-label", function() {
             let elementAuth=$(".lr-provider-label");
             for(let i=0; i < elementAuth.length; i++){
             let p= elementAuth[i].className;
             $(elementAuth[i]).removeClass(p);
             $(elementAuth[i]).addClass(p.replace('_',' '));
             }
             let elementAuthIcon=$(".lr-sl-icon");
             for(let i=0; i < elementAuthIcon.length; i++){
             let p= elementAuthIcon[i].className;
             $(elementAuthIcon[i]).removeClass(p);
             $(elementAuthIcon[i]).addClass(p.replace('_',' '));
             let text=$(elementAuthIcon[i]).parent().text();
             if(PROVIDER_ARRAY.includes(text.trim()) && text!=="")
               $(elementAuthIcon[i]).parent().text("").append(text.trim());
               else if(!PROVIDER_ARRAY.includes(text.trim()) && text.trim()!=="")
                 $(elementAuthIcon[i]).parent().text("").append("Login with "+(text.match(/_/)?text.split("_")[1].substring(0,TEXT_LENGTH).trim():text));
             }
             let elementAuthIcon1=document.getElementsByClassName("lr-provider-provider-name")
             for(let i=0; i < elementAuthIcon1.length; i++){
               let text=elementAuthIcon1[i].innerText;
                 if(PROVIDER_ARRAY.includes(text.trim()) && text!=="")
                   elementAuthIcon1[i].innerText=text.substring(0,TEXT_LENGTH).trim();
                 else if(!PROVIDER_ARRAY.includes(text.trim()) && text!=="")
                   elementAuthIcon1[i].innerText=text.match(/_/)?text.split("_")[1].substring(0,TEXT_LENGTH).trim():text.substring(0,TEXT_LENGTH).trim();
             }
         let elementAuthIcon2=document.getElementsByClassName("lr-provider-wrapper")
             for(let i=0; i < elementAuthIcon2.length; i++){
               let text=(elementAuthIcon2[i]).firstChild.nextSibling.innerText
                 if(PROVIDER_ARRAY.includes(text.trim()) && text!=="")
                   (elementAuthIcon2[i]).firstChild.nextSibling.innerText=text.substring(0,TEXT_LENGTH).trim();
                 else
                   (elementAuthIcon2[i]).firstChild.nextSibling.innerText=text.match(/_/)?text.split("_")[1].substring(0,TEXT_LENGTH).trim():text.substring(0,TEXT_LENGTH).trim(); 
             }
       });
});
waitForEl(".interfacecontainerdiv", function() {
 //Auth
     waitForEl(".lr-provider-label", function() {
                 let elementAuth=$(".lr-provider-label");
                 for(let i=0; i < elementAuth.length; i++){
                 let p= elementAuth[i].className;
                 $(elementAuth[i]).removeClass(p);
                 $(elementAuth[i]).addClass(p.replace('_',' '));
                 }
                 let elementAuthIcon=$(".lr-sl-icon");
                 for(let i=0; i < elementAuthIcon.length; i++){
                 let p= elementAuthIcon[i].className;
                 $(elementAuthIcon[i]).addClass(p.replace('_',' '));
                 }
     });
});

For the profile Pages

var waitForEl = function(selector, callback) {
  if (jQuery(selector).length) {
    callback();
  } else {
    setTimeout(function() {
      waitForEl(selector, callback);
    }, 1);
  }
};

waitForEl(".lr-social-icon", function() {
 //Profile 
  let elementProfileIcon=$(".lr-social-icon");
  for(let i=0; i < elementProfileIcon.length; i++){
  let p= elementProfileIcon[i].className.replace('_',' ');
  $(elementProfileIcon[i]).removeClass(p);
  $(elementProfileIcon[i]).addClass(p.replace('_',' '));
  }
});

Once you've completed the above steps:

• You can configure multiple apps under a single provider.
• Hosted Pages will accurately reflect each app instance.
• Users will see distinct login options for each configured app.

Best Practices

• Label Apps Clearly
  Use distinct names/labels for each app (e.g., Facebook_US, Facebook_EU) to avoid confusion in the Console or logs.

• Limit to Business Need
  Only configure multiple apps if there's a real need (branding, tracking, region-specific auth). Too many apps can complicate troubleshooting and maintenance.

• Consistent Redirect URIs
  Ensure each app has a properly configured and secure callback/redirect URI that maps to its respective front end.

• Review Provider Limits
  Some providers (e.g., Facebook) have rate limits or permission reviews for each app. Make sure your apps comply individually.

Related Resources

• Authentication
• Custom Identity Provider
• Provider's Limitation