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 – Enter the unique name of the OAuth provider. This name will be displayed under the social login forms in the LoginRadius IDX page and on the social login form rendered by the LoginRadius V2.js library on your application if the Include In Social Schema is selected while configuring the OAuth app.

      Note: Below are the validation rules that should be taken care of while creating the Provider Name.

      1. Only _ (underscore) and - (hyphen) are allowed as special characters.
      2. App name should start with a character.
      3. Alphanumeric values are allowed.
      4. No space is allowed in between.
      5. Minimum length of the app name should be [1] and maximum length up to [60] is allowed.
      6. All app names are now allowed in lowercase only. If uppercase is entered, it will be automatically converted into lowercase.

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

    • Customer Login Endpoint – Enter the redirect provider login URL used to initiate the first login request to 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 – Enter the desired scopes that should be requested from the user during authentication.

    • Response Type – Enter the type of response that the OAuth provider is sending — for example, code, token, etc.

    • Customer Profile Endpoint – Enter the OAuth endpoint used to retrieve 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: It can be used for providers that pass the Access Token in the header. Enter the provider’s header name in the Key field and add one of the following LoginRadius values in the Value field:

      • #accesstoken#
      • #idtoken#
      • #oauthsignature#

    • Query Param: Use this to pass query parameters from the provider in key-value pairs, if the provider supports query parameters.

    • Data Mapping: Enter field mappings between the OAuth Provider and LoginRadius user profile properties.

      • Select Field (Dropdown): Select the LoginRadius field name you want to map.

      • Enter The Value: Enter the OAuth provider field name that corresponds to the selected LoginRadius field.

      Note: The LoginRadius ID field is the unique identifier for each profile in a LoginRadius customer account. You must map this field for OAuth integration to work correctly. Users will not be able to register or log in if this value is missing. For details, refer to the Data Structure documentation.

  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. To customize the custom provider interface, refer to the instructions in the Getting Started Guide. Ensure that all customizations are implemented 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: