Configuring OAuth 2 > Auth0

Note: Single Sign-on may not be available in your plan. Please contact your Advocacy Coach to learn more.

This article will cover how you can configure your OAuth 2 setup in the AdvocateHub using Auth0. This provides your Advocates with a seamless, easy way to enter your hub.

Prerequisite: You need to sign up for an account with Auth0. The free account may be enough for you but check out the packages offered by Auth0 as they may suit your needs.


Gather information from Auth0

Once you have completed the signup process you should land on your Auth0 Dashboard, click the '+ New Client' button:

Name your Client, select 'Regular Web Application as your Client Type and hit 'Create':

You will be brought to a 'Quick Start' tab but you can ignore this and open the tab next to it, 'Settings':

On the 'Settings' tab you will see a number of fields, some of which are already filled out and some we will have to enter some information in to. At the top of the page you should see Client ID and Client Secret, we will need to enter these into the AdvocateHub later:

You can ignore any fields that we do not mention here. Scroll down the page until you reach the field titled 'Allowed Callback URLs'. In here you will need to enter the below URL, replacing 'insert hub domain' with the subdomain of your AdvocateHub:

https://{insert hub domain}.influitive.com/users/auth/custom_oauth2/callback

After entering this information, continue to scroll down to the bottom of the page where you should see a link title 'Show Advanced Settings'

Click this link which should reveal another section of information. The tab we are concerned with is 'Endpoints', this contains more of the information we will need to enter into the hub in our next steps:

Configuration in AdvocateHub

At this point we need to go back to your AdvocateHub and essentially just plug in some information that I will outline below. Find our OAuth integration under Integrations > Custom OAuth Provider and open the Setup tab, you should see a list of empty fields like this:

Let's fill out this information:

Client ID Paste in the Client ID we retrieved from your Auth0 in the earlier steps above
Client Secret Paste in the Client Secret we retrieved from your Auth0 in the earlier steps above
Endpoint This is the value in the 'Domain' field which you find in the same place as your Client ID and Client Secret above
Token URL /oauth/token
Authorize URL /authorize
Fetch User Path /userinfo
Scope Leave blank
Ignore OAuth2 State Leave box unchecked
UID Lookup user_id
Name Lookup user_metadata.name
Email Lookup email
URL Lookup Leave blank
Image Lookup picture

Adding users to Auth0

Our setup should be all hooked up now. Now we need to add users to the database we are going to authenticate against and this is where having a paid package with Auth0 will come into play. There are ways of migrating users to Auth0 and also bulk importing users, please find links to Auth0 documentation which cover these scenarios below:

Migrating Users to Auth0

Bulk Importing Users to Auth0

There is one more thing we need to address with our users in Auth0. By default, Auth0 does not send the 'Name' of the user in the payload they send to Influitive when somebody tried to access the AdvocateHub.

We need to add this information to the user_metadata, this can be found by going to a user and scrolling to the bottom of the page ( note: that this can be done in bulk based on what Auth0 package you have).

Add in the JSON like in the example above, keeping in mind this has to be called "name" in this example. This will ensure the name of the user is populated automatically when they sign up for the AdvocateHub.

Add final cosmetic touches

Auth0 provides us with something they call 'Lock' by default. This is what your Advocates will see when they attempt to login if you are using Custom Oauth Single Sign On, it is where they enter their credentials or can choose other methods of sign up which we will touch on in the next section. It looks like this:

The good news is that Auth0 does allow you to customize this fairly heavily using JavaScript so you may need a small amount of time from a development resource to achieve your desired results. Check out the Auth0 documentation on this for more details:

https://auth0.com/docs/libraries/lock/v10/ui-customization

If you are using the dual login aspect of Custom Oauth then you may also want to update the image you use for the Custom Oauth Button that Advocates will see before they get to the 'Lock' we talked about above. You change this image by navigating to Integrations > Custom Oauth Provider > Setup Tab and scroll to the bottom where you will be given the opportunity to upload an image for the login button and for your icon. By default we use the below:

For context on what this looks like from the Advocates side, here is their view when they navigate to the hub:

Adding additional authentications to your login 'Lock'

As I touched on earlier, Auth0 also allows you to easily attach other 'connections' for your Advocates to login with such as Facebook, Salesforce, Google and many more. These will be added to your 'Lock' and you can customize how these display on your lock as was mentioned above.

Once again, Auth0 provide fantastic documentation on this here -  https://auth0.com/docs/identityproviders

Still need help? Contact Us Contact Us