Skip to main content

OAuth 2.0 Provider

Custom OAuth Provider is one of the most commonly implemented protocols by customers looking to set up a custom Identity Provider. While LoginRadius offers a wide range of social providers for social login, custom Identity Providers come into play when the predefined options do not meet specific requirements. This feature allows you to configure a third-party or internal OAuth-supported application for social login in your app.

To explore available predefined providers, visit the Console.

LoginRadius supports all common federated identity protocols, and OAuth is one of them. Communication with custom providers follows industry-standard processes.

Use Cases

  • Integrate with Non-Standard OAuth Providers

You can still connect using the Custom OAuth Provider if your identity provider is not included in LoginRadius's default integrations. This is ideal for private or lesser-known OAuth services.

Example:
Your organization uses a private OAuth server to log in to employees. Configure it as a Custom OAuth Provider for seamless SSO across apps.

  • Support Internal or Proprietary Authentication Systems

For internal systems exposing OAuth 2.0 endpoints, you can easily integrate them into LoginRadius without backend changes.

Example:
A university with a custom OAuth-based student portal can integrate it with LoginRadius for centralized identity management.

  • Enable OAuth-Based Login for Mobile or Partner Apps

Allow logins via third-party OAuth providers not natively supported by LoginRadius.

Example:
Your app serves enterprise clients using niche OAuth providers. Set up a Custom OAuth Provider to let their users authenticate with minimal friction.

OAuth Provider Setup Guide

This guide explains configuring and implementing a Custom OAuth Provider and customizing its login icon in the LoginRadius system.

Configuration Steps

  1. Log in to your Console and go to Authentication > Custom IDPs.

  2. Click Add Custom IDP and choose Custom OAuth Provider from the card list.

  3. Fill out the following fields:

    • Provider Name – Unique name displayed on social login forms.

    • Extra Parameter in Redirect to Provider – Optional parameters based on your provider.

    • Customer Login Endpoint – The login URL for the OAuth provider.

    • Access Token Endpoint – URL for obtaining access tokens.

    • Application Key & Secret – Your OAuth app’s credentials.

    • Application ID (Optional) – ID of your OAuth app.

    • Scope – Permissions requested from the user.

    • Response Type – For example, code or token.

    • Customer Profile Endpoint – Endpoint to fetch user profile data.

    • Request Token HTTP Method – e.g., POST, GET.

    • Access Token Parameter Name – Used for API access (e.g., access_token).

  4. Auto Lookup (Optional):
    Enable this to route users based on their email domain. Enter the domain name in the provided field.

    Note: Enabling AutoLookup removes the IdP from the Social Schema on your IDX page.

  5. Data Mapping (Mandatory):

    • Header or Query Param – Specify where the token is passed.

    • Data Mapping – Map your provider’s profile fields to LoginRadius user profile fields. The ‘ID’ field is required.

  6. Click Save to finish configuration.

Custom Icon Configuration

After setting up the OAuth Provider, you can configure its icon to appear among your existing social login buttons.

Familiarize yourself with customizing social provider icons: Social Login Interface Guide.

Steps

  1. Choose a provider next to which the custom icon should appear (e.g., after LinkedIn).

  2. Customize the interface inside the <div id="loginradiuscustom_tmpl">.

  3. In the Console > Branding > Hosted Pages, go to
    Configuration > Authentication Pages > HTML File. Find the id="loginradiuscustom_tmpl" section and add:

<# if(Name == 'LinkedIn'){ Name = 'Spotify'; Endpoint = Endpoint.replace("LinkedIn", "Spotify"); #>
// Setup custom social provider icon/button
<#}#>
  1. Full icon template example:
<script type="text/html" id="loginradiuscustom_tmpl">
<a href="javascript:void(0)"
  onclick="return <#=ObjectName#>.util.openWindow('<#= Endpoint #>');"
 title="<#= Name #>"
   alt="Sign in with <#=Name#>">  <#=Name#></a>
<# if(Name.toLowerCase() == 'linkedin'){ Name = 'Spotify';
      Endpoint = Endpoint.replace("linkedin", "Spotify"); #>
   <a href="javascript:void(0)"
      onclick="return <#=ObjectName#>.util.openWindow('<#= Endpoint #>');"
      title="<#= Name #>"
      alt="Sign in with <#= Name #>">
      <#=Name#>
   </a>
<#}#>
</script>

Alternatively, use Programmatic Link Creation if not using the JS Interface.

You may also find the following resources helpful: